dso-toolkit 88.1.1 → 90.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/dso.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --dso-toolkit-version: "88.1.1";
2
+ --dso-toolkit-version: "90.0.0";
3
3
  }
4
4
 
5
5
  @font-face {
@@ -243,7 +243,7 @@ dso-action-list .dso-rich-content .h5 {
243
243
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
244
244
  }
245
245
  .alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
246
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
246
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
247
247
  }
248
248
  .alert.alert-success {
249
249
  --_dso-icon-button-tertiary-color: #191919;
@@ -276,7 +276,7 @@ dso-action-list .dso-rich-content .h5 {
276
276
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
277
277
  }
278
278
  .alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
279
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
279
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
280
280
  }
281
281
  .alert.alert-error {
282
282
  --_dso-icon-button-tertiary-color: #191919;
@@ -309,7 +309,7 @@ dso-action-list .dso-rich-content .h5 {
309
309
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
310
310
  }
311
311
  .alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
312
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
312
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
313
313
  }
314
314
  .alert.alert-warning {
315
315
  --_dso-icon-button-tertiary-color: #191919;
@@ -342,7 +342,7 @@ dso-action-list .dso-rich-content .h5 {
342
342
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
343
343
  }
344
344
  .alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
345
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
345
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
346
346
  }
347
347
  .alert.alert-info {
348
348
  --_dso-icon-button-tertiary-color: #191919;
@@ -418,7 +418,7 @@ dso-action-list .dso-rich-content .h5 {
418
418
  text-align: center;
419
419
  }
420
420
  .alert .dso-close::before {
421
- background: url("./di.svg#times-zwart") no-repeat center;
421
+ background: url("./di.svg#cross-zwart") no-repeat center;
422
422
  background-size: cover;
423
423
  block-size: 24px;
424
424
  vertical-align: middle;
@@ -454,7 +454,7 @@ dso-action-list .dso-rich-content .h5 {
454
454
  inline-size: 24px;
455
455
  }
456
456
  .alert.alert-info:not(.dso-compact)::before {
457
- background: url("./di.svg#status-info") no-repeat center;
457
+ background: url("./di.svg#status-info-solid") no-repeat center;
458
458
  background-size: cover;
459
459
  block-size: 24px;
460
460
  vertical-align: top;
@@ -557,7 +557,7 @@ dso-alert a:active {
557
557
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
558
558
  }
559
559
  .dso-badge a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
560
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
560
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
561
561
  }
562
562
  .dso-badge {
563
563
  --_dso-icon-button-tertiary-color: #fff;
@@ -614,7 +614,7 @@ dso-alert a:active {
614
614
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
615
615
  }
616
616
  .dso-badge.badge-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
617
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
617
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
618
618
  }
619
619
  .dso-badge.badge-info {
620
620
  --_dso-icon-button-tertiary-color: #fff;
@@ -671,7 +671,7 @@ dso-alert a:active {
671
671
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
672
672
  }
673
673
  .dso-badge.badge-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
674
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
674
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
675
675
  }
676
676
  .dso-badge.badge-primary {
677
677
  --_dso-icon-button-tertiary-color: #fff;
@@ -728,7 +728,7 @@ dso-alert a:active {
728
728
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
729
729
  }
730
730
  .dso-badge.badge-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
731
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
731
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
732
732
  }
733
733
  .dso-badge.badge-success {
734
734
  --_dso-icon-button-tertiary-color: #fff;
@@ -785,7 +785,7 @@ dso-alert a:active {
785
785
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
786
786
  }
787
787
  .dso-badge.badge-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
788
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
788
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
789
789
  }
790
790
  .dso-badge.badge-warning {
791
791
  --_dso-icon-button-tertiary-color: #191919;
@@ -819,7 +819,7 @@ dso-alert a:active {
819
819
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
820
820
  }
821
821
  .dso-badge.badge-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
822
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
822
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
823
823
  }
824
824
  .dso-badge.badge-error {
825
825
  --_dso-icon-button-tertiary-color: #fff;
@@ -885,7 +885,7 @@ dso-alert a:active {
885
885
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
886
886
  }
887
887
  .dso-badge.badge-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
888
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
888
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
889
889
  }
890
890
  .dso-badge.badge-attention {
891
891
  --_dso-icon-button-tertiary-color: #fff;
@@ -1049,7 +1049,7 @@ dso-alert a:active {
1049
1049
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1050
1050
  }
1051
1051
  .dso-banner.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1052
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1052
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1053
1053
  }
1054
1054
  .dso-banner.alert-success {
1055
1055
  --_dso-icon-button-tertiary-color: #191919;
@@ -1090,7 +1090,7 @@ dso-alert a:active {
1090
1090
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1091
1091
  }
1092
1092
  .dso-banner.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1093
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1093
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1094
1094
  }
1095
1095
  .dso-banner.alert-error {
1096
1096
  --_dso-icon-button-tertiary-color: #191919;
@@ -1131,7 +1131,7 @@ dso-alert a:active {
1131
1131
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1132
1132
  }
1133
1133
  .dso-banner.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1134
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1134
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1135
1135
  }
1136
1136
  .dso-banner.alert-info {
1137
1137
  --_dso-icon-button-tertiary-color: #191919;
@@ -1147,7 +1147,7 @@ dso-alert a:active {
1147
1147
  border-color: #e1ecf7;
1148
1148
  }
1149
1149
  .dso-banner.alert-info.dso-icon .dso-banner-inner::before {
1150
- background: url("./di.svg#status-info") no-repeat center;
1150
+ background: url("./di.svg#status-info-solid") no-repeat center;
1151
1151
  background-size: cover;
1152
1152
  block-size: 24px;
1153
1153
  vertical-align: top;
@@ -1172,7 +1172,7 @@ dso-alert a:active {
1172
1172
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1173
1173
  }
1174
1174
  .dso-banner.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1175
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1175
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1176
1176
  }
1177
1177
  .dso-banner.alert-warning {
1178
1178
  --_dso-icon-button-tertiary-color: #191919;
@@ -1317,7 +1317,7 @@ dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is
1317
1317
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1318
1318
  }
1319
1319
  dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1320
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1320
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1321
1321
  }
1322
1322
  dso-banner[status=success] {
1323
1323
  --_dso-icon-button-tertiary-color: #191919;
@@ -1358,7 +1358,7 @@ dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([
1358
1358
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1359
1359
  }
1360
1360
  dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1361
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1361
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1362
1362
  }
1363
1363
  dso-banner[status=error] {
1364
1364
  --_dso-icon-button-tertiary-color: #191919;
@@ -1399,7 +1399,7 @@ dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([h
1399
1399
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1400
1400
  }
1401
1401
  dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1402
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1402
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1403
1403
  }
1404
1404
  dso-banner[status=info] {
1405
1405
  --_dso-icon-button-tertiary-color: #191919;
@@ -1415,7 +1415,7 @@ dso-banner[status=info] {
1415
1415
  border-color: #e1ecf7;
1416
1416
  }
1417
1417
  dso-banner[status=info][icon] .dso-banner-inner::before {
1418
- background: url("./di.svg#status-info") no-repeat center;
1418
+ background: url("./di.svg#status-info-solid") no-repeat center;
1419
1419
  background-size: cover;
1420
1420
  block-size: 24px;
1421
1421
  vertical-align: top;
@@ -1440,7 +1440,7 @@ dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is
1440
1440
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
1441
1441
  }
1442
1442
  dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
1443
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
1443
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1444
1444
  }
1445
1445
  dso-banner[status=warning] {
1446
1446
  --_dso-icon-button-tertiary-color: #191919;
@@ -1570,7 +1570,6 @@ label.dso-primary.extern::after,
1570
1570
  label.dso-primary.download::after {
1571
1571
  content: "";
1572
1572
  display: inline-block;
1573
- margin-inline-start: 8px;
1574
1573
  }
1575
1574
  a.dso-primary,
1576
1575
  button.dso-primary,
@@ -1700,7 +1699,7 @@ label.dso-primary.dso-spinner-right[disabled] {
1700
1699
  a.dso-primary.dso-spinner-left::before,
1701
1700
  button.dso-primary.dso-spinner-left::before,
1702
1701
  label.dso-primary.dso-spinner-left::before {
1703
- 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");
1702
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1704
1703
  background-repeat: no-repeat;
1705
1704
  content: "";
1706
1705
  display: inline-block;
@@ -1712,7 +1711,7 @@ label.dso-primary.dso-spinner-left::before {
1712
1711
  a.dso-primary.dso-spinner-right::after,
1713
1712
  button.dso-primary.dso-spinner-right::after,
1714
1713
  label.dso-primary.dso-spinner-right::after {
1715
- 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");
1714
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1716
1715
  background-repeat: no-repeat;
1717
1716
  content: "";
1718
1717
  display: inline-block;
@@ -1772,7 +1771,6 @@ label.dso-secondary.extern::after,
1772
1771
  label.dso-secondary.download::after {
1773
1772
  content: "";
1774
1773
  display: inline-block;
1775
- margin-inline-start: 8px;
1776
1774
  }
1777
1775
  a.dso-secondary,
1778
1776
  button.dso-secondary,
@@ -1902,7 +1900,7 @@ label.dso-secondary.dso-spinner-right[disabled] {
1902
1900
  a.dso-secondary.dso-spinner-left::before,
1903
1901
  button.dso-secondary.dso-spinner-left::before,
1904
1902
  label.dso-secondary.dso-spinner-left::before {
1905
- 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");
1903
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1906
1904
  background-repeat: no-repeat;
1907
1905
  content: "";
1908
1906
  display: inline-block;
@@ -1914,7 +1912,7 @@ label.dso-secondary.dso-spinner-left::before {
1914
1912
  a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
1915
1913
  button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
1916
1914
  label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
1917
- 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");
1915
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1918
1916
  background-repeat: no-repeat;
1919
1917
  content: "";
1920
1918
  display: inline-block;
@@ -1932,7 +1930,7 @@ label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
1932
1930
  a.dso-secondary.dso-spinner-right::after,
1933
1931
  button.dso-secondary.dso-spinner-right::after,
1934
1932
  label.dso-secondary.dso-spinner-right::after {
1935
- 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");
1933
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1936
1934
  background-repeat: no-repeat;
1937
1935
  content: "";
1938
1936
  display: inline-block;
@@ -1944,7 +1942,7 @@ label.dso-secondary.dso-spinner-right::after {
1944
1942
  a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
1945
1943
  button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
1946
1944
  label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
1947
- 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");
1945
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
1948
1946
  background-repeat: no-repeat;
1949
1947
  content: "";
1950
1948
  display: inline-block;
@@ -1971,7 +1969,7 @@ label.dso-secondary.download::after {
1971
1969
  a.dso-secondary.download:hover::after,
1972
1970
  button.dso-secondary.download:hover::after,
1973
1971
  label.dso-secondary.download:hover::after {
1974
- background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
1972
+ background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
1975
1973
  }
1976
1974
  a.dso-secondary.download[disabled]::after,
1977
1975
  button.dso-secondary.download[disabled]::after,
@@ -1990,7 +1988,7 @@ label.dso-secondary.extern::after {
1990
1988
  a.dso-secondary.extern:hover::after,
1991
1989
  button.dso-secondary.extern:hover::after,
1992
1990
  label.dso-secondary.extern:hover::after {
1993
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
1991
+ background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
1994
1992
  }
1995
1993
  a.dso-secondary.extern[disabled]::after,
1996
1994
  button.dso-secondary.extern[disabled]::after,
@@ -2030,7 +2028,6 @@ label.dso-tertiary.extern::after,
2030
2028
  label.dso-tertiary.download::after {
2031
2029
  content: "";
2032
2030
  display: inline-block;
2033
- margin-inline-start: 8px;
2034
2031
  }
2035
2032
  a.dso-tertiary,
2036
2033
  button.dso-tertiary,
@@ -2065,7 +2062,6 @@ label.dso-tertiary.extern::after,
2065
2062
  label.dso-tertiary.download::after {
2066
2063
  content: "";
2067
2064
  display: inline-block;
2068
- margin-inline-start: 8px;
2069
2065
  }
2070
2066
  a.dso-tertiary,
2071
2067
  button.dso-tertiary,
@@ -2223,7 +2219,7 @@ label.dso-tertiary.dso-truncate {
2223
2219
  a.dso-tertiary.dso-spinner-left::before,
2224
2220
  button.dso-tertiary.dso-spinner-left::before,
2225
2221
  label.dso-tertiary.dso-spinner-left::before {
2226
- 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");
2222
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2227
2223
  background-repeat: no-repeat;
2228
2224
  content: "";
2229
2225
  display: inline-block;
@@ -2235,7 +2231,7 @@ label.dso-tertiary.dso-spinner-left::before {
2235
2231
  a.dso-tertiary.dso-spinner-right::after,
2236
2232
  button.dso-tertiary.dso-spinner-right::after,
2237
2233
  label.dso-tertiary.dso-spinner-right::after {
2238
- 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");
2234
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2239
2235
  background-repeat: no-repeat;
2240
2236
  content: "";
2241
2237
  display: inline-block;
@@ -2478,7 +2474,7 @@ label.dso-map.dso-spinner-right[disabled] {
2478
2474
  a.dso-map.dso-spinner-left::before,
2479
2475
  button.dso-map.dso-spinner-left::before,
2480
2476
  label.dso-map.dso-spinner-left::before {
2481
- 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");
2477
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2482
2478
  background-repeat: no-repeat;
2483
2479
  content: "";
2484
2480
  display: inline-block;
@@ -2490,7 +2486,7 @@ label.dso-map.dso-spinner-left::before {
2490
2486
  a.dso-map.dso-spinner-left:not([disabled]):hover::before,
2491
2487
  button.dso-map.dso-spinner-left:not([disabled]):hover::before,
2492
2488
  label.dso-map.dso-spinner-left:not([disabled]):hover::before {
2493
- 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");
2489
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2494
2490
  background-repeat: no-repeat;
2495
2491
  content: "";
2496
2492
  display: inline-block;
@@ -2508,7 +2504,7 @@ label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
2508
2504
  a.dso-map.dso-spinner-right::after,
2509
2505
  button.dso-map.dso-spinner-right::after,
2510
2506
  label.dso-map.dso-spinner-right::after {
2511
- 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");
2507
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2512
2508
  background-repeat: no-repeat;
2513
2509
  content: "";
2514
2510
  display: inline-block;
@@ -2520,7 +2516,7 @@ label.dso-map.dso-spinner-right::after {
2520
2516
  a.dso-map.dso-spinner-right:not([disabled]):hover::after,
2521
2517
  button.dso-map.dso-spinner-right:not([disabled]):hover::after,
2522
2518
  label.dso-map.dso-spinner-right:not([disabled]):hover::after {
2523
- 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");
2519
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
2524
2520
  background-repeat: no-repeat;
2525
2521
  content: "";
2526
2522
  display: inline-block;
@@ -3076,7 +3072,7 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
3076
3072
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
3077
3073
  }
3078
3074
  del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3079
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
3075
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
3080
3076
  }
3081
3077
  del {
3082
3078
  --_dso-icon-button-tertiary-color: #191919;
@@ -3089,7 +3085,7 @@ del {
3089
3085
  --_dso-button-tertiary-disabled-color: #999;
3090
3086
  background-color: #f5d8dc;
3091
3087
  color: #191919;
3092
- --_dso-ozon-content-toggletip-color: colors.$zwart;
3088
+ --_dso-ozon-content-toggletip-color: #000;
3093
3089
  text-decoration: line-through;
3094
3090
  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
3095
3091
  }
@@ -3164,7 +3160,7 @@ del {
3164
3160
  inline-size: 24px;
3165
3161
  }
3166
3162
  .dso-description-term + .dso-description-content > a::before {
3167
- background: url("./di.svg#times-zwart") no-repeat center;
3163
+ background: url("./di.svg#cross-zwart") no-repeat center;
3168
3164
  background-size: cover;
3169
3165
  block-size: 24px;
3170
3166
  vertical-align: top;
@@ -3233,7 +3229,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3233
3229
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
3234
3230
  }
3235
3231
  .dso-document-header a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3236
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
3232
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
3237
3233
  }
3238
3234
  .dso-document-header {
3239
3235
  --_dso-icon-button-tertiary-color: #191919;
@@ -3284,7 +3280,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3284
3280
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
3285
3281
  }
3286
3282
  .dso-document-header.dso-variant-ontwerp .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3287
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
3283
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
3288
3284
  }
3289
3285
  .dso-document-header.dso-variant-ontwerp .dso-document-header-status {
3290
3286
  --_dso-icon-button-tertiary-color: #191919;
@@ -3320,7 +3316,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3320
3316
  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
3321
3317
  }
3322
3318
  .dso-document-header.dso-variant-besluitversie .dso-document-header-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
3323
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
3319
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
3324
3320
  }
3325
3321
  .dso-document-header.dso-variant-besluitversie .dso-document-header-status {
3326
3322
  --_dso-icon-button-tertiary-color: #fff;
@@ -3472,7 +3468,6 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3472
3468
  .dso-document-header .dso-document-header-toggle-status.download::after {
3473
3469
  content: "";
3474
3470
  display: inline-block;
3475
- margin-inline-start: 8px;
3476
3471
  }
3477
3472
  .dso-document-header .dso-document-header-map-action,
3478
3473
  .dso-document-header .dso-document-header-toggle-features,
@@ -3507,7 +3502,6 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3507
3502
  .dso-document-header .dso-document-header-toggle-status.download::after {
3508
3503
  content: "";
3509
3504
  display: inline-block;
3510
- margin-inline-start: 8px;
3511
3505
  }
3512
3506
  .dso-document-header .dso-document-header-map-action,
3513
3507
  .dso-document-header .dso-document-header-toggle-features,
@@ -3665,7 +3659,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3665
3659
  .dso-document-header .dso-document-header-map-action.dso-spinner-left::before,
3666
3660
  .dso-document-header .dso-document-header-toggle-features.dso-spinner-left::before,
3667
3661
  .dso-document-header .dso-document-header-toggle-status.dso-spinner-left::before {
3668
- 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");
3662
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
3669
3663
  background-repeat: no-repeat;
3670
3664
  content: "";
3671
3665
  display: inline-block;
@@ -3677,7 +3671,7 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
3677
3671
  .dso-document-header .dso-document-header-map-action.dso-spinner-right::after,
3678
3672
  .dso-document-header .dso-document-header-toggle-features.dso-spinner-right::after,
3679
3673
  .dso-document-header .dso-document-header-toggle-status.dso-spinner-right::after {
3680
- 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");
3674
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
3681
3675
  background-repeat: no-repeat;
3682
3676
  content: "";
3683
3677
  display: inline-block;
@@ -4138,7 +4132,7 @@ footer a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [hr
4138
4132
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
4139
4133
  }
4140
4134
  footer a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
4141
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
4135
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
4142
4136
  }
4143
4137
  footer {
4144
4138
  --_dso-icon-button-tertiary-color: #191919;
@@ -4501,7 +4495,7 @@ form .dso-form-group-collection > legend h6, .dso-section-body .dso-form-group-c
4501
4495
  border-color: #afcf9d;
4502
4496
  color: #afcf9d;
4503
4497
  }
4504
- .form-group.dso-files .dso-file-upload:focus-within label {
4498
+ .form-group.dso-files .dso-file-upload input[type=file]:focus + label {
4505
4499
  border-radius: 2px;
4506
4500
  outline-offset: 3px;
4507
4501
  outline: 3px solid #008ccc;
@@ -5920,7 +5914,7 @@ h6,
5920
5914
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
5921
5915
  }
5922
5916
  .dso-highlight-box:not(.dso-white, .dso-yellow, .dso-border, .dso-green) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
5923
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
5917
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5924
5918
  }
5925
5919
  .dso-highlight-box:not(.dso-white, .dso-yellow, .dso-border, .dso-green) {
5926
5920
  --_dso-icon-button-tertiary-color: #191919;
@@ -5953,7 +5947,7 @@ h6,
5953
5947
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
5954
5948
  }
5955
5949
  .dso-highlight-box.dso-grey a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
5956
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
5950
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5957
5951
  }
5958
5952
  .dso-highlight-box.dso-grey {
5959
5953
  --_dso-icon-button-tertiary-color: #191919;
@@ -5994,7 +5988,7 @@ h6,
5994
5988
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
5995
5989
  }
5996
5990
  .dso-highlight-box.dso-yellow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
5997
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
5991
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5998
5992
  }
5999
5993
  .dso-highlight-box.dso-yellow {
6000
5994
  --_dso-icon-button-tertiary-color: #191919;
@@ -6027,7 +6021,7 @@ h6,
6027
6021
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6028
6022
  }
6029
6023
  .dso-highlight-box.dso-green a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6030
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6024
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6031
6025
  }
6032
6026
  .dso-highlight-box.dso-green {
6033
6027
  --_dso-icon-button-tertiary-color: #191919;
@@ -6177,7 +6171,7 @@ dso-highlight-box:not([white], [yellow], [border], [green]) a:not(.dso-primary,
6177
6171
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6178
6172
  }
6179
6173
  dso-highlight-box:not([white], [yellow], [border], [green]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6180
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6174
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6181
6175
  }
6182
6176
  dso-highlight-box:not([white], [yellow], [border], [green]) {
6183
6177
  --_dso-icon-button-tertiary-color: #191919;
@@ -6210,7 +6204,7 @@ dso-highlight-box[grey] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([h
6210
6204
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6211
6205
  }
6212
6206
  dso-highlight-box[grey] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6213
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6207
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6214
6208
  }
6215
6209
  dso-highlight-box[grey] {
6216
6210
  --_dso-icon-button-tertiary-color: #191919;
@@ -6251,7 +6245,7 @@ dso-highlight-box[yellow] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(
6251
6245
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6252
6246
  }
6253
6247
  dso-highlight-box[yellow] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6254
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6248
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6255
6249
  }
6256
6250
  dso-highlight-box[yellow] {
6257
6251
  --_dso-icon-button-tertiary-color: #191919;
@@ -6284,7 +6278,7 @@ dso-highlight-box[green] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([
6284
6278
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6285
6279
  }
6286
6280
  dso-highlight-box[green] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6287
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6281
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6288
6282
  }
6289
6283
  dso-highlight-box[green] {
6290
6284
  --_dso-icon-button-tertiary-color: #191919;
@@ -6458,7 +6452,7 @@ img {
6458
6452
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6459
6453
  }
6460
6454
  .dso-info:not(.dso-accordion-section) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6461
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6455
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6462
6456
  }
6463
6457
  .dso-info:not(.dso-accordion-section) {
6464
6458
  --_dso-icon-button-tertiary-color: #191919;
@@ -6515,7 +6509,7 @@ img {
6515
6509
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6516
6510
  }
6517
6511
  .dso-info:not(.dso-accordion-section) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6518
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6512
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6519
6513
  }
6520
6514
  .dso-info:not(.dso-accordion-section) {
6521
6515
  --_dso-icon-button-tertiary-color: #191919;
@@ -6538,7 +6532,7 @@ img {
6538
6532
  inset-block-start: 8px;
6539
6533
  }
6540
6534
  .dso-info:not(.dso-accordion-section) > button::before {
6541
- background: url("./di.svg#times-zwart") no-repeat center;
6535
+ background: url("./di.svg#cross-zwart") no-repeat center;
6542
6536
  background-size: cover;
6543
6537
  block-size: 24px;
6544
6538
  vertical-align: top;
@@ -6590,7 +6584,7 @@ dso-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [
6590
6584
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6591
6585
  }
6592
6586
  dso-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6593
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6587
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6594
6588
  }
6595
6589
  dso-info {
6596
6590
  --_dso-icon-button-tertiary-color: #191919;
@@ -6634,20 +6628,20 @@ dso-info {
6634
6628
  color: #666;
6635
6629
  }
6636
6630
  .dso-info-button {
6637
- background: url("./di.svg#info") no-repeat center;
6631
+ background: url("./di.svg#info-outline") no-repeat center;
6638
6632
  background-size: cover;
6639
6633
  block-size: 24px;
6640
6634
  vertical-align: top;
6641
6635
  inline-size: 24px;
6642
6636
  }
6643
6637
  .dso-info-button.dso-open, .dso-info-button:hover, .dso-info-button:active {
6644
- background-image: var(--_dso-di-background-image, url("./di.svg#info-active"));
6638
+ background-image: var(--_dso-di-background-image, url("./di.svg#info-solid"));
6645
6639
  }
6646
6640
  .dso-info-button.dso-info-secondary {
6647
- background-image: var(--_dso-di-background-image, url("./di.svg#info-secondary"));
6641
+ background-image: var(--_dso-di-background-image, url("./di.svg#info-outline-secondary"));
6648
6642
  }
6649
6643
  .dso-info-button.dso-info-secondary.dso-open, .dso-info-button.dso-info-secondary:hover, .dso-info-button.dso-info-secondary:active {
6650
- background-image: var(--_dso-di-background-image, url("./di.svg#info-active-secondary"));
6644
+ background-image: var(--_dso-di-background-image, url("./di.svg#info-solid-secondary"));
6651
6645
  }
6652
6646
 
6653
6647
  @media screen and (min-width: 768px) {
@@ -6714,7 +6708,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
6714
6708
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6715
6709
  }
6716
6710
  ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6717
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6711
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6718
6712
  }
6719
6713
  ins {
6720
6714
  --_dso-icon-button-tertiary-color: #191919;
@@ -6728,7 +6722,7 @@ ins {
6728
6722
  background-color: #e4f1d4;
6729
6723
  color: #191919;
6730
6724
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
6731
- --_dso-ozon-content-toggletip-color: colors.$zwart;
6725
+ --_dso-ozon-content-toggletip-color: #000;
6732
6726
  }
6733
6727
 
6734
6728
  .dso-justify-form-groups {
@@ -6802,518 +6796,6 @@ ins {
6802
6796
  }
6803
6797
  }
6804
6798
 
6805
- .dso-label {
6806
- border-radius: 4px;
6807
- display: inline-block;
6808
- line-height: 1.5;
6809
- max-inline-size: 100%;
6810
- padding-block: 4px;
6811
- padding-inline: 8px;
6812
- }
6813
- .dso-label:focus-within, .dso-label.dso-hover {
6814
- text-decoration: line-through;
6815
- }
6816
- .dso-label {
6817
- --_dso-alert-success-border-color: #39870c;
6818
- --_dso-alert-error-border-color: #ce3f51;
6819
- --_dso-alert-info-border-color: #6ca4d9;
6820
- --_dso-alert-warning-border-color: #dcd400;
6821
- --link-color: currentColor;
6822
- --link-hover-color: currentColor;
6823
- --link-visited-color: currentColor;
6824
- }
6825
- .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
6826
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
6827
- }
6828
- .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
6829
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
6830
- }
6831
- .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
6832
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6833
- }
6834
- .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6835
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6836
- }
6837
- .dso-label {
6838
- --_dso-icon-button-tertiary-color: #191919;
6839
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6840
- --_dso-icon-button-tertiary-active-color: #173521;
6841
- --_dso-icon-button-tertiary-disabled-color: #999;
6842
- --_dso-button-tertiary-color: #191919;
6843
- --_dso-button-tertiary-hover-color: #4c4c4c;
6844
- --_dso-button-tertiary-active-color: #173521;
6845
- --_dso-button-tertiary-disabled-color: #999;
6846
- background-color: #f2f2f2;
6847
- color: #191919;
6848
- }
6849
- .dso-label.dso-label-info {
6850
- --_dso-alert-success-border-color: #39870c;
6851
- --_dso-alert-error-border-color: #ce3f51;
6852
- --_dso-alert-info-border-color: #6ca4d9;
6853
- --_dso-alert-warning-border-color: #dcd400;
6854
- --link-color: currentColor;
6855
- --link-hover-color: currentColor;
6856
- --link-visited-color: currentColor;
6857
- }
6858
- .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
6859
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
6860
- }
6861
- .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
6862
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
6863
- }
6864
- .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
6865
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
6866
- }
6867
- .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6868
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
6869
- }
6870
- .dso-label.dso-label-info {
6871
- --_dso-icon-button-tertiary-color: #191919;
6872
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6873
- --_dso-icon-button-tertiary-active-color: #173521;
6874
- --_dso-icon-button-tertiary-disabled-color: #999;
6875
- --_dso-button-tertiary-color: #191919;
6876
- --_dso-button-tertiary-hover-color: #4c4c4c;
6877
- --_dso-button-tertiary-active-color: #173521;
6878
- --_dso-button-tertiary-disabled-color: #999;
6879
- background-color: #6ca4d9;
6880
- color: #191919;
6881
- }
6882
- .dso-label.dso-label-primary {
6883
- --_dso-alert-success-border-color: #39870c;
6884
- --_dso-alert-error-border-color: #ce3f51;
6885
- --_dso-alert-info-border-color: #6ca4d9;
6886
- --_dso-alert-warning-border-color: #dcd400;
6887
- --link-color: currentColor;
6888
- --link-hover-color: currentColor;
6889
- --link-visited-color: currentColor;
6890
- }
6891
- .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
6892
- background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
6893
- }
6894
- .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
6895
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
6896
- }
6897
- .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
6898
- background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
6899
- }
6900
- .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6901
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
6902
- }
6903
- .dso-label.dso-label-primary {
6904
- --_dso-icon-button-tertiary-color: #fff;
6905
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
6906
- --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
6907
- --_dso-button-primary-background-color: #fff;
6908
- --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
6909
- --_dso-button-primary-active-background-color: #f2f2f2;
6910
- --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
6911
- --_dso-button-primary-border-color: #fff;
6912
- --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
6913
- --_dso-button-primary-active-border-color: #f2f2f2;
6914
- --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
6915
- --_dso-button-primary-color: #191919;
6916
- --_dso-button-primary-hover-color: #191919;
6917
- --_dso-button-primary-active-color: #191919;
6918
- --_dso-button-primary-disabled-color: #666;
6919
- --_dso-button-secondary-background-color: none;
6920
- --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
6921
- --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
6922
- --_dso-button-secondary-disabled-background-color: none;
6923
- --_dso-button-secondary-border-color: #fff;
6924
- --_dso-button-secondary-hover-border-color: #fff;
6925
- --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
6926
- --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
6927
- --_dso-button-secondary-color: #fff;
6928
- --_dso-button-secondary-hover-color: #fff;
6929
- --_dso-button-secondary-active-color: #fff;
6930
- --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
6931
- --_dso-button-tertiary-color: #fff;
6932
- --_dso-button-tertiary-hover-color: #fff;
6933
- --_dso-button-tertiary-active-color: #fff;
6934
- --_dso-button-tertiary-disabled-color: #b2b2b2;
6935
- background-color: #275937;
6936
- color: #fff;
6937
- }
6938
- .dso-label.dso-label-success {
6939
- --_dso-alert-success-border-color: #39870c;
6940
- --_dso-alert-error-border-color: #ce3f51;
6941
- --_dso-alert-info-border-color: #6ca4d9;
6942
- --_dso-alert-warning-border-color: #dcd400;
6943
- --link-color: currentColor;
6944
- --link-hover-color: currentColor;
6945
- --link-visited-color: currentColor;
6946
- }
6947
- .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
6948
- background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
6949
- }
6950
- .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
6951
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
6952
- }
6953
- .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
6954
- background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
6955
- }
6956
- .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
6957
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
6958
- }
6959
- .dso-label.dso-label-success {
6960
- --_dso-icon-button-tertiary-color: #fff;
6961
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
6962
- --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
6963
- --_dso-button-primary-background-color: #fff;
6964
- --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
6965
- --_dso-button-primary-active-background-color: #f2f2f2;
6966
- --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
6967
- --_dso-button-primary-border-color: #fff;
6968
- --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
6969
- --_dso-button-primary-active-border-color: #f2f2f2;
6970
- --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
6971
- --_dso-button-primary-color: #191919;
6972
- --_dso-button-primary-hover-color: #191919;
6973
- --_dso-button-primary-active-color: #191919;
6974
- --_dso-button-primary-disabled-color: #666;
6975
- --_dso-button-secondary-background-color: none;
6976
- --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
6977
- --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
6978
- --_dso-button-secondary-disabled-background-color: none;
6979
- --_dso-button-secondary-border-color: #fff;
6980
- --_dso-button-secondary-hover-border-color: #fff;
6981
- --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
6982
- --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
6983
- --_dso-button-secondary-color: #fff;
6984
- --_dso-button-secondary-hover-color: #fff;
6985
- --_dso-button-secondary-active-color: #fff;
6986
- --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
6987
- --_dso-button-tertiary-color: #fff;
6988
- --_dso-button-tertiary-hover-color: #fff;
6989
- --_dso-button-tertiary-active-color: #fff;
6990
- --_dso-button-tertiary-disabled-color: #b2b2b2;
6991
- background-color: #39870c;
6992
- color: #fff;
6993
- }
6994
- .dso-label.dso-label-warning {
6995
- --_dso-alert-success-border-color: #39870c;
6996
- --_dso-alert-error-border-color: #ce3f51;
6997
- --_dso-alert-info-border-color: #6ca4d9;
6998
- --_dso-alert-warning-border-color: #dcd400;
6999
- --link-color: currentColor;
7000
- --link-hover-color: currentColor;
7001
- --link-visited-color: currentColor;
7002
- }
7003
- .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7004
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
7005
- }
7006
- .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7007
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
7008
- }
7009
- .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7010
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
7011
- }
7012
- .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7013
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7014
- }
7015
- .dso-label.dso-label-warning {
7016
- --_dso-icon-button-tertiary-color: #191919;
7017
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7018
- --_dso-icon-button-tertiary-active-color: #173521;
7019
- --_dso-icon-button-tertiary-disabled-color: #999;
7020
- --_dso-button-tertiary-color: #191919;
7021
- --_dso-button-tertiary-hover-color: #4c4c4c;
7022
- --_dso-button-tertiary-active-color: #173521;
7023
- --_dso-button-tertiary-disabled-color: #999;
7024
- background-color: #dcd400;
7025
- color: #191919;
7026
- }
7027
- .dso-label.dso-label-error {
7028
- --_dso-alert-success-border-color: #39870c;
7029
- --_dso-alert-error-border-color: #ce3f51;
7030
- --_dso-alert-info-border-color: #6ca4d9;
7031
- --_dso-alert-warning-border-color: #dcd400;
7032
- --link-color: currentColor;
7033
- --link-hover-color: currentColor;
7034
- --link-visited-color: currentColor;
7035
- }
7036
- .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7037
- background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
7038
- }
7039
- .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7040
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
7041
- }
7042
- .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7043
- background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
7044
- }
7045
- .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7046
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
7047
- }
7048
- .dso-label.dso-label-error {
7049
- --_dso-icon-button-tertiary-color: #fff;
7050
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
7051
- --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
7052
- --_dso-button-primary-background-color: #fff;
7053
- --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
7054
- --_dso-button-primary-active-background-color: #f2f2f2;
7055
- --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
7056
- --_dso-button-primary-border-color: #fff;
7057
- --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
7058
- --_dso-button-primary-active-border-color: #f2f2f2;
7059
- --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
7060
- --_dso-button-primary-color: #191919;
7061
- --_dso-button-primary-hover-color: #191919;
7062
- --_dso-button-primary-active-color: #191919;
7063
- --_dso-button-primary-disabled-color: #666;
7064
- --_dso-button-secondary-background-color: none;
7065
- --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
7066
- --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
7067
- --_dso-button-secondary-disabled-background-color: none;
7068
- --_dso-button-secondary-border-color: #fff;
7069
- --_dso-button-secondary-hover-border-color: #fff;
7070
- --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
7071
- --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
7072
- --_dso-button-secondary-color: #fff;
7073
- --_dso-button-secondary-hover-color: #fff;
7074
- --_dso-button-secondary-active-color: #fff;
7075
- --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
7076
- --_dso-button-tertiary-color: #fff;
7077
- --_dso-button-tertiary-hover-color: #fff;
7078
- --_dso-button-tertiary-active-color: #fff;
7079
- --_dso-button-tertiary-disabled-color: #b2b2b2;
7080
- background-color: #ce3f51;
7081
- color: #fff;
7082
- }
7083
- .dso-label.dso-label-bright {
7084
- --_dso-alert-success-border-color: initial;
7085
- --_dso-alert-error-border-color: initial;
7086
- --_dso-alert-info-border-color: initial;
7087
- --_dso-alert-warning-border-color: initial;
7088
- background-color: #fff;
7089
- color: #191919;
7090
- outline: 1px solid #ccc;
7091
- outline-offset: -1px;
7092
- }
7093
- .dso-label.dso-label-attention {
7094
- --_dso-alert-success-border-color: #39870c;
7095
- --_dso-alert-error-border-color: #ce3f51;
7096
- --_dso-alert-info-border-color: #6ca4d9;
7097
- --_dso-alert-warning-border-color: #dcd400;
7098
- --link-color: currentColor;
7099
- --link-hover-color: currentColor;
7100
- --link-visited-color: currentColor;
7101
- }
7102
- .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7103
- background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
7104
- }
7105
- .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7106
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
7107
- }
7108
- .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7109
- background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
7110
- }
7111
- .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7112
- background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
7113
- }
7114
- .dso-label.dso-label-attention {
7115
- --_dso-icon-button-tertiary-color: #fff;
7116
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
7117
- --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
7118
- --_dso-button-primary-background-color: #fff;
7119
- --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
7120
- --_dso-button-primary-active-background-color: #f2f2f2;
7121
- --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
7122
- --_dso-button-primary-border-color: #fff;
7123
- --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
7124
- --_dso-button-primary-active-border-color: #f2f2f2;
7125
- --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
7126
- --_dso-button-primary-color: #191919;
7127
- --_dso-button-primary-hover-color: #191919;
7128
- --_dso-button-primary-active-color: #191919;
7129
- --_dso-button-primary-disabled-color: #666;
7130
- --_dso-button-secondary-background-color: none;
7131
- --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
7132
- --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
7133
- --_dso-button-secondary-disabled-background-color: none;
7134
- --_dso-button-secondary-border-color: #fff;
7135
- --_dso-button-secondary-hover-border-color: #fff;
7136
- --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
7137
- --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
7138
- --_dso-button-secondary-color: #fff;
7139
- --_dso-button-secondary-hover-color: #fff;
7140
- --_dso-button-secondary-active-color: #fff;
7141
- --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
7142
- --_dso-button-tertiary-color: #fff;
7143
- --_dso-button-tertiary-hover-color: #fff;
7144
- --_dso-button-tertiary-active-color: #fff;
7145
- --_dso-button-tertiary-disabled-color: #b2b2b2;
7146
- background-color: #8b4a6a;
7147
- color: #fff;
7148
- }
7149
- .dso-label.dso-label-filter {
7150
- --_dso-alert-success-border-color: #39870c;
7151
- --_dso-alert-error-border-color: #ce3f51;
7152
- --_dso-alert-info-border-color: #6ca4d9;
7153
- --_dso-alert-warning-border-color: #dcd400;
7154
- --link-color: currentColor;
7155
- --link-hover-color: currentColor;
7156
- --link-visited-color: currentColor;
7157
- }
7158
- .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7159
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
7160
- }
7161
- .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7162
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
7163
- }
7164
- .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7165
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
7166
- }
7167
- .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7168
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7169
- }
7170
- .dso-label.dso-label-filter {
7171
- --_dso-icon-button-tertiary-color: #191919;
7172
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7173
- --_dso-icon-button-tertiary-active-color: #173521;
7174
- --_dso-icon-button-tertiary-disabled-color: #999;
7175
- --_dso-button-tertiary-color: #191919;
7176
- --_dso-button-tertiary-hover-color: #4c4c4c;
7177
- --_dso-button-tertiary-active-color: #173521;
7178
- --_dso-button-tertiary-disabled-color: #999;
7179
- background-color: #e1ecf7;
7180
- color: #191919;
7181
- border-inline-start: 5px solid #6ca4d9;
7182
- }
7183
- .dso-label.dso-label-toegevoegd {
7184
- --_dso-alert-success-border-color: #39870c;
7185
- --_dso-alert-error-border-color: #ce3f51;
7186
- --_dso-alert-info-border-color: #6ca4d9;
7187
- --_dso-alert-warning-border-color: #dcd400;
7188
- --link-color: currentColor;
7189
- --link-hover-color: currentColor;
7190
- --link-visited-color: currentColor;
7191
- }
7192
- .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7193
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
7194
- }
7195
- .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7196
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
7197
- }
7198
- .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7199
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
7200
- }
7201
- .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7202
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7203
- }
7204
- .dso-label.dso-label-toegevoegd {
7205
- --_dso-icon-button-tertiary-color: #191919;
7206
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7207
- --_dso-icon-button-tertiary-active-color: #173521;
7208
- --_dso-icon-button-tertiary-disabled-color: #999;
7209
- --_dso-button-tertiary-color: #191919;
7210
- --_dso-button-tertiary-hover-color: #4c4c4c;
7211
- --_dso-button-tertiary-active-color: #173521;
7212
- --_dso-button-tertiary-disabled-color: #999;
7213
- background-color: #e4f1d4;
7214
- color: #191919;
7215
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
7216
- --_dso-ozon-content-toggletip-color: colors.$zwart;
7217
- }
7218
- .dso-label.dso-label-verwijderd {
7219
- --_dso-alert-success-border-color: #39870c;
7220
- --_dso-alert-error-border-color: #ce3f51;
7221
- --_dso-alert-info-border-color: #6ca4d9;
7222
- --_dso-alert-warning-border-color: #dcd400;
7223
- --link-color: currentColor;
7224
- --link-hover-color: currentColor;
7225
- --link-visited-color: currentColor;
7226
- }
7227
- .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
7228
- background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
7229
- }
7230
- .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
7231
- background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
7232
- }
7233
- .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
7234
- background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
7235
- }
7236
- .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
7237
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7238
- }
7239
- .dso-label.dso-label-verwijderd {
7240
- --_dso-icon-button-tertiary-color: #191919;
7241
- --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7242
- --_dso-icon-button-tertiary-active-color: #173521;
7243
- --_dso-icon-button-tertiary-disabled-color: #999;
7244
- --_dso-button-tertiary-color: #191919;
7245
- --_dso-button-tertiary-hover-color: #4c4c4c;
7246
- --_dso-button-tertiary-active-color: #173521;
7247
- --_dso-button-tertiary-disabled-color: #999;
7248
- background-color: #f5d8dc;
7249
- color: #191919;
7250
- --_dso-ozon-content-toggletip-color: colors.$zwart;
7251
- text-decoration: line-through;
7252
- --_dso-ozon-content-toggletip-text-decoration: underline line-through;
7253
- }
7254
- @media screen and (min--moz-device-pixel-ratio: 0) {
7255
- .dso-label.dso-label-verwijderd {
7256
- font-family: sans-serif;
7257
- }
7258
- }
7259
- .dso-label.dso-compact {
7260
- padding-block: 0;
7261
- padding-inline: 8px;
7262
- }
7263
- .dso-label .dso-label-symbol {
7264
- background-color: #fff;
7265
- display: block;
7266
- float: inline-start;
7267
- block-size: 20px;
7268
- margin-block-start: 2px;
7269
- margin-inline-end: 8px;
7270
- inline-size: 24px;
7271
- overflow: hidden;
7272
- position: relative;
7273
- }
7274
- .dso-label .dso-label-symbol > span {
7275
- display: block;
7276
- position: absolute;
7277
- inset: 0;
7278
- }
7279
- .dso-label button {
7280
- line-height: 0;
7281
- background: none;
7282
- border: 0;
7283
- border-radius: 0 4px 4px 0;
7284
- color: inherit;
7285
- float: inline-end;
7286
- font-size: 1rem;
7287
- margin-block-end: -4px;
7288
- margin-inline-start: 8px;
7289
- margin-inline-end: -4px;
7290
- margin-block-start: 0;
7291
- padding: 0;
7292
- }
7293
- .dso-label button:hover {
7294
- cursor: pointer;
7295
- }
7296
- .dso-label button > dso-icon {
7297
- display: block;
7298
- }
7299
-
7300
- dso-label span[slot=symbol] {
7301
- background-color: #fff;
7302
- display: block;
7303
- float: inline-start;
7304
- block-size: 20px;
7305
- margin-block-start: 2px;
7306
- margin-inline-end: 8px;
7307
- inline-size: 24px;
7308
- overflow: hidden;
7309
- position: relative;
7310
- }
7311
- dso-label span[slot=symbol] > span {
7312
- display: block;
7313
- position: absolute;
7314
- inset: 0;
7315
- }
7316
-
7317
6799
  .dso-label-group {
7318
6800
  margin-block-end: 16px;
7319
6801
  }
