survey-react 1.9.114 → 1.9.116

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.114
+ * surveyjs - Survey JavaScript library v1.9.116
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -810,8 +810,8 @@ sv-popup {
 }
 .sv-popup--dropdown-overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: var(--sjs-font-size, 16px);
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  font-size: max(16px, var(--sjs-font-size, 16px));
+  line-height: max(24px, 1.5 * (var(--sjs-font-size, 16px)));
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -1210,7 +1210,7 @@ sv-brand-info, .sv-brand-info {
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   border-radius: 100%;
   border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1222,8 +1222,8 @@ sv-brand-info, .sv-brand-info {
 }
 .sv-ranking-item__index.sv-ranking-item__index svg {
   fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
 }
 
 .sv-ranking-item__text {
@@ -1232,8 +1232,8 @@ sv-brand-info, .sv-brand-info {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -1979,8 +1979,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   justify-content: center;
   min-height: calc(24 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   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 {
@@ -2116,11 +2116,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: 100%;
   box-sizing: border-box;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
@@ -2176,6 +2176,16 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   position: relative;
 }
 
+.sd-text__character-counter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sd-text__character-counter:focus-within {
+  padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-remaining-character-counter {
   display: none;
   flex-direction: row;
@@ -2208,7 +2218,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-input[type=range] {
   box-sizing: content-box;
   width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-input[type=range]::-webkit-slider-runnable-track {
@@ -2329,8 +2339,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sjs_sp_placeholder {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sjs_sp_container {
@@ -2352,7 +2362,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   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;
@@ -2405,8 +2414,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
-  width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-matrixdynamic__btn {
@@ -2559,8 +2568,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-table__cell {
   font-weight: normal;
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
@@ -2609,8 +2618,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-table__cell--header span {
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   font-weight: var(--sjs-font-questiontitle-weight, 600);
 }
 
@@ -2671,8 +2680,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-table__cell--detail-button svg {
   display: block;
-  width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-table__cell--detail-button:hover {
@@ -3056,7 +3065,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
-  margin-top: calc((1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
+  margin-top: calc((1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -3082,8 +3091,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-style: normal;
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
   word-break: break-word;
@@ -3219,6 +3228,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-matrix__label {
   display: flex;
+  position: relative;
   justify-content: center;
 }
 
@@ -3526,8 +3536,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   display: inline-block;
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
@@ -3650,15 +3660,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown__value {
   width: 100%;
-  min-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  min-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   position: relative;
 }
 
@@ -3684,8 +3694,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown_chevron-button-svg,
 .sd-dropdown_clean-button-svg {
-  width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-input.sd-dropdown:focus-within {
@@ -3708,8 +3718,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3756,8 +3766,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sv-dropdown-popup .sd-list__item-body {
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3777,8 +3787,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tagbox_clean-button {
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  padding: calc(0.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  padding: calc(0.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   margin: auto 0;
 }
 
@@ -3820,9 +3830,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-tagbox-item_clean-button-svg {
   display: block;
-  padding: calc(0.25 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  padding: calc(0.25 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
 }
 
 .sd-tagbox-item_clean-button-svg:hover {
@@ -3887,14 +3897,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   height: 100%;
   display: flex;
   align-items: center;
 }
 
 .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   height: 100%;
   display: flex;
   align-items: center;
@@ -3951,8 +3961,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-imagepicker__check-icon {
   display: block;
-  width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -3985,8 +3995,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
@@ -4145,10 +4155,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
+  border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
   user-select: none;
   outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  font-weight: 600;
+  font-style: normal;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 .sd-html button:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
@@ -4161,12 +4177,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
 .sd-expression {
@@ -4242,9 +4252,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -4495,8 +4505,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
   cursor: pointer;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   overflow-x: hidden;
   white-space: nowrap;
@@ -4628,8 +4638,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   word-break: break-word;
   white-space: normal;
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-root-modern--mobile .sd-file__decorator {
@@ -4681,7 +4691,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
-  inset-inline-end: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  inset-inline-end: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-file__list {
@@ -4700,9 +4710,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__preview {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-direction: column;
   min-height: 100%;
+  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
 .sd-file__preview .sd-file__default-image {
@@ -4732,6 +4743,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: normal;
   word-break: break-all;
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-width: 100%;
+  max-width: 100%;
   overflow: hidden;
   max-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-overflow: ellipsis;
@@ -4752,23 +4765,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__image-wrapper {
   position: relative;
   text-align: center;
-  min-width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 .sd-file__image-wrapper img:not(.sd-file__default-image) {
   display: block;
+  max-width: 100%;
+  max-height: 100%;
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   object-fit: contain;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
-.sd-file--single img:hover + .sd-file__remove-file-button {
-  display: none;
+.sd-file__image-wrapper--default-image {
+  background: transparent;
 }
 
-.sd-file--mobile:first-child .sd-file__list {
-  height: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.sd-file--single img:hover + .sd-file__remove-file-button {
+  display: none;
 }
 
 .sd-file--single-image {
@@ -4786,6 +4805,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   max-height: 100%;
   width: 100%;
 }
+.sd-file--single-image .sd-file__image-wrapper {
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
 .sd-file--single-image .sd-file__image-wrapper {
   min-height: 100%;
   min-width: 100%;
@@ -4793,7 +4815,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file--single-image .sd-file__image-wrapper img {
   width: 100%;
   height: 100%;
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
 .sd-file--single-image .sd-file__sign {
   position: absolute;
@@ -4804,10 +4825,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file--single-image .sd-file__sign a {
   color: transparent;
   width: 100%;
+  min-width: 100%;
+  max-width: 100%;
   height: 100%;
   outline: none;
 }
 
+.sd-file__image-wrapper.sd-file__image-wrapper--default-image {
+  background: transparent;
+}
+
 .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -4854,7 +4881,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file__video-container {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
   position: absolute;
   top: 0;
   left: 0;
@@ -5058,6 +5085,20 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-sizing: border-box;
 }
 
+.sd-body--empty,
+.sd-body--loading {
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
+  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-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 h1,
 .sd-body--loading h1 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -5152,10 +5193,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
+  border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
   user-select: none;
   outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  font-weight: 600;
+  font-style: normal;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 .sd-body--empty button:hover,
 .sd-body--loading button:hover {
@@ -5171,12 +5218,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
 .sd-root_background-image {
@@ -5233,8 +5274,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   line-height: 0;
 }
 .sd-multipletext__item-title span {
-  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-multipletext__item-title {
@@ -5262,6 +5303,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
 }
 
+.sd-multipletext-item__character-counter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sd-question__content:focus-within .sd-multipletext-item__character-counter {
+  padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-multipletext__cell {
   padding-left: 0;
   padding-right: 0;
@@ -5338,6 +5389,10 @@ svg.sd-action--icon {
   opacity: 0.25;
   pointer-events: none;
 }
+.sd-action:disabled use,
+.sd-action--disabled use {
+  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
 
 .sd-action:not(.sd-action--pressed):hover,
 .sd-action:not(.sd-action--pressed):focus {
@@ -5395,8 +5450,8 @@ svg.sd-action--icon {
 }
 .sd-context-btn svg {
   display: block;
-  width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
 }
 .sd-context-btn use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -5415,14 +5470,26 @@ svg.sd-action--icon {
   opacity: 0.25;
 }
 
-.sd-completedpage {
+.sd-completedpage,
+.sd-completed-before-page {
+  align-items: center;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
   height: auto;
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
+  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-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 h1,
 .sd-completed-before-page h1 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -5517,10 +5584,16 @@ svg.sd-action--icon {
   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))));
+  border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
   user-select: none;
   outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  font-weight: 600;
+  font-style: normal;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 .sd-completedpage button:hover,
 .sd-completed-before-page button:hover {
@@ -5536,12 +5609,6 @@ svg.sd-action--icon {
   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(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
 .sd-completedpage:before,
@@ -5951,6 +6018,7 @@ sv-components-container,
 
 .sjs_sp_container {
   position: relative;
+  max-width: 100%;
 }
 
 .sjs_sp_controls {
@@ -5979,12 +6047,20 @@ sv-components-container,
   height: 100%;
 }
 
-.sjs_sp_canvas,
+.sjs_sp_canvas {
+  position: relative;
+  max-width: 100%;
+  display: block;
+}
+
 .sjs_sp__background-image {
   position: absolute;
   top: 0;
   left: 0;
   object-fit: cover;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .sd-root-modern {
@@ -5997,6 +6073,7 @@ sv-components-container,
   --sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-base-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-page-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  --sjs-mobile-font-editorfont-size: Max(16px, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
 }
 
 .sd-root-modern.sd-root-modern--mobile .sd-element__num {
@@ -6044,15 +6121,34 @@ sv-components-container,
   display: none;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table tr {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-matrix__table .sd-table__row {
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr {
-  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+.sd-root-modern.sd-root-modern--mobile .sd-table__row {
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__row--expanded .sd-table__cell-action--show-detail-mobile {
+  display: none;
 }
-.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr::after {
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) .sd-table__row {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) .sd-table__row.sd-table__row--has-end-actions {
+  padding-bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions) {
+  padding-bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions):not(:last-of-type) {
+  padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions):not(:last-of-type)::after {
+  bottom: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--expanded)::after {
   z-index: 12;
   content: " ";
   display: block;
@@ -6060,20 +6156,32 @@ sv-components-container,
   height: 1px;
   background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   z-index: 12;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--show-detail-mobile,
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--remove-row {
+  margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-root-modern.sd-root-modern--mobile .sd-matrix__label {
   justify-content: start;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
+  border-top: none;
+  border-bottom: none;
   display: block;
   padding-top: 0;
   padding-bottom: 0;
   text-align: left;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error {
+  margin-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error.sd-table__cell--error-bottom .sd-question__erbox {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell:first-of-type,
@@ -6081,27 +6189,46 @@ sv-components-container,
   margin-top: 0;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell::before {
-  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   content: attr(data-responsive-title);
   font-weight: 600;
   display: block;
   text-align: left;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table--no-header {
+  padding-top: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table--no-header .sd-table__cell::before {
+  content: none;
+}
 .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--actions::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
   content: none;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--detail-panel {
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top: 0;
+  border-bottom: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--detail-panel .sd-panel__content {
+  padding-top: 0;
+}
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions {
   width: auto;
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions .sd-action-bar {
   margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  justify-content: flex-end;
+  margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions #show-detail-mobile {
+  flex-grow: 1;
+}
 .sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn {
   opacity: 1;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6118,10 +6245,6 @@ sv-components-container,
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child) {
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr::after {
   bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6136,11 +6259,12 @@ sv-components-container,
   margin-top: 0;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top .sd-question__erbox {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type .sd-question__erbox {
-  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
   margin-left: 0;
@@ -6221,7 +6345,6 @@ body {
   position: relative;
 }
 .sd-root-modern form {
-  z-index: 1;
   position: relative;
 }
 .sd-root-modern * {