survey-react 1.9.80 → 1.9.82

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.82
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -114,7 +114,7 @@
   border: none;
   border-radius: 2px;
   background-color: transparent;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   overflow-x: hidden;
@@ -159,7 +159,7 @@ button.sv-action-bar-item {
   display: block;
 }
 .sv-action-bar-item__icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
@@ -314,7 +314,6 @@ sv-popup {
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
   outline: none;
   z-index: 1500;
 }
@@ -343,6 +342,11 @@ sv-popup {
   max-width: 90vw;
 }
 
+.sv-popup.sv-popup--modal,
+.sv-popup.sv-popup--overlay {
+  height: 100vh;
+}
+
 .sv-popup--modal {
   display: flex;
   align-items: center;
@@ -398,7 +402,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
   background-color: var(--primary, #19b394);
   border: 2px solid var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -475,7 +479,7 @@ sv-popup {
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
@@ -494,7 +498,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -510,7 +514,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -520,7 +525,7 @@ sv-popup {
 
 .sv-popup__button--apply {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup__button--apply:disabled {
@@ -605,7 +610,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -622,13 +627,13 @@ sv-popup {
   width: calc(2 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -640,14 +645,14 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  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 {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -704,7 +709,7 @@ sv-popup {
   background: var(--background, #fff);
   cursor: pointer;
   overflow: hidden;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
 .sv-button-group__item:not(:last-of-type) {
@@ -720,7 +725,7 @@ sv-popup {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-button-group__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-button-group__item--selected {
@@ -752,11 +757,12 @@ sv-popup {
 }
 
 .sv-button-group__item--disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 .sv-button-group__item--disabled .sv-button-group__item-icon use {
-  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 .sv-button-group__item--disabled:hover {
   background-color: var(--background, #fff);
@@ -814,7 +820,7 @@ sv-popup {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -868,7 +874,7 @@ sv-popup {
 
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   text-align: center;
   color: #161616;
   background: white;
@@ -932,11 +938,13 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
+  top: calc(0.6 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--background, #fff);
-  border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
+  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
@@ -955,8 +963,6 @@ sv-popup {
   flex-shrink: 0;
   width: calc(3 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -964,7 +970,6 @@ sv-popup {
   fill: var(--primary, #19b394);
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
 }
@@ -975,7 +980,7 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
@@ -984,7 +989,7 @@ sv-popup {
   line-height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(0 * var(--base-unit, 8px));
 }
 .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -997,14 +1002,15 @@ sv-popup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
@@ -1047,7 +1053,7 @@ sv-popup {
 
 .sv-ranking--mobile .sv-ranking-item__icon--hover {
   visibility: visible;
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
@@ -1090,12 +1096,15 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
   top: calc(1 * var(--base-unit, 8px));
 }
 
+.sv-ranking-shortcut .sv-ranking-item__icon-container {
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1120,14 +1129,14 @@ sv-popup {
   font-size: calc(2 * var(--base-unit, 8px));
   font-weight: 400;
   text-align: center;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1141,7 +1150,7 @@ sv-popup {
   padding-block: calc(1 * var(--base-unit, 8px));
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
@@ -1180,7 +1189,7 @@ sv-popup {
   display: block;
 }
 .sv-list__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 [dir=rtl] .sv-list__item-icon,
@@ -1201,7 +1210,7 @@ sv-popup {
 .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
 li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-list__item.sv-list__item--selected .sv-list__item-icon use,
@@ -1215,13 +1224,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
 .sv-list__item.sv-list__item--disabled .sv-list__item-body {
   cursor: default;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item span {
@@ -1254,7 +1263,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-list__filter-icon .sv-svg-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input {
@@ -1267,7 +1276,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: 100%;
   outline: none;
   font-size: 1em;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   padding-inline-start: calc(7 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
@@ -1275,12 +1284,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-list__input::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input:disabled,
 .sv-list__input:disabled::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__loading-indicator {
@@ -1300,11 +1309,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   border-radius: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   min-width: calc(30 * var(--base-unit, 8px));
   text-align: center;
   z-index: 1600;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;
@@ -1387,7 +1396,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
   padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
   padding-bottom: var(--sd-base-padding);
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
 }
 .svc-logic-question-value > .sd-question__erbox--outside-question,
@@ -1574,7 +1583,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(5 * var(--base-unit, 8px));
   font-size: calc(1.5 * var(--base-unit, 8px));
   line-height: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin-inline-start: calc(-5 * var(--base-unit, 8px));
   text-align: end;
   box-sizing: border-box;
@@ -1714,7 +1723,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: flex;
   flex-direction: column;
   gap: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   white-space: normal;
 }
 
@@ -1725,7 +1734,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: auto;
   max-width: calc(29 * var(--base-unit, 8px));
   background-color: var(--background, #fff);
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.75;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   z-index: 1000;
@@ -1768,7 +1777,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-height: calc(24 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
   white-space: pre-line;
@@ -1798,10 +1807,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
-  background-color: var(--background-dim-light, #f9f9f9);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border: none;
   border-radius: 3px;
@@ -1813,7 +1822,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input--disabled {
-  background-color: var(--background-dim-light, #f9f9f9);
+  background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1821,7 +1830,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1830,12 +1839,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-input--disabled,
 .sd-input--disabled::placeholder {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .sd-root--readonly .sd-input--disabled,
 .sd-root--readonly .sd-input--disabled::placeholder {
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sd-input:focus {
@@ -1856,10 +1866,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0px;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--font-family);
   line-height: calc(3 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   position: absolute;
   inset-inline-end: calc(2 * var(--base-unit, 8px));
   inset-block-end: calc(1.5 * var(--base-unit, 8px));
@@ -1969,7 +1979,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sjs_sp_placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sjs_sp_container {
@@ -2005,7 +2015,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: block;
 }
 .sd-checkbox--checked .sd-checkbox__svg use {
-  fill: var(--primary-foreground, #fff);
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
@@ -2041,7 +2051,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border: none;
   line-height: calc(3 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-weight: 600;
   padding: calc(1 * var(--base-unit, 8px)) 0;
 }
@@ -2072,12 +2082,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: block;
 }
 .sd-drag-element__svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-table {
   width: 100%;
-  background-color: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
   border-collapse: collapse;
   white-space: normal;
 }
@@ -2102,7 +2112,7 @@ 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 .sd-input,
 .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
-  background-color: var(--primary-foreground, #fff);
+  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 {
@@ -2114,7 +2124,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
 }
 
@@ -2178,7 +2188,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 1;
 }
 .svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical) {
@@ -2196,7 +2206,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table__cell--detail-button svg {
   width: calc(2 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-table__cell--detail-button:hover {
   background: var(--green-light, rgba(25, 179, 148, 0.1));
@@ -2236,7 +2246,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr > td:first-of-type {
   position: sticky;
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
   z-index: 12;
 }
 .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
@@ -2257,7 +2267,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
   margin-right: calc(-3 * var(--base-unit, 8px));
   justify-content: flex-end;
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
 }
 
 .sd-question.sd-question--table {
@@ -2278,7 +2288,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-height: 100%;
   width: calc(var(--sd-base-padding) - var(--base-unit, 8px));
   flex-shrink: 0;
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
   z-index: 11;
 }
 .sd-table-wrapper::before {
@@ -2337,20 +2347,22 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
 }
 
-.sd-page__title {
+.sd-page .sd-page__title {
   position: static;
   font-size: calc(3 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 700;
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
 }
 
-.sd-page__description {
+.sd-page .sd-page__description {
   position: static;
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 400;
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
 .sd-row {
@@ -2367,7 +2379,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page__row.sd-row--multiple,
 .svc-row > .sd-row--multiple {
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, var(--background, #fff));
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(0.5 * var(--base-unit, 8px));
 }
@@ -2419,9 +2431,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-title {
   display: block;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   flex-direction: row;
   white-space: normal;
   word-break: break-word;
@@ -2432,7 +2444,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   align-items: center;
   padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
   overflow: auto;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   gap: calc(4 * var(--base-unit, 8px));
   box-shadow: 0px 2px 0px var(--primary, #19b394);
   margin-bottom: 2px;
@@ -2502,10 +2514,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-description {
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   white-space: normal;
   word-break: break-word;
 }
@@ -2522,7 +2534,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(3 * var(--base-unit, 8px));
   height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
-  background: var(--sd-item-default-background, var(--background-dim-light, #f9f9f9));
+  background: var(--sd-item-default-background, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border: none;
   flex-shrink: 0;
@@ -2548,12 +2560,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-item__control-label {
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
   line-height: calc(3 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   white-space: normal;
   word-break: break-word;
   width: 100%;
@@ -2561,11 +2573,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-item--disabled .sd-item__control-label {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .sd-root--readonly .sd-item--disabled .sd-item__control-label {
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sd-item--error .sd-item__decorator {
@@ -2634,7 +2647,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: block;
 }
 .sd-checkbox--checked .sd-checkbox__svg use {
-  fill: var(--primary-foreground, #fff);
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
@@ -2655,7 +2668,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(1 * var(--base-unit, 8px));
   height: calc(1 * var(--base-unit, 8px));
   border-radius: 50%;
-  background-color: var(--primary-foreground, #fff);
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-radio--checked.sd-radio--disabled .sd-radio__decorator:after {
@@ -2727,16 +2740,25 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(12.5 * var(--base-unit, 8px));
   white-space: nowrap;
-  padding: calc(1.25 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px));
+  height: calc(6 * var(--base-unit, 8px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   min-width: calc(6 * var(--base-unit, 8px));
   text-align: center;
   border: 2px solid var(--background, #fff);
-  color: var(--foreground, #161616);
-  fill: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
 }
 
+.sd-rating__item--fixed-size {
+  width: calc(6 * var(--base-unit, 8px));
+  padding: 0;
+}
+
 legend + .sd-rating__item,
 legend + sv-ng-rating-item + .sd-rating__item {
   margin-inline-start: 2px;
@@ -2749,13 +2771,17 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item.sd-rating__item--disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
-  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
-  color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
-  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+}
+
+.sd-question--disabled .sd-rating__item-text {
+  opacity: 0.25;
 }
 
 .sd-rating__item--allowhover:hover,
@@ -2766,7 +2792,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item--selected {
   background-color: var(--primary, #19b394);
   border-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
   box-shadow: 0px 1px 2px transparent;
 }
@@ -2785,7 +2811,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
   min-width: calc(6 * var(--base-unit, 8px));
   text-align: center;
   border: 2px solid var(--border, #d6d6d6);
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--border, #d6d6d6);
 }
 .sd-rating__item-smiley svg {
@@ -2810,7 +2836,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--disabled {
   opacity: initial;
-  fill: var(--primary-foreground, #fff);
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-rating__item-smiley--allowhover:hover,
@@ -2821,7 +2847,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-smiley--selected {
   background-color: var(--primary, #19b394);
   border-color: var(--primary, #19b394);
-  fill: var(--primary-foreground, #fff);
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 
@@ -2911,14 +2937,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text {
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  min-width: calc(3 * var(--base-unit, 8px));
   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 {
   margin-top: calc(1.25 * var(--base-unit, 8px));
   margin-bottom: calc(1.25 * var(--base-unit, 8px));
   border: 2px solid var(--background, #fff);
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
   margin-right: calc(1 * var(--base-unit, 8px));
@@ -2931,6 +2956,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text .sv-string-editor {
   white-space: nowrap;
 }
+.sd-rating__item-text.sd-rating__item-text.sd-rating__item--fixed-size {
+  min-width: calc(3 * var(--base-unit, 8px));
+}
 
 .sv-ranking-item--error .sv-ranking-item__index {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
@@ -2942,21 +2970,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: calc(-3 * var(--base-unit, 8px));
 }
 
-.sd-element--with-frame .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
-  width: calc(1.75 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
-  top: calc(1 * var(--base-unit, 8px));
-}
-
-.sd-element--with-frame .sv-ranking-item__icon-container {
-  position: relative;
-  width: calc(3 * var(--base-unit, 8px));
-  height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
-}
-
 .sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container {
   margin-left: 0;
   margin-right: calc(1 * var(--base-unit, 8px));
@@ -2990,7 +3003,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown--empty:not(.sd-input--disabled),
 .sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__value {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-dropdown__input-field-component {
@@ -2998,8 +3011,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown option {
-  color: var(--foreground, #161616);
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
 }
 
@@ -3009,9 +3022,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
 
@@ -3026,7 +3039,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-input.sd-dropdown:focus-within {
@@ -3046,7 +3059,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
   background-color: transparent;
   overflow: hidden;
@@ -3058,13 +3071,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__filter-string-input::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-dropdown__filter-string-input::placeholder {
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   max-width: 100%;
   overflow: hidden;
@@ -3076,12 +3089,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__hint-prefix {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-dropdown__hint-prefix span {
+  white-space: pre;
 }
 
 .sd-dropdown__hint-suffix {
   display: flex;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-dropdown__hint-suffix span {
+  white-space: pre;
 }
 
 [dir=rtl] .sd-dropdown,
@@ -3123,7 +3142,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sv-tagbox__item-text {
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   min-width: calc(5.5 * var(--base-unit, 8px));
   text-align: center;
   font-weight: 600;
@@ -3153,11 +3172,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-tagbox-item_clean-button-svg:hover {
   border-radius: 100px;
-  background: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+  background: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25)));
 }
 
 .sd-tagbox-item_clean-button-svg use {
-  fill: var(--primary-foreground, #fff);
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-tagbox__value.sd-dropdown__value {
@@ -3189,7 +3208,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-align: left;
   cursor: text;
   pointer-events: none;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 [dir=rtl] .sd-tagbox-item_clean-button,
@@ -3287,7 +3306,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin-top: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sd-imagepicker__no-image {
@@ -3302,7 +3321,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin: auto;
 }
 .sd-imagepicker__no-image-svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-imagepicker__column {
@@ -3343,7 +3362,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-image__no-image use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-html {
@@ -3351,7 +3370,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-expression {
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
 }
 
@@ -3372,7 +3391,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   position: absolute;
   margin-top: calc(1 * var(--base-unit, 8px));
   right: calc(3 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(1.5 * var(--base-unit, 8px));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
@@ -3393,7 +3412,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: max-content;
   position: relative;
   padding: calc(0.5 * var(--base-unit, 8px));
-  background: var(--background-dim-light, #f9f9f9);
+  background: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(12.5 * var(--base-unit, 8px));
 }
@@ -3401,8 +3420,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-boolean__thumb,
 .sd-boolean__label {
   display: block;
-  color: var(--foreground-light, #909090);
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
@@ -3449,7 +3468,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-boolean--disabled .sd-boolean__thumb,
 .sd-boolean--disabled .sd-boolean__label {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
@@ -3488,7 +3508,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 .sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header > .sd-panel__title {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-question__content:first-child > .sd-paneldynamic > .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
@@ -3556,7 +3576,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-paneldynamic__progress-text {
   font-size: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin: 0;
   margin-right: calc(3 * var(--base-unit, 8px));
 }
@@ -3612,6 +3632,65 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-bottom: calc(-1 * var(--base-unit, 8px));
 }
 
+.sv-tabs-toolbar.sv-action-bar {
+  gap: calc(4 * var(--base-unit, 8px));
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--left {
+  justify-content: flex-start;
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--right {
+  justify-content: flex-end;
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--center {
+  justify-content: center;
+}
+
+.sv-tab-item__root {
+  display: flex;
+}
+
+.sv-tab-item {
+  padding: calc(1 * var(--base-unit, 8px)) 0 calc(2 * var(--base-unit, 8px)) 0;
+  display: flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  padding: calc(1 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: var(--font-family, var(--font-family));
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.sv-tab-item.sv-tab-item--pressed {
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  box-shadow: inset 0px -2px 0px var(--primary, #19b394);
+}
+
+.sv-tab-item__title {
+  line-height: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  display: flex;
+  align-items: center;
+}
+
+.sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab {
+  padding-bottom: 0;
+}
+
+.sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab::after {
+  bottom: 0;
+}
+
 .sd-file {
   min-height: calc(36 * var(--base-unit, 8px));
   position: relative;
@@ -3627,7 +3706,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-file .sv-action-bar .sv-action-bar-item {
   height: calc(4 * var(--base-unit, 8px));
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   border-radius: calc(2 * var(--base-unit, 8px));
 }
 .sd-file .sv-action-bar #fileIndex .sv-action-bar-item {
@@ -3668,7 +3747,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-align: center;
   word-break: break-word;
   white-space: normal;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-file__choose-btn--text {
@@ -3757,7 +3836,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__sign a {
   display: block;
   text-decoration: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   white-space: normal;
   word-break: break-all;
   width: calc(12 * var(--base-unit, 8px));
@@ -3893,13 +3972,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-btn:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
 .sd-btn--action {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sd-btn--action:not(:disabled):hover, .sd-btn--action:not(:disabled):focus {
@@ -3908,7 +3988,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-btn--action:disabled {
-  color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+  color: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25)));
 }
 
 .sd-body {
@@ -4023,7 +4103,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-right: 1px solid var(--border, #d6d6d6);
   word-break: break-word;
   white-space: normal;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-multipletext__item {
@@ -4073,16 +4153,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-action--icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 svg.sd-action--icon {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-action:disabled,
 .sd-action--disabled {
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: default;
   opacity: 0.25;
   pointer-events: none;
@@ -4145,7 +4225,7 @@ svg.sd-action--icon {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sd-context-btn use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-context-btn:hover use,
@@ -4226,7 +4306,7 @@ svg.sd-action--icon {
 }
 
 .sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
@@ -4246,7 +4326,7 @@ svg.sd-action--icon {
   font-size: calc(1.5 * var(--base-unit, 8px));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv_progress-toc {
@@ -4254,13 +4334,12 @@ svg.sd-action--icon {
   max-width: calc(42 * var(--base-unit, 8px));
   height: 100%;
   background: var(--background, #fff);
-  border-right: 1px solid var(--border, #d6d6d6);
   box-sizing: border-box;
   min-width: calc(32 * var(--base-unit, 8px));
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 .sv_progress-toc .sv-list__item span {
@@ -4274,6 +4353,14 @@ svg.sd-action--icon {
   padding-bottom: calc(1.5 * var(--base-unit, 8px));
 }
 
+.sv_progress-toc--left {
+  border-right: 1px solid var(--border, #d6d6d6);
+}
+
+.sv_progress-toc--right {
+  border-left: 1px solid var(--border, #d6d6d6);
+}
+
 .sd-list {
   padding-right: calc(0.5 * var(--base-unit, 8px));
   padding-left: calc(0.5 * var(--base-unit, 8px));
@@ -4358,7 +4445,7 @@ svg.sd-action--icon {
 }
 
 .sd-timer__text--minor {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-weight: 600;
   font-size: calc(1.5 * var(--base-unit, 8px));
 }
@@ -4569,7 +4656,7 @@ sv-components-container,
   margin-bottom: calc(-2 * var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   padding-top: calc(2 * var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child) {
@@ -4619,7 +4706,7 @@ body {
 }
 .sd-root-modern ::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--foreground-light, #909090);
+  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-container-modern {
@@ -4650,7 +4737,7 @@ body {
 }
 .sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--foreground-light, #909090);
+  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-popup.sv-popup--dropdown .sv-popup__shadow {