survey-react 1.9.95 → 1.9.97

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.95
+ * surveyjs - Survey JavaScript library v1.9.97
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -273,15 +273,15 @@ button.sv-action-bar-item {
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
   height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
   height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -353,8 +353,8 @@ button.sv-action-bar-item {
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   cursor: pointer;
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -420,9 +420,9 @@ button.sv-action-bar-item {
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
 .sv-matrixdynamic__drag-icon {
@@ -591,17 +591,17 @@ sv-popup {
   transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup--show-pointer.sv-popup--right {
+.sv-popup--show-pointer.sv-popup--right .sv-popup__container {
   transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
+.sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
   transform: translate(-12px, -4px) rotate(-90deg);
 }
 
-.sv-popup--show-pointer.sv-popup--left {
+.sv-popup--show-pointer.sv-popup--left .sv-popup__container {
   transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
+.sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
   transform: translate(-4px, -4px) rotate(90deg);
 }
 
@@ -622,8 +622,8 @@ sv-popup {
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1.5 * var(--sjs-font-size, 16px));
+  line-height: calc(2 * var(--sjs-font-size, 16px));
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -742,8 +742,8 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   font-family: var(--font-family);
   padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -759,11 +759,13 @@ sv-popup {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
+
+.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-weight: 400;
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -793,7 +795,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -812,9 +814,9 @@ sv-popup {
   appearance: none;
   width: 100%;
   padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 400;
   background: var(--sjs-general-backcolor, var(--background, #fff));
   cursor: pointer;
@@ -931,7 +933,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.875 * var(--sjs-font-size, 16px));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -960,7 +962,7 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.875 * var(--sjs-font-size, 16px));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -977,7 +979,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.875 * var(--sjs-font-size, 16px));
   font-style: normal;
   color: black;
 }
@@ -998,8 +1000,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   color: #161616;
 }
 
@@ -1012,8 +1014,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -1091,12 +1093,12 @@ sv-popup {
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   border-radius: 100%;
   border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
   width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   box-sizing: border-box;
   font-weight: 600;
   margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -1113,8 +1115,8 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -1123,16 +1125,21 @@ sv-popup {
   opacity: 0.25;
 }
 
+.sv-ranking-item--disabled .sv-ranking-item__text {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
+}
+
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
-  width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   z-index: 1;
   position: absolute;
-  left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  left: 0;
+  top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 [dir=rtl] .sv-ranking-item__ghost {
@@ -1211,6 +1218,9 @@ sv-popup {
   top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sv-ranking-shortcut .sv-ranking-item__content {
+  padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 .sv-ranking-shortcut .sv-ranking-item__icon-container {
   margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -1220,26 +1230,39 @@ sv-popup {
 }
 
 .sv-ranking--select-to-rank-vertical {
-  flex-direction: column;
+  flex-direction: column-reverse;
 }
 .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
-  margin: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
+  margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
   height: 1px;
 }
+.sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 
 .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
   width: 1px;
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
+  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to {
+  padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
   left: initial;
 }
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from {
+  padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 
 .sv-ranking__container-placeholder {
   color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   white-space: break-spaces;
   display: flex;
   justify-content: center;
@@ -1263,6 +1286,10 @@ sv-popup {
   background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
+.sv-ranking__container--from .sv-ranking-item__icon--focus {
+  display: none;
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1283,8 +1310,8 @@ sv-popup {
 }
 
 .sv-list__empty-text {
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1310,10 +1337,11 @@ sv-popup {
   padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: normal;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   cursor: pointer;
   overflow: hidden;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1450,11 +1478,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   border: none;
 }
 
@@ -1476,21 +1504,21 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-save-data_root {
-  position: absolute;
+  position: fixed;
   left: 50%;
   bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   opacity: 0;
   padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   border-radius: calc(2 * var(--sjs-corner-radius, 4px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-align: center;
   z-index: 1600;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -1535,8 +1563,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: #ffffff;
   background-color: var(--sjs-special-red, var(--red, #e60a3e));
@@ -1580,23 +1608,26 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 0.35;
 }
 
+.sd-title.sd-element__title {
+  font-family: var(--sjs-font-questiontitle-family, var(--font-family));
+  font-weight: var(--sjs-font-questiontitle-weight, 600);
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+}
+
 .sd-element__title {
   font-size: 0;
   line-height: 0;
   position: static;
-  font-family: var(--sjs-font-questiontitle-family, var(--font-family));
-  font-weight: var(--sjs-font-questiontitle-weight, 600);
-  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   margin: 0;
 }
 .sd-element__title .sd-element__num {
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-element__title span {
-  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  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));
 }
 .sd-element__title .sv-title-actions__title {
   font-size: 0;
@@ -1620,8 +1651,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-inline-start: 0;
   padding-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin-inline-start: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-align: end;
@@ -1800,6 +1831,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   box-shadow: none;
+  background-color: transparent;
 }
 
 .sd-question {
@@ -1810,8 +1842,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   font-weight: 600;
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
   white-space: normal;
   text-align: left;
 }
@@ -1901,7 +1933,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__comment-area {
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   display: flex;
   flex-direction: column;
@@ -1919,7 +1951,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.75;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   z-index: 1000;
 }
 
@@ -1951,8 +1983,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   justify-content: center;
   min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -1982,13 +2014,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * 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)));
-  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
-  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
+  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));
   border: none;
   border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
   text-align: start;
@@ -1999,7 +2031,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input--disabled {
-  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, 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))));
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2044,8 +2076,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   align-items: flex-end;
   padding: 0px;
   font-family: var(--font-family);
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   position: absolute;
   inset-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2121,10 +2153,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
   font-family: var(--sjs-font-pagetitle-family, var(--font-family));
   font-weight: var(--sjs-font-pagetitle-weight, 700);
-  font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2 * 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 {
@@ -2137,10 +2169,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
   font-family: var(--sjs-font-pagedescription-family, var(--font-family));
   font-weight: var(--sjs-font-pagedescription-weight, 400);
-  font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
@@ -2234,8 +2266,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   appearance: none;
   background: transparent;
   border: none;
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-family: var(--font-family, var(--font-family));
   font-weight: 600;
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -2306,8 +2338,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table__cell {
   font-weight: normal;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
@@ -2531,20 +2563,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-page .sd-page__title {
   font-family: var(--sjs-font-pagetitle-family, var(--font-family));
   font-weight: var(--sjs-font-pagetitle-weight, 700);
-  font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2 * var(--sjs-font-size, 16px));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
 .sd-page .sd-page__description {
   font-family: var(--sjs-font-pagedescription-family, var(--font-family));
   font-weight: var(--sjs-font-pagedescription-weight, 400);
-  font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
 }
 
@@ -2585,7 +2617,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-page__row.sd-row--multiple:not(.sd-row--compact) {
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  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));
 }
 .sd-page__row.sd-row--multiple.sd-row--compact {
@@ -2638,16 +2670,16 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-header__text .sd-title {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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);
 }
 .sd-header__text h3 {
-  line-height: calc(2.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2.5 * var(--sjs-font-size, 16px));
 }
 .sd-header__text h5 {
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 400;
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
 .sd-title .sv-title-actions {
@@ -2697,8 +2729,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--sjs-font-questiondescription-family, var(--font-family));
   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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  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));
   white-space: normal;
   word-break: break-word;
 }
@@ -2719,8 +2751,8 @@ 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(--background-dim-light, #f9f9f9))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
+  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)))));
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
 }
@@ -2736,7 +2768,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
-  background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
+  background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
   outline: none;
 }
 
@@ -2745,12 +2777,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-item__control-label {
-  font-family: var(--font-family, var(--font-family));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  line-height: calc(1.5 * 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)));
   white-space: normal;
   word-break: break-word;
   width: 100%;
@@ -2942,8 +2974,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-rating__item {
   position: relative;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  background: transparent;
+  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)));
@@ -2954,10 +2986,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-align: center;
-  border: 2px solid var(--sjs-general-backcolor, var(--background, #fff));
+  border: 2px solid transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
 }
 
 .sd-rating__item--fixed-size {
@@ -3014,7 +3046,6 @@ legend + sv-ng-rating-item + .sd-rating__item {
 
 .sd-rating__item-smiley {
   position: relative;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   white-space: nowrap;
   padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3105,7 +3136,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-star {
   position: relative;
-  background: var(--sjs-general-backcolor, var(--background, #fff));
   width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -3195,8 +3225,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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)));
-  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  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));
   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 {
@@ -3220,6 +3250,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+}
+
 .sv-ranking-item--error .sv-ranking-item__index {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   box-shadow: 0px 1px 2px transparent;
@@ -3239,7 +3273,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sv-ranking-item__content.sd-ranking-item__content {
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+}
+
+.sv-dropdown_select-wrapper {
+  position: relative;
+}
+
+.sv-dropdown_select-wrapper use {
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-dropdown {
@@ -3248,10 +3290,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   appearance: none;
   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)));
-  background-position: right calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
-  background-repeat: no-repeat;
-  background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%23909090'/%3E%3C/svg%3E%0A");
   opacity: 1;
   display: flex;
   justify-content: space-between;
@@ -3273,7 +3311,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-dropdown option {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
 }
 
 .sd-dropdown__value {
@@ -3282,9 +3320,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  line-height: calc(1.5 * 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)));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   position: relative;
 }
 
