survey-react 1.9.112 → 1.9.114

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.112
+ * surveyjs - Survey JavaScript library v1.9.114
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -262,7 +262,7 @@
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -355,7 +355,7 @@ button.sv-action-bar-item {
   cursor: pointer;
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-size: var(--sjs-font-size, 16px);
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 }
 
 .sv-expand-action:before {
@@ -422,7 +422,7 @@ button.sv-action-bar-item {
   position: absolute;
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -472,6 +472,7 @@ sv-popup {
 }
 
 .sv-popup__container {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
@@ -496,7 +497,7 @@ sv-popup {
   max-width: 100vw;
 }
 
-.sv-popup.sv-popup--modal {
+.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -504,10 +505,20 @@ sv-popup {
   padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
-.sv-popup.sv-popup--modal .sv-popup__body-content {
+
+.sv-popup--modal > .sv-popup__container {
+  position: static;
+}
+
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
 
 .sv-popup--confirm-delete .sv-popup__shadow {
   height: initial;
@@ -522,11 +533,12 @@ sv-popup {
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   margin-bottom: 0;
   /* UI/Default */
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   font-style: normal;
   font-weight: 400;
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  /* 150% */
 }
 .sv-popup--confirm-delete .sv-popup__scrolling-content {
   display: none;
@@ -538,15 +550,11 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup.sv-popup--modal > .sv-popup__container {
-  position: static;
-}
-
-.sv-popup--overlay.sv-popup--overlay {
+.sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__container {
+.sv-popup--overlay .sv-popup__container {
   background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
   max-width: 100vw;
   max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -555,7 +563,7 @@ sv-popup {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
   border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
@@ -564,25 +572,25 @@ sv-popup {
   padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
+.sv-popup--overlay .sv-popup__body-footer {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
+.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
+.sv-popup--overlay .sv-popup__body-footer-item {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__button {
+.sv-popup--overlay .sv-popup__button.sv-popup__button {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
+.sv-popup--overlay .sv-popup__body-footer .sv-action {
   flex: 1 0 0;
 }
 
@@ -685,66 +693,93 @@ sv-popup {
   top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-dropdown-popup.sv-popup--overlay {
+.sv-popup--dropdown .sv-list__filter {
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--dropdown .sv-popup__shadow {
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+}
+.sv-popup--dropdown .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  height: 100%;
+}
+
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
+  background-color: transparent;
+}
+
+.sv-dropdown-popup .sv-popup__body-content {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+}
+.sv-dropdown-popup .sv-list__filter {
+  margin-bottom: 0;
+}
+
+.sv-popup--overlay .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
+.sv-popup--dropdown-overlay {
   z-index: 2001;
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   padding: 0;
   border-radius: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
-  width: auto;
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action {
+  flex: 0 0 auto;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
+.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
   background-color: transparent;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
+.sv-popup--dropdown-overlay .sv-popup__container {
   max-height: calc(var(--sv-popup-overlay-height, 100vh));
   height: calc(var(--sv-popup-overlay-height, 100vh));
   padding-top: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   height: calc(var(--sv-popup-overlay-height, 100vh));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   margin-top: 0;
-  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--dropdown-overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__container {
+.sv-popup--dropdown-overlay .sv-list__container {
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list {
+.sv-popup--dropdown-overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
+.sv-popup--dropdown-overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: 0;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
+.sv-popup--dropdown-overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
+.sv-popup--dropdown-overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -752,12 +787,12 @@ sv-popup {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
+.sv-popup--dropdown-overlay .sv-popup__button:disabled {
   pointer-events: none;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -766,42 +801,70 @@ sv-popup {
   border-radius: 100%;
   background-color: transparent;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg {
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__input {
+.sv-popup--dropdown-overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
-  font-family: var(--font-family);
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
+.sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
   background: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.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 {
+.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar {
+  justify-content: flex-start;
+}
 
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon {
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__input {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content {
   --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   position: absolute;
@@ -809,7 +872,7 @@ sv-popup {
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
   width: auto;
   min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
@@ -818,9 +881,9 @@ sv-popup {
   overflow: hidden;
   margin: 0;
 }
-.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,
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-list__container {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-list__container {
   flex-grow: 1;
 }
 
@@ -968,7 +1031,7 @@ sv-popup {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 400;
@@ -1025,9 +1088,15 @@ sv-popup {
   margin: 4px;
 }
 
+sv-brand-info, .sv-brand-info {
+  z-index: 1;
+  position: relative;
+  margin-top: 1px;
+}
+
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   text-align: center;
   color: #161616;
   background: white;
@@ -1140,8 +1209,8 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: var(--sjs-font-size, 16px);
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   border-radius: 100%;
   border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1151,11 +1220,10 @@ sv-popup {
   font-weight: 600;
   margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-ranking-item__index.sv-ranking-item__index:empty {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+.sv-ranking-item__index.sv-ranking-item__index svg {
+  fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
 }
 
 .sv-ranking-item__text {
@@ -1163,19 +1231,19 @@ sv-popup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.25;
 }
 
 .sv-ranking-item--disabled .sv-ranking-item__text {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   opacity: 0.25;
 }
 
@@ -1300,7 +1368,7 @@ sv-popup {
   width: 1px;
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
-  left: var(--sjs-base-unit, var(--base-unit, 8px));
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
   left: initial;
@@ -1313,8 +1381,8 @@ sv-popup {
 }
 
 .sv-ranking__container-placeholder {
-  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
-  font-family: var(--font-family, var(--font-family));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -1323,6 +1391,8 @@ sv-popup {
   justify-content: center;
   align-items: center;
   height: 100%;
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking__container {
@@ -1335,7 +1405,7 @@ sv-popup {
 }
 
 .sv-ranking__containers-divider {
-  background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  background: var(--sjs-border-default, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
 }
 
 .sv-ranking__container--from .sv-ranking-item__icon--focus {
@@ -1347,18 +1417,15 @@ sv-popup {
   margin: 0;
   overflow-y: auto;
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   list-style-type: none;
 }
 
 .sv-list__empty-container {
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   box-sizing: border-box;
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-list__empty-text {
@@ -1366,6 +1433,9 @@ sv-popup {
   font-size: var(--sjs-font-size, 16px);
   font-weight: 400;
   text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
@@ -1387,7 +1457,7 @@ sv-popup {
   padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: normal;
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -1480,7 +1550,7 @@ 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(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: 400;
 }
 
@@ -1569,7 +1639,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
   z-index: 1600;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   display: flex;
@@ -1662,7 +1732,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-title.sd-element__title {
-  font-family: var(--sjs-font-questiontitle-family, var(--font-family));
+  font-family: var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-questiontitle-weight, 600);
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
@@ -1768,117 +1838,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
 }
-.sd-element--with-frame.sd-question--paneldynamic {
-  padding-bottom: 0;
-}
-.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(--sjs-base-unit, var(--base-unit, 8px)))) var(--sd-base-padding);
-  box-sizing: border-box;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-}
-.sd-element--collapsed.sd-element--complex > .sd-element__header--location-top:after {
-  display: none;
-}
-.sd-element--collapsed > .sd-element__header--location-top {
-  margin-top: 0;
-}
-.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(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
-}
-.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
-  background-color: var(--sjs-general-backcolor-dim-light, 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(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)), 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 var(--sjs-general-backcolor-dim-light, 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-default, var(--border, #d6d6d6));
@@ -1892,13 +1851,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox {
+  display: block;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: var(--sjs-corner-radius, 4px);
-  font-weight: 600;
   line-height: var(--sjs-font-size, 16px);
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
-  white-space: normal;
   text-align: left;
+  color: var(--sjs-special-red, var(--red, #e60a3e));
+  font-weight: 600;
+  white-space: normal;
 }
 
 .sd-question__erbox--outside-question {
@@ -1909,26 +1870,39 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox--above-question {
-  margin-bottom: var(--sd-base-vertical-padding);
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sd-question__erbox--below-question {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
+.sd-question--title-top > .sd-question__erbox--above-question {
+  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+
+.sd-question--description-under-input > .sd-question__erbox--below-question,
+.sd-question--title-bottom > .sd-question__erbox--below-question {
+  margin-top: calc(0.25 * var(--sd-base-vertical-padding) + 0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-element--with-frame > .sd-question__erbox--above-question {
+  margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
 }
 
 .sd-element--with-frame > .sd-question__erbox--below-question {
-  position: relative;
-  margin-top: 0;
-  bottom: calc(-1 * var(--sd-base-padding));
+  margin-top: var(--sd-base-padding);
   border-radius: 0 0 var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px);
 }
 
-.sd-root-modern--mobile .sd-question__erbox--below-question {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+.sd-element--with-frame.sd-question--title-top > .sd-question__erbox--above-question {
+  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-element--with-frame.sd-question--description-under-input > .sd-question__erbox--below-question,
+.sd-element--with-frame.sd-question--title-bottom > .sd-question__erbox--below-question {
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-question__header {
@@ -1936,25 +1910,27 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__header--location-top {
-  margin-top: calc(-0.25 * var(--sd-base-vertical-padding));
   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));
+  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }
 
+.sd-element--with-frame.sd-question--title-top {
+  padding-top: var(--sd-base-vertical-padding);
+}
+.sd-element--with-frame.sd-question--error-top {
+  padding-top: 0;
+}
+.sd-element--with-frame.sd-question--error-bottom {
+  padding-bottom: 0;
+}
 .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));
 }
-.sd-element--with-frame > .sd-question__erbox--above-question {
-  margin-top: calc(-1 * var(--sd-base-padding));
-}
-.sd-element--with-frame > .sd-question__content > .sd-question__header--location--bottom {
-  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 
 .sd-scrollable .sd-question__content {
   overflow-x: auto;
@@ -1995,39 +1971,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   white-space: normal;
 }
 
-.sd-question__erbox--tooltip {
-  display: none;
-  position: fixed;
-  height: auto;
-  width: auto;
-  max-width: calc(29 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.75;
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
-  z-index: 1000;
-}
-
-.sd-question__content:hover:not(:focus-within) > .sd-question__erbox--tooltip {
-  display: block;
-}
-
-.sd-question__erbox--location--top,
-.sd-question__erbox--location--bottom {
-  display: block;
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  padding-left: 0;
-  padding-right: 0;
-  text-align: left;
-}
-
-.sd-question--empty.sd-question--complex > .sd-question__header--location-top {
-  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
-}
-.sd-question--empty.sd-question--complex > .sd-question__header--location-top:after {
-  display: none;
-}
-
 .sd-question__placeholder {
   display: flex;
   flex-direction: column;
@@ -2044,14 +1987,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   white-space: pre-line;
 }
 
-.sd-question--empty.sd-question--complex > .sd-question__content {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.sd-question--empty.sd-question--complex > .sd-question__content:first-child {
-  padding-top: var(--sd-base-padding);
-}
-
 .sd-scrollable-container:not(.sd-scrollable-container--compact) {
   width: max-content;
   overflow: visible;
@@ -2060,7 +1995,117 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-question__title--empty .sv-string-viewer {
   display: inline-block;
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
+}
+
+.sd-element--expanded > .sd-element__header,
+.sd-element--collapsed > .sd-element__header {
+  cursor: pointer;
+}
+
+.sd-element--collapsed > .sd-element__header {
+  padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sd-base-padding);
+  box-sizing: border-box;
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.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(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
+}
+.sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sd-element--collapsed.sd-element--nested > .sd-element__header:hover, .sd-element--collapsed.sd-element--nested > .sd-element__header:focus-within {
+  box-shadow: 0 calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)), 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+
+.sd-element--complex.sd-element--with-frame {
+  padding-top: 0;
+}
+
+.sd-element--complex.sd-element--nested-with-borders > .sd-question__erbox--outside-question,
+.sd-element--complex.sd-element--with-frame > .sd-question__erbox--outside-question {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.sd-element--complex > .sd-element__header: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 > .sd-element__header {
+  padding-top: var(--sd-base-vertical-padding);
+  padding-bottom: var(--sd-base-vertical-padding);
+}
+
+.sd-element--collapsed.sd-element--complex > .sd-element__header {
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+
+.sd-element--nested-with-borders {
+  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-with-borders > .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-with-borders > .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-with-borders > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+.sd-element--nested-with-borders.sd-element--collapsed > .sd-element__header--location-top:hover, .sd-element--nested-with-borders.sd-element--collapsed > .sd-element__header--location-top:focus-within {
+  box-shadow: none;
+}
+
+.sd-element--nested-with-borders > .sd-element__header--location-top:after,
+.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--collapsed.sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+
+.sd-question--empty.sd-question--complex > .sd-question__content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-question--empty.sd-question--complex > .sd-question__content:first-child {
+  padding-top: var(--sd-base-padding);
+}
+.sd-question--empty.sd-question--complex > .sd-question__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-question--empty.sd-question--complex > .sd-question__header--location-top:after {
+  display: none;
 }
 
 .sd-input {
@@ -2072,7 +2117,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -2137,7 +2182,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0px;
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-size: var(--sjs-font-size, 16px);
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2220,20 +2265,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
   padding-top: 0;
-  padding-bottom: 0;
+  padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header:after {
   content: none;
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
   --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
-  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
+  font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-pagetitle-weight, 700);
   font-size: var(--page-title-font-size);
   color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: static;
   line-height: calc(1.33 * (var(--page-title-font-size)));
-  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
+  margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
   font-family: inherit;
@@ -2243,7 +2288,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   line-height: inherit;
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
-  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
+  font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-pagedescription-weight, 400);
   font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -2251,15 +2296,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   line-height: calc(1.5 * (var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px))));
   margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
-.sd-panel.sd-panel--as-page .sd-panel__header + .sd-panel__content {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .sd-panel.sd-panel--as-page > .sd-panel__content {
   padding-top: 0;
 }
 
 .sd-row ~ .sd-row .sd-panel--as-page {
-  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-panel__required-text {
@@ -2281,6 +2323,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-top: var(--sd-base-padding);
 }
 
+.sd-panel.sd-element--nested > .sd-panel__content {
+  padding-bottom: var(--sd-base-padding);
+}
+
 .sjs_sp_placeholder {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -2369,7 +2415,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   border: none;
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-size: var(--sjs-font-size, 16px);
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: 600;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
@@ -2441,28 +2487,37 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-panel__content .sd-table--no-header {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-table--no-header {
   padding-top: 0;
 }
-.sd-panel__content .sd-question--table .sd-question__content {
-  padding-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table .sd-question__content {
+  padding-bottom: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table--no-header {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table--no-header {
   padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-panel__content .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
   margin-top: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table.sd-question--error-top > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: 0;
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
   margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table.sd-question--error-top > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+  margin-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+.sd-panel:not(.sd-panel--as-page) > .sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
@@ -2556,6 +2611,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--header span {
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
+  font-weight: var(--sjs-font-questiontitle-weight, 600);
 }
 
 .sd-table__cell--header {
@@ -2617,7 +2673,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   display: block;
   width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-table__cell--detail-button:hover {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -2634,7 +2690,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-table__cell--row-text {
-  font-weight: 600;
+  font-weight: var(--sjs-font-questiontitle-weight, 600);
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   text-align: left;
   min-width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2648,9 +2704,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__question-wrapper:not(:focus-within):hover {
   position: relative;
 }
-.sd-table__question-wrapper:not(:focus-within):hover .sd-question__erbox--tooltip {
-  display: inline-block;
-}
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical),
 .sd-table__cell--empty,
@@ -2726,19 +2779,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: min-content;
 }
-.sd-question--table.sd-element--nested > .sd-question__erbox--above-question {
-  margin-bottom: var(--sd-base-vertical-padding);
-}
 .sd-question--table.sd-element--nested > .sd-question__content {
   min-width: auto;
   overflow-x: auto;
 }
-.sd-question--table.sd-element--nested > .sd-question__content {
-  padding-bottom: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-bottom: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
-  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .sd-question--table.sd-element--nested > .sd-question__content, .sd-question--table:not(.sd-element--with-frame):not(.sd-element--nested) {
   padding-right: var(--sd-base-padding);
   margin-right: calc(-1 * var(--sd-base-padding));
@@ -2759,6 +2803,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin: auto;
 }
 
+.sd-root-modern--mobile .sd-table__question-wrapper .sd-boolean-root {
+  margin: initial;
+}
+
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
@@ -2779,18 +2827,17 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-page .sd-page__title {
   --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
-  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
+  font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-pagetitle-weight, 700);
   font-size: var(--page-title-font-size);
   color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   position: static;
   line-height: calc(1.33 * (var(--page-title-font-size)));
-  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
-  margin-top: 0;
+  margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
 }
 
 .sd-page .sd-page__description {
-  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
+  font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-pagedescription-weight, 400);
   font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
   color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -2879,7 +2926,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-title {
   display: block;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   flex-direction: row;
@@ -2892,7 +2939,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   align-items: center;
   padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
   overflow: auto;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -2907,11 +2954,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-grow: 1;
 }
 .sd-header__text .sd-title {
-  --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
-  font-size: var(--cover-title-font-size);
-  line-height: calc(1.25 * (var(--cover-title-font-size)));
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  font-family: var(--sjs-font-surveytitle-family, var(--font-family));
+  --survey-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
+  font-size: var(--survey-title-font-size);
+  line-height: calc(1.25 * (var(--survey-title-font-size)));
+  color: var(--sjs-font-surveytitle-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  font-family: var(--sjs-font-surveytitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-surveytitle-weight, 700);
 }
 .sd-header__text h3 {
@@ -2922,6 +2969,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   font-weight: 400;
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
 }
+.sd-header__text .sd-description {
+  --survey-description-font-size: var(--sjs-font-surveydescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--survey-description-font-size);
+  line-height: calc(1.5 * (var(--survey-description-font-size)));
+  color: var(--sjs-font-surveydescription-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+  font-family: var(--sjs-font-surveydescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
+  font-weight: var(--sjs-font-surveydescription-weight, 400);
+}
 
 .sd-title .sv-title-actions {
   width: 100%;
@@ -2968,7 +3023,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-description {
   font-style: normal;
-  font-family: var(--sjs-font-questiondescription-family, var(--font-family));
+  font-family: var(--sjs-font-questiondescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-questiondescription-weight, 400);
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
@@ -2978,11 +3033,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-description.sd-question__description--under-input {
-  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(0.375 * var(--sd-base-vertical-padding));
 }
 
 .sd-element__header .sd-description {
-  margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(0.25 * var(--sd-base-vertical-padding) - 0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-item {
@@ -3024,12 +3079,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-item__control-label {
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-style: normal;
   font-weight: var(--sjs-font-editorfont-weight, 400);
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
   word-break: break-word;
   width: 100%;
@@ -3037,12 +3092,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-item--disabled .sd-item__control-label {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.25;
 }
 
 .sd-root--readonly .sd-item--disabled .sd-item__control-label {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .sd-item--error .sd-item__decorator {
@@ -3177,7 +3232,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-matrix__cell:first-of-type {
-  font-weight: 600;
+  font-weight: var(--sjs-font-questiontitle-weight, 600);
   text-align: left;
 }
 
@@ -3468,9 +3523,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-text.sd-rating__item-text {
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
-  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   display: inline-block;
@@ -3479,7 +3534,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-bottom: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: 2px solid transparent;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
   margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -3556,7 +3611,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sv-dropdown_select-wrapper use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sd-dropdown {
@@ -3585,7 +3640,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-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
 }
 
@@ -3600,7 +3655,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3650,7 +3705,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3700,9 +3755,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
 }
 
-.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sd-list__item-body {
+.sv-dropdown-popup .sd-list__item-body {
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  font-weight: var(--sjs-font-editorfont-weight, 400);
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
+  padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 [dir=rtl] .sd-dropdown,
@@ -3930,7 +3988,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
 
 .sd-imagepicker__no-image {
@@ -3992,11 +4050,24 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: initial;
 }
 
+.sd-html {
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
+  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-weight: var(--sjs-article-font-default-fontWeight, 400);
+  font-style: var(--sjs-article-font-default-fontStyle, "normal");
+  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
+  letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
+  line-height: var(--sjs-article-font-default-lineHeight, 28px);
+  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
+  text-transform: var(--sjs-article-font-default-textCase, "none");
+}
 .sd-html h1 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
   font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -4007,9 +4078,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-html h2 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
   font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -4020,9 +4091,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-html h3 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-large-fontWeight, 700);
   font-style: var(--sjs-article-font-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -4035,9 +4106,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-html h5,
 .sd-html h6 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-medium-fontWeight, 700);
   font-style: var(--sjs-article-font-medium-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -4051,9 +4122,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-html div,
 .sd-html p {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
   text-decoration: var(--sjs-article-font-default-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-default-fontWeight, 400);
   font-style: var(--sjs-article-font-default-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -4093,16 +4164,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
   font-style: normal;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
 .sd-expression {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-size, 16px);
 }
 
+.sd-question__content--left .sd-expression {
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-progress {
   height: 2px;
   background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -4164,10 +4240,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-boolean__thumb,
 .sd-boolean__label {
   display: block;
-  font-family: var(--sjs-font-editorfont-family, var(--font-family));
+  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-editorfont-weight, 400);
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -4332,7 +4408,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-paneldynamic__progress-text {
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   margin: 0;
   margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -4418,7 +4494,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border: none;
   background-color: transparent;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -4485,6 +4561,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   bottom: 0;
 }
 
+.sd-question--paneldynamic.sd-element--with-frame {
+  padding-bottom: 0;
+}
+
 .sd-file {
   position: relative;
   font-size: var(--sjs-font-size, 16px);
@@ -4648,7 +4728,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__sign a {
   display: block;
   text-decoration: none;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
   word-break: break-all;
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4835,7 +4915,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: var(--sjs-corner-radius, 4px);
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
   font-weight: 600;
   font-size: var(--sjs-font-size, 16px);
@@ -4933,9 +5013,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body.sd-body--responsive .sd-page {
   padding: 0;
 }
-.sd-body.sd-body--responsive .sd-page.sd-page__empty-header {
-  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .sd-body.sd-body--responsive .sd-body__timer,
 .sd-body.sd-body--responsive .sd-body__navigation {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
@@ -4984,9 +5061,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body--empty h1,
 .sd-body--loading h1 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
   font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -4998,9 +5075,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body--empty h2,
 .sd-body--loading h2 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
   font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5012,9 +5089,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body--empty h3,
 .sd-body--loading h3 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-large-fontWeight, 700);
   font-style: var(--sjs-article-font-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5030,9 +5107,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body--loading h5,
 .sd-body--loading h6 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-medium-fontWeight, 700);
   font-style: var(--sjs-article-font-medium-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5050,9 +5127,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-body--loading div,
 .sd-body--loading p {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
   text-decoration: var(--sjs-article-font-default-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-default-fontWeight, 400);
   font-style: var(--sjs-article-font-default-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5097,7 +5174,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
   font-style: normal;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
@@ -5167,7 +5244,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   word-break: break-word;
   white-space: normal;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sd-multipletext__item {
@@ -5185,10 +5262,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
 }
 
-.sd-multipletext__item-container:hover:not(:focus-within) > .sd-question__erbox--tooltip {
-  display: inline-block;
-}
-
 .sd-multipletext__cell {
   padding-left: 0;
   padding-right: 0;
@@ -5218,13 +5291,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   appearance: none;
   border: none;
   display: flex;
+  align-items: center;
   gap: var(--sjs-base-unit, var(--base-unit, 8px));
   background: transparent;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   font-weight: 600;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
@@ -5250,11 +5324,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-left: 0;
 }
 .sd-action--icon use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
 svg.sd-action--icon {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
 .sd-action:disabled,
@@ -5280,6 +5354,10 @@ svg.sd-action--icon {
 .sd-action:not(.sd-action--pressed):focus.sd-action--negative {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
+.sd-action:not(.sd-action--pressed):hover.sd-action--negative.sd-action--icon use,
+.sd-action:not(.sd-action--pressed):focus.sd-action--negative.sd-action--icon use {
+  fill: var(--sjs-special-red, var(--red, #e60a3e));
+}
 .sd-action:not(.sd-action--pressed):hover:active,
 .sd-action:not(.sd-action--pressed):focus:active {
   opacity: 0.5;
@@ -5338,7 +5416,7 @@ svg.sd-action--icon {
 }
 
 .sd-completedpage {
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
@@ -5348,9 +5426,9 @@ svg.sd-action--icon {
 .sd-completedpage h1,
 .sd-completed-before-page h1 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
   font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -5362,9 +5440,9 @@ svg.sd-action--icon {
 .sd-completedpage h2,
 .sd-completed-before-page h2 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
   font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5376,9 +5454,9 @@ svg.sd-action--icon {
 .sd-completedpage h3,
 .sd-completed-before-page h3 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-large-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-large-fontWeight, 700);
   font-style: var(--sjs-article-font-large-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5394,9 +5472,9 @@ svg.sd-action--icon {
 .sd-completed-before-page h5,
 .sd-completed-before-page h6 {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
   text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-medium-fontWeight, 700);
   font-style: var(--sjs-article-font-medium-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5414,9 +5492,9 @@ svg.sd-action--icon {
 .sd-completed-before-page div,
 .sd-completed-before-page p {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
   text-decoration: var(--sjs-article-font-default-textDecoration, "none");
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: var(--sjs-article-font-default-fontWeight, 400);
   font-style: var(--sjs-article-font-default-fontStyle, "normal");
   font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5461,7 +5539,7 @@ svg.sd-action--icon {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
   font-style: normal;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
@@ -5599,10 +5677,11 @@ svg.sd-action--icon {
   padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sd-list__item.sd-list__item {
+.sd-list__item {
   padding: 0;
 }
-.sd-list__item.sd-list__item .sd-list__item-body {
+
+.sd-list__item-body {
   padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: var(--sjs-corner-radius, 4px);
   font-size: var(--sjs-font-size, 16px);
@@ -5687,27 +5766,29 @@ svg.sd-action--icon {
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
 }
 
-.sv-cover {
-  padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-sizing: border-box;
+.sv-header {
   position: relative;
-  background-color: var(--sjs-cover-backcolor);
+  background-color: var(--sjs-header-backcolor, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
-.sv-conver__overlap {
-  margin-bottom: calc(-13 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(13 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-header__overlap {
+  margin-bottom: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-conver__overlap.sv-conver__without-background {
+.sv-header__overlap.sv-header__without-background {
   margin-bottom: 0;
+  padding-bottom: 0;
 }
 
-.sv-conver__without-background {
+.sv-header__without-background .sv-header--mobile,
+.sv-header__without-background .sv-header__content {
   padding-bottom: 0;
 }
 
-.sv-conver__content {
+.sv-header__content {
+  padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: border-box;
   height: 100%;
   position: relative;
   display: grid;
@@ -5716,13 +5797,13 @@ svg.sd-action--icon {
   grid-auto-rows: 1fr 1fr 1fr;
 }
 
-.sv-conver__content--static {
-  max-width: calc(80 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-header__content--static {
+  max-width: calc(88 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: auto;
   margin-right: auto;
 }
 
-.sv-cover__background-image {
+.sv-header__background-image {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -5733,68 +5814,97 @@ svg.sd-action--icon {
   background-position-x: center;
 }
 
-.sv-cover__background-image--contain {
+.sv-header__background-image--contain {
   background-repeat: no-repeat;
 }
 
-.sv-cover__cell {
+.sv-header__cell {
   position: relative;
 }
 
-.sv-cover__cell-content {
+.sv-header__cell-content {
   display: flex;
   flex-direction: column;
   position: absolute;
   width: max-content;
   top: 0;
   bottom: 0;
-  gap: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
-.sv-cover__cell--left .sv-cover__cell-content {
+.sv-header__cell--left .sv-header__cell-content {
   left: 0;
 }
 
-.sv-cover__cell--center .sv-cover__cell-content {
+.sv-header__cell--center .sv-header__cell-content {
   min-width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.sv-cover__cell--right .sv-cover__cell-content {
+.sv-header__cell--right .sv-header__cell-content {
   right: 0;
 }
 
-.sv-cover__logo {
+.sv-header__logo {
   display: flex;
-  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-header__logo img {
+  display: block;
 }
 
-.sv-cover__title {
+.sv-header__title {
   display: flex;
 }
 
-.sv-cover__title .sd-title {
-  --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
-  font-size: var(--cover-title-font-size);
-  line-height: calc(1.25 * (var(--cover-title-font-size)));
+.sv-header__title .sd-title {
+  --header-title-font-size: var(--sjs-font-headertitle-size, calc(2 * (var(--sjs-font-size, 16px))));
+  font-size: var(--header-title-font-size);
+  line-height: calc(1.25 * (var(--header-title-font-size)));
+  color: var(--sjs-font-headertitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  font-family: var(--sjs-font-headertitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
+  font-weight: var(--sjs-font-headertitle-weight, 700);
   margin: 0;
-  color: var(--sjs-cover-title-forecolor, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
-  font-family: var(--sjs-font-surveytitle-family, var(--font-family));
-  font-weight: var(--sjs-font-surveytitle-weight, 700);
 }
 
-.sv-cover__description {
+.sv-header__logo ~ .sv-header__title {
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-header__logo ~ .sv-header__description {
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-header__title ~ .sv-header__description {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-header__description {
   display: flex;
 }
 
-.sv-cover__description .sd-description {
+.sv-header__description .sd-description {
+  --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--header-description-font-size);
+  line-height: calc(1.5 * (var(--header-description-font-size)));
+  color: var(--sjs-font-headerdescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  font-family: var(--sjs-font-headerdescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
+  font-weight: var(--sjs-font-headerdescription-weight, 400);
   margin: 0;
-  color: var(--sjs-cover-description-forecolor, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 
-.sv-conver__content .sd-header__text h3 {
+.sv-header__content .sd-header__text h3 {
   margin: 0;
 }
 
+.sv-header--mobile {
+  padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  position: relative;
+  z-index: 1;
+}
+.sv-header--mobile .sv-header__logo img {
+  max-width: 100%;
+}
+
 @keyframes rotationAnimation {
   from {
     rotate: 0deg;
@@ -5919,6 +6029,8 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell {
   display: flex;
   align-items: flex-start;
+  border-top: none;
+  border-bottom: none;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell .sd-matrix__responsive-title {
   margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -5934,8 +6046,8 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-table tr {
   display: block;
 }
-.sd-root-modern.sd-root-modern--mobile .sd-matrix__table tr + tr {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+.sd-root-modern.sd-root-modern--mobile .sd-matrix__table .sd-table__row {
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr {
   padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -6058,6 +6170,7 @@ sv-components-container,
 }
 .sd-multipletext--mobile .sd-multipletext__item {
   flex-basis: 0;
+  min-width: 0;
 }
 .sd-multipletext--mobile .sd-multipletext__item .sd-input {
   padding: 0;
@@ -6079,6 +6192,11 @@ sv-components-container,
 .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item,
 .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item {
   flex-basis: auto;
+  min-width: auto;
+  width: 100%;
+}
+.sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item .sd-input,
+.sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item .sd-input {
   width: 100%;
 }
 
@@ -6098,7 +6216,7 @@ body {
   --sd-mobile-width: 600px;
   --sd-timer-size: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   position: relative;
 }
@@ -6201,25 +6319,4 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
-.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sv-popup__shadow {
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
-}
-.sv-popup.sv-popup--dropdown.sv-popup--dropdown .sv-popup__body-content {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
-  height: 100%;
-}
-
-.sv-popup.sv-popup--modal .sv-popup__body-content {
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-}
-.sv-popup.sv-popup--modal .sv-popup__body-footer {
-  padding-bottom: 2px;
-}
-
-.sv-popup.sv-popup--overlay .sv-popup__body-content {
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-}
-
 /*# sourceMappingURL=defaultV2.css.map*/