@@ -7345,10 +6827,6 @@ a:hover, a:focus-visible {
7345
6827
  a:active {
7346
6828
  text-decoration: none;
7347
6829
  }
7348
- a dso-icon + span,
7349
- a span + dso-icon {
7350
- margin-inline-start: 8px;
7351
- }
7352
6830
  a .sr-only + dso-icon {
7353
6831
  margin-inline-start: 0;
7354
6832
  }
@@ -7357,9 +6835,9 @@ a:visited {
7357
6835
  }
7358
6836
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
7359
6837
  background-repeat: no-repeat;
7360
- background-size: 1.25em 1.25em;
6838
+ background-size: 1.5em 1.5em;
7361
6839
  padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
7362
- background-position: bottom 0 right 0;
6840
+ background-position: bottom -3px right 0;
7363
6841
  background-image: var(--_dso-di-background-image, url("./di.svg#download"));
7364
6842
  }
7365
6843
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
@@ -7367,9 +6845,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:whe
7367
6845
  }
7368
6846
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
7369
6847
  background-repeat: no-repeat;
7370
- background-size: 1.25em 1.25em;
6848
+ background-size: 1.5em 1.5em;
7371
6849
  padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
7372
- background-position: bottom 0 right 0;
6850
+ background-position: bottom -3px right 0;
7373
6851
  background-image: var(--_dso-di-background-image, url("./di.svg#external-link"));
