survey-react 1.9.102 → 1.9.104

package/defaultV2.css

@@ -1,8 +1,9 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.102
+ * surveyjs - Survey JavaScript library v1.9.104
  * 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";
@@ -1652,6 +1653,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;
@@ -2050,7 +2054,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;
@@ -2158,12 +2162,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
-.sd-panel.sd-panel--as-page {
-  margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-.sd-panel.sd-panel--as-page > .sd-panel__content {
-  padding-top: 0;
-}
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
   padding-top: 0;
   padding-bottom: 0;
@@ -2194,7 +2192,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   position: static;
   line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+}
+.sd-panel.sd-panel--as-page .sd-panel__header + .sd-panel__content {
+  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel.sd-panel--as-page > .sd-panel__content {
+  padding-top: 0;
 }
 
 .sd-row ~ .sd-row .sd-panel--as-page {
@@ -2282,7 +2286,7 @@ 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 {
@@ -2332,19 +2336,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 +2382,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 +2407,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 +2455,14 @@ 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;
   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 +2473,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 +2492,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,7 +2503,10 @@ 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 {
@@ -2477,7 +2523,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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));
@@ -2494,7 +2540,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-weight: 600;
   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 +2560,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,
@@ -2575,7 +2621,7 @@ 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) {
@@ -2602,15 +2648,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin: auto;
 }
 
-.sd-body--responsive .sd-page {
-  padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-page-vertical-padding) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-.sd-body--responsive .sd-page.sd-page__empty-header {
-  padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
-.sd-root-modern--mobile .sd-page {
-  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sd-table.sd-matrixdynamic {
+  table-layout: auto;
 }
 
 .sd-page {
@@ -2618,11 +2657,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: 0 calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
   box-sizing: border-box;
 }
 
+.sd-root-modern--mobile .sd-page {
+  padding: 0;
+}
+
 .sd-page .sd-page__title {
   font-family: var(--sjs-font-pagetitle-family, var(--font-family));
   font-weight: var(--sjs-font-pagetitle-weight, 700);
@@ -2631,6 +2674,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: static;
   line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  margin-top: 0;
 }
 
 .sd-page .sd-page__description {
@@ -2640,7 +2684,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   position: static;
   line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
-  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
 }
 
 .sd-row {
@@ -2651,14 +2695,22 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: var(--sd-base-vertical-padding);
 }
 
+.sd-row.sd-page__row {
+  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-page__row.sd-row--compact {
+  margin-top: var(--sd-base-vertical-padding);
+}
+
 .sd-row:first-of-type {
   margin-top: 0;
 }
 
-.sd-row.sd-page__row {
+.sd-page__title ~ .sd-row.sd-page__row {
   margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-row.sd-page__row.sd-row--compact {
+.sd-page__title ~ .sd-row.sd-page__row.sd-row--compact {
   margin-top: var(--sd-base-vertical-padding);
 }
 
@@ -2832,7 +2884,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;
 }
 
@@ -3040,7 +3092,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-rating__item {
   position: relative;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   white-space: nowrap;
@@ -3398,6 +3450,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;
 }
@@ -3414,9 +3468,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 {
@@ -3451,12 +3506,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%;
@@ -3464,12 +3517,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;
@@ -3477,7 +3529,7 @@ 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;
@@ -4474,9 +4526,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-sizing: border-box;
 }
 .sd-body.sd-body--static {
-  max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-width: calc(90 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin-left: auto;
   margin-right: auto;
+  padding-top: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-body.sd-body--static .sd-body__timer,
 .sd-body.sd-body--static .sd-body__navigation,
@@ -4484,15 +4538,33 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-left: 0;
   margin-right: 0;
 }
+.sd-body.sd-body--static .sd-body__navigation {
+  padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-body.sd-body--static .sd-body__navigation.sd-action-bar {
+  padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 .sd-body.sd-body--responsive {
   max-width: initial;
+  padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-sizing: border-box;
+}
+.sd-body.sd-body--responsive .sd-page {
+  padding: 0;
+}
+.sd-body.sd-body--responsive .sd-page.sd-page__empty-header {
+  padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-body.sd-body--responsive .sd-body__timer,
 .sd-body.sd-body--responsive .sd-body__navigation {
-  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-page-vertical-padding);
+  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+}
+.sd-body.sd-body--responsive .sd-body__navigation {
+  padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-body.sd-body--responsive.sd-body--with-timer {
-  max-width: calc(100% + var(--sd-timer-size) * ( -1 - 64 / 144 ) + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-width: calc(100% + var(--sd-timer-size) * (-1 - 64 / 144) + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin-left: auto;
   margin-right: auto;
 }
@@ -4502,6 +4574,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-left: 0;
   margin-right: 0;
 }
+.sd-root-modern--mobile .sd-body.sd-body--responsive, .sd-root-modern--mobile .sd-body.sd-body--static {
+  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-root-modern--mobile .sd-body.sd-body--responsive .sd-body__navigation, .sd-root-modern--mobile .sd-body.sd-body--static .sd-body__navigation {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
 
 .sd-body__navigation.sd-action-bar {
   box-sizing: border-box;
@@ -5241,10 +5321,6 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
-.sd-container-modern {
-  margin-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
 .sd-root-modern--mobile {
   --sd-timer-size: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -5272,12 +5348,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 {