npm - @dso-toolkit/core - Versions diffs - 62.25.0 → 62.27.0 - Mend

@dso-toolkit/core 62.25.0 → 62.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (574) hide show

package/dist/collection/components/ozon-content/ozon-content.css CHANGED Viewed

@@ -24,10 +24,10 @@ label.dso-primary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #39870c;
@@ -37,8 +37,9 @@ label.dso-primary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -59,7 +60,7 @@ label.dso-primary.extern::after,
 label.dso-primary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-primary:hover,
 button.dso-primary:hover,
@@ -101,20 +102,20 @@ label.dso-primary.dso-small svg.di,
 label.dso-primary.dso-small.extern::after,
 label.dso-primary.dso-small.download::after,
 label.dso-primary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-primary.dso-small.dso-spinner-left::before,
 button.dso-primary.dso-small.dso-spinner-left::before,
 label.dso-primary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary.dso-small.dso-spinner-right::after,
 button.dso-primary.dso-small.dso-spinner-right::after,
 label.dso-primary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary dso-icon,
 a.dso-primary svg.di,
@@ -122,8 +123,8 @@ button.dso-primary dso-icon,
 button.dso-primary svg.di,
 label.dso-primary dso-icon,
 label.dso-primary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-primary span + dso-icon,
 a.dso-primary span + svg.di,
@@ -131,8 +132,8 @@ button.dso-primary span + dso-icon,
 button.dso-primary span + svg.di,
 label.dso-primary span + dso-icon,
 label.dso-primary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
 button.dso-primary.dso-spinner-left[disabled],
@@ -150,10 +151,10 @@ label.dso-primary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-primary.dso-spinner-right::after,
 button.dso-primary.dso-spinner-right::after,
@@ -162,10 +163,10 @@ label.dso-primary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-primary.download::after,
 button.dso-primary.download::after,