7374
6852
  }
7375
6853
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
@@ -7377,9 +6855,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where
7377
6855
  }
7378
6856
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
7379
6857
  background-repeat: no-repeat;
7380
- background-size: 1.25em 1.25em;
6858
+ background-size: 1.5em 1.5em;
7381
6859
  padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
7382
- background-position: bottom 0 left 0;
6860
+ background-position: bottom -3px left 0;
7383
6861
  background-image: var(--_dso-di-background-image, url("./di.svg#call-grasgroen"));
7384
6862
  }
7385
6863
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
@@ -7387,13 +6865,13 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover,
7387
6865
  }
7388
6866
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
7389
6867
  background-repeat: no-repeat;
7390
- background-size: 1.25em 1.25em;
6868
+ background-size: 1.5em 1.5em;
7391
6869
  padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
7392
- background-position: bottom 0 left 0;
7393
- background-image: var(--_dso-di-background-image, url("./di.svg#email-grasgroen"));
6870
+ background-position: bottom -3px left 0;
6871
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-grasgroen"));
7394
6872
  }
7395
6873
  a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {
7396
- background-image: var(--_dso-di-background-image, url("./di.svg#email-scampi"));
6874
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-scampi"));
7397
6875
  }
7398
6876
 
7399
6877
  .dso-link-list {
@@ -7877,7 +7355,7 @@ body:has(dso-modal.hydrated) {
7877
7355
  flex-shrink: 0;
7878
7356
  }
7879
7357
  .dso-modal .dso-close::before {
7880
- background: url("./di.svg#times") no-repeat center;
7358
+ background: url("./di.svg#cross") no-repeat center;
7881
7359
  background-size: cover;
7882
7360
  block-size: 24px;
7883
7361
  vertical-align: middle;
@@ -8314,7 +7792,7 @@ pre {
8314
7792
  inline-size: 2.5rem;
8315
7793
  }
8316
7794
  .dso-search-bar .dso-search-bar-input button::before {
8317
- background: url("./di.svg#times") no-repeat center;
7795
+ background: url("./di.svg#cross") no-repeat center;
8318
7796
  background-size: cover;
8319
7797
  block-size: 24px;
8320
7798
  vertical-align: top;
@@ -8414,7 +7892,7 @@ optgroup {
8414
7892
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
8415
7893
  }
8416
7894
  .dso-shopping-cart .dso-status a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
8417
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7895
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
8418
7896
  }
8419
7897
  .dso-shopping-cart .dso-status {
8420
7898
  --_dso-icon-button-tertiary-color: #191919;
@@ -8476,7 +7954,7 @@ optgroup {
8476
7954
  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
8477
7955
  }
8478
7956
  .dso-shopping-cart .dso-contents a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
8479
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
7957
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
8480
7958
  }
8481
7959
  .dso-shopping-cart .dso-contents {
8482
7960
  --_dso-icon-button-tertiary-color: #191919;
@@ -8530,7 +8008,7 @@ optgroup {
8530
8008
  }
8531
8009
  .dso-shopping-cart ul a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
8532
8010
  .dso-shopping-cart ol a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
8533
- background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
8011
+ background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
8534
8012
  }
8535
8013
  .dso-shopping-cart ul,
8536
8014
  .dso-shopping-cart ol {
@@ -9449,7 +8927,7 @@ dso-viewer-grid .dso-toggle-main-button.dso-truncate {
9449
8927
  white-space: nowrap;
9450
8928
  }
9451
8929
  dso-viewer-grid .dso-toggle-main-button.dso-spinner-left::before {
9452
- 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");
8930
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
9453
8931
  background-repeat: no-repeat;
9454
8932
  content: "";
9455
8933
  display: inline-block;
@@ -9459,7 +8937,7 @@ dso-viewer-grid .dso-toggle-main-button.dso-spinner-left::before {
9459
8937
  margin-inline-end: 8px;
9460
8938
  }
9461
8939
  dso-viewer-grid .dso-toggle-main-button.dso-spinner-right::after {
9462
- 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");
8940
+ background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' 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: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
9463
8941
  background-repeat: no-repeat;
9464
8942
  content: "";
9465
8943
  display: inline-block;