@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -5,7 +5,7 @@
 }
 
 :host([mode=vdk]) .overlay {
-  height: calc(100% - 32px);
+  block-size: calc(100% - 32px);
   margin-block: 16px;
   margin-inline: auto 16px;
 }
@@ -32,8 +32,8 @@ button::-moz-focus-inner {
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -47,10 +47,10 @@ button::-moz-focus-inner {
   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;
@@ -99,13 +99,14 @@ button::-moz-focus-inner {
 .expand.dso-align,
 .overlay-close-button.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 .shrink.dso-truncate,
 .expand.dso-truncate,
 .overlay-close-button.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -117,10 +118,10 @@ button::-moz-focus-inner {
   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;
 }
 .shrink.dso-spinner-right::after,
 .expand.dso-spinner-right::after,
@@ -129,10 +130,10 @@ button::-moz-focus-inner {
   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;
 }
 .shrink dso-icon + span:not(.sr-only),
 .shrink svg.di + span:not(.sr-only),
@@ -146,7 +147,7 @@ button::-moz-focus-inner {
 .overlay-close-button svg.di + span:not(.sr-only),
 .overlay-close-button span:not(.sr-only) + dso-icon,
 .overlay-close-button span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 .shrink svg.di.di-chevron-down + span:not(.sr-only),
 .shrink svg.di.di-chevron-up + span:not(.sr-only),
@@ -160,7 +161,7 @@ button::-moz-focus-inner {
 .overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),
 .overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,
 .overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 .shrink dso-icon[icon=chevron-left] + span:not(.sr-only),
 .shrink dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -186,7 +187,7 @@ button::-moz-focus-inner {
 .overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,
 .overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],
 .overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .shrink dso-icon,
 .shrink svg.di,
@@ -207,8 +208,8 @@ button::-moz-focus-inner {
 
 .overlay-close-button {
   position: absolute;
-  top: 8px;
-  right: 16px;
+  inset-block-start: 8px;
+  inset-inline-end: 16px;
 }
 
 .content.invisible {
@@ -217,8 +218,9 @@ button::-moz-focus-inner {
 
 .dso-main-panel .content,
 .dso-document-panel .content {
-  height: 100%;
-  padding: 0 16px;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 
 .dso-main-panel {
@@ -226,11 +228,11 @@ button::-moz-focus-inner {
   flex-shrink: 0;
   flex-grow: 0;
   position: relative;
-  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
+  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;
   z-index: 100;
 }
 .dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {
-  left: -432px;
+  inset-inline-start: -432px;
 }
 .dso-main-panel.compact, .dso-main-panel.contracted {
   flex-shrink: unset;
@@ -240,22 +242,24 @@ button::-moz-focus-inner {
 }
 .dso-main-panel.expanded.collapsed {
   position: absolute;
-  height: 100%;
+  block-size: 100%;
 }
 .dso-main-panel .dso-filterblok-address {
   font-weight: bold;
-  margin: 8px 0;
+  margin-block: 8px;
+  margin-inline: 0;
 }
 .dso-main-panel .sizing-buttons,
 .dso-main-panel .toggle-button {
-  left: calc(100% + 1px);
-  transition: left 200ms ease-in;
-  padding: 0 4px 4px 0;
+  inset-inline-start: calc(100% + 1px);
+  transition: inset-inline-start 200ms ease-in;
+  padding-block: 0 8px;
+  padding-inline: 0 4px;
 }
 .dso-main-panel .sizing-buttons button,
 .dso-main-panel .toggle-button button {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-end-end-radius: 4px;
+  border-start-end-radius: 4px;
 }
 
 .dso-document-panel {
@@ -263,27 +267,28 @@ button::-moz-focus-inner {
   flex-shrink: 0;
   flex-grow: 0;
   position: relative;
-  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
+  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;
   z-index: 100;
 }
 .dso-document-panel .sizing-buttons {
-  top: auto;
-  bottom: 16px;
-  right: calc(100% + 1px);
-  transition: right 200ms ease-in;
-  padding: 0 0 4px 4px;
+  inset-block-start: auto;
+  inset-block-end: 16px;
+  inset-inline-end: calc(100% + 1px);
+  transition: inset-inline-end 200ms ease-in;
+  padding-block: 0 8px;
+  padding-inline: 4px 0;
 }
 .dso-document-panel .sizing-buttons button {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-end-start-radius: 4px;
+  border-start-start-radius: 4px;
 }
 
 .sizing-buttons,
 .toggle-button {
   overflow-x: hidden;
   position: absolute;
-  top: 16px;
-  width: 44px;
+  inset-block-start: 16px;
+  inline-size: 44px;
   z-index: -1;
 }
 .sizing-buttons button,
@@ -291,10 +296,10 @@ button::-moz-focus-inner {
   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;
@@ -304,16 +309,17 @@ button::-moz-focus-inner {
   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;
   border: 0;
   padding: 8px;
   border-radius: 0;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
   flex: 0 0 100%;
-  height: 40px;
-  min-width: auto;
-  width: 40px;
+  block-size: 40px;
+  min-inline-size: auto;
+  inline-size: 40px;
 }
 .sizing-buttons button:focus, .sizing-buttons button:focus-visible,
 .toggle-button button:focus,
@@ -354,24 +360,24 @@ button::-moz-focus-inner {
 .toggle-button button.dso-small.extern::after,
 .toggle-button button.dso-small.download::after,
 .toggle-button button.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .sizing-buttons button.dso-small.dso-spinner-left::before,
 .toggle-button button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .sizing-buttons button.dso-small.dso-spinner-right::after,
 .toggle-button button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .sizing-buttons button > span,
 .toggle-button button > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -391,10 +397,10 @@ button::-moz-focus-inner {
   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;
 }
 .sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,
 .toggle-button button.dso-spinner-left:not([disabled]):hover::before {
@@ -402,15 +408,15 @@ button::-moz-focus-inner {
   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;
 }
 .sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,
 .toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .sizing-buttons button.dso-spinner-right::after,
 .toggle-button button.dso-spinner-right::after {
@@ -418,10 +424,10 @@ button::-moz-focus-inner {
   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;
 }
 .sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,
 .toggle-button button.dso-spinner-right:not([disabled]):hover::after {
@@ -429,15 +435,15 @@ button::-moz-focus-inner {
   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;
 }
 .sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,
 .toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .sizing-buttons button:focus-visible,
 .toggle-button button:focus-visible {
@@ -452,8 +458,8 @@ button::-moz-focus-inner {
 }
 
 .map {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   overflow: hidden;
   position: relative;
 }
@@ -462,20 +468,21 @@ button::-moz-focus-inner {
 .overlay {
   background-color: #fff;
   border: 0;
-  height: 100%;
+  block-size: 100%;
   margin-block: 0;
-  max-height: 100vh;
+  max-block-size: 100vh;
   overflow-y: auto;
   z-index: 101;
 }
 
 .filterpanel {
-  padding: 8px 16px;
-  left: 0;
+  padding-block: 8px;
+  padding-inline: 16px;
+  inset-inline-start: 0;
 }
 @media screen and (max-width: 768px) {
   .filterpanel {
-    width: 100vw;
+    inline-size: 100vw;
   }
   .filterpanel::before {
     display: none !important;
@@ -495,30 +502,31 @@ button::-moz-focus-inner {
 }
 
 .overlay {
-  padding: 40px 16px 8px;
-  right: 0;
-  width: 624px;
+  padding-block: 40px 8px;
+  padding-inline: 16px;
+  inset-inline-end: 0;
+  inline-size: 624px;
 }
 .overlay::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
 }
 @media screen and (max-width: 624px) {
   .overlay {
-    width: 100vw;
+    inline-size: 100vw;
   }
 }
 
 .filterpanel-buttons {
-  text-align: right;
+  text-align: end;
 }
 .filterpanel-buttons .cancel-button {
   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;
@@ -528,8 +536,9 @@ button::-moz-focus-inner {
   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;
   line-height: 1rem;
 }
 .filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
@@ -558,26 +567,26 @@ button::-moz-focus-inner {
 }
 .filterpanel-buttons .cancel-button.dso-small dso-icon,
 .filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button dso-icon,
 .filterpanel-buttons .cancel-button svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .filterpanel-buttons .cancel-button span + dso-icon,
 .filterpanel-buttons .cancel-button span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {
   background-color: #fff;
@@ -589,70 +598,70 @@ button::-moz-focus-inner {
   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;
 }
 .filterpanel-buttons .cancel-button.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;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button.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: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .filterpanel-buttons .cancel-button.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;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button dso-icon,
 .filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .filterpanel-buttons .cancel-button.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .apply-button {
   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;
@@ -662,8 +671,9 @@ button::-moz-focus-inner {
   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;
   line-height: 1rem;
 }
 .filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
@@ -692,26 +702,26 @@ button::-moz-focus-inner {
 }
 .filterpanel-buttons .apply-button.dso-small dso-icon,
 .filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .apply-button dso-icon,
 .filterpanel-buttons .apply-button svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .filterpanel-buttons .apply-button span + dso-icon,
 .filterpanel-buttons .apply-button span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {
   background-color: #39870c;
@@ -723,52 +733,52 @@ button::-moz-focus-inner {
   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;
 }
 .filterpanel-buttons .apply-button.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;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .filterpanel-buttons .apply-button dso-icon,
 .filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .filterpanel-buttons .apply-button.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .apply-button.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .filterpanel-buttons .cancel-button + .apply-button {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 @media screen and (min-width: 808px) {
   :host([main-size=small]) .dso-main-panel,
   :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 375px;
-    min-width: 0;
-    max-width: 375px;
+    min-inline-size: 0;
+    max-inline-size: 375px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 375px) {
   :host([main-size=small]) .dso-main-panel,
   :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 0;
+    max-inline-size: 100vw;
+    min-inline-size: 0;
     transition: none;
   }
 }
@@ -776,16 +786,16 @@ button::-moz-focus-inner {
   :host([main-size=medium]) .dso-main-panel,
   :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 624px;
-    min-width: 375px;
-    max-width: 624px;
+    min-inline-size: 375px;
+    max-inline-size: 624px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 624px) {
   :host([main-size=medium]) .dso-main-panel,
   :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 375px;
+    max-inline-size: 100vw;
+    min-inline-size: 375px;
     transition: none;
   }
 }
@@ -793,36 +803,36 @@ button::-moz-focus-inner {
   :host([main-size=large]) .dso-main-panel,
   :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 60%;
-    min-width: 768px;
-    max-width: 1024px;
+    min-inline-size: 768px;
+    max-inline-size: 1024px;
   }
 }
 @media screen and (min-width: 808px) and (max-width: 768px) {
   :host([main-size=large]) .dso-main-panel,
   :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 100vw;
-    max-width: 100vw;
-    min-width: 768px;
+    max-inline-size: 100vw;
+    min-inline-size: 768px;
     transition: none;
   }
 }
 @media screen and (min-width: 808px) {
   :host {
     display: flex;
-    height: 100vh;
+    block-size: 100vh;
     overflow: hidden;
     position: relative;
   }
   :host .dso-main-panel.compact,
   :host .dso-main-panel.expanded {
     flex-basis: unset;
-    min-width: unset;
-    max-width: unset;
-    width: 440px;
+    min-inline-size: unset;
+    max-inline-size: unset;
+    inline-size: 440px;
   }
   :host .dso-main-panel.compact .content,
   :host .dso-main-panel.expanded .content {
-    height: auto;
+    block-size: auto;
     overflow-y: auto;
   }
 }
@@ -840,24 +850,24 @@ button::-moz-focus-inner {
   .filterpanel {
     box-shadow: 2px 0 5px #666;
     margin-inline: 0 auto;
-    max-width: 896px;
-    width: calc(100vw - 40px);
+    max-inline-size: 896px;
+    inline-size: calc(100vw - 40px);
   }
   .filterpanel::before {
     content: "";
     display: block;
     position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 896px;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 896px;
     background-color: rgba(0, 0, 0, 0.5);
   }
 }
 @media screen and (min-width: 808px) and (max-width: 936px) {
   .filterpanel::before {
-    left: auto;
-    width: 40px;
+    inset-inline-start: auto;
+    inline-size: 40px;
   }
 }
 @media screen and (min-width: 808px) {
@@ -868,20 +878,21 @@ button::-moz-focus-inner {
 }
 @media screen and (max-width: 807.99px) {
   .dso-navbar {
-    min-height: 32px;
+    min-block-size: 32px;
   }
   .dso-navbar .dso-navbar-header {
-    float: left;
+    float: inline-start;
   }
   .dso-navbar .dso-navbar-toggle {
     border-radius: 4px;
-    min-width: auto;
-    padding: 5px 0;
+    min-inline-size: auto;
+    padding-block: 5px;
+    padding-inline: 0;
   }
   .dso-navbar .dso-navbar-toggle dso-icon,
   .dso-navbar .dso-navbar-toggle svg.di {
-    margin-left: 8px;
-    margin-right: 8px;
+    margin-inline-start: 8px;
+    margin-inline-end: 8px;
   }
 }
 @media screen and (max-width: 807.99px) and (min-width: 992px) {
@@ -918,7 +929,7 @@ button::-moz-focus-inner {
   .dso-nav > li.dso-active > a,
   .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,
   .dso-nav > li.is-active > button {
-    border-bottom: 4px solid #8b4a6a;
+    border-block-end: 4px solid #8b4a6a;
     font-weight: bold;
   }
   .dso-nav.dso-nav-main > li {
@@ -929,8 +940,9 @@ button::-moz-focus-inner {
     text-decoration: none;
     font-size: 1.25em;
     line-height: 1;
-    margin-top: 8px;
-    padding: 8px 16px 7px;
+    margin-block-start: 8px;
+    padding-block: 8px 7px;
+    padding-inline: 16px;
   }
   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,
   .dso-nav.dso-nav-main > li > button:hover,
@@ -945,8 +957,9 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-sub > li > button {
     text-decoration: none;
     font-size: 1rem;
-    margin-top: 4px;
-    padding: 4px 8px 3px;
+    margin-block-start: 4px;
+    padding-block: 4px 3px;
+    padding-inline: 8px;
   }
   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,
   .dso-nav.dso-nav-sub > li > button:hover,
@@ -962,11 +975,11 @@ button::-moz-focus-inner {
 }
 @media screen and (max-width: 807.99px) {
   .dso-nav {
-    border-bottom: 1px solid #ccc;
+    border-block-end: 1px solid #ccc;
     display: flex;
     gap: 16px;
     margin-block-start: 0;
-    width: calc(100vw - 32px);
+    inline-size: calc(100vw - 32px);
   }
 }
 @media screen and (max-width: 807.99px) {
@@ -974,10 +987,10 @@ button::-moz-focus-inner {
     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;
@@ -1009,11 +1022,12 @@ button::-moz-focus-inner {
   }
   .dso-tertiary.dso-align {
     line-height: calc(1.5em - 1px);
-    padding: 11px 0;
+    padding-block: 11px;
+    padding-inline: 0;
     position: relative;
   }
   .dso-tertiary.dso-truncate {
-    max-width: 100%;
+    max-inline-size: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1023,32 +1037,32 @@ button::-moz-focus-inner {
     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;
   }
   .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;
+    block-size: 24px;
     vertical-align: middle;
-    width: 24px;
-    margin-left: 8px;
+    inline-size: 24px;
+    margin-inline-start: 8px;
   }
   .dso-tertiary dso-icon + span:not(.sr-only),
   .dso-tertiary svg.di + span:not(.sr-only),
   .dso-tertiary span:not(.sr-only) + dso-icon,
   .dso-tertiary span:not(.sr-only) + svg.di {
-    margin-left: 8px;
+    margin-inline-start: 8px;
   }
   .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
   .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
   .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
   .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
   .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
   .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -1058,7 +1072,7 @@ button::-moz-focus-inner {
   .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
   .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .dso-tertiary dso-icon,
   .dso-tertiary svg.di,
@@ -1070,8 +1084,8 @@ button::-moz-focus-inner {
   .filterpanel,
   .overlay {
     margin-inline: 0;
-    max-width: 100vw;
-    top: 0;
-    width: 100vw;
+    max-inline-size: 100vw;
+    inset-block-start: 0;
+    inline-size: 100vw;
   }
 }