survey-core 1.9.113 → 1.9.114

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.113
+ * 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;
@@ -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--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,7 +533,7 @@ 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;
@@ -539,10 +550,6 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup--modal > .sv-popup__container {
-  position: static;
-}
-
 .sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
@@ -698,6 +705,10 @@ sv-popup {
   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;
 }
@@ -705,14 +716,6 @@ sv-popup {
   margin-bottom: 0;
 }
 
-.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--modal .sv-popup__body-footer {
-  padding-bottom: 2px;
-}
-
 .sv-popup--overlay .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
@@ -809,7 +812,7 @@ sv-popup {
   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);
+  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-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
@@ -1028,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;
@@ -1085,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;
@@ -1201,7 +1210,7 @@ sv-popup {
   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-font-size, 16px);
+  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))));
@@ -1211,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 {
@@ -1360,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;
@@ -1374,7 +1382,7 @@ sv-popup {
 
 .sv-ranking__container-placeholder {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
-  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-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -1383,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 {
@@ -1407,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 {
@@ -1426,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));
 }
 
@@ -1629,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;
@@ -1722,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)));
 }
@@ -1985,7 +1995,7 @@ 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,
@@ -2107,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));
@@ -2172,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));
@@ -2262,7 +2272,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .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)));
@@ -2278,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)));
@@ -2405,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;
 }
@@ -2817,7 +2827,7 @@ 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)));
@@ -2827,7 +2837,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .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)));
@@ -2916,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;
@@ -2929,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));
 }
@@ -2944,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 {
@@ -2959,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%;
@@ -3005,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));
@@ -3061,7 +3079,7 @@ 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))));
@@ -3505,7 +3523,7 @@ 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-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3622,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);
 }
 
@@ -3637,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));
@@ -3687,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));
@@ -3740,6 +3758,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .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,
@@ -4033,7 +4054,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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(--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");
@@ -4046,7 +4067,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -4059,7 +4080,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -4072,7 +4093,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -4087,7 +4108,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -4103,7 +4124,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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(--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");
@@ -4143,7 +4164,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))));
 }
@@ -4219,7 +4240,7 @@ 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-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -4473,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)));
@@ -4894,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);
@@ -5042,7 +5063,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5056,7 +5077,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5070,7 +5091,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5088,7 +5109,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5108,7 +5129,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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(--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");
@@ -5153,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))));
 }
@@ -5277,7 +5298,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   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))));
@@ -5395,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;
@@ -5407,7 +5428,7 @@ svg.sd-action--icon {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5421,7 +5442,7 @@ svg.sd-action--icon {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5435,7 +5456,7 @@ svg.sd-action--icon {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5453,7 +5474,7 @@ svg.sd-action--icon {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   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");
@@ -5473,7 +5494,7 @@ svg.sd-action--icon {
   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(--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");
@@ -5518,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))));
 }
@@ -5745,26 +5766,27 @@ svg.sd-action--icon {
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
 }
 
-.sv-cover {
+.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 {
+.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-conver__content {
+.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%;
@@ -5775,13 +5797,13 @@ svg.sd-action--icon {
   grid-auto-rows: 1fr 1fr 1fr;
 }
 
-.sv-conver__content--static {
+.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;
@@ -5792,15 +5814,15 @@ 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;
@@ -5809,61 +5831,80 @@ svg.sd-action--icon {
   bottom: 0;
 }
 
-.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;
 }
+.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__logo ~ .sv-cover__title {
-  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-header__logo ~ .sv-header__title {
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-cover__logo ~ .sv-cover__description {
-  margin-top: calc(4 * (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-cover__title ~ .sv-cover__description {
+.sv-header__title ~ .sv-header__description {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
-.sv-cover__description {
+.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;
@@ -6129,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;
@@ -6150,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%;
 }
 
@@ -6169,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;
 }