survey-core 1.9.127 → 1.9.128

package/defaultV2.fontless.css

@@ -1,8 +1,12 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.127
+ * surveyjs - Survey JavaScript library v1.9.128
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-action-bar {
   display: flex;
   box-sizing: content-box;
@@ -192,6 +196,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))));
@@ -232,6 +240,10 @@ button.sv-action-bar-item {
   visibility: hidden;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 sv-popup {
   display: block;
   position: absolute;
@@ -668,6 +680,10 @@ sv-popup {
   flex-grow: 1;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-button-group {
   display: flex;
   align-items: center;
@@ -806,6 +822,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))));
@@ -845,7 +869,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;
 }
 
@@ -881,13 +905,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));
 }
 
@@ -934,6 +961,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;
@@ -1023,6 +1058,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)));
@@ -1217,6 +1254,10 @@ sv-brand-info, .sv-brand-info {
   display: none;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1271,6 +1312,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) {
@@ -1431,6 +1473,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%;
@@ -1956,6 +2002,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 {
@@ -2236,6 +2283,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 {
@@ -2404,29 +2452,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));
 }
@@ -2443,6 +2491,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;
@@ -2553,6 +2604,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)));
@@ -2560,6 +2612,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)));
@@ -2965,6 +3018,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 {
@@ -3070,6 +3124,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 {
@@ -3094,6 +3149,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 {
@@ -3246,7 +3302,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))));
@@ -3257,10 +3312,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 {
@@ -3313,7 +3370,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 {
@@ -3327,6 +3384,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;
@@ -3353,6 +3412,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;
@@ -3388,7 +3451,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) {
@@ -3421,13 +3484,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 {
@@ -3440,7 +3508,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));
 }
 
@@ -3464,11 +3532,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));
 }
 
@@ -3487,10 +3555,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 {
@@ -3503,6 +3571,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))));
@@ -3740,7 +3809,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 {
@@ -3841,7 +3910,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 {
@@ -3863,17 +3932,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 {
@@ -4007,7 +4078,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));
@@ -4016,6 +4088,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 {
@@ -4027,7 +4100,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 {
@@ -4052,6 +4125,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 {
@@ -4117,6 +4191,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;
 }
@@ -4214,7 +4292,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;
@@ -4226,12 +4303,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;
@@ -4302,10 +4381,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,
@@ -4380,11 +4460,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 {
@@ -4514,6 +4596,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))));
@@ -4573,6 +4659,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;
@@ -4639,6 +4727,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);
@@ -4818,11 +4910,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 {
@@ -4850,7 +4938,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 {
@@ -5028,13 +5122,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)));
@@ -5046,6 +5143,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 {
@@ -5058,7 +5157,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 {
@@ -5097,6 +5196,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;
@@ -5287,7 +5390,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;
@@ -5299,6 +5401,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 {
@@ -5306,7 +5410,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 {
@@ -5325,6 +5429,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   right: 0;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-multipletext {
   width: 100%;
   table-layout: fixed;
@@ -5341,7 +5449,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 {
@@ -5450,6 +5558,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 {
@@ -5472,6 +5581,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 {
@@ -5552,6 +5662,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,
@@ -5567,6 +5678,10 @@ svg.sd-action--icon {
   opacity: 0.25;
 }
 
+:root {
+  --sjs-transition-duration: 150ms;
+}
+
 .sd-completedpage,
 .sd-completed-before-page {
   align-items: center;
@@ -5679,7 +5794,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;
@@ -5691,6 +5805,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 {
@@ -5698,7 +5814,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 {
@@ -5736,53 +5852,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 {
@@ -6267,7 +6489,7 @@ sv-components-container,
   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;
@@ -6472,6 +6694,13 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.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%;
   height: 100%;