@dso-toolkit/core 62.2.1 → 62.3.0-ghi-2431.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.
Files changed (177) hide show
  1. package/dist/cjs/create-identifier-5900c27b.js +19 -0
  2. package/dist/cjs/create-identifier-5900c27b.js.map +1 -0
  3. package/dist/cjs/dso-accordion-section.cjs.entry.js +15 -0
  4. package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
  5. package/dist/cjs/{dso-alert_5.cjs.entry.js → dso-alert_7.cjs.entry.js} +201 -5
  6. package/dist/cjs/dso-alert_7.cjs.entry.js.map +1 -0
  7. package/dist/cjs/dso-annotation-output_3.cjs.entry.js +3 -1
  8. package/dist/cjs/dso-annotation-output_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dso-date-picker-legacy.cjs.entry.js +704 -0
  10. package/dist/cjs/dso-date-picker-legacy.cjs.entry.js.map +1 -0
  11. package/dist/cjs/dso-expandable.cjs.entry.js +1 -1
  12. package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
  13. package/dist/cjs/dso-highlight-box.cjs.entry.js +1 -1
  14. package/dist/cjs/dso-highlight-box.cjs.entry.js.map +1 -1
  15. package/dist/cjs/dso-info_2.cjs.entry.js +4 -17
  16. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  17. package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
  18. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  19. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  20. package/dist/cjs/loader.cjs.js +1 -1
  21. package/dist/collection/collection-manifest.json +1 -0
  22. package/dist/collection/components/accordion/components/accordion-section.js +15 -0
  23. package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
  24. package/dist/collection/components/annotation-button/annotation-button.js +1 -1
  25. package/dist/collection/components/annotation-output/annotation-output.js +1 -1
  26. package/dist/collection/components/date-picker-legacy/date-localization.js +30 -0
  27. package/dist/collection/components/date-picker-legacy/date-localization.js.map +1 -0
  28. package/dist/collection/components/date-picker-legacy/date-picker-day.js +20 -0
  29. package/dist/collection/components/date-picker-legacy/date-picker-day.js.map +1 -0
  30. package/dist/collection/components/date-picker-legacy/date-picker-legacy.css +487 -0
  31. package/dist/collection/components/date-picker-legacy/date-picker-legacy.interfaces.js +2 -0
  32. package/dist/collection/components/date-picker-legacy/date-picker-legacy.interfaces.js.map +1 -0
  33. package/dist/collection/components/date-picker-legacy/date-picker-legacy.js +849 -0
  34. package/dist/collection/components/date-picker-legacy/date-picker-legacy.js.map +1 -0
  35. package/dist/collection/components/date-picker-legacy/date-picker-month.js +26 -0
  36. package/dist/collection/components/date-picker-legacy/date-picker-month.js.map +1 -0
  37. package/dist/collection/components/date-picker-legacy/date-utils.js +155 -0
  38. package/dist/collection/components/date-picker-legacy/date-utils.js.map +1 -0
  39. package/dist/collection/components/date-picker-legacy/utils/month-range.js +28 -0
  40. package/dist/collection/components/date-picker-legacy/utils/month-range.js.map +1 -0
  41. package/dist/collection/components/date-picker-legacy/utils/range.js +8 -0
  42. package/dist/collection/components/date-picker-legacy/utils/range.js.map +1 -0
  43. package/dist/collection/components/document-component/document-component.js +44 -1
  44. package/dist/collection/components/document-component/document-component.js.map +1 -1
  45. package/dist/collection/components/document-component/document-component.models.js.map +1 -1
  46. package/dist/collection/components/expandable/expandable.css +0 -12
  47. package/dist/collection/components/expandable/expandable.js +2 -2
  48. package/dist/collection/components/highlight-box/highlight-box.css +2 -0
  49. package/dist/collection/components/list-button/list-button.css +0 -13
  50. package/dist/collection/components/ozon-content/nodes/text.node.js +11 -2
  51. package/dist/collection/components/ozon-content/nodes/text.node.js.map +1 -1
  52. package/dist/collection/components/ozon-content/ozon-content-context.interface.js.map +1 -1
  53. package/dist/collection/components/ozon-content/ozon-content-mapper.js +2 -0
  54. package/dist/collection/components/ozon-content/ozon-content-mapper.js.map +1 -1
  55. package/dist/collection/components/ozon-content/ozon-content-node-context.interface.js.map +1 -1
  56. package/dist/collection/components/ozon-content/ozon-content.css +9 -0
  57. package/dist/collection/components/ozon-content/ozon-content.interfaces.js.map +1 -1
  58. package/dist/collection/components/ozon-content/ozon-content.js +53 -1
  59. package/dist/collection/components/ozon-content/ozon-content.js.map +1 -1
  60. package/dist/collection/components/selectable/selectable.css +1 -24
  61. package/dist/collection/components/selectable/selectable.js +6 -1
  62. package/dist/collection/components/selectable/selectable.js.map +1 -1
  63. package/dist/components/create-identifier.js +17 -0
  64. package/dist/components/create-identifier.js.map +1 -0
  65. package/dist/components/document-component.js +29 -14
  66. package/dist/components/document-component.js.map +1 -1
  67. package/dist/components/dso-accordion-section.js +15 -0
  68. package/dist/components/dso-accordion-section.js.map +1 -1
  69. package/dist/components/dso-date-picker-legacy.d.ts +11 -0
  70. package/dist/components/dso-date-picker-legacy.js +743 -0
  71. package/dist/components/dso-date-picker-legacy.js.map +1 -0
  72. package/dist/components/dso-highlight-box.js +1 -1
  73. package/dist/components/dso-highlight-box.js.map +1 -1
  74. package/dist/components/dso-image-overlay.js +1 -122
  75. package/dist/components/dso-image-overlay.js.map +1 -1
  76. package/dist/components/dso-list-button.js +1 -1
  77. package/dist/components/dso-list-button.js.map +1 -1
  78. package/dist/components/dso-table.js +1 -109
  79. package/dist/components/dso-table.js.map +1 -1
  80. package/dist/components/dsot-document-component-demo.js +34 -22
  81. package/dist/components/dsot-document-component-demo.js.map +1 -1
  82. package/dist/components/expandable.js +1 -1
  83. package/dist/components/expandable.js.map +1 -1
  84. package/dist/{esm/dso-image-overlay.entry.js → components/image-overlay.js} +35 -12
  85. package/dist/components/image-overlay.js.map +1 -0
  86. package/dist/components/index.d.ts +2 -0
  87. package/dist/components/index.js +1 -0
  88. package/dist/components/index.js.map +1 -1
  89. package/dist/components/ozon-content.js +48 -5
  90. package/dist/components/ozon-content.js.map +1 -1
  91. package/dist/components/selectable.js +3 -16
  92. package/dist/components/selectable.js.map +1 -1
  93. package/dist/{esm/dso-table.entry.js → components/table.js} +38 -13
  94. package/dist/{cjs/dso-table.cjs.entry.js.map → components/table.js.map} +1 -1
  95. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  96. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  97. package/dist/dso-toolkit/{p-4239e3d6.entry.js → p-0c156f79.entry.js} +2 -2
  98. package/dist/dso-toolkit/{p-4239e3d6.entry.js.map → p-0c156f79.entry.js.map} +1 -1
  99. package/dist/dso-toolkit/p-0fbddb1a.entry.js +2 -0
  100. package/dist/dso-toolkit/p-0fbddb1a.entry.js.map +1 -0
  101. package/dist/dso-toolkit/p-1db9f4a4.entry.js +2 -0
  102. package/dist/dso-toolkit/p-1db9f4a4.entry.js.map +1 -0
  103. package/dist/dso-toolkit/{p-000f7731.entry.js → p-23ec080b.entry.js} +2 -2
  104. package/dist/dso-toolkit/p-23ec080b.entry.js.map +1 -0
  105. package/dist/dso-toolkit/p-4423c2b5.entry.js +2 -0
  106. package/dist/dso-toolkit/p-4423c2b5.entry.js.map +1 -0
  107. package/dist/dso-toolkit/p-5a47a86e.entry.js +2 -0
  108. package/dist/dso-toolkit/{p-caf4d880.entry.js.map → p-5a47a86e.entry.js.map} +1 -1
  109. package/dist/dso-toolkit/{p-47e77e24.entry.js → p-76c0fc1b.entry.js} +2 -2
  110. package/dist/dso-toolkit/p-76c0fc1b.entry.js.map +1 -0
  111. package/dist/dso-toolkit/p-a377846a.entry.js +2 -0
  112. package/dist/dso-toolkit/p-a377846a.entry.js.map +1 -0
  113. package/dist/dso-toolkit/p-c19cfe3f.js +2 -0
  114. package/dist/dso-toolkit/p-c19cfe3f.js.map +1 -0
  115. package/dist/esm/create-identifier-479a4699.js +17 -0
  116. package/dist/esm/create-identifier-479a4699.js.map +1 -0
  117. package/dist/esm/dso-accordion-section.entry.js +15 -0
  118. package/dist/esm/dso-accordion-section.entry.js.map +1 -1
  119. package/dist/esm/{dso-alert_5.entry.js → dso-alert_7.entry.js} +201 -7
  120. package/dist/esm/dso-alert_7.entry.js.map +1 -0
  121. package/dist/esm/dso-annotation-output_3.entry.js +3 -1
  122. package/dist/esm/dso-annotation-output_3.entry.js.map +1 -1
  123. package/dist/esm/dso-date-picker-legacy.entry.js +700 -0
  124. package/dist/esm/dso-date-picker-legacy.entry.js.map +1 -0
  125. package/dist/esm/dso-expandable.entry.js +1 -1
  126. package/dist/esm/dso-expandable.entry.js.map +1 -1
  127. package/dist/esm/dso-highlight-box.entry.js +1 -1
  128. package/dist/esm/dso-highlight-box.entry.js.map +1 -1
  129. package/dist/esm/dso-info_2.entry.js +3 -16
  130. package/dist/esm/dso-info_2.entry.js.map +1 -1
  131. package/dist/esm/dso-list-button.entry.js +1 -1
  132. package/dist/esm/dso-list-button.entry.js.map +1 -1
  133. package/dist/esm/dso-toolkit.js +1 -1
  134. package/dist/esm/loader.js +1 -1
  135. package/dist/types/components/date-picker-legacy/date-localization.d.ts +19 -0
  136. package/dist/types/components/date-picker-legacy/date-picker-day.d.ts +11 -0
  137. package/dist/types/components/date-picker-legacy/date-picker-legacy.d.ts +172 -0
  138. package/dist/types/components/date-picker-legacy/date-picker-legacy.interfaces.d.ts +14 -0
  139. package/dist/types/components/date-picker-legacy/date-picker-month.d.ts +20 -0
  140. package/dist/types/components/date-picker-legacy/date-utils.d.ts +46 -0
  141. package/dist/types/components/date-picker-legacy/utils/month-range.d.ts +2 -0
  142. package/dist/types/components/date-picker-legacy/utils/range.d.ts +1 -0
  143. package/dist/types/components/document-component/document-component.d.ts +9 -1
  144. package/dist/types/components/document-component/document-component.models.d.ts +8 -1
  145. package/dist/types/components/ozon-content/nodes/text.node.d.ts +2 -1
  146. package/dist/types/components/ozon-content/ozon-content-context.interface.d.ts +3 -1
  147. package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts +3 -1
  148. package/dist/types/components/ozon-content/ozon-content.d.ts +10 -1
  149. package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts +10 -0
  150. package/dist/types/components/selectable/selectable.d.ts +5 -0
  151. package/dist/types/components.d.ts +175 -4
  152. package/package.json +2 -2
  153. package/dist/cjs/dso-alert_5.cjs.entry.js.map +0 -1
  154. package/dist/cjs/dso-image-overlay.cjs.entry.js +0 -107
  155. package/dist/cjs/dso-image-overlay.cjs.entry.js.map +0 -1
  156. package/dist/cjs/dso-table.cjs.entry.js +0 -92
  157. package/dist/dso-toolkit/p-000f7731.entry.js.map +0 -1
  158. package/dist/dso-toolkit/p-18152675.entry.js +0 -2
  159. package/dist/dso-toolkit/p-18152675.entry.js.map +0 -1
  160. package/dist/dso-toolkit/p-2719a53a.entry.js +0 -2
  161. package/dist/dso-toolkit/p-2719a53a.entry.js.map +0 -1
  162. package/dist/dso-toolkit/p-47e77e24.entry.js.map +0 -1
  163. package/dist/dso-toolkit/p-a91673a9.entry.js +0 -2
  164. package/dist/dso-toolkit/p-a91673a9.entry.js.map +0 -1
  165. package/dist/dso-toolkit/p-ab1f0511.entry.js +0 -2
  166. package/dist/dso-toolkit/p-ab1f0511.entry.js.map +0 -1
  167. package/dist/dso-toolkit/p-caf4d880.entry.js +0 -2
  168. package/dist/dso-toolkit/p-cbeb00cc.entry.js +0 -2
  169. package/dist/dso-toolkit/p-cbeb00cc.entry.js.map +0 -1
  170. package/dist/esm/dso-alert_5.entry.js.map +0 -1
  171. package/dist/esm/dso-image-overlay.entry.js.map +0 -1
  172. package/dist/esm/dso-table.entry.js.map +0 -1
  173. package/dist/esm/polyfills/core-js.js +0 -11
  174. package/dist/esm/polyfills/dom.js +0 -79
  175. package/dist/esm/polyfills/es5-html-element.js +0 -1
  176. package/dist/esm/polyfills/index.js +0 -34
  177. package/dist/esm/polyfills/system.js +0 -6