@@ -3293,13 +3333,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin: auto 0;
 }
 
-.sd-dropdown_clean-button-svg {
-  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+.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))));
 }
 
-.sd-dropdown use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.sd-dropdown_clean-button-svg {
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-input.sd-dropdown:focus-within {
@@ -3322,8 +3365,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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)));
-  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  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));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3339,7 +3382,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown__filter-string-input::placeholder {
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   max-width: 100%;
@@ -3347,7 +3390,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   appearance: none;
 }
 
@@ -3497,12 +3540,12 @@ 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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2.5 * var(--sjs-font-size, 16px));
 }
 
 .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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2.5 * var(--sjs-font-size, 16px));
 }
 
 .sd-imagepicker {
@@ -3591,8 +3634,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -3658,7 +3701,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-expression {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
 }
 
 .sd-progress {
@@ -3679,8 +3722,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1 * 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));
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 600;
 }
 @media only screen and (min-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
@@ -3694,13 +3737,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   }
 }
 
+.sd-boolean-root {
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
   position: relative;
   padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  background: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
+  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-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -3709,9 +3757,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
+  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, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * 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)));
 }
 
@@ -3741,8 +3789,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean__thumb {
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  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-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   transition-duration: 0.2s;
   transition-property: margin-left, transform;
@@ -3774,7 +3822,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
-  background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
+  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)));
 }
 
