survey-react 1.9.97 → 1.9.99

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.97
+ * surveyjs - Survey JavaScript library v1.9.99
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -469,7 +469,7 @@ sv-popup {
 }
 
 .sv-popup__container {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   position: absolute;
   padding: 0;
 }
@@ -527,7 +527,7 @@ sv-popup {
   max-width: 100vw;
   border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(100% - (1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -870,9 +870,12 @@ sv-popup {
 
 .sv-button-group__item--disabled {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
   cursor: default;
 }
+.sv-button-group__item--disabled .sv-button-group__item-decorator {
+  opacity: 0.25;
+  font-weight: normal;
+}
 .sv-button-group__item--disabled .sv-button-group__item-icon use {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -984,6 +987,10 @@ sv-popup {
   color: black;
 }
 
+.sv_window_button .sv-svg-icon {
+  margin: 4px;
+}
+
 .sv-brand-info {
   width: 100%;
   font-family: var(--font-family, var(--font-family));
@@ -1156,7 +1163,7 @@ sv-popup {
 }
 
 .sv-ranking-item--drag .sv-ranking-item__content {
-  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -1627,7 +1634,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-element__title span {
   font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 .sd-element__title .sv-title-actions__title {
   font-size: 0;
@@ -1828,7 +1835,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-element--with-frame.sd-element--compact {
-  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   box-shadow: none;
   background-color: transparent;
@@ -2011,13 +2018,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   appearance: none;
   position: static;
   width: 100%;
-  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
@@ -2088,6 +2094,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: flex;
 }
 
+.sd-input[type=color],
+.sd-input[type=range] {
+  box-sizing: content-box;
+  width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+}
+
 .sd-input[type=range]::-webkit-slider-runnable-track {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2140,6 +2153,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
+.sd-panel.sd-panel--as-page {
+  margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 .sd-panel.sd-panel--as-page > .sd-panel__content {
   padding-top: 0;
 }
@@ -2156,7 +2172,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: static;
-  line-height: calc(2 * var(--sjs-font-size, 16px));
+  line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
@@ -2172,10 +2188,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   position: static;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
+.sd-row ~ .sd-row .sd-panel--as-page {
+  padding-top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-panel__required-text {
   color: var(--sjs-special-red, var(--red, #e60a3e));
 }
@@ -2331,9 +2351,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item__decorator,
-.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item__decorator {
-  --sd-item-default-background: var(--primary-foreground, #fff);
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error) .sd-item__decorator,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error) .sd-item__decorator {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+}
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-table__cell {
@@ -2566,7 +2594,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: static;
-  line-height: calc(2 * var(--sjs-font-size, 16px));
+  line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
@@ -2576,7 +2604,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   position: static;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
@@ -2655,7 +2683,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, var(--font-family));
   gap: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
-  margin-bottom: 2px;
 }
 .sd-title.sd-container-modern__title .sd-logo__image {
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2672,6 +2699,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--sjs-font-surveytitle-family, var(--font-family));
   font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   font-weight: var(--sjs-font-surveytitle-weight, 700);
+  line-height: calc(1.25 * var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 .sd-header__text h3 {
   line-height: calc(2.5 * var(--sjs-font-size, 16px));
@@ -2730,7 +2758,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-weight: var(--sjs-font-questiondescription-weight, 400);
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   white-space: normal;
   word-break: break-word;
 }
@@ -2751,10 +2779,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
-  background: var(--sd-item-default-background, var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))));
+  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
+  margin-top: calc(((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))))) - (3 * var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -2780,9 +2809,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   white-space: normal;
   word-break: break-word;
   width: 100%;
@@ -3224,9 +3253,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text {
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   display: inline-block;
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
@@ -3316,28 +3345,34 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown__value {
   width: 100%;
-  min-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   position: relative;
 }
 
 .sd-dropdown_clean-button {
+  display: flex;
   padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin: auto 0;
 }
 
 .sd-dropdown_chevron-button {
   position: absolute;
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  inset-inline-end: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  inset-block-start: calc(50% - (1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: 0;
+  bottom: 0;
+  inset-inline-end: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-inline-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-dropdown_clean-button-svg {
@@ -3364,9 +3399,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: 0;
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3422,12 +3457,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-tagbox.sd-tagbox--empty {
-  padding-block: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-end: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
 .sd-tagbox_clean-button {
   height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3441,7 +3470,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sv-tagbox__item {
   position: relative;
   display: flex;
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
@@ -3457,20 +3485,21 @@ 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: block;
+  display: flex;
+  align-self: center;
 }
 
 .sd-tagbox-item_clean-button {
   display: none;
   position: absolute;
   inset-inline-end: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(3 * 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%);
 }
 
 .sd-tagbox-item_clean-button-svg {
+  display: flex;
   padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3500,7 +3529,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
   display: flex;
   flex-grow: 1;
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-tagbox__placeholder {
@@ -3539,13 +3567,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(2.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
-  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(2.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .sd-imagepicker {
@@ -3746,6 +3778,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: flex;
   width: max-content;
   position: relative;
+  gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   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))));
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
@@ -3759,7 +3792,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: var(--sjs-font-editorfont-weight, 400);
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -3789,7 +3822,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean__thumb {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  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;
@@ -4331,7 +4364,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   -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-general-backcolor, var(--background, #fff));
+  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   cursor: pointer;
@@ -4463,7 +4496,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-multipletext__item-container.sd-input:focus-within {
-  box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-multipletext__item-container {
@@ -4479,7 +4512,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
   border: none;
   box-shadow: none;
-  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-multipletext__item-container .sd-input,
@@ -4759,12 +4791,12 @@ svg.sd-action--icon {
 
 .sv_progress-toc--mobile {
   position: fixed;
-  top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: auto;
   min-width: auto;
   height: auto;
-  background-color: transparent;
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   z-index: 15;
   border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -5097,7 +5129,6 @@ body {
 .sd-root-modern {
   -webkit-font-smoothing: antialiased;
   --sd-mobile-width: 600px;
-  --sd-imagepicker-gap: 16px;
   --sd-timer-size: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
   font-family: var(--font-family, var(--font-family));
@@ -5163,7 +5194,7 @@ body {
 }
 
 .sv-popup.sv-popup--dropdown .sv-popup__shadow {
-  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
 .sv-popup.sv-popup--dropdown .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));