@@ -1,8 +1,10 @@
1
- import { r as registerInstance, h, c as createEvent, F as Fragment, a as getElement } from './index-f82ed648.js';
1
+ import { r as registerInstance, h, c as createEvent, f as forceUpdate, H as Host, a as getElement, F as Fragment } from './index-f82ed648.js';
2
2
  import { c as clsx } from './clsx-93f1b68e.js';
3
3
  import { d as debounce_1 } from './index-f2bf58ce.js';
4
+ import { c as createFocusTrap } from './focus-trap.esm-ad846bd4.js';
4
5
  import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
5
6
  import { v as v4 } from './v4-d398bde5.js';
7
+ import './index.esm-7e16e884.js';
6
8
 
7
9
  const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
8
10
 
@@ -59,6 +61,101 @@ const Badge = class {
59
61
  };
60
62
  Badge.style = badgeCss;
61
63
 
64
+ const imageOverlayCss = ":host {\n display: inline-block;\n position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n opacity: 1;\n}\n\nbutton {\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\n.open {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n opacity: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n}\n.open:focus, .open:focus-visible {\n outline-offset: 2px;\n}\n.open:active {\n outline: 0;\n}\n.open:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.open.dso-small {\n line-height: 1rem;\n}\n.open.dso-small dso-icon,\n.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}\n\n.dimmer {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 19;\n display: flex;\n padding: 32px;\n background-color: rgba(255, 255, 255, 0.8);\n justify-content: center;\n}\n\n.wrapper {\n align-self: center;\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n line-height: 0;\n outline: 4px solid #fff;\n position: relative;\n z-index: 20;\n}\n.wrapper .titel:not([hidden]) {\n background-color: #fff;\n font-weight: 700;\n line-height: initial;\n padding: 8px;\n position: absolute;\n}\n.wrapper img {\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n display: block;\n font-size: 0.75rem;\n font-style: italic;\n padding-bottom: 12px;\n padding-top: 16px;\n}\n\n.close {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n position: absolute;\n top: 16px;\n right: 16px;\n}\n.close:focus, .close:focus-visible {\n outline-offset: 2px;\n}\n.close:active {\n outline: 0;\n}\n.close:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close.dso-small {\n line-height: 1rem;\n}\n.close.dso-small dso-icon,\n.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}";
65
+
66
+ const ImageOverlay = class {
67
+ constructor(hostRef) {
68
+ registerInstance(this, hostRef);
69
+ this.titelSlot = null;
70
+ this.bijschriftSlot = null;
71
+ this.active = false;
72
+ this.zoomable = false;
73
+ }
74
+ loadListener(event) {
75
+ if (event.target instanceof HTMLImageElement) {
76
+ this.setZoomable(event.target);
77
+ }
78
+ }
79
+ connectedCallback() {
80
+ this.titelSlot = this.host.querySelector("div[slot='titel']");
81
+ this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
82
+ }
83
+ componentDidLoad() {
84
+ this.resizeObserver = new ResizeObserver(debounce_1(() => {
85
+ const imgElement = this.host.querySelector("img");
86
+ if (imgElement instanceof HTMLImageElement) {
87
+ this.setZoomable(imgElement);
88
+ }
89
+ }, 200));
90
+ this.mutationObserver = new MutationObserver((e) => {
91
+ var _a, _b;
92
+ forceUpdate(this.host);
93
+ if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
94
+ (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
95
+ // <img> is gone or a new element.
96
+ this.initZoomableImage();
97
+ }
98
+ });
99
+ this.mutationObserver.observe(this.host, {
100
+ attributes: true,
101
+ subtree: true,
102
+ attributeFilter: ["src", "alt"],
103
+ childList: true,
104
+ });
105
+ this.initZoomableImage();
106
+ }
107
+ disconnectedCallback() {
108
+ var _a, _b, _c;
109
+ (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
110
+ (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
111
+ (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
112
+ }
113
+ initZoomableImage() {
114
+ var _a;
115
+ const imgElement = this.host.querySelector("img");
116
+ if (!(imgElement instanceof HTMLImageElement)) {
117
+ return;
118
+ }
119
+ // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
120
+ if (imgElement.complete) {
121
+ this.setZoomable(imgElement);
122
+ }
123
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
124
+ }
125
+ setZoomable(imageElement) {
126
+ const { width, naturalWidth, height, naturalHeight } = imageElement;
127
+ this.zoomable = width < naturalWidth || height < naturalHeight;
128
+ }
129
+ render() {
130
+ var _a;
131
+ const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
132
+ return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
133
+ }
134
+ componentDidRender() {
135
+ var _a, _b;
136
+ if (this.active && this.wrapperElement && !this.trap) {
137
+ this.trap = createFocusTrap(this.wrapperElement, {
138
+ escapeDeactivates: true,
139
+ clickOutsideDeactivates: (e) => {
140
+ if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
141
+ this.active = false;
142
+ return false;
143
+ }
144
+ return true;
145
+ },
146
+ setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
147
+ onDeactivate: () => (this.active = false),
148
+ }).activate();
149
+ }
150
+ else if (!this.active && this.trap) {
151
+ (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
152
+ delete this.trap;
153
+ }
154
+ }
155
+ get host() { return getElement(this); }
156
+ };
157
+ ImageOverlay.style = imageOverlayCss;
158
+
62
159
  const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-label-info{background-color:#6ca4d9;color:#000}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#000}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
63
160
 
64
161
  const resizeObserver = new ResizeObserver(debounce_1.debounce((entries) => {
@@ -1029,8 +1126,17 @@ class OzonContentTextNode {
1029
1126
  constructor() {
1030
1127
  this.name = "#text";
1031
1128
  }
1032
- render(node) {
1033
- return h(Fragment, null, node.textContent);
1129
+ render({ textContent }, { mark, emitMarkItemHighlight }) {
1130
+ if (!mark || !textContent) {
1131
+ return h(Fragment, null, textContent);
1132
+ }
1133
+ const result = mark(textContent);
1134
+ return !result || result.length === 0 ? (h(Fragment, null, textContent)) : (h(Fragment, null, result.map((value) => {
1135
+ if (typeof value === "string") {
1136
+ return h(Fragment, null, value);
1137
+ }
1138
+ return (h("mark", { class: value.highlight ? "dso-highlight" : undefined, ref: (ref) => value.highlight && ref && emitMarkItemHighlight(value.text, ref) }, value.text));
1139
+ })));
1034
1140
  }
1035
1141
  }
1036
1142
 
@@ -1102,9 +1208,11 @@ class Mapper {
1102
1208
  const setState = identity ? (s) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: s })) : undefined;
1103
1209
  return mapper.render(node, {
1104
1210
  inline: context.inline,
1211
+ mark: context.mark,
1105
1212
  mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),
1106
1213
  emitAnchorClick: context.emitAnchorClick,
1107
1214
  setState,
1215
+ emitMarkItemHighlight: context.emitMarkItemHighlight,
1108
1216
  state,
1109
1217
  path,
1110
1218
  });
@@ -1138,15 +1246,20 @@ class Mapper {
1138
1246
  }
1139
1247
  }
1140
1248
 
1141
- 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #275937;\n border-color: #275937;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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-left: 8px;\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: 11px 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-width: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 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-left: 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-left: 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-left: 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 top: -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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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: #fff;\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-left: 16px;\n}\n\nsup {\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n top: -0.5em;\n vertical-align: baseline;\n}\nsup a {\n text-decoration: none;\n}\nsup a:hover, sup a:focus, sup a:active {\n text-decoration: underline;\n}\n\nsub {\n bottom: -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, sub a:active {\n text-decoration: underline;\n}\n\ncaption {\n color: #666;\n padding-bottom: 8px;\n padding-top: 8px;\n text-align: left;\n}\n\ntd,\nth {\n padding: 0;\n}\n\nth {\n font-weight: 600;\n text-align: left;\n}\n\ntable.table td:not(.plain-content) p,\ntable.table th p {\n margin: 0 0 16px;\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-bottom: 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) pre,\ntable.table th pre {\n margin: 0 0 16px;\n}\ntable.table td:not(.plain-content) blockquote,\ntable.table th blockquote {\n padding: 16px 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-bottom: 24px;\n}\ntable.table td:not(.plain-content) img,\ntable.table th img {\n height: auto;\n max-width: 100%;\n}\n\ntable.table,\n.dso-rich-content table {\n margin-bottom: 24px;\n max-width: 100%;\n width: 100%;\n}\ntable.table .dso-tertiary,\n.dso-rich-content table .dso-tertiary {\n position: relative;\n top: -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: left;\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: right;\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-top: 0;\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: left;\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: right;\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: 12px 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 > thead > tr > td,\ntable.table > thead > tr > th,\n.dso-rich-content table > thead > tr > td,\n.dso-rich-content table > thead > tr > th {\n border-bottom: 1px solid #666;\n}\ntable.table > tbody > tr > td,\ntable.table > tbody > tr > th,\ntable.table > tfoot > tr > td,\ntable.table > tfoot > tr > th,\n.dso-rich-content table > tbody > tr > td,\n.dso-rich-content table > tbody > tr > th,\n.dso-rich-content table > tfoot > tr > td,\n.dso-rich-content table > tfoot > tr > th {\n border-bottom: 1px solid #ccc;\n}\ntable.table > tbody + tbody,\n.dso-rich-content table > tbody + tbody {\n border-top: 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-height: 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-bottom: 0;\n overflow-y: hidden;\n width: 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-bottom: 8px;\n position: relative;\n text-align: center;\n}\n.dso-table-scroll-container > .table {\n margin-bottom: 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-bottom: 0;\n overflow-y: hidden;\n width: 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-bottom: 8px;\n position: relative;\n text-align: center;\n }\n .dso-table-responsive > .table {\n margin-bottom: 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-bottom: 16px;\n width: 288px;\n}\n\ndso-table table.table {\n margin-bottom: 0;\n}\n\ndso-table.dso-is-responsive {\n margin-bottom: 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 width: 1px;\n height: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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[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: 11px 0;\n position: relative;\n}\nbutton.toggle-note.dso-truncate {\n max-width: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 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-left: 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-left: 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-left: 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 {\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-bottom: 0.75em;\n}\n\n.od-IntIoRef {\n border-bottom: 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-bottom: 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-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {\n padding-top: 0.25rem;\n}\n.dso-ozon-figuur .figuur-titel {\n color: #8b4a6a;\n display: block;\n font-weight: 500;\n padding-bottom: 0.5rem;\n}\n\n.dso-ozon-lijst span.od-Lijstaanhef,\n.dso-ozon-lijst span.od-Lijstsluiting {\n margin-bottom: 8px;\n}\n.dso-ozon-lijst ul {\n margin-bottom: 8px !important;\n margin-top: 8px;\n}\n.dso-ozon-lijst ul p {\n margin-bottom: 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 left: -44px;\n text-align: right;\n width: 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-bottom: 8px;\n padding: 8px;\n}\n\np.wijzigactie-voegtoe,\nspan[role=paragraph].wijzigactie-voegtoe,\ntable.wijzigactie-voegtoe {\n background-color: #e4f1d4;\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n color: #000;\n}\np.wijzigactie-voegtoe a,\nspan[role=paragraph].wijzigactie-voegtoe a,\ntable.wijzigactie-voegtoe a {\n color: #000;\n}\np.wijzigactie-verwijder,\nspan[role=paragraph].wijzigactie-verwijder,\ntable.wijzigactie-verwijder {\n background-color: #f5d8dc;\n color: #000;\n text-decoration: line-through;\n}\np.wijzigactie-verwijder a,\nspan[role=paragraph].wijzigactie-verwijder a,\ntable.wijzigactie-verwijder a {\n color: #000;\n}\n\nins.nieuwe-tekst {\n text-decoration: none;\n background-color: #e4f1d4;\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n color: #000;\n}\nins.nieuwe-tekst a {\n color: #000;\n}\n\ndel.verwijderde-tekst {\n background-color: #f5d8dc;\n color: #000;\n text-decoration: line-through;\n}\ndel.verwijderde-tekst a {\n color: #000;\n}\n\n.dso-rich-content p {\n margin: 0 0 16px;\n}\n.dso-rich-content ul,\n.dso-rich-content ol {\n margin-bottom: 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 pre {\n margin: 0 0 16px;\n}\n.dso-rich-content blockquote {\n padding: 16px 24px;\n}\n.dso-rich-content dso-highlight-box,\n.dso-rich-content .dso-highlight-box {\n margin-bottom: 24px;\n}\n.dso-rich-content img {\n height: auto;\n max-width: 100%;\n}";
1249
+ 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #275937;\n border-color: #275937;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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-left: 8px;\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: 11px 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-width: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 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-left: 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-left: 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-left: 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 top: -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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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: #fff;\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-left: 16px;\n}\n\nmark {\n background-color: #f8f5ce;\n color: #000;\n padding-block: 0.2rem;\n}\nmark.dso-highlight {\n background-color: #dbd136;\n}\n\nsup {\n font-size: 0.65em;\n line-height: 0;\n position: relative;\n top: -0.5em;\n vertical-align: baseline;\n}\nsup a {\n text-decoration: none;\n}\nsup a:hover, sup a:focus, sup a:active {\n text-decoration: underline;\n}\n\nsub {\n bottom: -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, sub a:active {\n text-decoration: underline;\n}\n\ncaption {\n color: #666;\n padding-bottom: 8px;\n padding-top: 8px;\n text-align: left;\n}\n\ntd,\nth {\n padding: 0;\n}\n\nth {\n font-weight: 600;\n text-align: left;\n}\n\ntable.table td:not(.plain-content) p,\ntable.table th p {\n margin: 0 0 16px;\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-bottom: 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) pre,\ntable.table th pre {\n margin: 0 0 16px;\n}\ntable.table td:not(.plain-content) blockquote,\ntable.table th blockquote {\n padding: 16px 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-bottom: 24px;\n}\ntable.table td:not(.plain-content) img,\ntable.table th img {\n height: auto;\n max-width: 100%;\n}\n\ntable.table,\n.dso-rich-content table {\n margin-bottom: 24px;\n max-width: 100%;\n width: 100%;\n}\ntable.table .dso-tertiary,\n.dso-rich-content table .dso-tertiary {\n position: relative;\n top: -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: left;\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: right;\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-top: 0;\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: left;\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: right;\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: 12px 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 > thead > tr > td,\ntable.table > thead > tr > th,\n.dso-rich-content table > thead > tr > td,\n.dso-rich-content table > thead > tr > th {\n border-bottom: 1px solid #666;\n}\ntable.table > tbody > tr > td,\ntable.table > tbody > tr > th,\ntable.table > tfoot > tr > td,\ntable.table > tfoot > tr > th,\n.dso-rich-content table > tbody > tr > td,\n.dso-rich-content table > tbody > tr > th,\n.dso-rich-content table > tfoot > tr > td,\n.dso-rich-content table > tfoot > tr > th {\n border-bottom: 1px solid #ccc;\n}\ntable.table > tbody + tbody,\n.dso-rich-content table > tbody + tbody {\n border-top: 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-height: 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-bottom: 0;\n overflow-y: hidden;\n width: 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-bottom: 8px;\n position: relative;\n text-align: center;\n}\n.dso-table-scroll-container > .table {\n margin-bottom: 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-bottom: 0;\n overflow-y: hidden;\n width: 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-bottom: 8px;\n position: relative;\n text-align: center;\n }\n .dso-table-responsive > .table {\n margin-bottom: 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-bottom: 16px;\n width: 288px;\n}\n\ndso-table table.table {\n margin-bottom: 0;\n}\n\ndso-table.dso-is-responsive {\n margin-bottom: 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 width: 1px;\n height: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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[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: 11px 0;\n position: relative;\n}\nbutton.toggle-note.dso-truncate {\n max-width: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 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-left: 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-left: 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-left: 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 {\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-bottom: 0.75em;\n}\n\n.od-IntIoRef {\n border-bottom: 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-bottom: 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-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {\n padding-top: 0.25rem;\n}\n.dso-ozon-figuur .figuur-titel {\n color: #8b4a6a;\n display: block;\n font-weight: 500;\n padding-bottom: 0.5rem;\n}\n\n.dso-ozon-lijst span.od-Lijstaanhef,\n.dso-ozon-lijst span.od-Lijstsluiting {\n margin-bottom: 8px;\n}\n.dso-ozon-lijst ul {\n margin-bottom: 8px !important;\n margin-top: 8px;\n}\n.dso-ozon-lijst ul p {\n margin-bottom: 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 left: -44px;\n text-align: right;\n width: 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-bottom: 8px;\n padding: 8px;\n}\n\np.wijzigactie-voegtoe,\nspan[role=paragraph].wijzigactie-voegtoe,\ntable.wijzigactie-voegtoe {\n background-color: #e4f1d4;\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n color: #000;\n}\np.wijzigactie-voegtoe a,\nspan[role=paragraph].wijzigactie-voegtoe a,\ntable.wijzigactie-voegtoe a {\n color: #000;\n}\np.wijzigactie-verwijder,\nspan[role=paragraph].wijzigactie-verwijder,\ntable.wijzigactie-verwijder {\n background-color: #f5d8dc;\n color: #000;\n text-decoration: line-through;\n}\np.wijzigactie-verwijder a,\nspan[role=paragraph].wijzigactie-verwijder a,\ntable.wijzigactie-verwijder a {\n color: #000;\n}\n\nins.nieuwe-tekst {\n text-decoration: none;\n background-color: #e4f1d4;\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n color: #000;\n}\nins.nieuwe-tekst a {\n color: #000;\n}\n\ndel.verwijderde-tekst {\n background-color: #f5d8dc;\n color: #000;\n text-decoration: line-through;\n}\ndel.verwijderde-tekst a {\n color: #000;\n}\n\n.dso-rich-content p {\n margin: 0 0 16px;\n}\n.dso-rich-content ul,\n.dso-rich-content ol {\n margin-bottom: 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 pre {\n margin: 0 0 16px;\n}\n.dso-rich-content blockquote {\n padding: 16px 24px;\n}\n.dso-rich-content dso-highlight-box,\n.dso-rich-content .dso-highlight-box {\n margin-bottom: 24px;\n}\n.dso-rich-content img {\n height: auto;\n max-width: 100%;\n}";
1142
1250
 
1143
1251
  const mapper = new Mapper();
1144
1252
  const OzonContent = class {
1145
1253
  constructor(hostRef) {
1146
1254
  registerInstance(this, hostRef);
1147
- this.dsoAnchorClick = createEvent(this, "dsoAnchorClick", 7);
1255
+ this.dsoAnchorClick = createEvent(this, "dsoAnchorClick", 3);
1256
+ this.dsoOzonContentMarkItemHighlight = createEvent(this, "dsoOzonContentMarkItemHighlight", 3);
1257
+ this.handleMarkItemHighlight = (text, elementRef) => {
1258
+ this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });
1259
+ };
1148
1260
  this.content = undefined;
1149
1261
  this.inline = false;
1262
+ this.mark = undefined;
1150
1263
  this.state = {};
1151
1264
  }
1152
1265
  contentWatcher() {
@@ -1156,7 +1269,9 @@ const OzonContent = class {
1156
1269
  const context = {
1157
1270
  state: this.state,
1158
1271
  inline: this.inline,
1272
+ mark: this.mark,
1159
1273
  setState: (state) => (this.state = state),
1274
+ emitMarkItemHighlight: this.handleMarkItemHighlight,
1160
1275
  emitAnchorClick: this.dsoAnchorClick.emit,
1161
1276
  };
1162
1277
  const transformed = mapper.transform(this.content, context);
@@ -1168,6 +1283,85 @@ const OzonContent = class {
1168
1283
  };
1169
1284
  OzonContent.style = ozonContentCss;
1170
1285
 
1171
- export { Alert as dso_alert, AnnotationButton as dso_annotation_button, Badge as dso_badge, Label as dso_label, OzonContent as dso_ozon_content };
1286
+ const tableCss = "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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\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-left: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #275937;\n border-color: #275937;\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-bottom: -4px;\n margin-top: -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 height: 16px;\n width: 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 height: 16px;\n width: 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-left: -8px;\n margin-right: 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-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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-left: 8px;\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: 11px 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-width: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 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-left: 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-left: 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-left: 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 top: -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 height: 24px;\n vertical-align: top;\n width: 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 height: 24px;\n vertical-align: top;\n width: 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: #fff;\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-left: 16px;\n}\n\n@keyframes slideInFromTop {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n:host {\n display: block;\n margin-bottom: 24px;\n}\n\n.dso-header {\n min-height: 32px;\n}\n.dso-header h2 {\n color: #275937;\n font-size: 1.5rem;\n font-weight: 700;\n}\n.dso-header .dso-close {\n color: #275937;\n}\n\n:host .dso-modal {\n overflow: visible;\n padding: 0;\n border: 0;\n inset: 0px;\n height: 100%;\n position: fixed;\n z-index: 530;\n}\n:host .dso-modal::backdrop {\n background-color: rgba(255, 255, 255, 0.8);\n}\n:host .dso-modal .dso-dialog {\n inline-size: 640px;\n background-color: #fff;\n opacity: 1;\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n animation: 1s ease-out 0s 1 slideInFromTop;\n}\n:host .dso-modal .dso-header {\n position: relative;\n padding: 16px;\n border-block-end: 1px solid #ccc;\n}\n:host .dso-modal .dso-header h2 {\n max-inline-size: calc(100% - 24px);\n margin: 0;\n color: #275937;\n}\n:host .dso-modal .dso-header .dso-close {\n position: absolute;\n inset-block-start: 16px;\n inset-inline-end: 13px;\n block-size: 32px;\n inline-size: 32px;\n padding: 0;\n background-color: transparent;\n border: 0;\n text-align: center;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n block-size: calc(100% - 96px - 1.5rem);\n max-block-size: calc(70vh - 144px - 1.5em);\n min-block-size: 1.5rem;\n overflow-x: auto;\n padding: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n height: auto;\n max-width: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n block-size: calc(100% - 96px - 1.5rem);\n max-block-size: calc(70vh - 144px - 1.5em);\n min-block-size: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n height: auto;\n max-width: 100%;\n}\n:host .dso-modal .dso-body:focus-visible {\n outline: none;\n}\n:host .dso-modal .dso-footer {\n min-block-size: 80px;\n padding: 16px 32px;\n text-align: end;\n}\n@media screen and (max-width: 767px) {\n :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n :host .dso-modal .dso-footer button {\n inline-size: 100%;\n text-align: center;\n }\n :host .dso-modal .dso-footer button + button {\n margin-block-start: 8px;\n }\n :host .dso-modal .dso-footer button.dso-tertiary,\n :host .dso-modal .dso-footer button.dso-tertiary span {\n float: none;\n }\n}\n@media screen and (min-width: 768px) {\n :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {\n margin-inline-start: 16px;\n }\n :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n}\n@media screen and (max-width: 767px) {\n :host .dso-modal .dso-dialog {\n max-inline-size: 100%;\n margin-block-start: 0;\n }\n :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n :host .dso-modal .dso-footer button {\n inline-size: 100%;\n text-align: center;\n }\n :host .dso-modal .dso-footer button + button {\n margin-block-start: 8px;\n }\n :host .dso-modal .dso-footer button.dso-tertiary,\n :host .dso-modal .dso-footer button.dso-tertiary span {\n float: none;\n }\n}\n@media screen and (max-height: 380px) {\n :host .dso-modal .dso-dialog {\n min-block-size: 216px;\n margin-block-start: 8px;\n margin-block-end: 8px;\n }\n :host .dso-modal .dso-header {\n padding: 8px 16px;\n }\n :host .dso-modal .dso-header .dso-close {\n inset-block-start: 8px;\n }\n :host .dso-modal .dso-body {\n padding: 16px 24px;\n }\n :host .dso-modal .dso-footer {\n min-block-size: auto;\n overflow: auto;\n padding: 8px 32px;\n }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n margin-top: 1rem;\n max-width: calc(100% - 2rem);\n margin-left: auto;\n margin-right: auto;\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n .dso-modal .dso-dialog.dso-table-dialog {\n max-width: 100%;\n }\n}\n\n:host([is-responsive]) .dso-table-body {\n border: 1px solid #ccc;\n margin-bottom: 0;\n overflow-y: hidden;\n width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n margin-left: auto;\n}\n\n.dso-responsive-message {\n font-size: 0.8em;\n margin-bottom: 8px;\n position: relative;\n text-align: center;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-modal-overlay {\n background-color: rgba(255, 255, 255, 0.8);\n bottom: 0;\n display: block;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 529;\n}\n\n.dso-table-placeholder {\n box-shadow: inset 0 0 0 1px #ccc;\n display: grid;\n place-content: center;\n}";
1287
+
1288
+ const Table = class {
1289
+ constructor(hostRef) {
1290
+ registerInstance(this, hostRef);
1291
+ this.labelledbyId = v4();
1292
+ this.noModal = false;
1293
+ this.isResponsive = false;
1294
+ this.modalActive = false;
1295
+ this.placeholderHeight = undefined;
1296
+ }
1297
+ startResponsiveBehavior() {
1298
+ var _a;
1299
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
1300
+ }
1301
+ componentWillLoad() {
1302
+ this.resizeObserver = new ResizeObserver(debounce_1((entries) => this.setResponsiveTable(entries), 200));
1303
+ }
1304
+ componentDidLoad() {
1305
+ this.startResponsiveBehavior();
1306
+ }
1307
+ componentDidRender() {
1308
+ this.setFocusTrap();
1309
+ }
1310
+ disconnectedCallback() {
1311
+ var _a;
1312
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
1313
+ }
1314
+ render() {
1315
+ var _a, _b;
1316
+ const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
1317
+ return (h(Host, null, this.modalActive && this.placeholderHeight && (h("div", { class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { class: "dso-modal-overlay" }), h("div", { class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" }))))), this.modalActive && (h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))), h("div", { class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", null))))));
1318
+ }
1319
+ openModal() {
1320
+ this.placeholderHeight = this.host.clientHeight;
1321
+ this.modalActive = true;
1322
+ }
1323
+ closeModal() {
1324
+ this.placeholderHeight = undefined;
1325
+ this.modalActive = false;
1326
+ }
1327
+ setFocusTrap() {
1328
+ var _a, _b;
1329
+ if (this.modalActive && this.focusTrapElement && !this.trap) {
1330
+ this.trap = createFocusTrap([this.host, this.focusTrapElement], {
1331
+ escapeDeactivates: true,
1332
+ clickOutsideDeactivates: (e) => {
1333
+ if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {
1334
+ this.closeModal();
1335
+ return false;
1336
+ }
1337
+ return true;
1338
+ },
1339
+ setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
1340
+ onDeactivate: () => this.closeModal(),
1341
+ tabbableOptions: {
1342
+ getShadowRoot: true,
1343
+ },
1344
+ }).activate();
1345
+ }
1346
+ else if (!this.modalActive && this.trap) {
1347
+ (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
1348
+ delete this.trap;
1349
+ }
1350
+ }
1351
+ setResponsiveTable([dsoTable]) {
1352
+ if (!dsoTable) {
1353
+ throw new Error("No dsoTable found");
1354
+ }
1355
+ const tableElement = dsoTable.target.querySelector("table");
1356
+ if (dsoTable && tableElement instanceof HTMLTableElement) {
1357
+ this.isResponsive =
1358
+ Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
1359
+ }
1360
+ }
1361
+ get host() { return getElement(this); }
1362
+ };
1363
+ Table.style = tableCss;
1364
+
1365
+ export { Alert as dso_alert, AnnotationButton as dso_annotation_button, Badge as dso_badge, ImageOverlay as dso_image_overlay, Label as dso_label, OzonContent as dso_ozon_content, Table as dso_table };
1172
1366
 
1173
- //# sourceMappingURL=dso-alert_5.entry.js.map
1367
+ //# sourceMappingURL=dso-alert_7.entry.js.map