survey-react 1.9.103 → 1.9.105

package/defaultV2.css

@@ -1,8 +1,9 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.103
+ * surveyjs - Survey JavaScript library v1.9.105
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
+@charset "UTF-8";
 /* cyrillic-ext */
 @font-face {
   font-family: "Open Sans";
@@ -1115,6 +1116,7 @@ sv-popup {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
   background-position: center;
   background-repeat: no-repeat;
+  background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sv-ranking-item__text {
@@ -1247,6 +1249,9 @@ sv-popup {
 .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
   padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
@@ -1255,14 +1260,14 @@ sv-popup {
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
   left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to {
-  padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
   left: initial;
 }
-.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from {
-  padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
+  padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
+  padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking__container-placeholder {
@@ -1275,17 +1280,14 @@ sv-popup {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
   height: 100%;
 }
 
 .sv-ranking__container {
   flex: 1;
-  max-width: 100%;
 }
 
 .sv-ranking__container--empty {
-  padding: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   text-align: center;
 }
@@ -1652,6 +1654,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element__title .sv-string-viewer {
   white-space: normal;
 }
+.sd-element__title .sv-string-viewer::before {
+  content: "​";
+}
 
 .sd-element__num {
   float: left;
@@ -1774,6 +1779,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--collapsed.sd-element--complex > .sd-element__header--location-top:after {
   display: none;
 }
+.sd-element--collapsed > .sd-element__header--location-top {
+  margin-top: 0;
+}
 .sd-element--collapsed.sd-element--with-frame {
   padding-top: 0;
   padding-bottom: 0;
@@ -1783,9 +1791,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
 }
-.sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
-  margin-top: 0;
-}
 .sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
@@ -1865,7 +1870,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox--above-question {
-  margin-bottom: calc(var(--sd-base-vertical-padding) - var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: var(--sd-base-vertical-padding);
 }
 
 .sd-question__erbox--below-question {
@@ -1892,6 +1897,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__header--location-top {
+  margin-top: calc(-0.25 * var(--sd-base-vertical-padding));
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
@@ -1906,10 +1912,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-element--with-frame > .sd-question__erbox--above-question {
   margin-top: calc(-1 * var(--sd-base-padding));
-  margin-bottom: var(--sd-base-vertical-padding);
-}
-.sd-element--with-frame > .sd-question__header--location-top {
-  margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-element--with-frame > .sd-question__content > .sd-question__header--location--bottom {
   margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -1997,7 +1999,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
   white-space: pre-line;
@@ -2050,7 +2052,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input::placeholder {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2217,11 +2219,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-panel__content {
-  padding-top: var(--sd-base-vertical-padding);
+  padding-top: var(--sd-base-padding);
 }
 
 .sjs_sp_placeholder {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
@@ -2245,6 +2247,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
 
+.sd-signaturepad__canvas,
+.sd-signaturepad__background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
+
 .sd-checkbox__decorator {
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
@@ -2282,13 +2292,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-matrixdynamic__footer {
-  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-action.sd-matrixdynamic__remove-btn {
   opacity: 0.5;
 }
 
+.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
+  width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+}
+
 .sd-matrixdynamic__btn {
   appearance: none;
   background: transparent;
@@ -2332,19 +2347,43 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table {
   width: 100%;
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   white-space: normal;
 }
+.sd-table > thead > tr > th {
+  border-top: 0;
+  border-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+}
+
+.sd-table__cell {
+  border-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  background-clip: padding-box;
+}
+
+.sd-table__row:first-of-type > .sd-table__cell {
+  border-top: 0;
+}
+
+.sd-table__row:last-of-type > .sd-table__cell {
+  border-bottom: 0;
+}
 
 .sd-table--align-top .sd-table__cell {
   vertical-align: top;
 }
 
+.sd-table--no-header {
+  padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-table--alternate-rows {
-  margin: 0 8px;
+  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(100% - 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-table--alternate-rows .sd-table__cell:first-of-type {
+.sd-table--alternate-rows .sd-table__cell:not(.sd-table__cell--header):first-of-type {
   padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-table--alternate-rows .sd-table__cell:last-of-type {
@@ -2354,6 +2393,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-matrix__text--checked,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+}
 .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
 .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
@@ -2375,12 +2418,16 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-weight: normal;
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
 }
+.sd-table__cell:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
+  min-width: calc(14 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 
 .sd-table__cell--error {
+  border: none;
   padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-table__cell--error .sd-question__erbox--outside-question {
@@ -2419,14 +2466,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-table__cell--header span {
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-table__cell--header {
   font-weight: 600;
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   vertical-align: top;
-  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-table__cell--header:not(.sd-table__cell--empty) {
   min-width: calc(14 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2437,6 +2485,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(14 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-matrixdropdown .sd-table__cell--header.sd-table__cell--action {
+  min-width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) {
   min-width: calc(14 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(14 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2451,7 +2504,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-table__cell--detail-panel {
-  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
 }
 
 .sd-table__cell--actions .sv-action-bar,
@@ -2460,24 +2515,26 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical) {
-  width: 0;
+  width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical):not(.sd-table__cell--drag):first-of-type {
+  padding-left: 0;
 }
 
 .sd-table__cell--detail-button {
   border: none;
   background: transparent;
   border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-table__cell--detail-button svg {
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  display: block;
+  width: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-table__cell--detail-button:hover {
-  background: var(--sjs-special-green-light, var(--green-light, rgba(25, 179, 148, 0.1)));
+  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
 .sd-table__cell--detail-button:hover svg {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -2492,9 +2549,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table__cell--row-text {
   font-weight: 600;
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   text-align: left;
   min-width: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-matrixdynamic__content .sd-table__question-wrapper {
@@ -2514,7 +2572,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr > td:first-of-type {
   position: sticky;
-  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+  background-color: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   z-index: 12;
 }
 .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
@@ -2543,6 +2601,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   overflow-x: auto;
 }
 
+.sd-question--table.sd-element--nested {
+  overflow-x: visible;
+}
+
 .sd-table-wrapper {
   display: flex;
   margin: 0 calc(-1 * var(--sd-base-padding));
@@ -2575,10 +2637,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   left: 0;
 }
 .sd-question--table > .sd-question__content {
-  padding-top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   min-width: min-content;
 }
-.sd-question--table:not(.sd-element--with-frame) {
+.sd-question--table.sd-element--nested > .sd-question__header--location-top {
+  margin-top: calc(-0.25 * var(--sd-base-vertical-padding));
+}
+.sd-question--table.sd-element--nested > .sd-question__erbox--above-question {
+  margin-bottom: var(--sd-base-vertical-padding);
+}
+.sd-question--table.sd-element--nested > .sd-question__content {
+  min-width: auto;
+  overflow-x: auto;
+}
+.sd-question--table.sd-element--nested > .sd-question__content, .sd-question--table:not(.sd-element--with-frame):not(.sd-element--nested) {
   padding-right: var(--sd-base-padding);
   margin-right: calc(-1 * var(--sd-base-padding));
   padding-left: var(--sd-base-padding);
@@ -2602,6 +2674,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin: auto;
 }
 
+.sd-table.sd-matrixdynamic {
+  table-layout: auto;
+}
+
 .sd-page {
   position: relative;
   display: flex;
@@ -2676,7 +2752,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-page__row.sd-row--multiple {
-  padding: var(--sd-base-vertical-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
+  padding: var(--sd-base-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
   margin-left: 0;
   width: 100%;
 }
@@ -2834,7 +2910,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-item__control:focus + .sd-item__decorator {
   box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   outline: none;
 }
 
@@ -3322,6 +3398,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  font-weight: inherit;
 }
 
 .sv-ranking-item--error .sv-ranking-item__index {
@@ -3346,6 +3423,34 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
+.sv-dragdrop-movedown {
+  transform: translate(0, 0);
+  animation: svdragdropmovedown 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmovedown {
+  0% {
+    transform: translate(0, -50px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+.sv-dragdrop-moveup {
+  transform: translate(0, 0);
+  animation: svdragdropmoveup 0.1s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes svdragdropmoveup {
+  0% {
+    transform: translate(0, 50px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
 .sv-dropdown_select-wrapper {
   position: relative;
 }
@@ -3400,6 +3505,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown_clean-button {
   display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin: auto 0;
 }
@@ -3416,9 +3523,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-inline-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-dropdown_chevron-button-svg,
 .sd-dropdown_clean-button-svg {
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-input.sd-dropdown:focus-within {
@@ -3453,12 +3561,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__filter-string-input::placeholder {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sd-dropdown__filter-string-input::placeholder {
-  font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   max-width: 100%;
@@ -3466,12 +3572,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   appearance: none;
 }
 
 .sd-dropdown__hint-prefix {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .sd-dropdown__hint-prefix span {
   white-space: pre;
@@ -3479,12 +3584,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown__hint-suffix {
   display: flex;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 .sd-dropdown__hint-suffix span {
   white-space: pre;
 }
 
+.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sd-list__item-body {
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+}
+
 [dir=rtl] .sd-dropdown,
 [style*="direction:rtl"] .sd-dropdown,
 [style*="direction: rtl"] .sd-dropdown {
@@ -3499,8 +3609,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tagbox_clean-button {
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  padding: calc(0.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: auto 0;
 }
 
@@ -3541,10 +3651,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tagbox-item_clean-button-svg {
-  display: flex;
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  display: block;
+  padding: calc(0.25 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  width: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-tagbox-item_clean-button-svg:hover {
@@ -3664,8 +3774,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   position: absolute;
   top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   border-radius: 100%;
@@ -3674,8 +3782,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__check-icon {
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  display: block;
+  width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -3773,6 +3882,113 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: initial;
 }
 
+.sd-html h1 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-xx-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-xx-large-lineHeight, 64px);
+  text-indent: var(--sjs-article-font-xx-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-xx-large-textCase, "none");
+}
+.sd-html h2 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-x-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-x-large-lineHeight, 56px);
+  text-indent: var(--sjs-article-font-x-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-x-large-textCase, "none");
+}
+.sd-html h3 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-large-lineHeight, 40px);
+  text-indent: var(--sjs-article-font-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-large-textCase, "none");
+}
+.sd-html h4 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
+  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-medium-letterSpacing, 0);
+  line-height: var(--sjs-article-font-medium-lineHeight, 32px);
+  text-indent: var(--sjs-article-font-medium-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-medium-textCase, "none");
+}
+.sd-html h5,
+.sd-html h6 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-html span,
+.sd-html div,
+.sd-html p {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-default-fontWeight, 400);
+  font-style: var(--sjs-article-font-default-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
+  line-height: var(--sjs-article-font-default-lineHeight, 28px);
+  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-default-textCase, "none");
+}
+.sd-html a {
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-html button {
+  display: flex;
+  align-items: center;
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  vertical-align: baseline;
+  text-align: center;
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  border: none;
+  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  cursor: pointer;
+  user-select: none;
+  outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
+}
+.sd-html button:hover {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-html button:focus {
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-html button span {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  font-weight: 600;
+  font-style: normal;
+  font-family: var(--font-family, var(--font-family));
+  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+}
+
 .sd-expression {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(1 * var(--sjs-font-size, 16px));
@@ -3921,7 +4137,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
   padding-bottom: 0;
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: var(--sd-base-vertical-padding);
 }
 .sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header:after {
   display: none;
@@ -3930,10 +4146,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
-.sd-question__content:first-child > .sd-paneldynamic > .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
-  padding-top: var(--sd-base-vertical-padding);
-}
-
 .sd-paneldynamic__separator {
   display: block;
   position: absolute;
@@ -4085,7 +4297,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-family: var(--font-family, var(--font-family));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -4094,7 +4306,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tab-item.sd-tab-item--pressed {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -4205,7 +4417,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-align: center;
   word-break: break-word;
   white-space: normal;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
@@ -4241,14 +4453,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-file__clean-btn {
   z-index: 2;
-  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  inset-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-file__clean-btn span:first-child {
   display: none;
 }
 
 .sd-file__choose-btn--icon {
-  right: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  inset-inline-end: calc((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))))) + (5 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-file__list {
@@ -4735,8 +4947,8 @@ svg.sd-action--icon {
 }
 .sd-context-btn svg {
   display: block;
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 .sd-context-btn use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4762,8 +4974,111 @@ svg.sd-action--icon {
   text-align: center;
   height: auto;
 }
+.sd-completedpage h1 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-xx-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-xx-large-lineHeight, 64px);
+  text-indent: var(--sjs-article-font-xx-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-xx-large-textCase, "none");
+}
+.sd-completedpage h2 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-x-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-x-large-lineHeight, 56px);
+  text-indent: var(--sjs-article-font-x-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-x-large-textCase, "none");
+}
 .sd-completedpage h3 {
-  font-size: calc(1.5 * var(--sjs-font-size, 16px));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-large-fontWeight, 700);
+  font-style: var(--sjs-article-font-large-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-large-letterSpacing, 0);
+  line-height: var(--sjs-article-font-large-lineHeight, 40px);
+  text-indent: var(--sjs-article-font-large-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-large-textCase, "none");
+}
+.sd-completedpage h4 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
+  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-medium-letterSpacing, 0);
+  line-height: var(--sjs-article-font-medium-lineHeight, 32px);
+  text-indent: var(--sjs-article-font-medium-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-medium-textCase, "none");
+}
+.sd-completedpage h5,
+.sd-completedpage h6 {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+.sd-completedpage span,
+.sd-completedpage div,
+.sd-completedpage p {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
+  font-family: var(--font-family);
+  font-weight: var(--sjs-article-font-default-fontWeight, 400);
+  font-style: var(--sjs-article-font-default-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
+  line-height: var(--sjs-article-font-default-lineHeight, 28px);
+  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-default-textCase, "none");
+}
+.sd-completedpage a {
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-completedpage button {
+  display: flex;
+  align-items: center;
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  vertical-align: baseline;
+  text-align: center;
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  border: none;
+  border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  cursor: pointer;
+  user-select: none;
+  outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
+}
+.sd-completedpage button:hover {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-completedpage button:focus {
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-completedpage button span {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  font-weight: 600;
+  font-style: normal;
+  font-family: var(--font-family, var(--font-family));
+  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-completedpage:before,
@@ -5030,13 +5345,21 @@ sv-components-container,
   align-items: center;
   justify-content: center;
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   user-select: none;
   pointer-events: none;
   width: 100%;
   height: 100%;
 }
 
+.sjs_sp_canvas,
+.sjs_sp__background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
+
 .sd-root-modern {
   --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -5298,12 +5621,13 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
-.sv-popup.sv-popup--dropdown .sv-popup__shadow {
+.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sv-popup__shadow {
   box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
-.sv-popup.sv-popup--dropdown .sv-popup__body-content {
+.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  height: 100%;
 }
 
 .sv-popup.sv-popup--modal .sv-popup__body-content {