survey-react 1.9.84 → 1.9.86

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.84
+ * surveyjs - Survey JavaScript library v1.9.86
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -112,7 +112,7 @@
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
@@ -127,14 +127,14 @@ button.sv-action-bar-item {
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
   height: calc(5 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(1 * var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
   height: calc(4 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   margin: 0 calc(0.5 * var(--base-unit, 8px));
 }
@@ -204,11 +204,11 @@ button.sv-action-bar-item {
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   cursor: pointer;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -274,7 +274,7 @@ button.sv-action-bar-item {
   z-index: 1000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   padding-left: calc(2.5 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
 }
@@ -332,12 +332,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--base-unit, 8px));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-popup__body-content {
   background-color: var(--background, #fff);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -347,7 +347,7 @@ sv-popup {
   max-width: 90vw;
 }
 
-.sv-popup--modal {
+.sv-popup.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -355,11 +355,12 @@ sv-popup {
   padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__container {
+.sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
-.sv-popup--modal .sv-popup__body-content {
+.sv-popup.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * var(--base-unit, 8px));
+  height: auto;
 }
 
 .sv-popup--overlay.sv-popup--overlay {
@@ -378,7 +379,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
+  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
   background: var(--background, #fff);
   box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
   padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -474,7 +475,7 @@ sv-popup {
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
   font-weight: 700;
@@ -495,13 +496,13 @@ sv-popup {
   padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   background: var(--background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   margin: 2px;
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
   color: var(--primary, #19b394);
@@ -631,7 +632,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   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));
@@ -668,10 +669,9 @@ sv-popup {
   width: auto;
   min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
   margin: 0;
-  border-radius: 4px;
 }
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -683,7 +683,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -704,7 +704,7 @@ sv-popup {
   padding: 11px calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   outline: none;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   background: var(--background, #fff);
   cursor: pointer;
@@ -821,7 +821,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -840,7 +840,7 @@ sv-popup {
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   line-break: auto;
@@ -850,10 +850,10 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
-  border-radius: 5px 5px 0 0;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
 }
 
 .sv_window_content {
@@ -867,7 +867,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   color: black;
 }
@@ -888,8 +888,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--base-unit, 8px));
   color: #161616;
 }
 
@@ -902,8 +902,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(2 * var(--base-unit, 8px));
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -981,7 +981,7 @@ sv-popup {
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
   width: calc(5 * var(--base-unit, 8px));
@@ -1003,7 +1003,7 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
@@ -1126,7 +1126,7 @@ sv-popup {
 
 .sv-list__empty-text {
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1151,7 +1151,7 @@ sv-popup {
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
   overflow: hidden;
@@ -1159,12 +1159,24 @@ sv-popup {
   white-space: nowrap;
 }
 
-.sv-list__item.sv-list__item--focused,
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
+  outline: none;
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
+  border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  padding-block: calc(0.75 * var(--base-unit, 8px));
+  padding-inline-end: calc(7.75 * var(--base-unit, 8px));
+  padding-inline-start: calc(1.75 * var(--base-unit, 8px));
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
+  margin-inline-start: calc(-0.25 * var(--base-unit, 8px));
+}
+
 .sv-list__item:hover,
 .sv-list__item:focus {
   outline: none;
 }
-.sv-list__item.sv-list__item--focused .sv-list__item-body,
 .sv-list__item:hover .sv-list__item-body,
 .sv-list__item:focus .sv-list__item-body {
   background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
@@ -1275,7 +1287,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: 1em;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   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));
@@ -1308,13 +1320,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 0;
   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));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
   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, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;
   flex-direction: row;
@@ -1360,13 +1372,13 @@ 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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   height: calc(5 * var(--base-unit, 8px));
   color: #ffffff;
   background-color: var(--red, #e60a3e);
   border: calc(0.25 * var(--base-unit, 8px)) solid #ffffff;
-  border-radius: calc(0.75 * var(--base-unit, 8px));
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   display: flex;
   align-items: center;
@@ -1389,67 +1401,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-right: var(--sv-element-add-padding-right, 0px);
 }
 
-.svc-logic-question-value,
-.sd-element--with-frame:not(.sd-element--collapsed) {
-  border-radius: calc(0.5 * var(--base-unit, 8px));
-  box-sizing: border-box;
-  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(--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,
-.sd-element--with-frame:not(.sd-element--collapsed) > .sd-question__erbox--outside-question {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  margin-right: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-.svc-logic-question-value.sd-question--paneldynamic,
-.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic {
-  padding-bottom: 0;
-}
-.svc-logic-question-value.sd-question--paneldynamic > .sd-question__erbox--below-question,
-.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic > .sd-question__erbox--below-question {
-  bottom: 0;
-  margin-top: 0;
-}
-
-.sd-element--with-frame > .sd-question__erbox--above-question {
-  margin-top: calc(-1 * var(--sd-base-vertical-padding));
-}
-
-.svc-logic-question-value,
-.sd-element:not(.sd-element--collapsed) {
-  padding-top: var(--sd-base-vertical-padding);
-}
-
-.sd-table__cell--detail-panel .sd-element:not(.sd-element--collapsed) {
-  padding-top: calc(0.5 * var(--base-unit, 8px));
-}
-
-.sd-element.sd-element--complex {
-  padding-top: 0;
-}
-
-.sd-element--expanded > .sd-element__header,
-.sd-element--collapsed > .sd-element__header {
-  cursor: pointer;
-}
-
-.sd-element--collapsed > .sd-element__header {
-  padding: calc(2 * var(--base-unit, 8px)) var(--sd-base-padding);
-  box-sizing: border-box;
-  background-color: var(--background, #fff);
-}
-.sd-element--collapsed.sd-element--with-frame > .sd-element__header {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
-}
-.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
-  background-color: var(--background-dim-light, #f9f9f9);
-}
-
 .sd-element__title {
   outline: none;
 }
@@ -1462,80 +1413,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 1;
 }
 
-.sd-element--collapsed:not(.sd-element--with-frame) > .sd-element__header {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-
-.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top {
-  padding-top: var(--sd-base-vertical-padding);
-  padding-bottom: var(--sd-base-vertical-padding);
-}
-.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top:after {
-  content: " ";
-  display: block;
-  position: relative;
-  bottom: calc(-1 * var(--sd-base-vertical-padding));
-  height: 1px;
-  background: var(--sjs-border-light, var(--border-light, #eaeaea));
-}
-
-.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
-  content: " ";
-  left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-
-.sd-element--nested.sd-element--complex > .sd-element__header--location-top {
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
-  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-question--image {
-  padding-top: var(--sd-base-vertical-padding);
-}
-.sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
-  border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  box-sizing: border-box;
-  padding-left: var(--sd-base-padding);
-  padding-right: var(--sd-base-padding);
-  margin-top: var(--sd-base-vertical-padding);
-}
-.sd-element--nested.sd-panel > .sd-element__header--location-top, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top {
-  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-panel > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top:after {
-  left: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
-}
-.sd-element--nested.sd-panel > .sd-question__erbox--outside-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--outside-question {
-  margin-left: calc(-1 * var(--sd-base-padding));
-  margin-right: calc(-1 * var(--sd-base-padding));
-  width: calc(100% + 2 * var(--sd-base-padding));
-}
-.sd-element--nested.sd-panel > .sd-question__erbox--below-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--below-question {
-  bottom: 0;
-  margin-top: 0;
-}
-.sd-element--nested.sd-panel:not(.sd-element--collapsed) {
-  padding-bottom: var(--sd-base-padding);
-}
-
-.svc-question__content .sd-element {
-  padding-top: 0;
-}
-
-.svc-question__content .sd-element--complex > .sd-element__header--location-top {
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-  padding-top: 0;
-}
-.svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
-  display: none;
-}
-
 .sd-element--invisible {
   opacity: 0.35;
 }
@@ -1548,11 +1425,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin: 0;
 }
 .sd-element__title .sd-element__num {
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
 }
 .sd-element__title span {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 .sd-element__title .sv-title-actions__title {
@@ -1581,7 +1458,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-inline-start: 0;
   padding-inline-end: calc(1 * var(--base-unit, 8px));
   width: calc(5 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin-inline-start: calc(-5 * var(--base-unit, 8px));
@@ -1635,20 +1512,159 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   transform: rotate(90deg);
 }
 
+.svc-logic-question-value,
+.sd-element--with-frame {
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
+  box-sizing: border-box;
+  padding-top: var(--sd-base-padding);
+  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(--sjs-question-background, var(--background, #fff));
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+}
+.svc-logic-question-value.sd-question--paneldynamic,
+.sd-element--with-frame.sd-question--paneldynamic {
+  padding-bottom: 0;
+}
+.svc-logic-question-value.sd-question--paneldynamic > .sd-question__erbox--below-question,
+.sd-element--with-frame.sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+
+.sd-element--complex.sd-element--complex > .sd-question__erbox--above-question {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.sd-element--complex > .sd-element__header--location-top {
+  margin-top: 0;
+}
+.sd-element--complex > .sd-element__header--location-top:after {
+  content: " ";
+  display: block;
+  position: relative;
+  height: 1px;
+  background: var(--sjs-border-light, var(--border-light, #eaeaea));
+  bottom: 0;
+}
+.sd-element--complex.sd-element--with-frame {
+  padding-top: 0;
+}
+.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top {
+  margin-top: 0;
+  padding-top: var(--sd-base-vertical-padding);
+  padding-bottom: var(--sd-base-vertical-padding);
+}
+.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
+  bottom: calc(-1 * var(--sd-base-vertical-padding));
+  left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+
+.sd-element--expanded > .sd-element__header,
+.sd-element--collapsed > .sd-element__header {
+  cursor: pointer;
+}
+
+.sd-element--collapsed > .sd-element__header {
+  padding: calc(0 * var(--base-unit, 8px)) var(--sd-base-padding);
+  box-sizing: border-box;
+  background-color: var(--background, #fff);
+}
+.sd-element--collapsed.sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+.sd-element--collapsed.sd-element--with-frame {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-element--collapsed.sd-element--with-frame > .sd-element__header {
+  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
+}
+.sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
+  margin-top: 0;
+}
+.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+
+.sd-element--collapsed > .sd-element__header {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+
+.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-element--collapsed > .sd-element__header:hover, .sd-element--nested.sd-element--collapsed > .sd-element__header:focus-within {
+  box-shadow: 0 calc(-2 * var(--base-unit, 8px)) 0 0 var(--background-dim-light, #f9f9f9), 0 calc(2 * var(--base-unit, 8px)) 0 var(--background-dim-light, #f9f9f9);
+}
+.sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
+  border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: calc(var(--sjs-corner-radius, 4px) - 4px);
+  box-sizing: border-box;
+  padding-left: var(--sd-base-padding);
+  padding-right: var(--sd-base-padding);
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top {
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top:after {
+  left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--outside-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--below-question, .sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+.sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:after, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:after {
+  display: none;
+}
+.sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:hover, .sd-element--nested.sd-panel.sd-element--collapsed > .sd-element__header--location-top:focus-within, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:hover, .sd-element--nested.sd-question--paneldynamic.sd-element--collapsed > .sd-element__header--location-top:focus-within {
+  box-shadow: none;
+}
+.sd-element--nested > .sd-panel__content {
+  padding-bottom: var(--sd-base-padding);
+}
+
+.sd-element--with-frame.sd-element--compact {
+  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
+  box-shadow: none;
+}
+
+.svc-question__content .sd-element--complex > .sd-element__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-top: 0;
+}
+.svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+
 .sd-question {
   position: relative;
 }
 
 .sd-question__description {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-question__erbox {
   padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   font-weight: 600;
   line-height: calc(2 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   white-space: normal;
   text-align: left;
 }
@@ -1661,7 +1677,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox--above-question {
-  border-radius: calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) 0 0;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
   margin-bottom: calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px));
 }
 
@@ -1673,7 +1689,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
   margin-top: 0;
   bottom: calc(-1 * var(--sd-base-padding));
-  border-radius: 0 0 calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px));
+  border-radius: 0 0 calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-root-modern--mobile .sd-question__erbox--below-question {
@@ -1688,6 +1704,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-question__header--location--bottom {
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+}
+
+.svc-logic-question-value > .sd-question__erbox--outside-question,
+.sd-element--with-frame > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.svc-logic-question-value > .sd-question__erbox--above-question,
+.sd-element--with-frame > .sd-question__erbox--above-question {
+  margin-top: calc(-1 * var(--sd-base-padding));
+  margin-bottom: var(--sd-base-vertical-padding);
+}
+.svc-logic-question-value > .sd-question__header--location-top,
+.sd-element--with-frame > .sd-question__header--location-top {
+  margin-top: calc(-1 * var(--base-unit, 8px));
+}
+.svc-logic-question-value > .sd-question__content > .sd-question__header--location--bottom,
+.sd-element--with-frame > .sd-question__content > .sd-question__header--location--bottom {
+  margin-bottom: calc(-1 * var(--base-unit, 8px));
+}
+
 .sd-scrollable .sd-question__content {
   overflow-x: auto;
   padding: calc(2 * var(--base-unit, 8px)) 0;
@@ -1718,7 +1758,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__comment-area {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   margin-top: calc(2 * var(--base-unit, 8px));
   display: flex;
   flex-direction: column;
@@ -1753,13 +1793,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: left;
 }
 
-.sd-question--complex .sd-question__erbox--above-question {
-  margin-top: 0;
-}
-.sd-question--complex .sd-question__erbox--above-question ~ .sd-question__header--location-top {
-  padding-top: calc(1 * var(--base-unit, 8px));
-}
-
 .sd-question--empty.sd-question--complex > .sd-question__header--location-top {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
@@ -1776,7 +1809,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   justify-content: center;
   min-height: calc(24 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -1808,12 +1841,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   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;
+  border-radius: var(--sjs-editor-corner-radius, var(--sjs-corner-radius, 4px));
   text-align: start;
 }
 
@@ -1868,7 +1901,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: 0px;
   font-family: var(--font-family);
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   position: absolute;
   inset-inline-end: calc(2 * var(--base-unit, 8px));
@@ -1930,13 +1963,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-panel {
   position: relative;
 }
-.sd-panel .sd-row {
-  margin-top: 0;
-}
-.sd-panel :not(.svc-row) > .sd-row--multiple {
-  row-gap: 0;
-}
 
+.sd-panel.sd-panel--as-page > .sd-panel__content {
+  padding-top: 0;
+}
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
   padding-top: 0;
   padding-bottom: 0;
@@ -1946,7 +1976,7 @@ 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 {
   position: static;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 700;
@@ -1957,7 +1987,7 @@ 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 {
   position: static;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-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;
@@ -1978,6 +2008,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-panel__content {
+  padding-top: var(--sd-base-vertical-padding);
+}
+
+.svc-question__content .sd-panel__content {
+  gap: 0;
+  padding-top: 0;
+}
+
 .sjs_sp_placeholder {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
@@ -2002,7 +2041,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox__decorator {
-  border-radius: 3px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-checkbox__svg {
@@ -2050,7 +2089,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background: transparent;
   border: none;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
   font-weight: 600;
   padding: calc(1 * var(--base-unit, 8px)) 0;
@@ -2069,7 +2108,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(2 * var(--base-unit, 8px));
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: calc(1.25 * var(--base-unit, 8px));
 }
 
 .sd-matrixdynamic__placeholder .sd-matrixdynamic__add-btn {
@@ -2121,7 +2160,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table__cell {
   font-weight: normal;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-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(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2326,6 +2365,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   table-layout: fixed;
 }
 
+.sd-table__cell--detail-panel .sd-panel__content {
+  padding-top: calc(1 * var(--base-unit, 8px));
+}
+
 .sd-body--responsive .sd-page {
   padding: calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px));
 }
@@ -2349,7 +2392,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page .sd-page__title {
   position: static;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 700;
@@ -2358,7 +2401,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page .sd-page__description {
   position: static;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-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;
@@ -2370,22 +2413,29 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
-  margin-top: calc(2 * var(--base-unit, 8px));
+  margin-top: var(--sd-base-vertical-padding);
 }
 
-.sd-page__row.sd-row {
+.sd-row:first-of-type {
+  margin-top: 0;
+}
+
+.sd-row.sd-page__row {
   margin-top: calc(2 * var(--base-unit, 8px));
 }
+.sd-row.sd-page__row.sd-row--compact {
+  margin-top: var(--sd-base-vertical-padding);
+}
 
-.sd-page__row.sd-row--multiple,
+.sd-page__row.sd-row--multiple:not(.sd-row--compact),
 .svc-row > .sd-row--multiple {
   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));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 :not(.svc-row) > .sd-row--multiple {
-  row-gap: calc(1 * var(--base-unit, 8px));
+  row-gap: var(--sd-base-vertical-padding);
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
@@ -2396,10 +2446,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 :not(.svc-row) > .sd-page__row.sd-row--multiple {
-  padding: 0 var(--sd-base-padding) var(--sd-base-padding) 0;
+  padding: var(--sd-base-vertical-padding) var(--sd-base-padding) var(--sd-base-padding) 0;
   margin-left: 0;
   width: 100%;
 }
+:not(.svc-row) > .sd-page__row.sd-row--multiple.sd-row--compact {
+  padding: 0;
+  width: calc(100% + var(--sd-base-padding));
+  margin-left: calc(-1 * var(--sd-base-padding));
+}
 
 .svc-row .sd-row--multiple {
   overflow: auto;
@@ -2410,7 +2465,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(1 * var(--base-unit, 8px));
 }
 
-:not(.svc-row--ghost) > .sd-row {
+.svc-row:not(.svc-row--ghost) > .sd-row {
   min-height: 50px;
 }
 
@@ -2460,13 +2515,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   flex-grow: 1;
 }
 .sd-header__text h3 {
-  font-size: calc(4 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 700;
   line-height: calc(5 * var(--base-unit, 8px));
   color: var(--primary, #19b394);
 }
 .sd-header__text h5 {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   line-height: calc(3 * var(--base-unit, 8px));
 }
@@ -2517,11 +2572,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   white-space: normal;
   word-break: break-word;
 }
 
+.sd-element__header .sd-description {
+  margin-top: calc(0.5 * var(--base-unit, 8px));
+}
+
 .sd-item {
   padding: calc(1.5 * var(--base-unit, 8px)) 0;
 }
@@ -2564,7 +2625,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-style: normal;
   font-weight: normal;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   white-space: normal;
   word-break: break-word;
@@ -2634,7 +2695,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox__decorator {
-  border-radius: 3px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-checkbox__svg {
@@ -2717,6 +2778,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: left;
 }
 
+:root {
+  --sd-rating-bad-color: var(--red, #e60a3e);
+  --sd-rating-normal-color: var(--yellow, #ff9814);
+  --sd-rating-good-color: var(--green, #19b394);
+  --sd-rating-bad-color-light: var(--red-light, rgba(230, 10, 62, 0.1));
+  --sd-rating-normal-color-light: var(--yellow-light, rgba(255, 152, 20, 0.1));
+  --sd-rating-good-color-light: var(--green-light, rgba(25, 179, 148, 0.1));
+}
+
 .sd-rating {
   overflow-x: auto;
   min-height: calc(8 * var(--base-unit, 8px));
@@ -2751,7 +2821,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border: 2px solid var(--background, #fff);
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-rating__item--fixed-size {
@@ -2832,6 +2902,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-smiley--error {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
   border-color: transparent;
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+.sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
+  opacity: initial;
 }
 
 .sd-rating__item-smiley.sd-rating__item-smiley--disabled {
@@ -2845,6 +2919,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-smiley--allowhover:hover {
   background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-smiley:focus-within {
@@ -2862,6 +2937,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: inset 0 0 0 2px var(--background, #fff);
 }
 
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
+  opacity: 0.25;
+}
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley--rate-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected):focus-within {
+  opacity: 1;
+}
+
 .sd-rating__item-star {
   position: relative;
   background: var(--background, #fff);
@@ -2942,7 +3032,7 @@ 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));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   display: inline-block;
 }
@@ -3020,7 +3110,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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-dropdown__value {
@@ -3030,7 +3120,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
@@ -3067,7 +3157,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   outline: none;
   padding: 0;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3083,7 +3173,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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   max-width: 100%;
@@ -3145,7 +3235,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
   background-color: var(--primary, #19b394);
-  border-radius: calc(0.25 * var(--base-unit, 8px));
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-tagbox__item-text {
@@ -3246,7 +3336,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-imagepicker__item img,
 .sd-imagepicker__item .sd-imagepicker__image-container > div {
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   background-color: var(--background-dim-light, #f9f9f9);
 }
 
@@ -3294,7 +3384,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
   height: 100%;
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   background: linear-gradient(0deg, var(--red-light, rgba(230, 10, 62, 0.1)), var(--red-light, rgba(230, 10, 62, 0.1)));
 }
 
@@ -3310,7 +3400,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-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(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3346,7 +3436,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-image__image {
   display: block;
   max-width: 100%;
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-image__image--adaptive {
@@ -3378,7 +3468,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-expression {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-progress {
@@ -3399,7 +3489,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1 * var(--base-unit, 8px));
   right: calc(3 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
 }
@@ -3424,16 +3514,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-radius: calc(12.5 * var(--base-unit, 8px));
 }
 
-.sd-boolean.sd-boolean--indeterminate:hover {
-  background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
-}
-
 .sd-boolean__thumb,
 .sd-boolean__label {
   display: block;
   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));
+  font-size: calc(1 * var(--sjs-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));
 }
@@ -3455,6 +3541,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: inset 0 0 0 2px var(--primary, #19b394);
 }
 
+.sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
+  display: none;
+}
+
 .sd-boolean--indeterminate .sd-boolean__thumb {
   display: none;
 }
@@ -3470,6 +3560,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: 600;
   margin-left: 0%;
   transform: translateX(0);
+  z-index: 2;
 }
 
 .sd-boolean--checked .sd-boolean__thumb {
@@ -3477,12 +3568,24 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   transform: translateX(-100%);
 }
 
+.sd-boolean--disabled {
+  pointer-events: none;
+}
 .sd-boolean--disabled .sd-boolean__thumb,
 .sd-boolean--disabled .sd-boolean__label {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 
+.sd-boolean__thumb-ghost {
+  z-index: 1;
+}
+
+.sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
+  background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+}
+
 .svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
 .svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
   color: var(--primary, #19b394);
@@ -3586,7 +3689,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-paneldynamic__progress-text {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin: 0;
   margin-right: calc(3 * var(--base-unit, 8px));
@@ -3676,7 +3779,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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   overflow-x: hidden;
   white-space: nowrap;
@@ -3705,7 +3808,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file {
   min-height: calc(36 * var(--base-unit, 8px));
   position: relative;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 .sd-file .sv-action-bar {
@@ -3841,7 +3944,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__sign {
   margin-top: calc(1 * var(--base-unit, 8px));
   text-align: center;
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
 }
 .sd-file__sign a {
@@ -3965,12 +4068,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   background: var(--background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
   color: var(--primary, #19b394);
@@ -4154,7 +4257,7 @@ 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(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   outline: none;
 }
@@ -4264,7 +4367,7 @@ svg.sd-action--icon {
   height: auto;
 }
 .sd-completedpage h3 {
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-completedpage:before,
@@ -4331,14 +4434,14 @@ svg.sd-action--icon {
 
 .sd-progress-buttons__page-title {
   width: 100%;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 600;
   line-height: calc(3 * var(--base-unit, 8px));
 }
 
 .sd-progress-buttons__page-description {
   width: 100%;
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4363,7 +4466,7 @@ svg.sd-action--icon {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   padding-inline-end: calc(2 * var(--base-unit, 8px));
-  border-radius: 3px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   padding-top: calc(1.5 * var(--base-unit, 8px));
   padding-bottom: calc(1.5 * var(--base-unit, 8px));
 }
@@ -4385,12 +4488,17 @@ svg.sd-action--icon {
   padding: 0;
 }
 .sd-list__item.sd-list__item .sd-list__item-body {
-  padding-top: calc(1.5 * var(--base-unit, 8px));
-  padding-bottom: calc(1.5 * var(--base-unit, 8px));
-  border-radius: 3px;
-  font-size: calc(2 * var(--base-unit, 8px));
+  padding-block: calc(1.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
-  padding-inline: calc(2 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
+}
+
+.sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {
+  outline: none;
+}
+.sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) .sd-list__item-body {
+  padding-block: calc(1.25 * var(--base-unit, 8px));
 }
 
 .sd-timer {
@@ -4462,7 +4570,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(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 sv-components-container,
@@ -4560,9 +4668,9 @@ sv-components-container,
   flex-direction: column;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
-  font-size: 12px;
-  line-height: 16px;
-  height: 16px;
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
   padding-right: 0;
   border-right: none;
   margin-bottom: 0;