survey-react 1.9.105 → 1.9.107

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.105
+ * surveyjs - Survey JavaScript library v1.9.107
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1086,6 +1086,13 @@ sv-popup {
   height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sv-ranking-item--disabled.sv-ranking-item--disabled {
+  cursor: initial;
+}
+.sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
+  visibility: hidden;
+}
+
 .sv-ranking-item__icon.sv-ranking-item__icon {
   visibility: hidden;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -2043,6 +2050,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   outline: none;
 }
 
+input.sd-input:disabled:not(.sd-input--disabled),
+textarea.sd-input:disabled:not(.sd-input--disabled) {
+  opacity: 1;
+}
+
 .sd-input--disabled {
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   -webkit-user-select: none;
@@ -2059,8 +2071,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   user-select: none;
 }
 
-.sd-input--disabled,
-.sd-input--disabled::placeholder {
+.sd-input.sd-input--disabled,
+.sd-input.sd-input--disabled::placeholder {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
@@ -2362,6 +2374,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-clip: padding-box;
 }
 
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table__cell:not(.sd-table__cell--actions):not(.sd-table__cell--action):not(.sd-table__cell--empty.sd-table__cell--error) {
+  width: 10000px;
+}
+
 .sd-table__row:first-of-type > .sd-table__cell {
   border-top: 0;
 }
@@ -2378,39 +2394,64 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-table--alternate-rows {
+.sd-panel__content .sd-table--no-header {
+  padding-top: 0;
+}
+.sd-panel__content .sd-question--table .sd-question__content {
+  padding-top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content {
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table--no-header {
+  padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows {
   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:not(.sd-table__cell--header):first-of-type {
+.sd-root-modern:not(.sd-root-modern--mobile) .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 {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:last-of-type {
   padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
+.sd-root-modern:not(.sd-root-modern--mobile) .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 {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-matrix__text--checked,
+.sd-root-modern:not(.sd-root-modern--mobile) .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 {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
+.sd-root-modern:not(.sd-root-modern--mobile) .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));
 }
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error) .sd-item__decorator {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error) .sd-item__decorator {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
@@ -2423,7 +2464,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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)));
+  min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-table__cell--error {
@@ -2477,30 +2518,26 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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)));
+  min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-matrixdropdown .sd-table__cell--header.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)));
+  min-width: calc(15 * 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)));
+  min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * 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)));
+  min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--dropdown, .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--rating {
   min-width: calc(22 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(22 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--boolean {
   min-width: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  width: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-table__cell--detail-panel {
@@ -2519,6 +2556,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-table__cell--actions:not(.sd-table__cell--vertical):not(.sd-table__cell--drag):first-of-type {
   padding-left: 0;
+  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-table__cell--detail-button {
@@ -2640,9 +2679,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   min-width: min-content;
 }
-.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);
 }
@@ -2650,6 +2686,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-width: auto;
   overflow-x: auto;
 }
+.sd-question--table.sd-element--nested > .sd-question__content {
+  padding-bottom: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 .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));
@@ -2662,10 +2704,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   overflow-x: scroll;
 }
 
-.sd-matrixdropdown.sd-table {
-  table-layout: fixed;
-}
-
 .sd-table__cell--detail-panel .sd-panel__content {
   padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -2741,30 +2779,37 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-row--multiple {
-  row-gap: var(--sd-base-vertical-padding);
+  row-gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
 }
 .sd-row--multiple > div {
   box-sizing: border-box;
+  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  display: flex;
+  align-items: stretch;
+}
+
+.sd-panel .sd-row--multiple {
+  row-gap: var(--sd-base-vertical-padding);
+}
+.sd-panel .sd-row--multiple > div {
   padding-left: var(--sd-base-padding);
 }
 
-.sd-page__row.sd-row--multiple {
-  padding: var(--sd-base-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
-  margin-left: 0;
-  width: 100%;
+.sd-row--multiple.sd-row--compact > div {
+  padding-left: var(--sd-base-padding);
 }
-.sd-page__row.sd-row--multiple:not(.sd-row--compact) {
-  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(1 * var(--sjs-corner-radius, 4px));
+
+.sd-page__row.sd-row--multiple {
+  margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(100% + 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-page__row.sd-row--multiple.sd-row--compact {
   padding: 0;
-  width: calc(100% + var(--sd-base-padding));
   margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + var(--sd-base-padding));
 }
 
 .sd-row__panel {
@@ -3883,7 +3928,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-html h1 {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-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);
@@ -3896,7 +3941,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-transform: var(--sjs-article-font-xx-large-textCase, "none");
 }
 .sd-html h2 {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-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);
@@ -3909,7 +3954,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-transform: var(--sjs-article-font-x-large-textCase, "none");
 }
 .sd-html h3 {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-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);
@@ -3921,8 +3966,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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));
+.sd-html h4,
+.sd-html h5,
+.sd-html h6 {
+  color: var(--sjs-font-questiontitle-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);
@@ -3934,14 +3981,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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 td,
 .sd-html span,
 .sd-html div,
 .sd-html p {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-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);
@@ -4027,6 +4071,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   }
 }
 
+.sd-body__progress--top {
+  margin-bottom: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.sd-body__progress--bottom .sd-progress__text {
+  margin-top: calc(-3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
@@ -4422,6 +4477,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
+.sd-root-modern--mobile .sd-file__drag-area-placeholder {
+  padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-file__choose-btn--text {
   display: block;
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4430,6 +4489,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   cursor: pointer;
 }
 
+.sd-file__wrapper {
+  width: max-content;
+}
+
 .sd-question--answered .sd-file__drag-area-placeholder {
   display: none;
 }
@@ -4681,7 +4744,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
 }
 .sd-body .sd-body__page {
-  min-width: calc(300px + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: 300px;
 }
 .sd-body .sd-body__timer {
   padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -4752,16 +4815,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-body__progress {
-  margin-bottom: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
-.sd-body__progress--top {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
 .sd-body--empty {
   min-height: 400px;
   text-align: center;
@@ -4769,6 +4822,127 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-sizing: border-box;
 }
 
+.sd-body--empty h1,
+.sd-body--loading h1 {
+  color: var(--sjs-font-questiontitle-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-body--empty h2,
+.sd-body--loading h2 {
+  color: var(--sjs-font-questiontitle-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-body--empty h3,
+.sd-body--loading h3 {
+  color: var(--sjs-font-questiontitle-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-body--empty h4,
+.sd-body--empty h5,
+.sd-body--empty h6,
+.sd-body--loading h4,
+.sd-body--loading h5,
+.sd-body--loading h6 {
+  color: var(--sjs-font-questiontitle-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-body--empty td,
+.sd-body--empty span,
+.sd-body--empty div,
+.sd-body--empty p,
+.sd-body--loading td,
+.sd-body--loading span,
+.sd-body--loading div,
+.sd-body--loading p {
+  color: var(--sjs-font-questiontitle-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-body--empty a,
+.sd-body--loading a {
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-body--empty button,
+.sd-body--loading 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-body--empty button:hover,
+.sd-body--loading button:hover {
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
+}
+.sd-body--empty button:focus,
+.sd-body--loading button:focus {
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-body--empty button span,
+.sd-body--loading 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-root_background-image {
   background-position-x: center;
   position: absolute;
@@ -4789,8 +4963,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: 100%;
 }
 
-.sd-multipletext__cell:not(:last-child) {
-  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sd-multipletext__cell:not(:first-of-type) {
+  padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-multipletext__item-container.sd-input:focus-within {
@@ -4818,6 +4992,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-multipletext__item-title {
+  font-size: 0;
+  line-height: 0;
+}
+.sd-multipletext__item-title span {
+  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-multipletext__item-title {
   height: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 3);
   max-width: 30%;
@@ -4847,8 +5030,25 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: inline-block;
 }
 
-.sd-multipletext tr:not(:last-child) .sd-multipletext__cell {
-  padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sd-multipletext__cell {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-multipletext__cell--error-bottom,
+.sd-multipletext__row:first-of-type .sd-multipletext__cell {
+  padding-top: 0;
+}
+
+.sd-multipletext__cell--error-top,
+.sd-multipletext__row:last-of-type .sd-multipletext__cell {
+  padding-bottom: 0;
+}
+
+.sd-multipletext__cell--error .sd-question__erbox--outside-question {
+  margin: 0;
 }
 
 .sd-multipletext .sd-input .sd-input {
@@ -4974,8 +5174,10 @@ svg.sd-action--icon {
   text-align: center;
   height: auto;
 }
-.sd-completedpage h1 {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+
+.sd-completedpage h1,
+.sd-completed-before-page h1 {
+  color: var(--sjs-font-questiontitle-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);
@@ -4987,8 +5189,9 @@ svg.sd-action--icon {
   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));
+.sd-completedpage h2,
+.sd-completed-before-page h2 {
+  color: var(--sjs-font-questiontitle-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);
@@ -5000,8 +5203,9 @@ svg.sd-action--icon {
   text-indent: var(--sjs-article-font-x-large-paragraphIndent, 0px);
   text-transform: var(--sjs-article-font-x-large-textCase, "none");
 }
-.sd-completedpage h3 {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+.sd-completedpage h3,
+.sd-completed-before-page h3 {
+  color: var(--sjs-font-questiontitle-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);
@@ -5013,8 +5217,13 @@ svg.sd-action--icon {
   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));
+.sd-completedpage h4,
+.sd-completedpage h5,
+.sd-completedpage h6,
+.sd-completed-before-page h4,
+.sd-completed-before-page h5,
+.sd-completed-before-page h6 {
+  color: var(--sjs-font-questiontitle-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);
@@ -5026,14 +5235,15 @@ svg.sd-action--icon {
   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 td,
 .sd-completedpage span,
 .sd-completedpage div,
-.sd-completedpage p {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+.sd-completedpage p,
+.sd-completed-before-page td,
+.sd-completed-before-page span,
+.sd-completed-before-page div,
+.sd-completed-before-page p {
+  color: var(--sjs-font-questiontitle-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);
@@ -5045,10 +5255,12 @@ svg.sd-action--icon {
   text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
   text-transform: var(--sjs-article-font-default-textCase, "none");
 }
-.sd-completedpage a {
+.sd-completedpage a,
+.sd-completed-before-page a {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-completedpage button {
+.sd-completedpage button,
+.sd-completed-before-page 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)));
@@ -5062,13 +5274,16 @@ svg.sd-action--icon {
   user-select: none;
   outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
 }
-.sd-completedpage button:hover {
+.sd-completedpage button:hover,
+.sd-completed-before-page button:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
-.sd-completedpage button:focus {
+.sd-completedpage button:focus,
+.sd-completed-before-page button:focus {
   box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-completedpage button span {
+.sd-completedpage button span,
+.sd-completed-before-page button span {
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -5302,6 +5517,26 @@ svg.sd-action--icon {
   font-size: calc(0.75 * var(--sjs-font-size, 16px));
 }
 
+@keyframes rotationAnimation {
+  from {
+    rotate: 0deg;
+  }
+  to {
+    rotate: 360deg;
+  }
+}
+.sd-loading-indicator {
+  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-loading-indicator .sv-svg-icon {
+  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  animation-name: rotationAnimation;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: 1s;
+}
+
 sv-components-container,
 .sd-components-container {
   display: flex;
@@ -5395,16 +5630,17 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell {
   display: block;
 }
-.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell:not(:last-child) {
-  padding-right: 0;
-  padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell:not(:first-of-type) {
+  padding-left: 0;
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell :not(:last-of-type) {
+  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-container {
   flex-direction: column;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
-  font-size: calc(0.75 * var(--sjs-font-size, 16px));
-  line-height: calc(1 * var(--sjs-font-size, 16px));
   height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-right: 0;
   border-right: none;
@@ -5413,6 +5649,10 @@ sv-components-container,
   width: 100%;
   max-width: none;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title span {
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
+}
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item {
   width: 100%;
 }
@@ -5594,6 +5834,35 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sd-root-modern.sd-root-modern--full-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: static;
+}
+.sd-root-modern.sd-root-modern--full-container * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+}
+.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: transparent;
+}
+.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 32px;
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
+}
+.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 .sd-root-modern--mobile {
   --sd-timer-size: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }