survey-react 1.11.3 → 1.11.5

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.3
+ * surveyjs - Survey JavaScript library v1.11.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -460,6 +460,22 @@ button.sv-action-bar-item {
   visibility: hidden;
 }
 
+.sv-drag-drop-choices-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
+.sv-drag-drop-choices-shortcut__content.sv-drag-drop-choices-shortcut__content {
+  min-width: 100px;
+  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-color: var(--sjs-general-backcolor, var(--background, #fff));
+  border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: 0;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -1875,6 +1891,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   font-weight: 400;
 }
 
+.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-weight: 400;
+}
+.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 .sv-list__item.sv-list__item--disabled .sv-list__item-body {
   cursor: default;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4320,7 +4345,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   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);
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-rating__item--fixed-size {
@@ -4377,6 +4402,9 @@ legend + sv-ng-rating-item + .sd-rating__item {
   box-shadow: none;
   transform: none;
 }
+.sd-rating__item.sd-rating__item--preview:focus-within {
+  box-shadow: none;
+}
 .sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -4398,19 +4426,18 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item:focus-within {
-  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
-  box-shadow: 0px 1px 2px transparent;
+  box-shadow: 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected:focus-within {
-  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));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 4px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item-smiley {
@@ -4420,12 +4447,16 @@ legend + sv-ng-rating-item + .sd-rating__item {
   padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
   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);
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -4436,6 +4467,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item-smiley--small {
   padding: calc(0.625 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-width: 1px;
 }
 .sd-rating__item-smiley--small svg {
@@ -4443,8 +4475,16 @@ legend + sv-ng-rating-item + .sd-rating__item {
   height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-rating__item-smiley--colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  box-shadow: 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
 .sd-rating__item-smiley--small.sd-rating__item-smiley--selected:focus-within {
-  box-shadow: inset 0 0 0 1px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 legend + .sd-rating__item-smiley,
@@ -4453,7 +4493,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .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);
+  border-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  fill: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  transition: 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 {
@@ -4461,6 +4503,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-color: transparent;
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
+.sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:hover {
+  fill: var(--sd-rating-item-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
 .sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
   opacity: initial;
 }
@@ -4474,22 +4519,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
+.sd-rating__item-smiley.sd-rating__item-smiley--readonly {
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
+  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
+}
+
 .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
   background-color: unset;
 }
 
-.sd-rating__item-smiley.sd-rating__item-smiley--preview {
-  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  border-width: 1px;
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
-.sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview:focus-within {
+  box-shadow: none;
+}
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview svg {
   margin: 1px;
 }
 
-.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
   fill: var(--sjs-general-backcolor, var(--background, #fff));
   background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -4500,24 +4552,33 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley:focus-within {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: none;
+  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-rating__item-smiley:focus-within {
+  border: none;
+  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-rating__item-smiley--selected {
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 
 .sd-rating__item-smiley--selected:focus-within {
-  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));
+  border: 0px solid 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 4px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 2px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
   opacity: 0.25;
 }
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  background-color: var(--sd-rating-item-color-light, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
+  border-color: var(--sd-rating-item-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   opacity: 0.5;
 }
 
@@ -4527,6 +4588,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected):focus-within {
   opacity: 1;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
+.sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  opacity: 1;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
@@ -4695,7 +4762,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
-.sd-rating__item-star:focus-within svg {
+.sd-rating__item-star:not(.sd-rating__item-star--preview):focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: transparent;
 }
@@ -4710,19 +4777,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
-.sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview).sd-rating__item-star--unhighlighted:focus-within svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
-.sd-rating__item-star--selected:focus-within svg {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-rating__item-star--selected:focus-within .sv-star {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within .sv-star {
   opacity: 0;
 }
-.sd-rating__item-star--selected:focus-within .sv-star-2 {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within .sv-star-2 {
   opacity: 1;
 }
 
@@ -4734,7 +4801,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-internal-font-editorfont-size);
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   display: inline-block;
-  border: 2px solid transparent;
   box-sizing: border-box;
   transition: color var(--sjs-transition-duration, 150ms);
 }
@@ -4742,6 +4808,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-bottom: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  border: 2px solid rgba(0, 0, 0, 0);
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
   margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -4757,6 +4824,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text.sd-rating__item--fixed-size {
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-rating__item-text.sd-rating__item-text::after {
+  display: block;
+  content: attr(data-text);
+  font-weight: 600;
+  height: 0;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
 
 .sd-rating--wrappable .sd-rating__item-text {
   max-width: 100%;
@@ -5612,8 +5688,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-progress__text {
   position: absolute;
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
-  right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
   line-height: var(--sjs-font-size, 16px);
   font-weight: 600;
@@ -5640,6 +5717,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(-3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-root--sticky-top .sd-progress__text {
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  opacity: 0.75;
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
@@ -5698,11 +5783,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean__thumb {
+  position: absolute;
+  left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translateX(0);
   background-color: 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))));
   transition-duration: 0.2s;
-  transition-property: margin-left;
+  transition-property: transform, left;
   transition-timing-function: linear;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
@@ -5712,13 +5800,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: nowrap;
 }
 
-.sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb {
-  margin-left: 50%;
-}
-
+.sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb,
 .sd-boolean--exchanged:not(.sd-boolean--checked) .sd-boolean__thumb {
-  margin-left: calc(50% + 0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(100% - 0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  transform: translateX(-100%);
 }
+
 .sd-boolean--exchanged.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false, .sd-boolean--exchanged.sd-boolean.sd-boolean--checked .sd-boolean__label--true {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
@@ -7376,6 +7463,7 @@ svg.sd-action--icon {
 .sd-progress-buttons__list-container {
   display: flex;
   overflow: hidden;
+  margin: 0 calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-progress-buttons__connector {
@@ -7431,14 +7519,12 @@ svg.sd-action--icon {
 }
 .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   z-index: -2;
-  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  border-radius: 50%;
 }
 .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-content {
   position: absolute;
@@ -7455,11 +7541,14 @@ svg.sd-action--icon {
 }
 .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
+.sd-progress-buttons__list li:hover .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-progress-buttons__list li:hover .sd-progress-buttons__button .sd-progress-buttons__button-content {
   top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7486,8 +7575,11 @@ svg.sd-action--icon {
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid 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.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-content {
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -7543,6 +7635,9 @@ svg.sd-action--icon {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
+.sd-progress-buttons--numbered .sd-progress-buttons__list-container {
+  margin: 0 calc(-1 * (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(2.175 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   right: calc(50% + 8px);
@@ -7552,8 +7647,16 @@ svg.sd-action--icon {
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-progress-buttons--numbered .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-progress-buttons--numbered .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
-  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-progress-buttons--with-titles .sd-progress-buttons__list-container {
+  margin: 0;
 }
 
 .sd-root-modern--mobile .sd-progress-buttons__list,
@@ -7757,25 +7860,35 @@ svg.sd-action--icon {
 }
 
 .sv-header__overlap {
-  margin-bottom: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sv-header__overlap ~ div .sd-body,
+.sv-header__overlap ~ div .sv-body {
+  margin-top: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sv-header__overlap {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern--mobile .sv-header__overlap ~ div .sd-body,
+.sd-root-modern--mobile .sv-header__overlap ~ div .sv-body {
+  margin-top: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 
 .sv-header__overlap.sv-header__without-background {
   margin-bottom: 0;
   padding-bottom: 0;
 }
+.sv-header__overlap.sv-header__without-background ~ div .sd-body,
+.sv-header__overlap.sv-header__without-background ~ div .sv-body {
+  margin-top: 0;
+}
 
 .sv-header__without-background .sv-header--mobile,
 .sv-header__without-background .sv-header__content {
   padding-bottom: 0;
 }
 
-.sd-root-modern--mobile .sv-header__overlap {
-  margin-bottom: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .sv-header__content {
   padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -8389,4 +8502,18 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sv-components-container-center {
+  position: sticky;
+  top: 0;
+}
+
+.sv-root--sticky-top .sv-components-container-center {
+  z-index: 15;
+}
+
+.sv-root--sticky-top.sd-progress--pages .sv-components-container-center {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+}
+
 /*# sourceMappingURL=defaultV2.css.map*/