survey-react 1.9.127 → 1.9.129

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.127
+ * surveyjs - Survey JavaScript library v1.9.129
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -223,6 +223,10 @@
   --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-action-bar {
   display: flex;
   box-sizing: content-box;
@@ -412,6 +416,10 @@ button.sv-action-bar-item {
   opacity: 50%;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-dragged-element-shortcut {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -452,6 +460,10 @@ button.sv-action-bar-item {
   visibility: hidden;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 sv-popup {
   display: block;
   position: absolute;
@@ -888,6 +900,10 @@ sv-popup {
   flex-grow: 1;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-button-group {
   display: flex;
   align-items: center;
@@ -1026,6 +1042,14 @@ sv-popup {
   min-width: unset;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv_window {
   position: fixed;
   bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1035,16 +1059,67 @@ sv-popup {
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   background-clip: padding-box;
   z-index: 100;
-  max-height: 90vh;
+  max-height: 50vh;
   overflow: auto;
   box-sizing: border-box;
+  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+@-moz-document url-prefix() {
+  .sv_window,
+  .sv_window * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
+}
+.sv_window::-webkit-scrollbar,
+.sv_window *::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: transparent;
+}
+.sv_window::-webkit-scrollbar-thumb,
+.sv_window *::-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));
+}
+.sv_window::-webkit-scrollbar-track,
+.sv_window *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sv_window::-webkit-scrollbar-thumb:hover,
+.sv_window *::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
+.sv_window_root-content {
+  height: 100%;
+}
+
+.sv_window--full-screen {
+  top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-height: 100%;
+  width: initial !important;
+  max-width: initial !important;
+}
+
+.sv_window_header {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .sv_window_content {
-  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   overflow: hidden;
 }
 
+.sv_window--collapsed {
+  height: initial;
+}
 .sv_window--collapsed .sv_window_header {
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1055,6 +1130,10 @@ sv-popup {
 .sv_window--collapsed .sv_window_content {
   display: none;
 }
+.sv_window--collapsed .sv_window_buttons_container {
+  margin-top: 0;
+  margin-right: 0;
+}
 
 .sv_window_header_title_collapsed {
   color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
@@ -1065,7 +1144,7 @@ sv-popup {
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   flex: 1;
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
 }
 
@@ -1082,9 +1161,9 @@ sv-popup {
 }
 
 .sv_window_buttons_container {
-  position: absolute;
-  top: var(--sjs-base-unit, var(--base-unit, 8px));
-  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  position: fixed;
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
   gap: var(--sjs-base-unit, var(--base-unit, 8px));
   z-index: 1;
@@ -1101,13 +1180,16 @@ sv-popup {
 .sv_window_button:hover, .sv_window_button:active {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
-.sv_window_button:hover svg use, .sv_window_button:hover svg path, .sv_window_button:active svg use, .sv_window_button:active svg path {
+.sv_window_button:hover svg use,
+.sv_window_button:hover svg path, .sv_window_button:active svg use,
+.sv_window_button:active svg path {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sv_window_button:active {
   opacity: 0.5;
 }
-.sv_window_button svg use, .sv_window_button svg path {
+.sv_window_button svg use,
+.sv_window_button svg path {
   fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
@@ -1154,6 +1236,14 @@ sv-brand-info, .sv-brand-info {
   color: #909090;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-ranking {
   outline: none;
   user-select: none;
@@ -1243,6 +1333,8 @@ sv-brand-info, .sv-brand-info {
   box-sizing: border-box;
   font-weight: 600;
   margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  transition: outline var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
+  outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
 }
 .sv-ranking-item__index.sv-ranking-item__index svg {
   fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -1437,6 +1529,10 @@ sv-brand-info, .sv-brand-info {
   display: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1491,6 +1587,7 @@ sv-brand-info, .sv-brand-info {
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: background-color var(--sjs-transition-duration, 150ms), color var(--sjs-transition-duration, 150ms);
 }
 
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
@@ -1651,6 +1748,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: transparent;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-save-data_root {
   position: fixed;
   left: 50%;
@@ -2176,6 +2277,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   text-align: start;
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 
 .sd-input:focus {
@@ -2456,6 +2558,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-checkbox__svg use {
   fill: transparent;
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-checkbox--checked .sd-checkbox__svg use {
@@ -2624,29 +2727,29 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:last-of-type > .sd-table__cell {
   border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions),
 .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
   border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
-.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell.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-table__cell:not(.sd-table__cell--actions).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-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .sd-input,
+.sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .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-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .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-table__cell:not(.sd-table__cell--actions) .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-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .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-table__cell:not(.sd-table__cell--actions) .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-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell .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-table__cell:not(.sd-table__cell--actions) .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));
 }
@@ -2663,6 +2766,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
   min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-table__cell .sd-item {
+  text-align: initial;
+}
 
 .sd-table__cell--error {
   border: none;
@@ -2741,6 +2847,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-table__cell--footer {
   text-align: right;
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sd-table__cell--footer-total {
@@ -2773,6 +2880,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   background: transparent;
   border-radius: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  transition: background var(--sjs-transition-duration, 150ms);
 }
 .sd-table__cell--detail-button svg {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
@@ -2780,6 +2888,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   width: var(--sjs-internal-font-editorfont-size);
   height: var(--sjs-internal-font-editorfont-size);
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 .sd-table__cell--detail-button:hover, .sd-table__cell--detail-button:focus {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -2815,6 +2924,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical),
 .sd-table__cell--empty,
 .sd-table__cell--row-text,
+.sd-table__cell--footer-total,
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr > td:first-of-type {
   position: sticky;
@@ -2824,6 +2934,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
 .sd-table__cell--empty:first-of-type,
 .sd-table__cell--row-text:first-of-type,
+.sd-table__cell--footer-total:first-of-type,
 .sd-matrix__cell:first-of-type:first-of-type,
 .sd-matrix tr > td:first-of-type:first-of-type {
   left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2831,6 +2942,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-of-type,
 .sd-table__cell--empty:last-of-type,
 .sd-table__cell--row-text:last-of-type,
+.sd-table__cell--footer-total:last-of-type,
 .sd-matrix__cell:first-of-type:last-of-type,
 .sd-matrix tr > td:first-of-type:last-of-type {
   right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2918,6 +3030,23 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin: initial;
 }
 
+.sd-table__cell--footer .sd-table__question-wrapper--expression .sd-expression {
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  font-size: var(--sjs-font-size, 16px);
+  font-weight: 600;
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-table__cell--footer .sd-table__question-wrapper--left {
+  text-align: start;
+}
+.sd-table__cell--footer .sd-table__question-wrapper--center {
+  text-align: center;
+}
+.sd-table__cell--footer .sd-table__question-wrapper--right {
+  text-align: end;
+}
+
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
@@ -3035,6 +3164,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-page__row.sd-row--multiple.sd-row--compact {
   padding: 0;
+  row-gap: var(--sd-base-vertical-padding);
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
 }
@@ -3185,6 +3315,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-shrink: 0;
   margin-top: calc((1.5 * (var(--sjs-internal-font-editorfont-size)) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -3290,6 +3421,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-checkbox__svg use {
   fill: transparent;
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-checkbox--checked .sd-checkbox__svg use {
@@ -3314,6 +3446,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   height: var(--sjs-base-unit, var(--base-unit, 8px));
   border-radius: 50%;
   background-color: transparent;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-radio--checked .sd-radio__decorator:after {
@@ -3466,7 +3599,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-rating__item {
   position: relative;
   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;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3477,10 +3609,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
-  border: none;
+  border: 0px solid transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: var(--sjs-font-size, 16px);
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-rating__item--fixed-size {
@@ -3533,7 +3667,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item--selected:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sd-rating__item-smiley {
@@ -3547,6 +3681,8 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -3573,6 +3709,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-inline-start: 2px;
 }
 
+.sd-rating__item-smiley--scale-colored {
+  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
+}
+
 .sd-rating__item-smiley--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   border-color: transparent;
@@ -3608,7 +3748,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley--selected:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
@@ -3641,13 +3781,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-rating__item-star svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
-  fill: none;
+  fill: transparent;
   width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
+  position: absolute;
+  transition: stroke var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), fill var(--sjs-transition-duration, 150ms);
+}
+.sd-rating__item-star .sv-star {
+  opacity: 1;
 }
 .sd-rating__item-star .sv-star-2 {
-  display: none;
+  opacity: 0;
 }
 
 .sd-rating__item-star--small {
@@ -3660,7 +3805,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-star--selected svg {
-  stroke: none;
+  stroke: transparent;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -3684,11 +3829,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-star:focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  fill: none;
+  fill: transparent;
 }
 
 .sd-rating__item-star--unhighlighted svg {
-  stroke: none;
+  stroke: transparent;
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
@@ -3707,10 +3852,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-rating__item-star--selected:focus-within .sv-star {
-  display: none;
+  opacity: 0;
 }
 .sd-rating__item-star--selected:focus-within .sv-star-2 {
-  display: block;
+  opacity: 1;
 }
 
 .sd-rating__item-text.sd-rating__item-text {
@@ -3723,6 +3868,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: inline-block;
   border: 2px solid transparent;
   box-sizing: border-box;
+  transition: color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3960,7 +4106,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-input.sd-dropdown:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
@@ -4033,7 +4179,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-internal-font-editorfont-size);
   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))));
+  padding-inline-end: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-block: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  border-radius: var(--sjs-corner-radius, 4px);
+  transition: border-color var(--sjs-transition-duration, 150ms);
+}
+.sv-dropdown-popup .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  padding-inline-end: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-block: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup .sv-list__item span {
+  margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 [dir=rtl] .sd-dropdown,
@@ -4061,7 +4221,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-input.sd-tagbox:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-tagbox__item {
@@ -4083,17 +4243,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sv-tagbox__item:hover .sd-tagbox-item_clean-button,
 .sv-tagbox__item:focus .sd-tagbox-item_clean-button,
 .sv-tagbox__item:focus-within .sd-tagbox-item_clean-button {
-  display: flex;
   align-self: center;
+  opacity: 1;
 }
 
 .sd-tagbox-item_clean-button {
-  display: none;
+  display: flex;
   position: absolute;
   inset-inline-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: 0;
   padding-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: linear-gradient(270deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
+  opacity: 0;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-tagbox-item_clean-button-svg {
@@ -4227,7 +4389,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__check-decorator {
-  display: none;
+  display: block;
+  opacity: 0;
   position: absolute;
   top: var(--sjs-base-unit, var(--base-unit, 8px));
   right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -4236,6 +4399,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-radius: 100%;
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   z-index: 1;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-imagepicker__check-icon {
@@ -4247,7 +4411,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__item--checked .sd-imagepicker__check-decorator {
-  display: block;
+  opacity: 1;
 }
 
 .sd-imagepicker__item--error .sd-imagepicker__image-container::before {
@@ -4272,6 +4436,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   box-sizing: border-box;
   max-width: 100%;
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-imagepicker__text {
@@ -4337,6 +4502,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-html {
   white-space: initial;
 }
@@ -4434,7 +4603,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -4446,12 +4614,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-html button:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 .sd-html button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-html button span {
   display: flex;
@@ -4522,10 +4692,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-boolean.sd-boolean--allowhover:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-boolean__thumb,
@@ -4600,11 +4771,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-boolean__thumb-ghost {
   z-index: 1;
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: transparent;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
   background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
-  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-boolean--error {
@@ -4734,6 +4907,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: var(--sd-base-padding);
 }
 
+.sd-question--paneldynamic:not(.sd-question--empty) > .sd-question__content > .sd-question__comment-area {
+  padding-bottom: var(--sd-base-padding);
+}
+
 .sd-paneldynamic__buttons-container .sd-action-bar {
   width: 100%;
   margin: 0 calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4793,6 +4970,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   overflow-x: hidden;
   white-space: nowrap;
+  box-shadow: inset 0px 0px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-tab-item:hover, .sd-tab-item:focus-visible {
   outline: none;
@@ -4859,6 +5038,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-file {
   position: relative;
   font-size: var(--sjs-font-size, 16px);
@@ -5038,11 +5221,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__preview img:hover + .sd-file__remove-file-button,
 .sd-file__preview svg:hover + .sd-file__remove-file-button,
 .sd-file__preview .sd-file__remove-file-button:hover {
-  display: block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  opacity: 1;
 }
 
 .sd-file__sign {
@@ -5070,7 +5249,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file__remove-file-button {
-  display: none;
+  display: block;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
 .sd-file__decorator--error {
@@ -5248,13 +5433,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-btn {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   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: var(--sjs-corner-radius, 4px);
   cursor: pointer;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5266,6 +5454,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   outline: none;
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
 }
 
 .sd-btn--small {
@@ -5278,7 +5468,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-btn:focus-visible {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-btn:disabled {
@@ -5317,6 +5507,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   pointer-events: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-body {
   width: 100%;
   box-sizing: border-box;
@@ -5507,7 +5701,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -5519,6 +5712,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-body--empty button:hover,
 .sd-body--loading button:hover {
@@ -5526,7 +5721,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-body--empty button:focus,
 .sd-body--loading button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-body--empty button span,
 .sd-body--loading button span {
@@ -5545,6 +5740,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   right: 0;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-multipletext {
   width: 100%;
   table-layout: fixed;
@@ -5561,7 +5760,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-multipletext__item-container.sd-input:focus-within {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-multipletext__item-container {
@@ -5670,6 +5869,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
   outline: none;
+  transition: background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-action--negative {
@@ -5692,6 +5892,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-action--icon use {
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 svg.sd-action--icon {
@@ -5772,6 +5973,7 @@ svg.sd-action--icon {
 }
 .sd-context-btn use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  transition: fill var(--sjs-transition-duration, 150ms);
 }
 
 .sd-context-btn:hover use,
@@ -5787,6 +5989,10 @@ svg.sd-action--icon {
   opacity: 0.25;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-completedpage,
 .sd-completed-before-page {
   align-items: center;
@@ -5899,7 +6105,6 @@ svg.sd-action--icon {
   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: var(--sjs-corner-radius, 4px);
   cursor: pointer;
@@ -5911,6 +6116,8 @@ svg.sd-action--icon {
   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))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  transition: box-shadow var(--sjs-transition-duration, 150ms);
 }
 .sd-completedpage button:hover,
 .sd-completed-before-page button:hover {
@@ -5918,7 +6125,7 @@ svg.sd-action--icon {
 }
 .sd-completedpage button:focus,
 .sd-completed-before-page button:focus {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-completedpage button span,
 .sd-completed-before-page button span {
@@ -5956,53 +6163,159 @@ svg.sd-action--icon {
   visibility: hidden;
 }
 
-.sd-progress-buttons__list {
+.sd-progress-buttons__page-description {
+  display: none;
+}
+
+.sd-progress-buttons {
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+  flex-direction: column;
 }
 
+.sd-progress-buttons__list-container {
+  display: flex;
+  overflow: hidden;
+}
+
+.sd-progress-buttons__connector {
+  display: none;
+}
+
+.sd-progress-buttons__list {
+  display: inline-flex;
+  flex-direction: row;
+  flex-grow: 1;
+  margin: 0 auto;
+  padding: 0;
+}
 .sd-progress-buttons__list li {
-  text-align: center;
+  display: flex;
   flex-grow: 1;
-  text-decoration: none;
-  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-shrink: 1;
+  flex-basis: 0;
+  position: relative;
+  flex-wrap: nowrap;
+  text-align: center;
+  flex-direction: column;
+}
+.sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  display: block;
+  content: "";
+  width: 100%;
+  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-navigation-default, #bcbcbc);
+  position: absolute;
+  bottom: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: 50%;
+}
+.sd-progress-buttons__list li:after {
+  display: flex;
+  content: attr(data-page-number);
+  width: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  background-color: var(--sjs-navigation-default, #bcbcbc);
+  border-radius: 50%;
   cursor: pointer;
+  align-self: center;
+  z-index: 1;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  font-weight: 600;
+  line-height: var(--sjs-font-size, 16px);
+  justify-content: center;
+  color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
-.sd-progress-buttons__list li:hover .sd-progress-buttons__page-title {
-  text-decoration-line: underline;
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:not(:first-child) > .sd-progress-buttons__connector {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list .sd-progress-buttons__list-element--current,
-.sd-progress-buttons__list .sd-progress-buttons__list-element--passed {
-  border-top: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:after {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current:not(:first-child) > .sd-progress-buttons__connector {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-
-.sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
-.sd-progress-buttons__list-element--current .sd-progress-buttons__page-description {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
+  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: 0;
 }
 
 .sd-progress-buttons__page-title {
-  width: 100%;
-  font-size: var(--sjs-font-size, 16px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
   font-weight: 600;
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
+  flex-grow: 1;
+  text-align: center;
+  padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-progress-buttons__page-description {
+.sd-progress-buttons__header .sd-progress-buttons__page-title {
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-progress-buttons__footer .sd-progress-buttons__page-title {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-bottom: 0;
+  justify-content: flex-end;
+  padding: 0;
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+}
+
+.sd-progress-buttons--bottom {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-direction: column-reverse;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__list li {
+  flex-direction: column-reverse;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  top: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__page-title {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: 0;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__header .sd-progress-buttons__page-title {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-bottom: 0;
+}
+.sd-progress-buttons--bottom .sd-progress-buttons__footer .sd-progress-buttons__page-title {
+  margin-top: 0;
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  bottom: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sd-progress-buttons__list,
+.sd-progress-buttons--no-titles .sd-progress-buttons__list {
+  justify-content: space-between;
   width: 100%;
-  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
-  line-height: var(--sjs-font-size, 16px);
-  font-weight: 600;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-root-modern--mobile .sd-progress-buttons__list li,
+.sd-progress-buttons--no-titles .sd-progress-buttons__list li {
+  flex-grow: 0;
+}
+
+.sd-progress-buttons--bottom.sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
+  top: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sd-progress-buttons {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv_progress-toc {
@@ -6294,6 +6607,18 @@ svg.sd-action--icon {
   max-width: 100%;
 }
 
+.sv-header__background-color--none .sv-header__title .sd-title,
+.sv-header__background-color--custom .sv-header__title .sd-title {
+  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+}
+.sv-header__background-color--none .sv-header__description .sd-description,
+.sv-header__background-color--custom .sv-header__description .sd-description {
+  --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--header-description-font-size);
+  line-height: calc(1.5 * (var(--header-description-font-size)));
+  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
+
 @keyframes rotationAnimation {
   from {
     rotate: 0deg;
@@ -6470,6 +6795,7 @@ sv-components-container,
 .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) tfoot tr::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--expanded)::after {
   z-index: 12;
   content: " ";
@@ -6478,16 +6804,24 @@ 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(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-matrix__table) tr:not(.sd-table__row--expanded)::after {
+  bottom: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tfoot tr {
+  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tfoot tr::before {
+  top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .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;
+  justify-content: flex-start;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
   border-top: none;
@@ -6526,6 +6860,7 @@ sv-components-container,
 .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--footer-total::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
   content: none;
 }
@@ -6565,6 +6900,7 @@ sv-components-container,
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
   margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--footer-total:not(.sd-matrix__cell),
 .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));
 }
@@ -6666,31 +7002,45 @@ body {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   position: relative;
 }
-.sd-root-modern form {
-  position: relative;
-}
-.sd-root-modern * {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+@-moz-document url-prefix() {
+  .sd-root-modern,
+  .sd-root-modern * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
 }
-.sd-root-modern ::-webkit-scrollbar {
+.sd-root-modern::-webkit-scrollbar,
+.sd-root-modern *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
   background-color: transparent;
 }
-.sd-root-modern ::-webkit-scrollbar-thumb {
+.sd-root-modern::-webkit-scrollbar-thumb,
+.sd-root-modern *::-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 ::-webkit-scrollbar-track {
+.sd-root-modern::-webkit-scrollbar-track,
+.sd-root-modern *::-webkit-scrollbar-track {
   background: transparent;
 }
-.sd-root-modern ::-webkit-scrollbar-thumb:hover {
+.sd-root-modern::-webkit-scrollbar-thumb:hover,
+.sd-root-modern *::-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 form {
+  position: relative;
+}
+
+.sd-root-modern--animation-disabled * {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
 
 .sd-root-modern.sd-root-modern--full-container {
   width: 100%;
@@ -6698,28 +7048,6 @@ body {
   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)));
@@ -6741,25 +7069,32 @@ body {
   max-height: 100%;
 }
 
-.sv-popup .sv-popup__scrolling-content {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+@-moz-document url-prefix() {
+  .sv-popup .sv-popup__scrolling-content,
+  .sv-popup .sv-popup__scrolling-content * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: transparent;
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
+.sv-popup .sv-popup__scrolling-content *::-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));
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track {
   background: transparent;
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }