@dso-toolkit/core 58.3.0 → 59.0.0

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

@@ -1,51 +1,1080 @@
-ins {
-  background-color: #e4f1d4;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
-  color: #000;
-  text-decoration: none;
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
 }
 
-del {
-  background-color: #f5d8dc;
-  color: #000;
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+}
+a.dso-primary:focus, a.dso-primary:focus-visible,
+button.dso-primary:focus,
+button.dso-primary:focus-visible,
+label.dso-primary:focus,
+label.dso-primary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-primary:active,
+button.dso-primary:active,
+label.dso-primary:active {
+  outline: 0;
+}
+a.dso-primary.extern::after, a.dso-primary.download::after,
+button.dso-primary.extern::after,
+button.dso-primary.download::after,
+label.dso-primary.extern::after,
+label.dso-primary.download::after {
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+}
+a.dso-primary:hover,
+button.dso-primary:hover,
+label.dso-primary:hover {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+a.dso-primary:active,
+button.dso-primary:active,
+label.dso-primary:active {
+  background-color: #173521;
+  border-color: #173521;
+  color: #fff;
+}
+a.dso-primary[disabled], a.dso-primary[disabled]:hover,
+button.dso-primary[disabled],
+button.dso-primary[disabled]:hover,
+label.dso-primary[disabled],
+label.dso-primary[disabled]:hover {
+  background-color: #afcf9d;
+  border-color: #afcf9d;
+  color: #fff;
+}
+a.dso-primary.dso-small,
+button.dso-primary.dso-small,
+label.dso-primary.dso-small {
+  line-height: 1rem;
+}
+a.dso-primary.dso-small dso-icon,
+a.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
+button.dso-primary.dso-small dso-icon,
+button.dso-primary.dso-small svg.di,
+button.dso-primary.dso-small.extern::after,
+button.dso-primary.dso-small.download::after,
+button.dso-primary.dso-small.dso-spinner::before,
+label.dso-primary.dso-small dso-icon,
+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;
+}
+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;
+}
+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;
+}
+a.dso-primary dso-icon,
+a.dso-primary svg.di,
+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;
+}
+a.dso-primary span + dso-icon,
+a.dso-primary span + svg.di,
+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;
+}
+a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
+button.dso-primary.dso-spinner-left[disabled],
+button.dso-primary.dso-spinner-right[disabled],
+label.dso-primary.dso-spinner-left[disabled],
+label.dso-primary.dso-spinner-right[disabled] {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+a.dso-primary.dso-spinner-left::before,
+button.dso-primary.dso-spinner-left::before,
+label.dso-primary.dso-spinner-left::before {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+a.dso-primary.dso-spinner-right::after,
+button.dso-primary.dso-spinner-right::after,
+label.dso-primary.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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
+a.dso-primary.download::after,
+button.dso-primary.download::after,
+label.dso-primary.download::after {
+  background: url("./dso-icons.svg#img-download-wit") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-primary.extern::after,
+button.dso-primary.extern::after,
+label.dso-primary.extern::after {
+  background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+}
+a.dso-secondary:focus, a.dso-secondary:focus-visible,
+button.dso-secondary:focus,
+button.dso-secondary:focus-visible,
+label.dso-secondary:focus,
+label.dso-secondary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-secondary:active,
+button.dso-secondary:active,
+label.dso-secondary:active {
+  outline: 0;
+}
+a.dso-secondary.extern::after, a.dso-secondary.download::after,
+button.dso-secondary.extern::after,
+button.dso-secondary.download::after,
+label.dso-secondary.extern::after,
+label.dso-secondary.download::after {
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+}
+a.dso-secondary:hover,
+button.dso-secondary:hover,
+label.dso-secondary:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+a.dso-secondary:active,
+button.dso-secondary:active,
+label.dso-secondary:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
+button.dso-secondary[disabled],
+button.dso-secondary[disabled]:hover,
+label.dso-secondary[disabled],
+label.dso-secondary[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+a.dso-secondary.dso-small,
+button.dso-secondary.dso-small,
+label.dso-secondary.dso-small {
+  line-height: 1rem;
+}
+a.dso-secondary.dso-small dso-icon,
+a.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
+button.dso-secondary.dso-small dso-icon,
+button.dso-secondary.dso-small svg.di,
+button.dso-secondary.dso-small.extern::after,
+button.dso-secondary.dso-small.download::after,
+button.dso-secondary.dso-small.dso-spinner::before,
+label.dso-secondary.dso-small dso-icon,
+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;
+}
+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;
+}
+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;
+}
+a.dso-secondary dso-icon,
+a.dso-secondary svg.di,
+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;
+}
+a.dso-secondary span + dso-icon,
+a.dso-secondary span + svg.di,
+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;
+}
+a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
+button.dso-secondary.dso-spinner-left[disabled],
+button.dso-secondary.dso-spinner-right[disabled],
+label.dso-secondary.dso-spinner-left[disabled],
+label.dso-secondary.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-secondary.dso-spinner-left::before,
+button.dso-secondary.dso-spinner-left::before,
+label.dso-secondary.dso-spinner-left::before {
+  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;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
+label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 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;
+}
+a.dso-secondary.dso-spinner-right::after,
+button.dso-secondary.dso-spinner-right::after,
+label.dso-secondary.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;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
+a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
+label.dso-secondary.dso-spinner-right:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 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;
+}
+a.dso-secondary.download::after,
+button.dso-secondary.download::after,
+label.dso-secondary.download::after {
+  background: url("./dso-icons.svg#img-download") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-secondary.download:hover::after,
+button.dso-secondary.download:hover::after,
+label.dso-secondary.download:hover::after {
+  background-image: url("./dso-icons.svg#img-download-wit");
+}
+a.dso-secondary.download[disabled]::after,
+button.dso-secondary.download[disabled]::after,
+label.dso-secondary.download[disabled]::after {
+  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+}
+a.dso-secondary.extern::after,
+button.dso-secondary.extern::after,
+label.dso-secondary.extern::after {
+  background: url("./dso-icons.svg#img-external-link") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-secondary.extern:hover::after,
+button.dso-secondary.extern:hover::after,
+label.dso-secondary.extern:hover::after {
+  background-image: url("./dso-icons.svg#img-external-link-wit");
+}
+a.dso-secondary.extern[disabled]::after,
+button.dso-secondary.extern[disabled]::after,
+label.dso-secondary.extern[disabled]::after {
+  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+}
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
+a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
+button.dso-tertiary:focus,
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:focus,
+label.dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  outline: 0;
+}
+a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
+button.dso-tertiary.extern::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.extern::after,
+label.dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+}
+a.dso-tertiary[disabled],
+button.dso-tertiary[disabled],
+label.dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
+button.dso-tertiary[disabled].dso-spinner-left,
+button.dso-tertiary[disabled].dso-spinner-right,
+label.dso-tertiary[disabled].dso-spinner-left,
+label.dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+a.dso-tertiary:not([disabled]):hover,
+button.dso-tertiary:not([disabled]):hover,
+label.dso-tertiary:not([disabled]):hover {
+  color: #275937;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+a.dso-tertiary:not([disabled]):active,
+button.dso-tertiary:not([disabled]):active,
+label.dso-tertiary:not([disabled]):active {
+  color: #173521;
+}
+a.dso-tertiary.dso-align,
+button.dso-tertiary.dso-align,
+label.dso-tertiary.dso-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+a.dso-tertiary.dso-truncate,
+button.dso-tertiary.dso-truncate,
+label.dso-tertiary.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+a.dso-tertiary.dso-spinner-left::before,
+button.dso-tertiary.dso-spinner-left::before,
+label.dso-tertiary.dso-spinner-left::before {
+  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;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+a.dso-tertiary.dso-spinner-right::after,
+button.dso-tertiary.dso-spinner-right::after,
+label.dso-tertiary.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;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+a.dso-tertiary dso-icon + span:not(.sr-only),
+a.dso-tertiary svg.di + span:not(.sr-only),
+a.dso-tertiary span:not(.sr-only) + dso-icon,
+a.dso-tertiary span:not(.sr-only) + svg.di,
+button.dso-tertiary dso-icon + span:not(.sr-only),
+button.dso-tertiary svg.di + span:not(.sr-only),
+button.dso-tertiary span:not(.sr-only) + dso-icon,
+button.dso-tertiary span:not(.sr-only) + svg.di,
+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;
+}
+a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
+button.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+button.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
+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;
+}
+a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+a.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+a.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
+button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+button.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+button.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
+label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+label.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+label.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+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;
+}
+a.dso-tertiary dso-icon,
+a.dso-tertiary svg.di,
+a.dso-tertiary span,
+button.dso-tertiary dso-icon,
+button.dso-tertiary svg.di,
+button.dso-tertiary span,
+label.dso-tertiary dso-icon,
+label.dso-tertiary svg.di,
+label.dso-tertiary span {
+  vertical-align: middle;
+}
+a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
+button.dso-tertiary.extern::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.extern::after,
+label.dso-tertiary.download::after {
+  position: relative;
+  top: -2px;
+}
+a.dso-tertiary.download::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.download::after {
+  background: url("./dso-icons.svg#img-download") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-tertiary.download[disabled]::after,
+button.dso-tertiary.download[disabled]::after,
+label.dso-tertiary.download[disabled]::after {
+  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+}
+a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
+button.dso-tertiary.download:not([disabled]):hover::after,
+button.dso-tertiary.download:not([disabled]):active::after,
+label.dso-tertiary.download:not([disabled]):hover::after,
+label.dso-tertiary.download:not([disabled]):active::after {
+  background-image: url("./dso-icons.svg#img-download-scampi");
+}
+a.dso-tertiary.extern::after,
+button.dso-tertiary.extern::after,
+label.dso-tertiary.extern::after {
+  background: url("./dso-icons.svg#img-external-link") no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+a.dso-tertiary.extern[disabled]::after,
+button.dso-tertiary.extern[disabled]::after,
+label.dso-tertiary.extern[disabled]::after {
+  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+}
+a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
+button.dso-tertiary.extern:not([disabled]):hover::after,
+button.dso-tertiary.extern:not([disabled]):active::after,
+label.dso-tertiary.extern:not([disabled]):hover::after,
+label.dso-tertiary.extern:not([disabled]):active::after {
+  background-image: url("./dso-icons.svg#img-external-link-scampi");
 }
 
-:host(:not([inline])) {
-  display: block;
+a.dso-primary {
+  text-decoration: none;
+}
+a.dso-primary, a.dso-primary:visited {
+  color: #fff;
+}
+a.dso-secondary {
+  text-decoration: none;
+}
+a.dso-secondary, a.dso-secondary:visited {
+  color: #39870c;
+}
+a.dso-secondary:hover, a.dso-secondary:visited:hover {
+  color: #fff;
+}
+a.dso-tertiary {
+  text-decoration: none;
+}
+a.dso-tertiary, a.dso-tertiary:visited {
+  color: #39870c;
 }
 
-:host([inline]) {
-  display: inline;
+.dso-primary + .dso-primary,
+.dso-primary + .dso-secondary,
+.dso-primary + .dso-tertiary,
+.dso-secondary + .dso-primary,
+.dso-secondary + .dso-secondary,
+.dso-secondary + .dso-tertiary,
+.dso-tertiary + .dso-primary,
+.dso-tertiary + .dso-secondary,
+.dso-tertiary + .dso-tertiary {
+  margin-left: 16px;
 }
 
-:host([deleted]) * {
-  text-decoration: line-through !important;
+sup {
+  font-size: 0.65em;
+  line-height: 0;
+  position: relative;
+  top: -0.5em;
+  vertical-align: baseline;
+}
+sup a {
+  text-decoration: none;
+}
+sup a:hover, sup a:focus, sup a:active {
+  text-decoration: underline;
 }
 
-:host([interactive]) {
-  background-color: transparent;
-  color: var(--link-color);
+sub {
+  bottom: -0.25em;
+  font-size: 0.65em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub a {
+  text-decoration: none;
+}
+sub a:hover, sub a:focus, sub a:active {
   text-decoration: underline;
-  cursor: pointer;
-  color: #275937;
+}
+
+caption {
+  color: #666;
+  padding-bottom: 8px;
+  padding-top: 8px;
+  text-align: left;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+th {
   font-weight: 600;
-  text-decoration: none;
+  text-align: left;
 }
-:host([interactive]):hover, :host([interactive]):focus {
-  color: var(--link-hover-color);
+
+table.table td:not(.plain-content) p,
+table.table th p {
+  margin: 0 0 16px;
+}
+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;
+}
+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),
+table.table th ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+table.table th ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+table.table td:not(.plain-content) pre,
+table.table th pre {
+  margin: 0 0 16px;
+}
+table.table td:not(.plain-content) blockquote,
+table.table th blockquote {
+  padding: 16px 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;
+}
+table.table td:not(.plain-content) img,
+table.table th img {
+  height: auto;
+  max-width: 100%;
+}
+
+table.table,
+.dso-rich-content table {
+  margin-bottom: 24px;
+  max-width: 100%;
+  width: 100%;
+}
+table.table .dso-tertiary,
+.dso-rich-content table .dso-tertiary {
+  position: relative;
+  top: -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;
+}
+table.table.dso-text-center th,
+table.table.dso-text-center td,
+.dso-rich-content table.dso-text-center th,
+.dso-rich-content table.dso-text-center td {
+  text-align: center;
+}
+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;
+}
+table.table.dso-table-vertical-lines > thead > tr > td,
+table.table.dso-table-vertical-lines > thead > tr > th,
+.dso-rich-content table.dso-table-vertical-lines > thead > tr > td,
+.dso-rich-content table.dso-table-vertical-lines > thead > tr > th {
+  border: 1px solid #666;
+}
+table.table.dso-table-vertical-lines > tbody > tr > td,
+table.table.dso-table-vertical-lines > tbody > tr > th,
+table.table.dso-table-vertical-lines > tfoot > tr > td,
+table.table.dso-table-vertical-lines > tfoot > tr > th,
+.dso-rich-content table.dso-table-vertical-lines > tbody > tr > td,
+.dso-rich-content table.dso-table-vertical-lines > tbody > tr > th,
+.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > td,
+.dso-rich-content table.dso-table-vertical-lines > tfoot > tr > th {
+  border: 1px solid #ccc;
+}
+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;
+}
+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;
+}
+table.table th.dso-text-center,
+table.table td.dso-text-center,
+.dso-rich-content table th.dso-text-center,
+.dso-rich-content table td.dso-text-center {
+  text-align: center;
+}
+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;
+}
+table.table > thead > tr > th,
+table.table > thead > tr > td,
+table.table > tbody > tr > th,
+table.table > tbody > tr > td,
+table.table > tfoot > tr > th,
+table.table > tfoot > tr > td,
+.dso-rich-content table > thead > tr > th,
+.dso-rich-content table > thead > tr > td,
+.dso-rich-content table > tbody > tr > th,
+.dso-rich-content table > tbody > tr > td,
+.dso-rich-content table > tfoot > tr > th,
+.dso-rich-content table > tfoot > tr > td {
+  line-height: 1.5;
+  padding: 12px 8px;
+  vertical-align: top;
+}
+table.table > thead > tr > th a,
+table.table > thead > tr > td a,
+table.table > tbody > tr > th a,
+table.table > tbody > tr > td a,
+table.table > tfoot > tr > th a,
+table.table > tfoot > tr > td a,
+.dso-rich-content table > thead > tr > th a,
+.dso-rich-content table > thead > tr > td a,
+.dso-rich-content table > tbody > tr > th a,
+.dso-rich-content table > tbody > tr > td a,
+.dso-rich-content table > tfoot > tr > th a,
+.dso-rich-content table > tfoot > tr > td a {
   text-decoration: underline;
 }
-:host([interactive]):active {
+table.table > thead > tr > td,
+table.table > thead > tr > th,
+.dso-rich-content table > thead > tr > td,
+.dso-rich-content table > thead > tr > th {
+  border-bottom: 1px solid #666;
+}
+table.table > tbody > tr > td,
+table.table > tbody > tr > th,
+table.table > tfoot > tr > td,
+table.table > tfoot > tr > th,
+.dso-rich-content table > tbody > tr > td,
+.dso-rich-content table > tbody > tr > th,
+.dso-rich-content table > tfoot > tr > td,
+.dso-rich-content table > tfoot > tr > th {
+  border-bottom: 1px solid #ccc;
+}
+table.table > tbody + tbody,
+.dso-rich-content table > tbody + tbody {
+  border-top: 2px solid #ccc;
+}
+table.table .table,
+.dso-rich-content table .table {
+  background-color: #fff;
+}
+table.table > tbody > tr.result-error td,
+.dso-rich-content table > tbody > tr.result-error td {
+  font-style: italic;
+}
+table.table > thead > tr > th,
+.dso-rich-content table > thead > tr > th {
+  vertical-align: bottom;
+}
+table.table > thead > tr > th .dso-primary.dso-sort, table.table > thead > tr > th .dso-secondary.dso-sort, table.table > thead > tr > th .dso-tertiary.dso-sort,
+.dso-rich-content table > thead > tr > th .dso-primary.dso-sort,
+.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort,
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort {
+  color: #191919;
+  font-weight: 600;
+}
+table.table > thead > tr > th .dso-primary.dso-sort dso-icon,
+table.table > thead > tr > th .dso-primary.dso-sort svg.di, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon,
+table.table > thead > tr > th .dso-secondary.dso-sort svg.di, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon,
+table.table > thead > tr > th .dso-tertiary.dso-sort svg.di,
+.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon,
+.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di,
+.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon,
+.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di,
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon,
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di {
+  color: #666;
+}
+table.table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,
+table.table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,
+table.table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active, table.table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,
+table.table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-primary.dso-sort dso-icon.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-primary.dso-sort svg.di.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort dso-icon.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-secondary.dso-sort svg.di.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort dso-icon.dso-sort-active,
+.dso-rich-content table > thead > tr > th .dso-tertiary.dso-sort svg.di.dso-sort-active {
+  color: #191919;
+}
+
+.table-hover > tbody > tr:hover {
+  background-color: #f2f2f2;
+}
+
+table col[class*=col-] {
+  display: table-column;
+  float: none;
+  position: static;
+}
+
+table {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+table td[class*=col-],
+table th[class*=col-] {
+  display: table-cell;
+  float: none;
+  position: static;
+}
+
+.dso-rich-content table > thead > tr > td.active,
+.dso-rich-content table > thead > tr > th.active, .dso-rich-content table > thead > tr.active > td, .dso-rich-content table > thead > tr.active > th,
+.dso-rich-content table > tbody > tr > td.active,
+.dso-rich-content table > tbody > tr > th.active,
+.dso-rich-content table > tbody > tr.active > td,
+.dso-rich-content table > tbody > tr.active > th,
+.dso-rich-content table > tfoot > tr > td.active,
+.dso-rich-content table > tfoot > tr > th.active,
+.dso-rich-content table > tfoot > tr.active > td,
+.dso-rich-content table > tfoot > tr.active > th,
+.table > thead > tr > td.active,
+.table > thead > tr > th.active,
+.table > thead > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr > td.active,
+.table > tbody > tr > th.active,
+.table > tbody > tr.active > td,
+.table > tbody > tr.active > th,
+.table > tfoot > tr > td.active,
+.table > tfoot > tr > th.active,
+.table > tfoot > tr.active > td,
+.table > tfoot > tr.active > th {
+  background-color: #f2f2f2;
+}
+
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {
+  background-color: #f2f2f2;
+}
+.table-hover > tbody > tr:hover > th, .table-hover > tbody > tr:hover > td {
+  background-color: #f2f2f2;
+}
+.table-hover > tbody > tr:hover > th a, .table-hover > tbody > tr:hover > td a {
+  color: #191919;
+}
+.table-hover > tbody > tr:hover > th a:hover, .table-hover > tbody > tr:hover > td a:hover {
   text-decoration: none;
 }
 
-:host([interactive=sub]) {
+.table > tbody > tr.active > th, .table > tbody > tr.active > td {
+  background-color: #f2f2f2;
+}
+.table > tbody > tr.active > th a, .table > tbody > tr.active > td a {
   color: #191919;
 }
+.table > tbody > tr.active > th a:hover, .table > tbody > tr.active > td a:hover {
+  text-decoration: none;
+}
 
-.sr-only,
-.deleted-start,
-.deleted-end {
+.dso-table-responsive,
+.dso-table-scroll-container {
+  min-height: 0.01%;
+  overflow-x: auto;
+  position: relative;
+}
+
+.dso-table-scroll-container {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  border: 1px solid #ccc;
+  margin-bottom: 0;
+  overflow-y: hidden;
+  width: 100%;
+}
+.dso-table-scroll-container::before {
+  content: "beweeg de tabel van links naar rechts";
+  display: block;
+  font-size: 0.8em;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: center;
+}
+.dso-table-scroll-container > .table {
+  margin-bottom: 0;
+}
+.dso-table-scroll-container > .table > thead > tr > th,
+.dso-table-scroll-container > .table > thead > tr > td,
+.dso-table-scroll-container > .table > tbody > tr > th,
+.dso-table-scroll-container > .table > tbody > tr > td,
+.dso-table-scroll-container > .table > tfoot > tr > th,
+.dso-table-scroll-container > .table > tfoot > tr > td {
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+  .dso-table-responsive {
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid #ccc;
+    margin-bottom: 0;
+    overflow-y: hidden;
+    width: 100%;
+  }
+  .dso-table-responsive::before {
+    content: "beweeg de tabel van links naar rechts";
+    display: block;
+    font-size: 0.8em;
+    margin-bottom: 8px;
+    position: relative;
+    text-align: center;
+  }
+  .dso-table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .dso-table-responsive > .table > thead > tr > th,
+  .dso-table-responsive > .table > thead > tr > td,
+  .dso-table-responsive > .table > tbody > tr > th,
+  .dso-table-responsive > .table > tbody > tr > td,
+  .dso-table-responsive > .table > tfoot > tr > th,
+  .dso-table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+}
+
+.dso-table-filter-wrapper .dso-search-bar {
+  margin-bottom: 16px;
+  width: 288px;
+}
+
+dso-table table.table {
+  margin-bottom: 0;
+}
+
+dso-table.dso-is-responsive {
+  margin-bottom: 0;
+}
+dso-table.dso-is-responsive > .table > thead > tr > th,
+dso-table.dso-is-responsive > .table > thead > tr > td,
+dso-table.dso-is-responsive > .table > tbody > tr > th,
+dso-table.dso-is-responsive > .table > tbody > tr > td,
+dso-table.dso-is-responsive > .table > tfoot > tr > th,
+dso-table.dso-is-responsive > .table > tfoot > tr > td {
+  white-space: nowrap;
+}
+
+:host(:not([inline])) {
+  display: block;
+}
+
+:host([inline]) {
+  display: inline;
+}
+
+.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -209,7 +1238,7 @@ a:visited {
 }
 
 .dso-ozon-figuur {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .dso-ozon-figuur .figuur-bijschrift {
   display: block;
@@ -231,7 +1260,14 @@ a:visited {
 
 .dso-ozon-lijst span.od-Lijstaanhef,
 .dso-ozon-lijst span.od-Lijstsluiting {
-  margin-bottom: 1rem;
+  margin-bottom: 8px;
+}
+.dso-ozon-lijst ul {
+  margin-bottom: 8px !important;
+  margin-top: 8px;
+}
+.dso-ozon-lijst ul p {
+  margin-bottom: 8px;
 }
 .dso-ozon-lijst ul.expliciet {
   list-style: none;
@@ -245,6 +1281,9 @@ a:visited {
   text-align: right;
   width: 40px;
 }
+.dso-ozon-lijst p {
+  margin: 0;
+}
 
 .od-Tabel thead {
   font-weight: 600;
@@ -252,25 +1291,51 @@ a:visited {
 
 .od-Kadertekst {
   border: 1px solid #e5e5e5;
-  margin-bottom: 1rem;
-  padding: 1rem;
+  margin-bottom: 8px;
+  padding: 8px;
 }
 
-.dso-del {
+p.wijzigactie-voegtoe,
+span[role=paragraph].wijzigactie-voegtoe,
+table.wijzigactie-voegtoe {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
+}
+p.wijzigactie-voegtoe a,
+span[role=paragraph].wijzigactie-voegtoe a,
+table.wijzigactie-voegtoe a {
+  color: #000;
+}
+p.wijzigactie-verwijder,
+span[role=paragraph].wijzigactie-verwijder,
+table.wijzigactie-verwijder {
   background-color: #f5d8dc;
   color: #000;
   text-decoration: line-through;
 }
-.dso-del a {
+p.wijzigactie-verwijder a,
+span[role=paragraph].wijzigactie-verwijder a,
+table.wijzigactie-verwijder a {
   color: #000;
 }
 
-.dso-ins {
+ins.nieuwe-tekst {
+  text-decoration: none;
   background-color: #e4f1d4;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
   color: #000;
 }
-.dso-ins a {
+ins.nieuwe-tekst a {
+  color: #000;
+}
+
+del.verwijderde-tekst {
+  background-color: #f5d8dc;
+  color: #000;
+  text-decoration: line-through;
+}
+del.verwijderde-tekst a {
   color: #000;
 }