survey-core 1.9.118 → 1.9.120

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.118
+ * surveyjs - Survey JavaScript library v1.9.120
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1204,13 +1204,14 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-ranking-item__index.sv-ranking-item__index {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: flex;
   flex-shrink: 0;
   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-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   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))));
@@ -1222,18 +1223,19 @@ sv-brand-info, .sv-brand-info {
 }
 .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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  width: var(--sjs-internal-font-editorfont-size);
+  height: var(--sjs-internal-font-editorfont-size);
 }
 
 .sv-ranking-item__text {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -1855,26 +1857,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
-.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);
-  line-height: var(--sjs-font-size, 16px);
-  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
-  text-align: left;
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  font-weight: 600;
-  white-space: normal;
-}
-
-.sd-question__erbox--outside-question {
-  width: 100%;
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
-  box-sizing: border-box;
-}
-
-.sd-question__erbox--above-question {
+.sd-element__erbox--above-element {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
@@ -1891,7 +1874,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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 {
+.sd-element--with-frame > .sd-element__erbox--above-element {
   margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
 }
@@ -1934,7 +1917,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
   margin-bottom: var(--sd-base-padding);
 }
-.sd-element--with-frame > .sd-question__erbox--outside-question {
+.sd-element--with-frame > .sd-element__erbox {
   margin-left: calc(-1 * var(--sd-base-padding));
   margin-right: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
@@ -1981,6 +1964,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__placeholder {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1988,8 +1972,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   justify-content: center;
   min-height: calc(24 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2007,6 +1991,21 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
+.sd-error {
+  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);
+  line-height: var(--sjs-font-size, 16px);
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  font-weight: 600;
+  text-align: left;
+  color: var(--sjs-special-red, var(--red, #e60a3e));
+  white-space: normal;
+  width: 100%;
+  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  box-sizing: border-box;
+}
+
 .sd-element--expanded > .sd-element__header,
 .sd-element--collapsed > .sd-element__header {
   cursor: pointer;
@@ -2039,8 +2038,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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 {
+.sd-element--complex.sd-element--nested-with-borders > .sd-element__erbox,
+.sd-element--complex.sd-element--with-frame > .sd-element__erbox {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -2079,7 +2078,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   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 {
+.sd-element--nested-with-borders > .sd-element__erbox {
   margin-left: calc(-1 * var(--sd-base-padding));
   margin-right: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
@@ -2118,6 +2117,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2125,11 +2125,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: 100%;
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
@@ -2225,9 +2225,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-input[type=email],
 .sd-input[type=color],
 .sd-input[type=range] {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   box-sizing: content-box;
   width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sd-input[type=range]::-webkit-slider-runnable-track {
@@ -2284,7 +2285,7 @@ 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: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header:after {
   content: none;
@@ -2315,10 +2316,21 @@ 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__header .sd-panel__required-text {
+  display: none;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__errbox {
+  margin: 0 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-base-padding);
+}
 .sd-panel.sd-panel--as-page > .sd-panel__content {
   padding-top: 0;
 }
 
+.sd-root--compact .sd-panel--as-page > .sd-panel__errbox {
+  margin: 0 0 var(--sd-base-vertical-padding) 0;
+}
+
 .sd-row ~ .sd-row .sd-panel--as-page {
   padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -2347,9 +2359,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sjs_sp_placeholder {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, 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)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sjs_sp_container {
@@ -2363,10 +2376,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   bottom: auto;
 }
 
-.sd-question--signature:not(.sd-question--answered) .sd-signaturepad__controls {
-  display: none;
-}
-
 .sd-question--signature.sd-question--error .sjs_sp_placeholder {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
@@ -2378,6 +2387,19 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   object-fit: cover;
 }
 
+.sd-signaturepad__loading-indicator {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.sd-signaturepad__loading-indicator .sd-loading-indicator {
+  position: absolute;
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
 .sd-checkbox__decorator {
   border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
 }
@@ -2423,8 +2445,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
-  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sd-matrixdynamic__btn {
@@ -2576,9 +2599,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-table__cell {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   font-weight: normal;
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
@@ -2591,7 +2615,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   border: none;
   padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sd-table__cell--error .sd-question__erbox--outside-question {
+.sd-table__cell--error .sd-question__erbox {
   margin: 0;
 }
 
@@ -2627,8 +2651,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-table__cell--header span {
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   font-weight: var(--sjs-font-questiontitle-weight, 600);
 }
 
@@ -2661,6 +2686,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   min-width: calc(18 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-table__cell--footer {
+  text-align: right;
+}
+
+.sd-table__cell--footer-total {
+  font-weight: 600;
+  text-align: left;
+}
+
 .sd-table__cell--detail-panel {
   border-top: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
   padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2688,9 +2722,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .sd-table__cell--detail-button svg {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: block;
-  width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  width: var(--sjs-internal-font-editorfont-size);
+  height: var(--sjs-internal-font-editorfont-size);
   fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-table__cell--detail-button:hover {
@@ -2864,6 +2899,21 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
+.sd-page__errbox {
+  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-base-padding);
+}
+
+.sd-page__title ~ .sd-page__errbox,
+.sd-page__description ~ .sd-page__errbox {
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root--compact .sd-page__title ~ .sd-page__errbox,
+.sd-root--compact .sd-page__description ~ .sd-page__errbox {
+  margin-bottom: 0;
+}
+
 .sd-row {
   display: flex;
   flex-direction: row;
@@ -2961,6 +3011,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-title.sd-container-modern__title .sd-logo.sv-logo--right {
+  margin-left: auto;
+}
 .sd-title.sd-container-modern__title .sd-logo__image {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -3064,6 +3117,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-item--disabled.sd-item--disabled .sd-item__decorator,
 .sd-item__decorator {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3074,7 +3128,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
-  margin-top: calc((1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
+  margin-top: calc((1.5 * (var(--sjs-internal-font-editorfont-size)) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -3097,11 +3151,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-item__control-label {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
   word-break: break-word;
@@ -3279,6 +3334,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-rating.sd-rating--wrappable fieldset {
   flex-wrap: wrap;
+  min-width: 0;
 }
 
 .sd-rating--small {
@@ -3304,7 +3360,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
-  border: 2px solid transparent;
+  border: none;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: var(--sjs-font-size, 16px);
@@ -3324,7 +3380,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   box-shadow: 0px 1px 2px transparent;
-  border-color: transparent;
+  border: none;
 }
 
 .sd-rating__item.sd-rating__item--disabled {
@@ -3336,7 +3392,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  border-color: transparent;
+  border: none;
 }
 
 .sd-question--disabled .sd-rating__item-text {
@@ -3345,16 +3401,15 @@ legend + sv-ng-rating-item + .sd-rating__item {
 
 .sd-rating__item--allowhover:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
-  border-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
 .sd-rating__item:focus-within {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border-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));
   font-weight: 600;
   box-shadow: 0px 1px 2px transparent;
@@ -3542,17 +3597,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-text.sd-rating__item-text {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   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-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   display: inline-block;
+  border: 2px solid transparent;
+  box-sizing: border-box;
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
   margin-top: calc(1.25 * (var(--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-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 {
@@ -3570,9 +3627,45 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-rating--wrappable .sd-rating__item-text {
+  max-width: 100%;
+}
+.sd-rating--wrappable .sd-rating__item-text .sv-string-viewer {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.sd-rating__item:focus-within .sd-rating__item-text.sd-rating__item-text {
+  border: none;
+}
+
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: inherit;
+  border: none;
+}
+
+.sd-rating-dropdown-item {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-rating-dropdown-item_description {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-style: normal;
+  font-weight: normal;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
+}
+
+.sv-list__item.sv-list__item--selected .sd-rating-dropdown-item_description {
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-ranking-item--error .sv-ranking-item__index {
@@ -3669,16 +3762,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__value {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   width: 100%;
-  min-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  min-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   position: relative;
 }
 
@@ -3704,8 +3798,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown_chevron-button-svg,
 .sd-dropdown_clean-button-svg {
-  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sd-input.sd-dropdown:focus-within {
@@ -3717,6 +3812,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__filter-string-input {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   position: absolute;
   left: 0;
   top: 0;
@@ -3729,8 +3825,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3776,8 +3872,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sv-dropdown-popup .sd-list__item-body {
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   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))));
@@ -3797,8 +3894,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tagbox_clean-button {
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  padding: calc(0.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  padding: calc(0.5 * (var(--sjs-internal-font-editorfont-size)));
   margin: auto 0;
 }
 
@@ -3839,10 +3937,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tagbox-item_clean-button-svg {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: block;
-  padding: calc(0.25 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  padding: calc(0.25 * (var(--sjs-internal-font-editorfont-size)));
+  width: var(--sjs-internal-font-editorfont-size);
+  height: var(--sjs-internal-font-editorfont-size);
 }
 
 .sd-tagbox-item_clean-button-svg:hover {
@@ -3907,14 +4006,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   height: 100%;
   display: flex;
   align-items: center;
 }
 
 .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   height: 100%;
   display: flex;
   align-items: center;
@@ -3953,6 +4054,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   align-items: center;
 }
 
+.sd-imagepicker__label {
+  position: relative;
+}
+.sd-imagepicker__label .sd-visuallyhidden {
+  height: 100%;
+  margin: 0;
+}
+
 .sd-imagepicker__image-container {
   position: relative;
 }
@@ -3970,9 +4079,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__check-icon {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: block;
-  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -4005,8 +4115,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
 }
@@ -4259,12 +4370,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-boolean__thumb,
 .sd-boolean__label {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: block;
   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-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -4504,6 +4616,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-tab-item {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   -webkit-appearance: none;
@@ -4515,8 +4628,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
   cursor: pointer;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   overflow-x: hidden;
   white-space: nowrap;
@@ -4644,12 +4757,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file__drag-area-placeholder {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   text-align: center;
   word-break: break-word;
   white-space: normal;
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sd-root-modern--mobile .sd-file__decorator {
@@ -4701,7 +4815,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
-  inset-inline-end: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  inset-inline-end: calc(1.5 * (var(--sjs-internal-font-editorfont-size)) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-file__list {
@@ -4972,7 +5087,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
-.sd-btn:focus {
+.sd-btn:focus-visible {
   box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -5014,6 +5129,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-body {
   width: 100%;
+  box-sizing: border-box;
 }
 .sd-body .sd-body__page {
   min-width: min(100%, 300px);
@@ -5284,8 +5400,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   line-height: 0;
 }
 .sd-multipletext__item-title span {
-  font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
-  line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
+  font-size: var(--sjs-internal-font-editorfont-size);
+  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 
 .sd-multipletext__item-title {
@@ -5340,7 +5457,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
 }
 
-.sd-multipletext__cell--error .sd-question__erbox--outside-question {
+.sd-multipletext__cell--error .sd-question__erbox {
   margin: 0;
 }
 
@@ -5459,9 +5576,10 @@ svg.sd-action--icon {
   margin: 0;
 }
 .sd-context-btn svg {
+  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   display: block;
-  width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
-  height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
+  width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+  height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
 }
 .sd-context-btn use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -5863,6 +5981,11 @@ svg.sd-action--icon {
   padding-bottom: 0;
 }
 
+.sd-root-modern--mobile .sv-header__overlap {
+  margin-bottom: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sv-header__content {
   padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -5937,7 +6060,7 @@ svg.sd-action--icon {
   --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)));
+  color: var(--sjs-font-headertitle-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   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;
@@ -5963,9 +6086,9 @@ svg.sd-action--icon {
   --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)));
+  color: var(--sjs-font-headerdescription-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   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);
+  font-weight: var(--sjs-font-headerdescription-weight, 600);
   margin: 0;
 }