@@ -173,9 +174,9 @@ label.dso-primary.download::after {
   background: url("./dso-icons.svg#img-download-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
@@ -183,9 +184,9 @@ label.dso-primary.extern::after {
   background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -193,10 +194,10 @@ label.dso-secondary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #fff;
@@ -206,8 +207,9 @@ label.dso-secondary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -228,7 +230,7 @@ label.dso-secondary.extern::after,
 label.dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary:hover,
 button.dso-secondary:hover,
@@ -270,20 +272,20 @@ label.dso-secondary.dso-small svg.di,
 label.dso-secondary.dso-small.extern::after,
 label.dso-secondary.dso-small.download::after,
 label.dso-secondary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-secondary.dso-small.dso-spinner-left::before,
 button.dso-secondary.dso-small.dso-spinner-left::before,
 label.dso-secondary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-small.dso-spinner-right::after,
 button.dso-secondary.dso-small.dso-spinner-right::after,
 label.dso-secondary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary dso-icon,
 a.dso-secondary svg.di,
@@ -291,8 +293,8 @@ button.dso-secondary dso-icon,
 button.dso-secondary svg.di,
 label.dso-secondary dso-icon,
 label.dso-secondary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary span + dso-icon,
 a.dso-secondary span + svg.di,
@@ -300,8 +302,8 @@ button.dso-secondary span + dso-icon,
 button.dso-secondary span + svg.di,
 label.dso-secondary span + dso-icon,
 label.dso-secondary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
 button.dso-secondary.dso-spinner-left[disabled],
@@ -319,10 +321,10 @@ label.dso-secondary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
@@ -331,16 +333,16 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-spinner-right::after,
 button.dso-secondary.dso-spinner-right::after,
@@ -349,10 +351,10 @@ label.dso-secondary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
@@ -361,16 +363,16 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
@@ -378,9 +380,9 @@ label.dso-secondary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
@@ -398,9 +400,9 @@ label.dso-secondary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
@@ -418,10 +420,10 @@ label.dso-tertiary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   border: 0;
@@ -449,7 +451,7 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
@@ -479,13 +481,14 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,
 button.dso-tertiary.dso-truncate,
 label.dso-tertiary.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -497,10 +500,10 @@ label.dso-tertiary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-tertiary.dso-spinner-right::after,
 button.dso-tertiary.dso-spinner-right::after,
@@ -509,10 +512,10 @@ label.dso-tertiary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary dso-icon + span:not(.sr-only),
 a.dso-tertiary svg.di + span:not(.sr-only),
@@ -526,7 +529,7 @@ label.dso-tertiary dso-icon + span:not(.sr-only),
 label.dso-tertiary svg.di + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + dso-icon,
 label.dso-tertiary span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
@@ -540,7 +543,7 @@ label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -566,7 +569,7 @@ label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 a.dso-tertiary dso-icon,
 a.dso-tertiary svg.di,
@@ -585,7 +588,7 @@ button.dso-tertiary.download::after,
 label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   position: relative;
-  top: -2px;
+  inset-block-start: -2px;
 }
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
@@ -593,9 +596,9 @@ label.dso-tertiary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
@@ -615,9 +618,9 @@ label.dso-tertiary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
@@ -663,7 +666,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 mark {
@@ -679,7 +682,7 @@ sup {
   font-size: 0.65em;
   line-height: 0;
   position: relative;
-  top: -0.5em;
+  inset-block-start: -0.5em;
   vertical-align: baseline;
 }
 sup a {
@@ -690,7 +693,7 @@ sup a:hover, sup a:focus-visible, sup a:active {
 }
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
   font-size: 0.65em;
   line-height: 0;
   position: relative;
@@ -705,9 +708,9 @@ sub a:hover, sub a:focus-visible, sub a:active {
 caption {
   color: #666;
-  padding-bottom: 8px;
-  padding-top: 8px;
-  text-align: left;
+  padding-block-end: 8px;
+  padding-block-start: 8px;
+  text-align: start;
 }
 td,
@@ -717,18 +720,19 @@ th {
 th {
   font-weight: 600;
-  text-align: left;
+  text-align: start;
 }
 table.table td:not(.plain-content) p,
 table.table th p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 table.table td:not(.plain-content) ul,
 table.table td:not(.plain-content) ol,
 table.table th ul,
 table.table th ol {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 table.table td:not(.plain-content) ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
 table.table td:not(.plain-content) ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
@@ -738,41 +742,43 @@ table.table th ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
 }
 table.table td:not(.plain-content) pre,
 table.table th pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 table.table td:not(.plain-content) blockquote,
 table.table th blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 table.table td:not(.plain-content) dso-highlight-box,
 table.table td:not(.plain-content) .dso-highlight-box,
 table.table th dso-highlight-box,
 table.table th .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 table.table td:not(.plain-content) img,
 table.table th img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }
 table.table,
 .dso-rich-content table {
-  margin-bottom: 24px;
-  max-width: 100%;
-  width: 100%;
+  margin-block-end: 24px;
+  max-inline-size: 100%;
+  inline-size: 100%;
 }
 table.table .dso-tertiary,
 .dso-rich-content table .dso-tertiary {
   position: relative;
-  top: -2px;
+  inset-block-start: -2px;
   white-space: nowrap;
 }
 table.table.dso-text-left th,
 table.table.dso-text-left td,
 .dso-rich-content table.dso-text-left th,
 .dso-rich-content table.dso-text-left td {
-  text-align: left;
+  text-align: start;
 }
 table.table.dso-text-center th,
 table.table.dso-text-center td,
@@ -784,7 +790,7 @@ table.table.dso-text-right th,
 table.table.dso-text-right td,
 .dso-rich-content table.dso-text-right th,
 .dso-rich-content table.dso-text-right td {
-  text-align: right;
+  text-align: end;
 }
 table.table.dso-table-vertical-lines > thead > tr > td,
 table.table.dso-table-vertical-lines > thead > tr > th,
@@ -806,7 +812,7 @@ table.table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,
 table.table.dso-table-vertical-lines > thead + tbody > tr:first-child > th,
 .dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > td,
 .dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > th {
-  border-top: 0;
+  border-block-start: 0;
 }
 table.table.dso-table-outside-lines-top,
 .dso-rich-content table.dso-table-outside-lines-top {
@@ -882,7 +888,7 @@ table.table th.dso-text-left,
 table.table td.dso-text-left,
 .dso-rich-content table th.dso-text-left,
 .dso-rich-content table td.dso-text-left {
-  text-align: left;
+  text-align: start;
 }
 table.table th.dso-text-center,
 table.table td.dso-text-center,
@@ -894,7 +900,7 @@ table.table th.dso-text-right,
 table.table td.dso-text-right,
 .dso-rich-content table th.dso-text-right,
 .dso-rich-content table td.dso-text-right {
-  text-align: right;
+  text-align: end;
 }
 table.table > thead > tr > th,
 table.table > thead > tr > td,
@@ -909,7 +915,8 @@ table.table > tfoot > tr > td,
 .dso-rich-content table > tfoot > tr > th,
 .dso-rich-content table > tfoot > tr > td {
   line-height: 1.5;
-  padding: 12px 8px;
+  padding-block: 12px;
+  padding-inline: 8px;
   vertical-align: top;
 }
 table.table > thead > tr > th a,
@@ -930,7 +937,7 @@ table.table:not([class*=dso-table-outside-lines]) > thead > tr > td,
 table.table:not([class*=dso-table-outside-lines]) > thead > tr > th,
 .dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > td,
 .dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > th {
-  border-bottom: 1px solid #666;
+  border-block-end: 1px solid #666;
 }
 table.table:not([class*=dso-table-outside-lines]) > tbody > tr > td,
 table.table:not([class*=dso-table-outside-lines]) > tbody > tr > th,
@@ -940,11 +947,11 @@ table.table:not([class*=dso-table-outside-lines]) > tfoot > tr > th,
 .dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > th,
 .dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,
 .dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > th {
-  border-bottom: 1px solid #ccc;
+  border-block-end: 1px solid #ccc;
 }
 table.table > tbody + tbody,
 .dso-rich-content table > tbody + tbody {
-  border-top: 2px solid #ccc;
+  border-block-start: 2px solid #ccc;
 }
 table.table .table,
 .dso-rich-content table .table {
@@ -1063,7 +1070,7 @@ table th[class*=col-] {
 .dso-table-responsive,
 .dso-table-scroll-container {
-  min-height: 0.01%;
+  min-block-size: 0.01%;
   overflow-x: auto;
   position: relative;
 }
@@ -1071,20 +1078,20 @@ table th[class*=col-] {
 .dso-table-scroll-container {
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: 1px solid #ccc;
-  margin-bottom: 0;
+  margin-block-end: 0;
   overflow-y: hidden;
-  width: 100%;
+  inline-size: 100%;
 }
 .dso-table-scroll-container::before {
   content: "beweeg de tabel van links naar rechts";
   display: block;
   font-size: 0.8em;
-  margin-bottom: 8px;
+  margin-block-end: 8px;
   position: relative;
   text-align: center;
 }
 .dso-table-scroll-container > .table {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .dso-table-scroll-container > .table > thead > tr > th,
 .dso-table-scroll-container > .table > thead > tr > td,
@@ -1099,20 +1106,20 @@ table th[class*=col-] {
   .dso-table-responsive {
     -ms-overflow-style: -ms-autohiding-scrollbar;
     border: 1px solid #ccc;
-    margin-bottom: 0;
+    margin-block-end: 0;
     overflow-y: hidden;
-    width: 100%;
+    inline-size: 100%;
   }
   .dso-table-responsive::before {
     content: "beweeg de tabel van links naar rechts";
     display: block;
     font-size: 0.8em;
-    margin-bottom: 8px;
+    margin-block-end: 8px;
     position: relative;
     text-align: center;
   }
   .dso-table-responsive > .table {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .dso-table-responsive > .table > thead > tr > th,
   .dso-table-responsive > .table > thead > tr > td,
@@ -1125,16 +1132,16 @@ table th[class*=col-] {
 }
 .dso-table-filter-wrapper .dso-search-bar {
-  margin-bottom: 16px;
-  width: 288px;
+  margin-block-end: 16px;
+  inline-size: 288px;
 }
 dso-table table.table {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 dso-table.dso-is-responsive {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 dso-table.dso-is-responsive > .table > thead > tr > th,
 dso-table.dso-is-responsive > .table > thead > tr > td,
@@ -1155,8 +1162,8 @@ dso-table.dso-is-responsive > .table > tfoot > tr > td {
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -1168,10 +1175,10 @@ button.toggle-note {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   border: 0;
@@ -1202,11 +1209,12 @@ button.toggle-note:not([disabled]):active {
 }
 button.toggle-note.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 button.toggle-note.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1216,32 +1224,32 @@ button.toggle-note.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 button.toggle-note.dso-spinner-right::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 button.toggle-note dso-icon + span:not(.sr-only),
 button.toggle-note svg.di + span:not(.sr-only),
 button.toggle-note span:not(.sr-only) + dso-icon,
 button.toggle-note span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 button.toggle-note svg.di.di-chevron-down + span:not(.sr-only),
 button.toggle-note svg.di.di-chevron-up + span:not(.sr-only),
 button.toggle-note span:not(.sr-only) + svg.di.di-chevron-down,
 button.toggle-note span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 button.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),
 button.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -1251,7 +1259,7 @@ button.toggle-note span:not(.sr-only) + svg.di.di-angle-down,
 button.toggle-note span:not(.sr-only) + svg.di.di-angle-up,
 button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-left],
 button.toggle-note span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 button.toggle-note dso-icon,
 button.toggle-note svg.di,
@@ -1304,11 +1312,11 @@ a:visited {
 }
 .od-Al {
-  margin-bottom: 0.75em;
+  margin-block-end: 0.75em;
 }
 .od-IntIoRef {
-  border-bottom: 1px dotted;
+  border-block-end: 1px dotted;
 }
 .dso-ozon-bron {
@@ -1317,7 +1325,7 @@ a:visited {
 }
 .dso-ozon-figuur {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 .dso-ozon-figuur .figuur-bijschrift {
   display: block;
@@ -1325,28 +1333,28 @@ a:visited {
   font-style: italic;
 }
 .dso-ozon-figuur.bijschrift-boven .figuur-bijschrift {
-  padding-bottom: 0.25rem;
+  padding-block-end: 0.25rem;
 }
 .dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {
-  padding-top: 0.25rem;
+  padding-block-start: 0.25rem;
 }
 .dso-ozon-figuur .figuur-titel {
   color: #8b4a6a;
   display: block;
   font-weight: 500;
-  padding-bottom: 0.5rem;
+  padding-block-end: 0.5rem;
 }
 .dso-ozon-lijst span.od-Lijstaanhef,
 .dso-ozon-lijst span.od-Lijstsluiting {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 .dso-ozon-lijst ul {
-  margin-bottom: 8px !important;
-  margin-top: 8px;
+  margin-block-end: 8px !important;
+  margin-block-start: 8px;
 }
 .dso-ozon-lijst ul p {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 .dso-ozon-lijst ul.expliciet {
   list-style: none;
@@ -1356,9 +1364,9 @@ a:visited {
 }
 .dso-ozon-lijst ul.expliciet > .od-Li > span.od-LiNummer {
   position: absolute;
-  left: -44px;
-  text-align: right;
-  width: 40px;
+  inset-inline-start: -44px;
+  text-align: end;
+  inline-size: 40px;
 }
 .dso-ozon-lijst p {
   margin: 0;
@@ -1370,7 +1378,7 @@ a:visited {
 .od-Kadertekst {
   border: 1px solid #e5e5e5;
-  margin-bottom: 8px;
+  margin-block-end: 8px;
   padding: 8px;
 }
@@ -1563,27 +1571,30 @@ del.editaction-remove p:last-child {
 }
 .dso-rich-content p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-rich-content ul,
 .dso-rich-content ol {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 .dso-rich-content ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
 .dso-rich-content ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
   padding-inline-start: 24px;
 }
 .dso-rich-content pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-rich-content blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 .dso-rich-content dso-highlight-box,
 .dso-rich-content .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 .dso-rich-content img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }