@dso-toolkit/core 66.2.0 → 67.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dso-advanced-select.cjs.entry.js +1 -1
- package/dist/cjs/dso-alert_6.cjs.entry.js +5 -14
- package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
- package/dist/cjs/dso-header.cjs.entry.js +1 -2
- package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
- package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
- package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-label_2.cjs.entry.js +4 -4
- package/dist/cjs/dso-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js +2 -2
- package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
- package/dist/cjs/dso-modal.cjs.entry.js +4 -4
- package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-progress-indicator.cjs.entry.js +2 -2
- package/dist/cjs/dso-progress-indicator.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-renvooi_2.cjs.entry.js +1 -1
- package/dist/cjs/dso-skiplink.cjs.entry.js +32 -0
- package/dist/cjs/dso-skiplink.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
- package/dist/cjs/{focus-trap.esm-dd03396f.js → focus-trap.esm-2a6637e5.js} +73 -26
- package/dist/cjs/focus-trap.esm-2a6637e5.js.map +1 -0
- package/dist/cjs/{i18n-a63b3b9b.js → i18n-f7bc1cee.js} +49 -32
- package/dist/cjs/i18n-f7bc1cee.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/v4-6fbeaa38.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/header/header.i18n.js +0 -1
- package/dist/collection/components/header/header.i18n.js.map +1 -1
- package/dist/collection/components/info/info.css +20 -0
- package/dist/collection/components/label/label.js +4 -4
- package/dist/collection/components/label/label.js.map +1 -1
- package/dist/collection/components/list-button/list-button.css +29 -45
- package/dist/collection/components/modal/modal.js +5 -5
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/ozon-content/nodes/figuur.node.js +1 -10
- package/dist/collection/components/ozon-content/nodes/figuur.node.js.map +1 -1
- package/dist/collection/components/ozon-content/ozon-content.css +0 -5
- package/dist/collection/components/progress-indicator/progress-indicator.js +2 -2
- package/dist/collection/components/progress-indicator/progress-indicator.js.map +1 -1
- package/dist/collection/components/selectable/selectable.css +14 -0
- package/dist/collection/components/skiplink/skiplink.css +40 -0
- package/dist/collection/components/skiplink/skiplink.interfaces.js +2 -0
- package/dist/collection/components/skiplink/skiplink.interfaces.js.map +1 -0
- package/dist/collection/components/skiplink/skiplink.js +92 -0
- package/dist/collection/components/skiplink/skiplink.js.map +1 -0
- package/dist/collection/components/slide-toggle/slide-toggle.js +1 -1
- package/dist/collection/components/table/table.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/toggletip/toggletip.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/components/viewer-grid/viewer-grid.js +1 -1
- package/dist/collection/utils/i18n.js +15 -12
- package/dist/collection/utils/i18n.js.map +1 -1
- package/dist/components/dso-header.js +0 -1
- package/dist/components/dso-header.js.map +1 -1
- package/dist/components/dso-list-button.js +1 -1
- package/dist/components/dso-list-button.js.map +1 -1
- package/dist/components/dso-modal.js +4 -4
- package/dist/components/dso-modal.js.map +1 -1
- package/dist/components/dso-skiplink.d.ts +11 -0
- package/dist/components/dso-skiplink.js +55 -0
- package/dist/components/dso-skiplink.js.map +1 -0
- package/dist/components/dso-tabs.js +1 -1
- package/dist/components/dso-tree-view.js +1 -1
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/components/focus-trap.esm.js +72 -25
- package/dist/components/focus-trap.esm.js.map +1 -1
- package/dist/components/i18n.js +48 -31
- package/dist/components/i18n.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/info.js +1 -1
- package/dist/components/info.js.map +1 -1
- package/dist/components/label.js +4 -4
- package/dist/components/label.js.map +1 -1
- package/dist/components/ozon-content.js +2 -11
- package/dist/components/ozon-content.js.map +1 -1
- package/dist/components/progress-indicator.js +2 -2
- package/dist/components/progress-indicator.js.map +1 -1
- package/dist/components/selectable.js +1 -1
- package/dist/components/selectable.js.map +1 -1
- package/dist/components/slide-toggle.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/toggletip.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/v4.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-9424e171.entry.js → p-1d7b22a2.entry.js} +2 -2
- package/dist/dso-toolkit/{p-636a2ad2.entry.js → p-21f133e4.entry.js} +2 -2
- package/dist/dso-toolkit/{p-954b3715.entry.js → p-2d2eae19.entry.js} +2 -2
- package/dist/dso-toolkit/p-3e9068cd.entry.js +2 -0
- package/dist/dso-toolkit/p-3e9068cd.entry.js.map +1 -0
- package/dist/dso-toolkit/p-4831099c.entry.js +2 -0
- package/dist/dso-toolkit/p-4831099c.entry.js.map +1 -0
- package/dist/dso-toolkit/p-5f4e8468.js +6 -0
- package/dist/dso-toolkit/p-5f4e8468.js.map +1 -0
- package/dist/dso-toolkit/p-672b0b80.js +2 -0
- package/dist/dso-toolkit/p-672b0b80.js.map +1 -0
- package/dist/dso-toolkit/{p-a2a9f5da.entry.js → p-6789163b.entry.js} +2 -2
- package/dist/dso-toolkit/{p-1616c445.entry.js → p-7b3f08da.entry.js} +2 -2
- package/dist/dso-toolkit/{p-f412ab80.entry.js → p-7d47fedb.entry.js} +2 -2
- package/dist/dso-toolkit/p-7d47fedb.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-49e93ef5.entry.js → p-7dfc15c1.entry.js} +2 -2
- package/dist/dso-toolkit/{p-e80292b5.entry.js → p-826609e4.entry.js} +2 -2
- package/dist/dso-toolkit/{p-e80292b5.entry.js.map → p-826609e4.entry.js.map} +1 -1
- package/dist/dso-toolkit/{p-9a0927eb.entry.js → p-9d8395bc.entry.js} +2 -2
- package/dist/dso-toolkit/{p-afc4bca7.entry.js → p-9df0ed5f.entry.js} +2 -2
- package/dist/dso-toolkit/p-a2db4965.entry.js +2 -0
- package/dist/dso-toolkit/p-a2db4965.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-7cfa6ab1.entry.js → p-c2f086f2.entry.js} +2 -2
- package/dist/dso-toolkit/{p-10603e10.entry.js → p-cb0a7103.entry.js} +2 -2
- package/dist/dso-toolkit/{p-1022c4bd.entry.js → p-d3857319.entry.js} +2 -2
- package/dist/dso-toolkit/p-d88ebb12.entry.js +2 -0
- package/dist/dso-toolkit/p-d88ebb12.entry.js.map +1 -0
- package/dist/dso-toolkit/p-e05b8f92.entry.js +2 -0
- package/dist/dso-toolkit/p-e05b8f92.entry.js.map +1 -0
- package/dist/dso-toolkit/p-fbfe9a96.entry.js +2 -0
- package/dist/dso-toolkit/p-fbfe9a96.entry.js.map +1 -0
- package/dist/dso-toolkit/p-ffb34aa5.js.map +1 -1
- package/dist/esm/dso-advanced-select.entry.js +1 -1
- package/dist/esm/dso-alert_6.entry.js +5 -14
- package/dist/esm/dso-alert_6.entry.js.map +1 -1
- package/dist/esm/dso-autosuggest.entry.js +1 -1
- package/dist/esm/dso-header.entry.js +1 -2
- package/dist/esm/dso-header.entry.js.map +1 -1
- package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
- package/dist/esm/dso-info_2.entry.js +2 -2
- package/dist/esm/dso-info_2.entry.js.map +1 -1
- package/dist/esm/dso-label_2.entry.js +4 -4
- package/dist/esm/dso-label_2.entry.js.map +1 -1
- package/dist/esm/dso-list-button.entry.js +2 -2
- package/dist/esm/dso-list-button.entry.js.map +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +1 -1
- package/dist/esm/dso-map-overlays.entry.js +1 -1
- package/dist/esm/dso-modal.entry.js +4 -4
- package/dist/esm/dso-modal.entry.js.map +1 -1
- package/dist/esm/dso-progress-indicator.entry.js +2 -2
- package/dist/esm/dso-progress-indicator.entry.js.map +1 -1
- package/dist/esm/dso-renvooi_2.entry.js +1 -1
- package/dist/esm/dso-skiplink.entry.js +28 -0
- package/dist/esm/dso-skiplink.entry.js.map +1 -0
- package/dist/esm/dso-tabs.entry.js +1 -1
- package/dist/esm/dso-toggletip.entry.js +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tree-view.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +1 -1
- package/dist/esm/{focus-trap.esm-24223ea1.js → focus-trap.esm-c9e1f389.js} +73 -26
- package/dist/esm/focus-trap.esm-c9e1f389.js.map +1 -0
- package/dist/esm/{i18n-c9ec6445.js → i18n-f2d58c82.js} +49 -32
- package/dist/esm/i18n-f2d58c82.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/v4-692dad5f.js.map +1 -1
- package/dist/types/components/modal/modal.d.ts +1 -1
- package/dist/types/components/ozon-content/nodes/figuur.node.d.ts +0 -3
- package/dist/types/components/skiplink/skiplink.d.ts +18 -0
- package/dist/types/components/skiplink/skiplink.interfaces.d.ts +5 -0
- package/dist/types/components.d.ts +58 -8
- package/package.json +6 -6
- package/dist/cjs/focus-trap.esm-dd03396f.js.map +0 -1
- package/dist/cjs/i18n-a63b3b9b.js.map +0 -1
- package/dist/dso-toolkit/p-3225dd02.entry.js +0 -2
- package/dist/dso-toolkit/p-3225dd02.entry.js.map +0 -1
- package/dist/dso-toolkit/p-74e0e63e.entry.js +0 -2
- package/dist/dso-toolkit/p-74e0e63e.entry.js.map +0 -1
- package/dist/dso-toolkit/p-8f0e00b0.entry.js +0 -2
- package/dist/dso-toolkit/p-8f0e00b0.entry.js.map +0 -1
- package/dist/dso-toolkit/p-992c287c.entry.js +0 -2
- package/dist/dso-toolkit/p-992c287c.entry.js.map +0 -1
- package/dist/dso-toolkit/p-b0a3dfcb.entry.js +0 -2
- package/dist/dso-toolkit/p-b0a3dfcb.entry.js.map +0 -1
- package/dist/dso-toolkit/p-c3e750cc.js +0 -2
- package/dist/dso-toolkit/p-c3e750cc.js.map +0 -1
- package/dist/dso-toolkit/p-f0538f4a.js +0 -6
- package/dist/dso-toolkit/p-f0538f4a.js.map +0 -1
- package/dist/dso-toolkit/p-f412ab80.entry.js.map +0 -1
- package/dist/esm/focus-trap.esm-24223ea1.js.map +0 -1
- package/dist/esm/i18n-c9ec6445.js.map +0 -1
- /package/dist/dso-toolkit/{p-9424e171.entry.js.map → p-1d7b22a2.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-636a2ad2.entry.js.map → p-21f133e4.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-954b3715.entry.js.map → p-2d2eae19.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-a2a9f5da.entry.js.map → p-6789163b.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-1616c445.entry.js.map → p-7b3f08da.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-49e93ef5.entry.js.map → p-7dfc15c1.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-9a0927eb.entry.js.map → p-9d8395bc.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-afc4bca7.entry.js.map → p-9df0ed5f.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-7cfa6ab1.entry.js.map → p-c2f086f2.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-10603e10.entry.js.map → p-cb0a7103.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-1022c4bd.entry.js.map → p-d3857319.entry.js.map} +0 -0
|
@@ -101,6 +101,8 @@ export { Scrollable as DsoScrollable } from '../types/components/scrollable/scro
|
|
|
101
101
|
export { defineCustomElement as defineCustomElementDsoScrollable } from './dso-scrollable';
|
|
102
102
|
export { Selectable as DsoSelectable } from '../types/components/selectable/selectable';
|
|
103
103
|
export { defineCustomElement as defineCustomElementDsoSelectable } from './dso-selectable';
|
|
104
|
+
export { Skiplink as DsoSkiplink } from '../types/components/skiplink/skiplink';
|
|
105
|
+
export { defineCustomElement as defineCustomElementDsoSkiplink } from './dso-skiplink';
|
|
104
106
|
export { SlideToggle as DsoSlideToggle } from '../types/components/slide-toggle/slide-toggle';
|
|
105
107
|
export { defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle';
|
|
106
108
|
export { Tab as DsoTab } from '../types/components/tabs/components/tab';
|
package/dist/components/index.js
CHANGED
|
@@ -50,6 +50,7 @@ export { DsoRenvooi, defineCustomElement as defineCustomElementDsoRenvooi } from
|
|
|
50
50
|
export { DsoResponsiveElement, defineCustomElement as defineCustomElementDsoResponsiveElement } from './dso-responsive-element.js';
|
|
51
51
|
export { DsoScrollable, defineCustomElement as defineCustomElementDsoScrollable } from './dso-scrollable.js';
|
|
52
52
|
export { DsoSelectable, defineCustomElement as defineCustomElementDsoSelectable } from './dso-selectable.js';
|
|
53
|
+
export { DsoSkiplink, defineCustomElement as defineCustomElementDsoSkiplink } from './dso-skiplink.js';
|
|
53
54
|
export { DsoSlideToggle, defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle.js';
|
|
54
55
|
export { DsoTab, defineCustomElement as defineCustomElementDsoTab } from './dso-tab.js';
|
|
55
56
|
export { DsoTable, defineCustomElement as defineCustomElementDsoTable } from './dso-table.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index.js","mappings":"
|
|
1
|
+
{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
package/dist/components/info.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
|
|
2
2
|
import { d as defineCustomElement$1 } from './icon.js';
|
|
3
3
|
|
|
4
|
-
const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
4
|
+
const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
5
5
|
const DsoInfoStyle0 = infoCss;
|
|
6
6
|
|
|
7
7
|
const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,
|
|
1
|
+
{"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,s6CAAs6C,CAAC;AACv7C,sBAAe,OAAO;;MCMT,IAAI;;;;;;;;;IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/components/label.js
CHANGED
|
@@ -112,13 +112,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
|
|
|
112
112
|
this.isTruncated = false;
|
|
113
113
|
}
|
|
114
114
|
render() {
|
|
115
|
-
return (h(Fragment, { key: '
|
|
115
|
+
return (h(Fragment, { key: '1ea5da78bab4c0deec1e14b08c71a6d08b5c0041' }, h("span", { key: '9f1c40eb645f7d610bcb749256046371a469b30c', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
|
|
116
116
|
[`dso-label-${this.status}`]: this.status,
|
|
117
117
|
"dso-compact": this.compact && !this.removable,
|
|
118
118
|
"dso-hover": this.removeHover || this.removeFocus,
|
|
119
|
-
}) }, h("slot", { key: '
|
|
119
|
+
}) }, h("slot", { key: '44f0e70bc77d9ddd749a7bd2bc204d5d99e2769a', name: "symbol" }), h("span", { key: '6c4c1540325cc57fdc442ae44307b132cc0c77cc', class: clsx("dso-label-content", {
|
|
120
120
|
"dso-truncate": !!this.truncate,
|
|
121
|
-
}), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '
|
|
121
|
+
}), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'bf178d4f785f01233ec95902488c142d5fdbdf22' })), this.removable && (h("button", { key: '71bfdfdbe170942f90eab94b37bf3b076c4057cd', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '849bc8138812af02f54bfb4446d8cf0d93af73d1', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'f968019fa61736b7ec6c676bf71a78efa70efd8a', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '6eb60908fec4165362550d29cbac3b5a07b31ce1', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
|
|
122
122
|
}
|
|
123
123
|
get host() { return this; }
|
|
124
124
|
static get watchers() { return {
|
|
@@ -128,7 +128,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
|
|
|
128
128
|
static get style() { return DsoLabelStyle0; }
|
|
129
129
|
}, [1, "dso-label", {
|
|
130
130
|
"compact": [4],
|
|
131
|
-
"removable": [
|
|
131
|
+
"removable": [516],
|
|
132
132
|
"status": [1],
|
|
133
133
|
"truncate": [4],
|
|
134
134
|
"removeHover": [32],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force || !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force || !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -558,14 +558,6 @@ class OzonContentFiguurNode {
|
|
|
558
558
|
constructor() {
|
|
559
559
|
this.name = ["Figuur"];
|
|
560
560
|
}
|
|
561
|
-
getStyle(breedte, hoogte) {
|
|
562
|
-
if (breedte && hoogte) {
|
|
563
|
-
return {
|
|
564
|
-
"--img-aspect-ratio": (breedte / hoogte).toString(),
|
|
565
|
-
};
|
|
566
|
-
}
|
|
567
|
-
return;
|
|
568
|
-
}
|
|
569
561
|
render(node, { mapNodeToJsx }) {
|
|
570
562
|
var _a, _b, _c, _d, _e, _f;
|
|
571
563
|
const childNodes = Array.from(node.childNodes);
|
|
@@ -588,14 +580,13 @@ class OzonContentFiguurNode {
|
|
|
588
580
|
locatie: (_b = bijschriftNode.getAttribute("locatie")) !== null && _b !== void 0 ? _b : "onder",
|
|
589
581
|
}
|
|
590
582
|
: undefined;
|
|
591
|
-
const preventLayoutShift = !!Number(illustratie.breedte) && !!Number(illustratie.hoogte);
|
|
592
583
|
return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` },
|
|
593
584
|
titel && h("span", { class: "figuur-titel" }, titel),
|
|
594
585
|
(bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })),
|
|
595
586
|
h("dso-image-overlay", { wijzigactie: wijzigactie },
|
|
596
587
|
titel && (h("div", { slot: "titel" },
|
|
597
588
|
h("span", null, titel))),
|
|
598
|
-
h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined
|
|
589
|
+
h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined }),
|
|
599
590
|
(bijschrift || bron) && (h("div", { slot: "bijschrift" },
|
|
600
591
|
h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))),
|
|
601
592
|
((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
|
|
@@ -1036,7 +1027,7 @@ class Mapper {
|
|
|
1036
1027
|
}
|
|
1037
1028
|
}
|
|
1038
1029
|
|
|
1039
|
-
const ozonContentCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #39870c;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-inline-start: 16px;\n}\n\nmark {\n background-color: var(--_dt-mark-bg-color, #f8f5ce);\n color: var(--_dt-mark-color, #000);\n padding-block: var(--_dt-mark-padding-block, 0.2rem);\n font-weight: var(--_dt-mark-font-weight, normal);\n}\nmark.dso-highlight {\n background-color: #dbd136;\n}\n\nsup {\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n inset-block-start: -0.5em;\n vertical-align: baseline;\n}\nsup a {\n text-decoration: none;\n}\nsup a:hover, sup a:focus-visible, sup a:active {\n text-decoration: underline;\n}\n\nsub {\n inset-block-end: -0.25em;\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub a {\n text-decoration: none;\n}\nsub a:hover, sub a:focus-visible, sub a:active {\n text-decoration: underline;\n}\n\ncaption {\n color: #666;\n padding-block-end: 8px;\n padding-block-start: 8px;\n text-align: start;\n}\n\ntd,\nth {\n padding: 0;\n}\n\nth {\n font-weight: 600;\n text-align: start;\n}\n\ntable.table td:not(.plain-content) p,\ntable.table th p {\n margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n margin-inline: 0;\n}\ntable.table td:not(.plain-content) ul,\ntable.table td:not(.plain-content) ol,\ntable.table th ul,\ntable.table th ol {\n margin-block-end: 16px;\n}\ntable.table td:not(.plain-content) ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table td:not(.plain-content) ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table th ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table th ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\ntable.table td:not(.plain-content) ul ul,\ntable.table td:not(.plain-content) ul ol,\ntable.table td:not(.plain-content) ol ul,\ntable.table td:not(.plain-content) ol ol,\ntable.table th ul ul,\ntable.table th ul ol,\ntable.table th ol ul,\ntable.table th ol ol {\n margin-block-end: 0;\n}\ntable.table td:not(.plain-content) pre,\ntable.table th pre {\n margin-block: 0 16px;\n margin-inline: 0;\n}\ntable.table td:not(.plain-content) blockquote,\ntable.table th blockquote {\n padding-block: 16px;\n padding-inline: 24px;\n}\ntable.table td:not(.plain-content) dso-highlight-box,\ntable.table td:not(.plain-content) .dso-highlight-box,\ntable.table th dso-highlight-box,\ntable.table th .dso-highlight-box {\n margin-block-end: 24px;\n}\ntable.table td:not(.plain-content) img,\ntable.table th img {\n block-size: auto;\n max-inline-size: 100%;\n}\n\ntable.table,\n.dso-rich-content table {\n margin-block-end: 24px;\n max-inline-size: 100%;\n inline-size: 100%;\n}\ntable.table .dso-tertiary,\n.dso-rich-content table .dso-tertiary {\n position: relative;\n inset-block-start: -2px;\n white-space: nowrap;\n}\ntable.table.dso-text-left th,\ntable.table.dso-text-left td,\n.dso-rich-content table.dso-text-left th,\n.dso-rich-content table.dso-text-left td {\n text-align: start;\n}\ntable.table.dso-text-center th,\ntable.table.dso-text-center td,\n.dso-rich-content table.dso-text-center th,\n.dso-rich-content table.dso-text-center td {\n text-align: center;\n}\ntable.table.dso-text-right th,\ntable.table.dso-text-right td,\n.dso-rich-content table.dso-text-right th,\n.dso-rich-content table.dso-text-right td {\n text-align: end;\n}\ntable.table.dso-table-vertical-lines > thead > tr > td,\ntable.table.dso-table-vertical-lines > thead > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > thead > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > thead > tr > th {\n border: 1px solid #666;\n}\ntable.table.dso-table-vertical-lines > tbody > tr > td,\ntable.table.dso-table-vertical-lines > tbody > tr > th,\ntable.table.dso-table-vertical-lines > tfoot > tr > td,\ntable.table.dso-table-vertical-lines > tfoot > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > tbody > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > tbody > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > th {\n border: 1px solid #ccc;\n}\ntable.table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,\ntable.table.dso-table-vertical-lines > thead + tbody > tr:first-child > th,\n.dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,\n.dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > th {\n border-block-start: 0;\n}\ntable.table.dso-table-outside-lines-top,\n.dso-rich-content table.dso-table-outside-lines-top {\n border-block-start: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-bottom,\n.dso-rich-content table.dso-table-outside-lines-bottom {\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-topbot,\n.dso-rich-content table.dso-table-outside-lines-topbot {\n border-block-start: 1px solid #666;\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-all,\n.dso-rich-content table.dso-table-outside-lines-all {\n border-block-start: 1px solid #666;\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-all thead,\n.dso-rich-content table.dso-table-outside-lines-all thead {\n border-inline-start: 1px solid #666;\n border-inline-end: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-all tbody,\n.dso-rich-content table.dso-table-outside-lines-all tbody {\n border-inline-start: 1px solid #ccc;\n border-inline-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-sides thead,\n.dso-rich-content table.dso-table-outside-lines-sides thead {\n border-inline-start: 1px solid #666;\n border-inline-end: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-sides tbody,\n.dso-rich-content table.dso-table-outside-lines-sides tbody {\n border-inline-start: 1px solid #ccc;\n border-inline-end: 1px solid #ccc;\n}\ntable.table > thead > tr > td.dso-horizontal-line,\ntable.table > thead > tr > th.dso-horizontal-line,\n.dso-rich-content table > thead > tr > td.dso-horizontal-line,\n.dso-rich-content table > thead > tr > th.dso-horizontal-line {\n border-block-end: 1px solid #666;\n}\ntable.table > thead > tr > td:not(:last-child).dso-vertical-line,\ntable.table > thead > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > thead > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > thead > tr > th:not(:last-child).dso-vertical-line {\n border-inline-end: 1px solid #666;\n}\ntable.table > tbody > tr > td:not(:last-child).dso-vertical-line,\ntable.table > tbody > tr > th:not(:last-child).dso-vertical-line,\ntable.table > tfoot > tr > td:not(:last-child).dso-vertical-line,\ntable.table > tfoot > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tbody > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tbody > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tfoot > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tfoot > tr > th:not(:last-child).dso-vertical-line {\n border-inline-end: 1px solid #ccc;\n}\ntable.table > tbody > tr:not(:last-child) > td.dso-horizontal-line,\ntable.table > tbody > tr:not(:last-child) > th.dso-horizontal-line,\ntable.table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,\ntable.table > tfoot > tr:not(:last-child) > th.dso-horizontal-line,\n.dso-rich-content table > tbody > tr:not(:last-child) > td.dso-horizontal-line,\n.dso-rich-content table > tbody > tr:not(:last-child) > th.dso-horizontal-line,\n.dso-rich-content table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,\n.dso-rich-content table > tfoot > tr:not(:last-child) > th.dso-horizontal-line {\n border-block-end: 1px solid #ccc;\n}\ntable.table th.dso-text-left,\ntable.table td.dso-text-left,\n.dso-rich-content table th.dso-text-left,\n.dso-rich-content table td.dso-text-left {\n text-align: start;\n}\ntable.table th.dso-text-center,\ntable.table td.dso-text-center,\n.dso-rich-content table th.dso-text-center,\n.dso-rich-content table td.dso-text-center {\n text-align: center;\n}\ntable.table th.dso-text-right,\ntable.table td.dso-text-right,\n.dso-rich-content table th.dso-text-right,\n.dso-rich-content table td.dso-text-right {\n text-align: end;\n}\ntable.table > thead > tr > th,\ntable.table > thead > tr > td,\ntable.table > tbody > tr > th,\ntable.table > tbody > tr > td,\ntable.table > tfoot > tr > th,\ntable.table > tfoot > tr > td,\n.dso-rich-content table > thead > tr > th,\n.dso-rich-content table > thead > tr > td,\n.dso-rich-content table > tbody > tr > th,\n.dso-rich-content table > tbody > tr > td,\n.dso-rich-content table > tfoot > tr > th,\n.dso-rich-content table > tfoot > tr > td {\n line-height: 1.5;\n padding-block: 12px;\n padding-inline: 8px;\n vertical-align: top;\n}\ntable.table > thead > tr > th a,\ntable.table > thead > tr > td a,\ntable.table > tbody > tr > th a,\ntable.table > tbody > tr > td a,\ntable.table > tfoot > tr > th a,\ntable.table > tfoot > tr > td a,\n.dso-rich-content table > thead > tr > th a,\n.dso-rich-content table > thead > tr > td a,\n.dso-rich-content table > tbody > tr > th a,\n.dso-rich-content table > tbody > tr > td a,\n.dso-rich-content table > tfoot > tr > th a,\n.dso-rich-content table > tfoot > tr > td a {\n text-decoration: underline;\n}\ntable.table:not([class*=dso-table-outside-lines]) > thead > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > thead > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > th {\n border-block-end: 1px solid #666;\n}\ntable.table:not([class*=dso-table-outside-lines]) > tbody > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > tbody > tr > th,\ntable.table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > tfoot > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > th {\n border-block-end: 1px solid #ccc;\n}\ntable.table > tbody + tbody,\n.dso-rich-content table > tbody + tbody {\n border-block-start: 2px solid #ccc;\n}\ntable.table .table,\n.dso-rich-content table .table {\n background-color: #fff;\n}\ntable.table > tbody > tr.result-error td,\n.dso-rich-content table > tbody > tr.result-error td {\n font-style: italic;\n}\ntable.table > thead > tr > th,\n.dso-rich-content table > thead > tr > th {\n vertical-align: bottom;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort, table.table > thead > tr > th .dso-secondary.dso-sort, table.table > thead > tr > th .dso-tertiary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort {\n color: #191919;\n font-weight: 600;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-primary.dso-sort svg.di, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-secondary.dso-sort svg.di, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-tertiary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di {\n color: #666;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active {\n color: #191919;\n}\n\n.table-hover > tbody > tr:hover {\n background-color: #f2f2f2;\n}\n\ntable col[class*=col-] {\n display: table-column;\n float: none;\n position: static;\n}\n\ntable {\n background-color: transparent;\n border-collapse: collapse;\n border-spacing: 0;\n}\ntable td[class*=col-],\ntable th[class*=col-] {\n display: table-cell;\n float: none;\n position: static;\n}\n\n.dso-rich-content table > thead > tr > td.active,\n.dso-rich-content table > thead > tr > th.active, .dso-rich-content table > thead > tr.active > td, .dso-rich-content table > thead > tr.active > th,\n.dso-rich-content table > tbody > tr > td.active,\n.dso-rich-content table > tbody > tr > th.active,\n.dso-rich-content table > tbody > tr.active > td,\n.dso-rich-content table > tbody > tr.active > th,\n.dso-rich-content table > tfoot > tr > td.active,\n.dso-rich-content table > tfoot > tr > th.active,\n.dso-rich-content table > tfoot > tr.active > td,\n.dso-rich-content table > tfoot > tr.active > th,\n.table > thead > tr > td.active,\n.table > thead > tr > th.active,\n.table > thead > tr.active > td,\n.table > thead > tr.active > th,\n.table > tbody > tr > td.active,\n.table > tbody > tr > th.active,\n.table > tbody > tr.active > td,\n.table > tbody > tr.active > th,\n.table > tfoot > tr > td.active,\n.table > tfoot > tr > th.active,\n.table > tfoot > tr.active > td,\n.table > tfoot > tr.active > th {\n background-color: #f2f2f2;\n}\n\n.table-hover > tbody > tr > td.active:hover,\n.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {\n background-color: #f2f2f2;\n}\n.table-hover > tbody > tr:hover > th, .table-hover > tbody > tr:hover > td {\n background-color: #f2f2f2;\n}\n.table-hover > tbody > tr:hover > th a, .table-hover > tbody > tr:hover > td a {\n color: #191919;\n}\n.table-hover > tbody > tr:hover > th a:hover, .table-hover > tbody > tr:hover > td a:hover {\n text-decoration: none;\n}\n\n.table > tbody > tr.active > th, .table > tbody > tr.active > td {\n background-color: #f2f2f2;\n}\n.table > tbody > tr.active > th a, .table > tbody > tr.active > td a {\n color: #191919;\n}\n.table > tbody > tr.active > th a:hover, .table > tbody > tr.active > td a:hover {\n text-decoration: none;\n}\n\n.dso-table-responsive,\n.dso-table-scroll-container {\n min-block-size: 0.01%;\n overflow-x: auto;\n position: relative;\n}\n\n.dso-table-scroll-container {\n -ms-overflow-style: -ms-autohiding-scrollbar;\n border: 1px solid #ccc;\n margin-block-end: 0;\n overflow-y: hidden;\n inline-size: 100%;\n}\n.dso-table-scroll-container::before {\n content: \"beweeg de tabel van links naar rechts\";\n display: block;\n font-size: 0.8em;\n margin-block-end: 8px;\n position: relative;\n text-align: center;\n}\n.dso-table-scroll-container > .table {\n margin-block-end: 0;\n}\n.dso-table-scroll-container > .table > thead > tr > th,\n.dso-table-scroll-container > .table > thead > tr > td,\n.dso-table-scroll-container > .table > tbody > tr > th,\n.dso-table-scroll-container > .table > tbody > tr > td,\n.dso-table-scroll-container > .table > tfoot > tr > th,\n.dso-table-scroll-container > .table > tfoot > tr > td {\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .dso-table-responsive {\n -ms-overflow-style: -ms-autohiding-scrollbar;\n border: 1px solid #ccc;\n margin-block-end: 0;\n overflow-y: hidden;\n inline-size: 100%;\n }\n .dso-table-responsive::before {\n content: \"beweeg de tabel van links naar rechts\";\n display: block;\n font-size: 0.8em;\n margin-block-end: 8px;\n position: relative;\n text-align: center;\n }\n .dso-table-responsive > .table {\n margin-block-end: 0;\n }\n .dso-table-responsive > .table > thead > tr > th,\n .dso-table-responsive > .table > thead > tr > td,\n .dso-table-responsive > .table > tbody > tr > th,\n .dso-table-responsive > .table > tbody > tr > td,\n .dso-table-responsive > .table > tfoot > tr > th,\n .dso-table-responsive > .table > tfoot > tr > td {\n white-space: nowrap;\n }\n}\n\n.dso-table-filter-wrapper .dso-search-bar {\n margin-block-end: 16px;\n inline-size: 288px;\n}\n\ndso-table table.table {\n margin-block-end: 0;\n}\n\ndso-table.dso-is-responsive {\n margin-block-end: 0;\n}\ndso-table.dso-is-responsive > .table > thead > tr > th,\ndso-table.dso-is-responsive > .table > thead > tr > td,\ndso-table.dso-is-responsive > .table > tbody > tr > th,\ndso-table.dso-is-responsive > .table > tbody > tr > td,\ndso-table.dso-is-responsive > .table > tfoot > tr > th,\ndso-table.dso-is-responsive > .table > tfoot > tr > td {\n white-space: nowrap;\n}\n\n:host(:not([inline])) {\n display: block;\n}\n\n:host([inline]) {\n display: inline;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nbutton.toggle-note {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton.toggle-note:focus, button.toggle-note:focus-visible {\n outline-offset: 2px;\n}\nbutton.toggle-note:active {\n outline: 0;\n}\nbutton.toggle-note {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\nbutton.toggle-note[disabled] {\n color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-spinner-right {\n color: #39870c;\n}\nbutton.toggle-note:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\nbutton.toggle-note:not([disabled]):active {\n color: #173521;\n}\nbutton.toggle-note.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\nbutton.toggle-note.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\nbutton.toggle-note.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.toggle-note.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.toggle-note dso-icon + span:not(.sr-only),\nbutton.toggle-note svg.di + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + dso-icon,\nbutton.toggle-note span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n}\nbutton.toggle-note svg.di.di-chevron-down + span:not(.sr-only),\nbutton.toggle-note svg.di.di-chevron-up + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.toggle-note span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n}\nbutton.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.toggle-note svg.di.di-angle-down + span:not(.sr-only),\nbutton.toggle-note svg.di.di-angle-up + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + svg.di.di-angle-down,\nbutton.toggle-note span:not(.sr-only) + svg.di.di-angle-up,\nbutton.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\nbutton.toggle-note dso-icon,\nbutton.toggle-note svg.di,\nbutton.toggle-note span {\n vertical-align: middle;\n}\n\nspan[role=section],\nspan[role=paragraph] {\n display: block;\n}\n\n:host(:not([inline])) .fallback {\n display: block;\n}\n\na {\n background-color: transparent;\n color: var(--link-color);\n text-decoration: underline;\n}\na:hover, a:focus-visible {\n color: var(--link-hover-color);\n text-decoration: underline;\n}\na:active {\n text-decoration: none;\n}\na:visited {\n color: var(--link-visited-color);\n}\n\n.od-Term {\n font-weight: 700;\n}\n\n.od-Definitie,\n.od-Tussenkop {\n font-style: italic;\n}\n\n.od-Inhoud,\n.od-Inhoud > .od-Lijst,\n.od-IntIoRef,\n.od-Lidnr,\n.od-LiNr,\n.od-Opschrift,\n.od-Tussenkop {\n display: inline;\n}\n\n.od-Al {\n margin-block-end: 0.75em;\n}\n\n.od-IntIoRef {\n border-block-end: 1px dotted;\n}\n\n.dso-ozon-bron {\n font-style: italic;\n font-size: 0.75rem;\n}\n\n.dso-ozon-figuur {\n margin-block-end: 8px;\n}\n.dso-ozon-figuur .figuur-bijschrift {\n display: block;\n font-size: 0.75rem;\n font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven .figuur-bijschrift {\n padding-block-end: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {\n padding-block-start: 0.25rem;\n}\n.dso-ozon-figuur .figuur-titel {\n color: #8b4a6a;\n display: block;\n font-weight: 500;\n padding-block-end: 0.5rem;\n}\n.dso-ozon-figuur .dso-ozon-figuur-reserve-space {\n inline-size: 100%;\n block-size: auto;\n aspect-ratio: var(--img-aspect-ratio);\n}\n\n.dso-ozon-lijst span.od-Lijstaanhef,\n.dso-ozon-lijst span.od-Lijstsluiting {\n margin-block-end: 8px;\n}\n.dso-ozon-lijst ul {\n margin-block-end: 8px !important;\n margin-block-start: 8px;\n}\n.dso-ozon-lijst ul p {\n margin-block-end: 8px;\n}\n.dso-ozon-lijst ul.expliciet {\n list-style: none;\n}\n.dso-ozon-lijst ul.expliciet > .od-Li {\n position: relative;\n}\n.dso-ozon-lijst ul.expliciet > .od-Li > span.od-LiNummer {\n position: absolute;\n inset-inline-start: -44px;\n text-align: end;\n inline-size: 40px;\n}\n.dso-ozon-lijst p {\n margin: 0;\n}\n\n.od-Tabel thead {\n font-weight: 600;\n}\n\n.od-Kadertekst {\n border: 1px solid #e5e5e5;\n margin-block-end: 8px;\n padding: 8px;\n}\n\np.editaction-add,\nspan[role=paragraph].editaction-add,\n.dso-ozon-lijst.editaction-add,\n.dso-ozon-lijst > ul > li.editaction-add,\ntable.editaction-add {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\np.editaction-add a:is(.download, .download:hover, .download:focus-visible),\nspan[role=paragraph].editaction-add a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst.editaction-add a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is(.download, .download:hover, .download:focus-visible),\ntable.editaction-add a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\np.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\nspan[role=paragraph].editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\ntable.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\np.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\nspan[role=paragraph].editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\ntable.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\np.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\nspan[role=paragraph].editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\ntable.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\np.editaction-add,\nspan[role=paragraph].editaction-add,\n.dso-ozon-lijst.editaction-add,\n.dso-ozon-lijst > ul > li.editaction-add,\ntable.editaction-add {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\np.editaction-remove,\nspan[role=paragraph].editaction-remove,\n.dso-ozon-lijst.editaction-remove,\n.dso-ozon-lijst > ul > li.editaction-remove,\ntable.editaction-remove {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\np.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\nspan[role=paragraph].editaction-remove a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\ntable.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\np.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\nspan[role=paragraph].editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\ntable.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\np.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\nspan[role=paragraph].editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\ntable.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\np.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\nspan[role=paragraph].editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\ntable.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\np.editaction-remove,\nspan[role=paragraph].editaction-remove,\n.dso-ozon-lijst.editaction-remove,\n.dso-ozon-lijst > ul > li.editaction-remove,\ntable.editaction-remove {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n p.editaction-remove,\n span[role=paragraph].editaction-remove,\n .dso-ozon-lijst.editaction-remove,\n .dso-ozon-lijst > ul > li.editaction-remove,\n table.editaction-remove {\n font-family: sans-serif;\n }\n}\n\nins {\n text-decoration: none;\n}\nins.new-text {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\nins.new-text a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\nins.new-text a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\nins.new-text a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\nins.new-text a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\nins.new-text {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add {\n display: inline-block;\n margin-block-end: 8px;\n padding: 8px;\n}\nins.editaction-add {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\nins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\nins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\nins.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\nins.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\nins.editaction-add {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add p:last-child {\n margin: 0;\n}\n\ndel.removed-text {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\ndel.removed-text a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\ndel.removed-text a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\ndel.removed-text a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\ndel.removed-text a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\ndel.removed-text {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n del.removed-text {\n font-family: sans-serif;\n }\n}\ndel.editaction-remove {\n display: inline-block;\n margin-block-end: 8px;\n padding: 8px;\n}\ndel.editaction-remove {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\ndel.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\ndel.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\ndel.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\ndel.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\ndel.editaction-remove {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n del.editaction-remove {\n font-family: sans-serif;\n }\n}\ndel.editaction-remove p:last-child {\n margin: 0;\n}\n\n.editaction-label {\n font-style: italic;\n}\n\n.dso-rich-content p {\n margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n margin-inline: 0;\n}\n.dso-rich-content ul,\n.dso-rich-content ol {\n margin-block-end: 16px;\n}\n.dso-rich-content ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n.dso-rich-content ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n.dso-rich-content ul ul,\n.dso-rich-content ul ol,\n.dso-rich-content ol ul,\n.dso-rich-content ol ol {\n margin-block-end: 0;\n}\n.dso-rich-content pre {\n margin-block: 0 16px;\n margin-inline: 0;\n}\n.dso-rich-content blockquote {\n padding-block: 16px;\n padding-inline: 24px;\n}\n.dso-rich-content dso-highlight-box,\n.dso-rich-content .dso-highlight-box {\n margin-block-end: 24px;\n}\n.dso-rich-content img {\n block-size: auto;\n max-inline-size: 100%;\n}";
|
|
1030
|
+
const ozonContentCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #39870c;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-inline-start: 16px;\n}\n\nmark {\n background-color: var(--_dt-mark-bg-color, #f8f5ce);\n color: var(--_dt-mark-color, #000);\n padding-block: var(--_dt-mark-padding-block, 0.2rem);\n font-weight: var(--_dt-mark-font-weight, normal);\n}\nmark.dso-highlight {\n background-color: #dbd136;\n}\n\nsup {\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n inset-block-start: -0.5em;\n vertical-align: baseline;\n}\nsup a {\n text-decoration: none;\n}\nsup a:hover, sup a:focus-visible, sup a:active {\n text-decoration: underline;\n}\n\nsub {\n inset-block-end: -0.25em;\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub a {\n text-decoration: none;\n}\nsub a:hover, sub a:focus-visible, sub a:active {\n text-decoration: underline;\n}\n\ncaption {\n color: #666;\n padding-block-end: 8px;\n padding-block-start: 8px;\n text-align: start;\n}\n\ntd,\nth {\n padding: 0;\n}\n\nth {\n font-weight: 600;\n text-align: start;\n}\n\ntable.table td:not(.plain-content) p,\ntable.table th p {\n margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n margin-inline: 0;\n}\ntable.table td:not(.plain-content) ul,\ntable.table td:not(.plain-content) ol,\ntable.table th ul,\ntable.table th ol {\n margin-block-end: 16px;\n}\ntable.table td:not(.plain-content) ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table td:not(.plain-content) ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table th ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\ntable.table th ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\ntable.table td:not(.plain-content) ul ul,\ntable.table td:not(.plain-content) ul ol,\ntable.table td:not(.plain-content) ol ul,\ntable.table td:not(.plain-content) ol ol,\ntable.table th ul ul,\ntable.table th ul ol,\ntable.table th ol ul,\ntable.table th ol ol {\n margin-block-end: 0;\n}\ntable.table td:not(.plain-content) pre,\ntable.table th pre {\n margin-block: 0 16px;\n margin-inline: 0;\n}\ntable.table td:not(.plain-content) blockquote,\ntable.table th blockquote {\n padding-block: 16px;\n padding-inline: 24px;\n}\ntable.table td:not(.plain-content) dso-highlight-box,\ntable.table td:not(.plain-content) .dso-highlight-box,\ntable.table th dso-highlight-box,\ntable.table th .dso-highlight-box {\n margin-block-end: 24px;\n}\ntable.table td:not(.plain-content) img,\ntable.table th img {\n block-size: auto;\n max-inline-size: 100%;\n}\n\ntable.table,\n.dso-rich-content table {\n margin-block-end: 24px;\n max-inline-size: 100%;\n inline-size: 100%;\n}\ntable.table .dso-tertiary,\n.dso-rich-content table .dso-tertiary {\n position: relative;\n inset-block-start: -2px;\n white-space: nowrap;\n}\ntable.table.dso-text-left th,\ntable.table.dso-text-left td,\n.dso-rich-content table.dso-text-left th,\n.dso-rich-content table.dso-text-left td {\n text-align: start;\n}\ntable.table.dso-text-center th,\ntable.table.dso-text-center td,\n.dso-rich-content table.dso-text-center th,\n.dso-rich-content table.dso-text-center td {\n text-align: center;\n}\ntable.table.dso-text-right th,\ntable.table.dso-text-right td,\n.dso-rich-content table.dso-text-right th,\n.dso-rich-content table.dso-text-right td {\n text-align: end;\n}\ntable.table.dso-table-vertical-lines > thead > tr > td,\ntable.table.dso-table-vertical-lines > thead > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > thead > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > thead > tr > th {\n border: 1px solid #666;\n}\ntable.table.dso-table-vertical-lines > tbody > tr > td,\ntable.table.dso-table-vertical-lines > tbody > tr > th,\ntable.table.dso-table-vertical-lines > tfoot > tr > td,\ntable.table.dso-table-vertical-lines > tfoot > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > tbody > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > tbody > tr > th,\n.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > td,\n.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > th {\n border: 1px solid #ccc;\n}\ntable.table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,\ntable.table.dso-table-vertical-lines > thead + tbody > tr:first-child > th,\n.dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,\n.dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > th {\n border-block-start: 0;\n}\ntable.table.dso-table-outside-lines-top,\n.dso-rich-content table.dso-table-outside-lines-top {\n border-block-start: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-bottom,\n.dso-rich-content table.dso-table-outside-lines-bottom {\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-topbot,\n.dso-rich-content table.dso-table-outside-lines-topbot {\n border-block-start: 1px solid #666;\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-all,\n.dso-rich-content table.dso-table-outside-lines-all {\n border-block-start: 1px solid #666;\n border-block-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-all thead,\n.dso-rich-content table.dso-table-outside-lines-all thead {\n border-inline-start: 1px solid #666;\n border-inline-end: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-all tbody,\n.dso-rich-content table.dso-table-outside-lines-all tbody {\n border-inline-start: 1px solid #ccc;\n border-inline-end: 1px solid #ccc;\n}\ntable.table.dso-table-outside-lines-sides thead,\n.dso-rich-content table.dso-table-outside-lines-sides thead {\n border-inline-start: 1px solid #666;\n border-inline-end: 1px solid #666;\n}\ntable.table.dso-table-outside-lines-sides tbody,\n.dso-rich-content table.dso-table-outside-lines-sides tbody {\n border-inline-start: 1px solid #ccc;\n border-inline-end: 1px solid #ccc;\n}\ntable.table > thead > tr > td.dso-horizontal-line,\ntable.table > thead > tr > th.dso-horizontal-line,\n.dso-rich-content table > thead > tr > td.dso-horizontal-line,\n.dso-rich-content table > thead > tr > th.dso-horizontal-line {\n border-block-end: 1px solid #666;\n}\ntable.table > thead > tr > td:not(:last-child).dso-vertical-line,\ntable.table > thead > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > thead > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > thead > tr > th:not(:last-child).dso-vertical-line {\n border-inline-end: 1px solid #666;\n}\ntable.table > tbody > tr > td:not(:last-child).dso-vertical-line,\ntable.table > tbody > tr > th:not(:last-child).dso-vertical-line,\ntable.table > tfoot > tr > td:not(:last-child).dso-vertical-line,\ntable.table > tfoot > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tbody > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tbody > tr > th:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tfoot > tr > td:not(:last-child).dso-vertical-line,\n.dso-rich-content table > tfoot > tr > th:not(:last-child).dso-vertical-line {\n border-inline-end: 1px solid #ccc;\n}\ntable.table > tbody > tr:not(:last-child) > td.dso-horizontal-line,\ntable.table > tbody > tr:not(:last-child) > th.dso-horizontal-line,\ntable.table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,\ntable.table > tfoot > tr:not(:last-child) > th.dso-horizontal-line,\n.dso-rich-content table > tbody > tr:not(:last-child) > td.dso-horizontal-line,\n.dso-rich-content table > tbody > tr:not(:last-child) > th.dso-horizontal-line,\n.dso-rich-content table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,\n.dso-rich-content table > tfoot > tr:not(:last-child) > th.dso-horizontal-line {\n border-block-end: 1px solid #ccc;\n}\ntable.table th.dso-text-left,\ntable.table td.dso-text-left,\n.dso-rich-content table th.dso-text-left,\n.dso-rich-content table td.dso-text-left {\n text-align: start;\n}\ntable.table th.dso-text-center,\ntable.table td.dso-text-center,\n.dso-rich-content table th.dso-text-center,\n.dso-rich-content table td.dso-text-center {\n text-align: center;\n}\ntable.table th.dso-text-right,\ntable.table td.dso-text-right,\n.dso-rich-content table th.dso-text-right,\n.dso-rich-content table td.dso-text-right {\n text-align: end;\n}\ntable.table > thead > tr > th,\ntable.table > thead > tr > td,\ntable.table > tbody > tr > th,\ntable.table > tbody > tr > td,\ntable.table > tfoot > tr > th,\ntable.table > tfoot > tr > td,\n.dso-rich-content table > thead > tr > th,\n.dso-rich-content table > thead > tr > td,\n.dso-rich-content table > tbody > tr > th,\n.dso-rich-content table > tbody > tr > td,\n.dso-rich-content table > tfoot > tr > th,\n.dso-rich-content table > tfoot > tr > td {\n line-height: 1.5;\n padding-block: 12px;\n padding-inline: 8px;\n vertical-align: top;\n}\ntable.table > thead > tr > th a,\ntable.table > thead > tr > td a,\ntable.table > tbody > tr > th a,\ntable.table > tbody > tr > td a,\ntable.table > tfoot > tr > th a,\ntable.table > tfoot > tr > td a,\n.dso-rich-content table > thead > tr > th a,\n.dso-rich-content table > thead > tr > td a,\n.dso-rich-content table > tbody > tr > th a,\n.dso-rich-content table > tbody > tr > td a,\n.dso-rich-content table > tfoot > tr > th a,\n.dso-rich-content table > tfoot > tr > td a {\n text-decoration: underline;\n}\ntable.table:not([class*=dso-table-outside-lines]) > thead > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > thead > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > th {\n border-block-end: 1px solid #666;\n}\ntable.table:not([class*=dso-table-outside-lines]) > tbody > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > tbody > tr > th,\ntable.table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,\ntable.table:not([class*=dso-table-outside-lines]) > tfoot > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > th,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,\n.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > th {\n border-block-end: 1px solid #ccc;\n}\ntable.table > tbody + tbody,\n.dso-rich-content table > tbody + tbody {\n border-block-start: 2px solid #ccc;\n}\ntable.table .table,\n.dso-rich-content table .table {\n background-color: #fff;\n}\ntable.table > tbody > tr.result-error td,\n.dso-rich-content table > tbody > tr.result-error td {\n font-style: italic;\n}\ntable.table > thead > tr > th,\n.dso-rich-content table > thead > tr > th {\n vertical-align: bottom;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort, table.table > thead > tr > th .dso-secondary.dso-sort, table.table > thead > tr > th .dso-tertiary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort {\n color: #191919;\n font-weight: 600;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-primary.dso-sort svg.di, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-secondary.dso-sort svg.di, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon,\ntable.table > thead > tr > th .dso-tertiary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di {\n color: #666;\n}\ntable.table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,\ntable.table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,\n.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active {\n color: #191919;\n}\n\n.table-hover > tbody > tr:hover {\n background-color: #f2f2f2;\n}\n\ntable col[class*=col-] {\n display: table-column;\n float: none;\n position: static;\n}\n\ntable {\n background-color: transparent;\n border-collapse: collapse;\n border-spacing: 0;\n}\ntable td[class*=col-],\ntable th[class*=col-] {\n display: table-cell;\n float: none;\n position: static;\n}\n\n.dso-rich-content table > thead > tr > td.active,\n.dso-rich-content table > thead > tr > th.active, .dso-rich-content table > thead > tr.active > td, .dso-rich-content table > thead > tr.active > th,\n.dso-rich-content table > tbody > tr > td.active,\n.dso-rich-content table > tbody > tr > th.active,\n.dso-rich-content table > tbody > tr.active > td,\n.dso-rich-content table > tbody > tr.active > th,\n.dso-rich-content table > tfoot > tr > td.active,\n.dso-rich-content table > tfoot > tr > th.active,\n.dso-rich-content table > tfoot > tr.active > td,\n.dso-rich-content table > tfoot > tr.active > th,\n.table > thead > tr > td.active,\n.table > thead > tr > th.active,\n.table > thead > tr.active > td,\n.table > thead > tr.active > th,\n.table > tbody > tr > td.active,\n.table > tbody > tr > th.active,\n.table > tbody > tr.active > td,\n.table > tbody > tr.active > th,\n.table > tfoot > tr > td.active,\n.table > tfoot > tr > th.active,\n.table > tfoot > tr.active > td,\n.table > tfoot > tr.active > th {\n background-color: #f2f2f2;\n}\n\n.table-hover > tbody > tr > td.active:hover,\n.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {\n background-color: #f2f2f2;\n}\n.table-hover > tbody > tr:hover > th, .table-hover > tbody > tr:hover > td {\n background-color: #f2f2f2;\n}\n.table-hover > tbody > tr:hover > th a, .table-hover > tbody > tr:hover > td a {\n color: #191919;\n}\n.table-hover > tbody > tr:hover > th a:hover, .table-hover > tbody > tr:hover > td a:hover {\n text-decoration: none;\n}\n\n.table > tbody > tr.active > th, .table > tbody > tr.active > td {\n background-color: #f2f2f2;\n}\n.table > tbody > tr.active > th a, .table > tbody > tr.active > td a {\n color: #191919;\n}\n.table > tbody > tr.active > th a:hover, .table > tbody > tr.active > td a:hover {\n text-decoration: none;\n}\n\n.dso-table-responsive,\n.dso-table-scroll-container {\n min-block-size: 0.01%;\n overflow-x: auto;\n position: relative;\n}\n\n.dso-table-scroll-container {\n -ms-overflow-style: -ms-autohiding-scrollbar;\n border: 1px solid #ccc;\n margin-block-end: 0;\n overflow-y: hidden;\n inline-size: 100%;\n}\n.dso-table-scroll-container::before {\n content: \"beweeg de tabel van links naar rechts\";\n display: block;\n font-size: 0.8em;\n margin-block-end: 8px;\n position: relative;\n text-align: center;\n}\n.dso-table-scroll-container > .table {\n margin-block-end: 0;\n}\n.dso-table-scroll-container > .table > thead > tr > th,\n.dso-table-scroll-container > .table > thead > tr > td,\n.dso-table-scroll-container > .table > tbody > tr > th,\n.dso-table-scroll-container > .table > tbody > tr > td,\n.dso-table-scroll-container > .table > tfoot > tr > th,\n.dso-table-scroll-container > .table > tfoot > tr > td {\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .dso-table-responsive {\n -ms-overflow-style: -ms-autohiding-scrollbar;\n border: 1px solid #ccc;\n margin-block-end: 0;\n overflow-y: hidden;\n inline-size: 100%;\n }\n .dso-table-responsive::before {\n content: \"beweeg de tabel van links naar rechts\";\n display: block;\n font-size: 0.8em;\n margin-block-end: 8px;\n position: relative;\n text-align: center;\n }\n .dso-table-responsive > .table {\n margin-block-end: 0;\n }\n .dso-table-responsive > .table > thead > tr > th,\n .dso-table-responsive > .table > thead > tr > td,\n .dso-table-responsive > .table > tbody > tr > th,\n .dso-table-responsive > .table > tbody > tr > td,\n .dso-table-responsive > .table > tfoot > tr > th,\n .dso-table-responsive > .table > tfoot > tr > td {\n white-space: nowrap;\n }\n}\n\n.dso-table-filter-wrapper .dso-search-bar {\n margin-block-end: 16px;\n inline-size: 288px;\n}\n\ndso-table table.table {\n margin-block-end: 0;\n}\n\ndso-table.dso-is-responsive {\n margin-block-end: 0;\n}\ndso-table.dso-is-responsive > .table > thead > tr > th,\ndso-table.dso-is-responsive > .table > thead > tr > td,\ndso-table.dso-is-responsive > .table > tbody > tr > th,\ndso-table.dso-is-responsive > .table > tbody > tr > td,\ndso-table.dso-is-responsive > .table > tfoot > tr > th,\ndso-table.dso-is-responsive > .table > tfoot > tr > td {\n white-space: nowrap;\n}\n\n:host(:not([inline])) {\n display: block;\n}\n\n:host([inline]) {\n display: inline;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nbutton.toggle-note {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton.toggle-note:focus, button.toggle-note:focus-visible {\n outline-offset: 2px;\n}\nbutton.toggle-note:active {\n outline: 0;\n}\nbutton.toggle-note {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\nbutton.toggle-note[disabled] {\n color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-spinner-right {\n color: #39870c;\n}\nbutton.toggle-note:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\nbutton.toggle-note:not([disabled]):active {\n color: #173521;\n}\nbutton.toggle-note.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\nbutton.toggle-note.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\nbutton.toggle-note.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.toggle-note.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.toggle-note dso-icon + span:not(.sr-only),\nbutton.toggle-note svg.di + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + dso-icon,\nbutton.toggle-note span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n}\nbutton.toggle-note svg.di.di-chevron-down + span:not(.sr-only),\nbutton.toggle-note svg.di.di-chevron-up + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.toggle-note span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n}\nbutton.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.toggle-note svg.di.di-angle-down + span:not(.sr-only),\nbutton.toggle-note svg.di.di-angle-up + span:not(.sr-only),\nbutton.toggle-note span:not(.sr-only) + svg.di.di-angle-down,\nbutton.toggle-note span:not(.sr-only) + svg.di.di-angle-up,\nbutton.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\nbutton.toggle-note dso-icon,\nbutton.toggle-note svg.di,\nbutton.toggle-note span {\n vertical-align: middle;\n}\n\nspan[role=section],\nspan[role=paragraph] {\n display: block;\n}\n\n:host(:not([inline])) .fallback {\n display: block;\n}\n\na {\n background-color: transparent;\n color: var(--link-color);\n text-decoration: underline;\n}\na:hover, a:focus-visible {\n color: var(--link-hover-color);\n text-decoration: underline;\n}\na:active {\n text-decoration: none;\n}\na:visited {\n color: var(--link-visited-color);\n}\n\n.od-Term {\n font-weight: 700;\n}\n\n.od-Definitie,\n.od-Tussenkop {\n font-style: italic;\n}\n\n.od-Inhoud,\n.od-Inhoud > .od-Lijst,\n.od-IntIoRef,\n.od-Lidnr,\n.od-LiNr,\n.od-Opschrift,\n.od-Tussenkop {\n display: inline;\n}\n\n.od-Al {\n margin-block-end: 0.75em;\n}\n\n.od-IntIoRef {\n border-block-end: 1px dotted;\n}\n\n.dso-ozon-bron {\n font-style: italic;\n font-size: 0.75rem;\n}\n\n.dso-ozon-figuur {\n margin-block-end: 8px;\n}\n.dso-ozon-figuur .figuur-bijschrift {\n display: block;\n font-size: 0.75rem;\n font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven .figuur-bijschrift {\n padding-block-end: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {\n padding-block-start: 0.25rem;\n}\n.dso-ozon-figuur .figuur-titel {\n color: #8b4a6a;\n display: block;\n font-weight: 500;\n padding-block-end: 0.5rem;\n}\n\n.dso-ozon-lijst span.od-Lijstaanhef,\n.dso-ozon-lijst span.od-Lijstsluiting {\n margin-block-end: 8px;\n}\n.dso-ozon-lijst ul {\n margin-block-end: 8px !important;\n margin-block-start: 8px;\n}\n.dso-ozon-lijst ul p {\n margin-block-end: 8px;\n}\n.dso-ozon-lijst ul.expliciet {\n list-style: none;\n}\n.dso-ozon-lijst ul.expliciet > .od-Li {\n position: relative;\n}\n.dso-ozon-lijst ul.expliciet > .od-Li > span.od-LiNummer {\n position: absolute;\n inset-inline-start: -44px;\n text-align: end;\n inline-size: 40px;\n}\n.dso-ozon-lijst p {\n margin: 0;\n}\n\n.od-Tabel thead {\n font-weight: 600;\n}\n\n.od-Kadertekst {\n border: 1px solid #e5e5e5;\n margin-block-end: 8px;\n padding: 8px;\n}\n\np.editaction-add,\nspan[role=paragraph].editaction-add,\n.dso-ozon-lijst.editaction-add,\n.dso-ozon-lijst > ul > li.editaction-add,\ntable.editaction-add {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\np.editaction-add a:is(.download, .download:hover, .download:focus-visible),\nspan[role=paragraph].editaction-add a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst.editaction-add a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is(.download, .download:hover, .download:focus-visible),\ntable.editaction-add a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\np.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\nspan[role=paragraph].editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),\ntable.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\np.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\nspan[role=paragraph].editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\ntable.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\np.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\nspan[role=paragraph].editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\ntable.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\np.editaction-add,\nspan[role=paragraph].editaction-add,\n.dso-ozon-lijst.editaction-add,\n.dso-ozon-lijst > ul > li.editaction-add,\ntable.editaction-add {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\np.editaction-remove,\nspan[role=paragraph].editaction-remove,\n.dso-ozon-lijst.editaction-remove,\n.dso-ozon-lijst > ul > li.editaction-remove,\ntable.editaction-remove {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\np.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\nspan[role=paragraph].editaction-remove a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is(.download, .download:hover, .download:focus-visible),\ntable.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\np.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\nspan[role=paragraph].editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),\ntable.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\np.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\nspan[role=paragraph].editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible),\ntable.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\np.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\nspan[role=paragraph].editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\n.dso-ozon-lijst > ul > li.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible),\ntable.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\np.editaction-remove,\nspan[role=paragraph].editaction-remove,\n.dso-ozon-lijst.editaction-remove,\n.dso-ozon-lijst > ul > li.editaction-remove,\ntable.editaction-remove {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n p.editaction-remove,\n span[role=paragraph].editaction-remove,\n .dso-ozon-lijst.editaction-remove,\n .dso-ozon-lijst > ul > li.editaction-remove,\n table.editaction-remove {\n font-family: sans-serif;\n }\n}\n\nins {\n text-decoration: none;\n}\nins.new-text {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\nins.new-text a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\nins.new-text a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\nins.new-text a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\nins.new-text a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\nins.new-text {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add {\n display: inline-block;\n margin-block-end: 8px;\n padding: 8px;\n}\nins.editaction-add {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e4f1d4;\n border-color: #e4f1d4;\n color: #191919;\n}\nins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\nins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\nins.editaction-add a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\nins.editaction-add a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\nins.editaction-add {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n}\nins.editaction-add p:last-child {\n margin: 0;\n}\n\ndel.removed-text {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\ndel.removed-text a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\ndel.removed-text a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\ndel.removed-text a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\ndel.removed-text a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\ndel.removed-text {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n del.removed-text {\n font-family: sans-serif;\n }\n}\ndel.editaction-remove {\n display: inline-block;\n margin-block-end: 8px;\n padding: 8px;\n}\ndel.editaction-remove {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #f5d8dc;\n border-color: #f5d8dc;\n color: #191919;\n}\ndel.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-download-zwart\");\n}\ndel.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-external-link-zwart\");\n}\ndel.editaction-remove a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-call-zwart\");\n}\ndel.editaction-remove a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n background-image: url(\"./dso-icons.svg#img-email-zwart\");\n}\ndel.editaction-remove {\n text-decoration: line-through;\n}\n@media screen and (min--moz-device-pixel-ratio: 0) {\n del.editaction-remove {\n font-family: sans-serif;\n }\n}\ndel.editaction-remove p:last-child {\n margin: 0;\n}\n\n.editaction-label {\n font-style: italic;\n}\n\n.dso-rich-content p {\n margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n margin-inline: 0;\n}\n.dso-rich-content ul,\n.dso-rich-content ol {\n margin-block-end: 16px;\n}\n.dso-rich-content ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n.dso-rich-content ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n.dso-rich-content ul ul,\n.dso-rich-content ul ol,\n.dso-rich-content ol ul,\n.dso-rich-content ol ol {\n margin-block-end: 0;\n}\n.dso-rich-content pre {\n margin-block: 0 16px;\n margin-inline: 0;\n}\n.dso-rich-content blockquote {\n padding-block: 16px;\n padding-inline: 24px;\n}\n.dso-rich-content dso-highlight-box,\n.dso-rich-content .dso-highlight-box {\n margin-block-end: 24px;\n}\n.dso-rich-content img {\n block-size: auto;\n max-inline-size: 100%;\n}";
|
|
1040
1031
|
const DsoOzonContentStyle0 = ozonContentCss;
|
|
1041
1032
|
|
|
1042
1033
|
const mapper = new Mapper();
|