@@ -3869,7 +3917,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-paneldynamic__progress-text {
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin: 0;
   margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3957,7 +4005,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   overflow-x: hidden;
   white-space: nowrap;
@@ -4004,7 +4052,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tab-item__title {
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   display: flex;
   align-items: center;
@@ -4025,8 +4073,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file {
   min-height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
   position: relative;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 .sd-file .sv-action-bar {
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -4161,8 +4209,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__sign {
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-align: center;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
 }
 .sd-file__sign a {
   display: block;
@@ -4174,7 +4222,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   overflow: hidden;
   max-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-overflow: ellipsis;
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -4284,14 +4332,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   -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));
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  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;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   text-align: center;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
@@ -4391,6 +4439,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-sizing: border-box;
 }
 
+.sd-root_background-image {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 .sd-multipletext {
   width: 100%;
   table-layout: fixed;
@@ -4465,6 +4521,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-multipletext .sd-input .sd-input {
+  background: transparent;
+}
+
 .sd-action {
   appearance: none;
   border: none;
@@ -4475,8 +4535,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: 600;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
   outline: none;
 }
 
@@ -4585,7 +4645,7 @@ svg.sd-action--icon {
   height: auto;
 }
 .sd-completedpage h3 {
-  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
 .sd-completedpage:before,
@@ -4652,15 +4712,15 @@ svg.sd-action--icon {
 
 .sd-progress-buttons__page-title {
   width: 100%;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 600;
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
 .sd-progress-buttons__page-description {
   width: 100%;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   font-weight: 600;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
@@ -4697,6 +4757,25 @@ svg.sd-action--icon {
   border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
+.sv_progress-toc--mobile {
+  position: fixed;
+  top: calc(4 * 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;
+  z-index: 15;
+  border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sv_progress-toc--mobile > div {
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sv_progress-toc--mobile:hover {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
 .sd-list {
   padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4708,8 +4787,8 @@ svg.sd-action--icon {
 .sd-list__item.sd-list__item .sd-list__item-body {
   padding-block: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
 }
 
 .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {
@@ -4731,8 +4810,7 @@ svg.sd-action--icon {
   display: flex;
   border-radius: 100%;
   padding: calc(var(--sd-timer-size) / 144 * 8);
-  filter: drop-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: 0 2px 6px rgba(0, 0, 0, 0.1019607843);
+  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));
   box-sizing: border-box;
 }
 
@@ -4788,7 +4866,7 @@ svg.sd-action--icon {
 .sd-timer__text--minor {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-weight: 600;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
 }
 
 sv-components-container,
@@ -4884,8 +4962,8 @@ sv-components-container,
   flex-direction: column;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
-  line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  font-size: calc(0.75 * var(--sjs-font-size, 16px));
+  line-height: calc(1 * var(--sjs-font-size, 16px));
   height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-right: 0;
   border-right: none;
@@ -5024,6 +5102,11 @@ body {
   width: 100%;
   font-family: var(--font-family, var(--font-family));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  position: relative;
+}
+.sd-root-modern form {
+  z-index: 1;
+  position: relative;
 }
 .sd-root-modern * {
   scrollbar-width: thin;
@@ -5088,7 +5171,7 @@ body {
 }
 
 .sv-popup.sv-popup--modal .sv-popup__body-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));
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 }
 .sv-popup.sv-popup--modal .sv-popup__body-footer {