survey-react 1.9.113 → 1.9.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/defaultV2.css +162 -115
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +80 -59
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +36 -9
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +212 -163
  12. package/survey.react.js +1030 -842
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.113
2
+ * surveyjs - Survey JavaScript library v1.9.114
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -262,7 +262,7 @@
262
262
  background-color: transparent;
263
263
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
264
264
  cursor: pointer;
265
- font-family: var(--font-family, var(--font-family));
265
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
266
266
  overflow-x: hidden;
267
267
  white-space: nowrap;
268
268
  }
@@ -355,7 +355,7 @@ button.sv-action-bar-item {
355
355
  cursor: pointer;
356
356
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
357
357
  font-size: var(--sjs-font-size, 16px);
358
- font-family: var(--font-family, var(--font-family));
358
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
359
359
  }
360
360
 
361
361
  .sv-expand-action:before {
@@ -422,7 +422,7 @@ button.sv-action-bar-item {
422
422
  position: absolute;
423
423
  z-index: 10000;
424
424
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
425
- font-family: var(--font-family, var(--font-family));
425
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
426
426
  font-size: var(--sjs-font-size, 16px);
427
427
  padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
428
428
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -472,6 +472,7 @@ sv-popup {
472
472
  }
473
473
 
474
474
  .sv-popup__container {
475
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
475
476
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
476
477
  border-radius: var(--sjs-corner-radius, 4px);
477
478
  position: absolute;
@@ -504,10 +505,20 @@ sv-popup {
504
505
  padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
505
506
  box-sizing: border-box;
506
507
  }
507
- .sv-popup--modal .sv-popup__body-content {
508
+
509
+ .sv-popup--modal > .sv-popup__container {
510
+ position: static;
511
+ }
512
+
513
+ .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
514
+ box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
515
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
508
516
  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
509
517
  height: auto;
510
518
  }
519
+ .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
520
+ padding-bottom: 2px;
521
+ }
511
522
 
512
523
  .sv-popup--confirm-delete .sv-popup__shadow {
513
524
  height: initial;
@@ -522,7 +533,7 @@ sv-popup {
522
533
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
523
534
  margin-bottom: 0;
524
535
  /* UI/Default */
525
- font-family: var(--font-family);
536
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
526
537
  font-size: var(--sjs-font-size, 16px);
527
538
  font-style: normal;
528
539
  font-weight: 400;
@@ -539,10 +550,6 @@ sv-popup {
539
550
  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
540
551
  }
541
552
 
542
- .sv-popup--modal > .sv-popup__container {
543
- position: static;
544
- }
545
-
546
553
  .sv-popup--overlay {
547
554
  width: 100%;
548
555
  height: var(--sv-popup-overlay-height, 100vh);
@@ -698,6 +705,10 @@ sv-popup {
698
705
  height: 100%;
699
706
  }
700
707
 
708
+ .sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
709
+ background-color: transparent;
710
+ }
711
+
701
712
  .sv-dropdown-popup .sv-popup__body-content {
702
713
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
703
714
  }
@@ -705,14 +716,6 @@ sv-popup {
705
716
  margin-bottom: 0;
706
717
  }
707
718
 
708
- .sv-popup--modal .sv-popup__body-content {
709
- box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
710
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
711
- }
712
- .sv-popup--modal .sv-popup__body-footer {
713
- padding-bottom: 2px;
714
- }
715
-
716
719
  .sv-popup--overlay .sv-popup__body-content {
717
720
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
718
721
  }
@@ -809,7 +812,7 @@ sv-popup {
809
812
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
810
813
  font-size: var(--sjs-font-size, 16px);
811
814
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
812
- font-family: var(--font-family);
815
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
813
816
  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))));
814
817
  }
815
818
  .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
@@ -1028,7 +1031,7 @@ sv-popup {
1028
1031
  right: 10px;
1029
1032
  background-color: cadetblue;
1030
1033
  padding: 1px;
1031
- font-family: var(--font-family, var(--font-family));
1034
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1032
1035
  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
1033
1036
  font-style: normal;
1034
1037
  font-weight: 400;
@@ -1085,9 +1088,15 @@ sv-popup {
1085
1088
  margin: 4px;
1086
1089
  }
1087
1090
 
1091
+ sv-brand-info, .sv-brand-info {
1092
+ z-index: 1;
1093
+ position: relative;
1094
+ margin-top: 1px;
1095
+ }
1096
+
1088
1097
  .sv-brand-info {
1089
1098
  width: 100%;
1090
- font-family: var(--font-family, var(--font-family));
1099
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1091
1100
  text-align: center;
1092
1101
  color: #161616;
1093
1102
  background: white;
@@ -1201,7 +1210,7 @@ sv-popup {
1201
1210
  justify-content: center;
1202
1211
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1203
1212
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1204
- font-size: var(--sjs-font-size, 16px);
1213
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1205
1214
  border-radius: 100%;
1206
1215
  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1207
1216
  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1211,11 +1220,10 @@ sv-popup {
1211
1220
  font-weight: 600;
1212
1221
  margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1213
1222
  }
1214
- .sv-ranking-item__index.sv-ranking-item__index:empty {
1215
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
1216
- background-position: center;
1217
- background-repeat: no-repeat;
1218
- background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1223
+ .sv-ranking-item__index.sv-ranking-item__index svg {
1224
+ fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1225
+ width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1226
+ height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1219
1227
  }
1220
1228
 
1221
1229
  .sv-ranking-item__text {
@@ -1360,7 +1368,7 @@ sv-popup {
1360
1368
  width: 1px;
1361
1369
  }
1362
1370
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
1363
- left: var(--sjs-base-unit, var(--base-unit, 8px));
1371
+ left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1364
1372
  }
1365
1373
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
1366
1374
  left: initial;
@@ -1374,7 +1382,7 @@ sv-popup {
1374
1382
 
1375
1383
  .sv-ranking__container-placeholder {
1376
1384
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
1377
- font-family: var(--font-family, var(--font-family));
1385
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1378
1386
  font-style: normal;
1379
1387
  font-size: var(--sjs-font-size, 16px);
1380
1388
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -1383,6 +1391,8 @@ sv-popup {
1383
1391
  justify-content: center;
1384
1392
  align-items: center;
1385
1393
  height: 100%;
1394
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1395
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1386
1396
  }
1387
1397
 
1388
1398
  .sv-ranking__container {
@@ -1407,18 +1417,15 @@ sv-popup {
1407
1417
  margin: 0;
1408
1418
  overflow-y: auto;
1409
1419
  background: var(--sjs-general-backcolor, var(--background, #fff));
1410
- font-family: var(--font-family, var(--font-family));
1420
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1411
1421
  list-style-type: none;
1412
1422
  }
1413
1423
 
1414
1424
  .sv-list__empty-container {
1415
1425
  width: 100%;
1416
- font-family: var(--font-family, var(--font-family));
1426
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1417
1427
  box-sizing: border-box;
1418
- padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1419
- overflow: hidden;
1420
- text-overflow: ellipsis;
1421
- white-space: nowrap;
1428
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1422
1429
  }
1423
1430
 
1424
1431
  .sv-list__empty-text {
@@ -1426,6 +1433,9 @@ sv-popup {
1426
1433
  font-size: var(--sjs-font-size, 16px);
1427
1434
  font-weight: 400;
1428
1435
  text-align: center;
1436
+ overflow: hidden;
1437
+ text-overflow: ellipsis;
1438
+ white-space: nowrap;
1429
1439
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1430
1440
  }
1431
1441
 
@@ -1629,7 +1639,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1629
1639
  min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1630
1640
  text-align: center;
1631
1641
  z-index: 1600;
1632
- font-family: var(--font-family, var(--font-family));
1642
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
1633
1643
  font-size: var(--sjs-font-size, 16px);
1634
1644
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1635
1645
  display: flex;
@@ -1722,7 +1732,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1722
1732
  }
1723
1733
 
1724
1734
  .sd-title.sd-element__title {
1725
- font-family: var(--sjs-font-questiontitle-family, var(--font-family));
1735
+ font-family: var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
1726
1736
  font-weight: var(--sjs-font-questiontitle-weight, 600);
1727
1737
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1728
1738
  }
@@ -1985,7 +1995,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1985
1995
 
1986
1996
  .sd-question__title--empty .sv-string-viewer {
1987
1997
  display: inline-block;
1988
- height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1998
+ height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
1989
1999
  }
1990
2000
 
1991
2001
  .sd-element--expanded > .sd-element__header,
@@ -2107,7 +2117,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2107
2117
  box-sizing: border-box;
2108
2118
  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2109
2119
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2110
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
2120
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2111
2121
  font-weight: var(--sjs-font-editorfont-weight, 400);
2112
2122
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2113
2123
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -2172,7 +2182,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2172
2182
  justify-content: flex-end;
2173
2183
  align-items: flex-end;
2174
2184
  padding: 0px;
2175
- font-family: var(--font-family);
2185
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2176
2186
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2177
2187
  font-size: var(--sjs-font-size, 16px);
2178
2188
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2262,7 +2272,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2262
2272
  }
2263
2273
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2264
2274
  --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
2265
- font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2275
+ font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2266
2276
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2267
2277
  font-size: var(--page-title-font-size);
2268
2278
  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) {
2278
2288
  line-height: inherit;
2279
2289
  }
2280
2290
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
2281
- font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2291
+ font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2282
2292
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2283
2293
  font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2284
2294
  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) {
2405
2415
  border: none;
2406
2416
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2407
2417
  font-size: var(--sjs-font-size, 16px);
2408
- font-family: var(--font-family, var(--font-family));
2418
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2409
2419
  font-weight: 600;
2410
2420
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
2411
2421
  }
@@ -2817,7 +2827,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2817
2827
 
2818
2828
  .sd-page .sd-page__title {
2819
2829
  --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
2820
- font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2830
+ font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2821
2831
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2822
2832
  font-size: var(--page-title-font-size);
2823
2833
  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) {
2827
2837
  }
2828
2838
 
2829
2839
  .sd-page .sd-page__description {
2830
- font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2840
+ font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2831
2841
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2832
2842
  font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2833
2843
  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) {
2916
2926
 
2917
2927
  .sd-title {
2918
2928
  display: block;
2919
- font-family: var(--font-family, var(--font-family));
2929
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2920
2930
  font-style: normal;
2921
2931
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2922
2932
  flex-direction: row;
@@ -2929,7 +2939,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2929
2939
  align-items: center;
2930
2940
  padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
2931
2941
  overflow: auto;
2932
- font-family: var(--font-family, var(--font-family));
2942
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2933
2943
  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2934
2944
  box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2935
2945
  }
@@ -2944,11 +2954,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2944
2954
  flex-grow: 1;
2945
2955
  }
2946
2956
  .sd-header__text .sd-title {
2947
- --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
2948
- font-size: var(--cover-title-font-size);
2949
- line-height: calc(1.25 * (var(--cover-title-font-size)));
2950
- color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2951
- font-family: var(--sjs-font-surveytitle-family, var(--font-family));
2957
+ --survey-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
2958
+ font-size: var(--survey-title-font-size);
2959
+ line-height: calc(1.25 * (var(--survey-title-font-size)));
2960
+ color: var(--sjs-font-surveytitle-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
2961
+ font-family: var(--sjs-font-surveytitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2952
2962
  font-weight: var(--sjs-font-surveytitle-weight, 700);
2953
2963
  }
2954
2964
  .sd-header__text h3 {
@@ -2959,6 +2969,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2959
2969
  font-weight: 400;
2960
2970
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2961
2971
  }
2972
+ .sd-header__text .sd-description {
2973
+ --survey-description-font-size: var(--sjs-font-surveydescription-size, var(--sjs-font-size, 16px));
2974
+ font-size: var(--survey-description-font-size);
2975
+ line-height: calc(1.5 * (var(--survey-description-font-size)));
2976
+ color: var(--sjs-font-surveydescription-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2977
+ font-family: var(--sjs-font-surveydescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2978
+ font-weight: var(--sjs-font-surveydescription-weight, 400);
2979
+ }
2962
2980
 
2963
2981
  .sd-title .sv-title-actions {
2964
2982
  width: 100%;
@@ -3005,7 +3023,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3005
3023
 
3006
3024
  .sd-description {
3007
3025
  font-style: normal;
3008
- font-family: var(--sjs-font-questiondescription-family, var(--font-family));
3026
+ font-family: var(--sjs-font-questiondescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3009
3027
  font-weight: var(--sjs-font-questiondescription-weight, 400);
3010
3028
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
3011
3029
  font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
@@ -3061,7 +3079,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3061
3079
  }
3062
3080
 
3063
3081
  .sd-item__control-label {
3064
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3082
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3065
3083
  font-style: normal;
3066
3084
  font-weight: var(--sjs-font-editorfont-weight, 400);
3067
3085
  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 {
3505
3523
  }
3506
3524
 
3507
3525
  .sd-rating__item-text.sd-rating__item-text {
3508
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3526
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3509
3527
  font-weight: var(--sjs-font-editorfont-weight, 400);
3510
3528
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3511
3529
  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 {
3622
3640
 
3623
3641
  .sd-dropdown option {
3624
3642
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3625
- font-family: var(--font-family, var(--font-family));
3643
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
3626
3644
  font-size: var(--sjs-font-size, 16px);
3627
3645
  }
3628
3646
 
@@ -3637,7 +3655,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3637
3655
  text-overflow: ellipsis;
3638
3656
  white-space: nowrap;
3639
3657
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3640
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3658
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3641
3659
  font-weight: var(--sjs-font-editorfont-weight, 400);
3642
3660
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3643
3661
  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 {
3687
3705
  border: none;
3688
3706
  outline: none;
3689
3707
  padding: 0;
3690
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3708
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3691
3709
  font-weight: var(--sjs-font-editorfont-weight, 400);
3692
3710
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3693
3711
  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 {
3740
3758
  .sv-dropdown-popup .sd-list__item-body {
3741
3759
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3742
3760
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3761
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3762
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3763
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3743
3764
  }
3744
3765
 
3745
3766
  [dir=rtl] .sd-dropdown,
@@ -4033,7 +4054,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4033
4054
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4034
4055
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4035
4056
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4036
- font-family: var(--font-family);
4057
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4037
4058
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
4038
4059
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
4039
4060
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -4046,7 +4067,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4046
4067
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4047
4068
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
4048
4069
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
4049
- font-family: var(--font-family);
4070
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4050
4071
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
4051
4072
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
4052
4073
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -4059,7 +4080,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4059
4080
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4060
4081
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
4061
4082
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
4062
- font-family: var(--font-family);
4083
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4063
4084
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
4064
4085
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
4065
4086
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -4072,7 +4093,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4072
4093
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4073
4094
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
4074
4095
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
4075
- font-family: var(--font-family);
4096
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4076
4097
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
4077
4098
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
4078
4099
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -4087,7 +4108,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4087
4108
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4088
4109
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
4089
4110
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
4090
- font-family: var(--font-family);
4111
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4091
4112
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
4092
4113
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
4093
4114
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -4103,7 +4124,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4103
4124
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4104
4125
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4105
4126
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4106
- font-family: var(--font-family);
4127
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4107
4128
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
4108
4129
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
4109
4130
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -4143,7 +4164,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4143
4164
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4144
4165
  font-weight: 600;
4145
4166
  font-style: normal;
4146
- font-family: var(--font-family, var(--font-family));
4167
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4147
4168
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4148
4169
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4149
4170
  }
@@ -4219,7 +4240,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4219
4240
  .sd-boolean__thumb,
4220
4241
  .sd-boolean__label {
4221
4242
  display: block;
4222
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
4243
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
4223
4244
  font-weight: var(--sjs-font-editorfont-weight, 400);
4224
4245
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4225
4246
  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 {
4473
4494
  border: none;
4474
4495
  background-color: transparent;
4475
4496
  cursor: pointer;
4476
- font-family: var(--font-family, var(--font-family));
4497
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4477
4498
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4478
4499
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4479
4500
  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 {
4894
4915
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4895
4916
  border-radius: var(--sjs-corner-radius, 4px);
4896
4917
  cursor: pointer;
4897
- font-family: var(--font-family, var(--font-family));
4918
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4898
4919
  font-style: normal;
4899
4920
  font-weight: 600;
4900
4921
  font-size: var(--sjs-font-size, 16px);
@@ -5042,7 +5063,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5042
5063
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5043
5064
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
5044
5065
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
5045
- font-family: var(--font-family);
5066
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5046
5067
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
5047
5068
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
5048
5069
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -5056,7 +5077,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5056
5077
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5057
5078
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
5058
5079
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
5059
- font-family: var(--font-family);
5080
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5060
5081
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
5061
5082
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
5062
5083
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5070,7 +5091,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5070
5091
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5071
5092
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
5072
5093
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
5073
- font-family: var(--font-family);
5094
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5074
5095
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
5075
5096
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
5076
5097
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5088,7 +5109,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5088
5109
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5089
5110
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
5090
5111
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
5091
- font-family: var(--font-family);
5112
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5092
5113
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
5093
5114
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
5094
5115
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5108,7 +5129,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5108
5129
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5109
5130
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5110
5131
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5111
- font-family: var(--font-family);
5132
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5112
5133
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
5113
5134
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
5114
5135
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5153,7 +5174,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5153
5174
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5154
5175
  font-weight: 600;
5155
5176
  font-style: normal;
5156
- font-family: var(--font-family, var(--font-family));
5177
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5157
5178
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5158
5179
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5159
5180
  }
@@ -5277,7 +5298,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5277
5298
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5278
5299
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5279
5300
  font-weight: 600;
5280
- font-family: var(--font-family, var(--font-family));
5301
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5281
5302
  font-style: normal;
5282
5303
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5283
5304
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
@@ -5395,7 +5416,7 @@ svg.sd-action--icon {
5395
5416
  }
5396
5417
 
5397
5418
  .sd-completedpage {
5398
- font-family: var(--font-family, var(--font-family));
5419
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5399
5420
  font-weight: bold;
5400
5421
  box-sizing: border-box;
5401
5422
  text-align: center;
@@ -5407,7 +5428,7 @@ svg.sd-action--icon {
5407
5428
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5408
5429
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
5409
5430
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
5410
- font-family: var(--font-family);
5431
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5411
5432
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
5412
5433
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
5413
5434
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -5421,7 +5442,7 @@ svg.sd-action--icon {
5421
5442
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5422
5443
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
5423
5444
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
5424
- font-family: var(--font-family);
5445
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5425
5446
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
5426
5447
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
5427
5448
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5435,7 +5456,7 @@ svg.sd-action--icon {
5435
5456
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5436
5457
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
5437
5458
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
5438
- font-family: var(--font-family);
5459
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5439
5460
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
5440
5461
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
5441
5462
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5453,7 +5474,7 @@ svg.sd-action--icon {
5453
5474
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5454
5475
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
5455
5476
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
5456
- font-family: var(--font-family);
5477
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5457
5478
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
5458
5479
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
5459
5480
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5473,7 +5494,7 @@ svg.sd-action--icon {
5473
5494
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5474
5495
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5475
5496
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5476
- font-family: var(--font-family);
5497
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5477
5498
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
5478
5499
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
5479
5500
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5518,7 +5539,7 @@ svg.sd-action--icon {
5518
5539
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5519
5540
  font-weight: 600;
5520
5541
  font-style: normal;
5521
- font-family: var(--font-family, var(--font-family));
5542
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5522
5543
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5523
5544
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5524
5545
  }
@@ -5745,26 +5766,27 @@ svg.sd-action--icon {
5745
5766
  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
5746
5767
  }
5747
5768
 
5748
- .sv-cover {
5769
+ .sv-header {
5749
5770
  position: relative;
5750
- background-color: var(--sjs-cover-backcolor);
5771
+ background-color: var(--sjs-header-backcolor, var(--sjs-primary-backcolor, var(--primary, #19b394)));
5751
5772
  }
5752
5773
 
5753
- .sv-conver__overlap {
5774
+ .sv-header__overlap {
5754
5775
  margin-bottom: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5755
5776
  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5756
5777
  }
5757
5778
 
5758
- .sv-conver__overlap.sv-conver__without-background {
5779
+ .sv-header__overlap.sv-header__without-background {
5759
5780
  margin-bottom: 0;
5760
5781
  padding-bottom: 0;
5761
5782
  }
5762
5783
 
5763
- .sv-conver__without-background .sv-conver__content {
5784
+ .sv-header__without-background .sv-header--mobile,
5785
+ .sv-header__without-background .sv-header__content {
5764
5786
  padding-bottom: 0;
5765
5787
  }
5766
5788
 
5767
- .sv-conver__content {
5789
+ .sv-header__content {
5768
5790
  padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5769
5791
  box-sizing: border-box;
5770
5792
  height: 100%;
@@ -5775,13 +5797,13 @@ svg.sd-action--icon {
5775
5797
  grid-auto-rows: 1fr 1fr 1fr;
5776
5798
  }
5777
5799
 
5778
- .sv-conver__content--static {
5800
+ .sv-header__content--static {
5779
5801
  max-width: calc(88 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5780
5802
  margin-left: auto;
5781
5803
  margin-right: auto;
5782
5804
  }
5783
5805
 
5784
- .sv-cover__background-image {
5806
+ .sv-header__background-image {
5785
5807
  width: 100%;
5786
5808
  height: 100%;
5787
5809
  position: absolute;
@@ -5792,15 +5814,15 @@ svg.sd-action--icon {
5792
5814
  background-position-x: center;
5793
5815
  }
5794
5816
 
5795
- .sv-cover__background-image--contain {
5817
+ .sv-header__background-image--contain {
5796
5818
  background-repeat: no-repeat;
5797
5819
  }
5798
5820
 
5799
- .sv-cover__cell {
5821
+ .sv-header__cell {
5800
5822
  position: relative;
5801
5823
  }
5802
5824
 
5803
- .sv-cover__cell-content {
5825
+ .sv-header__cell-content {
5804
5826
  display: flex;
5805
5827
  flex-direction: column;
5806
5828
  position: absolute;
@@ -5809,61 +5831,80 @@ svg.sd-action--icon {
5809
5831
  bottom: 0;
5810
5832
  }
5811
5833
 
5812
- .sv-cover__cell--left .sv-cover__cell-content {
5834
+ .sv-header__cell--left .sv-header__cell-content {
5813
5835
  left: 0;
5814
5836
  }
5815
5837
 
5816
- .sv-cover__cell--center .sv-cover__cell-content {
5838
+ .sv-header__cell--center .sv-header__cell-content {
5817
5839
  min-width: 100%;
5840
+ left: 50%;
5841
+ transform: translateX(-50%);
5818
5842
  }
5819
5843
 
5820
- .sv-cover__cell--right .sv-cover__cell-content {
5844
+ .sv-header__cell--right .sv-header__cell-content {
5821
5845
  right: 0;
5822
5846
  }
5823
5847
 
5824
- .sv-cover__logo {
5848
+ .sv-header__logo {
5825
5849
  display: flex;
5826
5850
  }
5851
+ .sv-header__logo img {
5852
+ display: block;
5853
+ }
5827
5854
 
5828
- .sv-cover__title {
5855
+ .sv-header__title {
5829
5856
  display: flex;
5830
5857
  }
5831
5858
 
5832
- .sv-cover__title .sd-title {
5833
- --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
5834
- font-size: var(--cover-title-font-size);
5835
- line-height: calc(1.25 * (var(--cover-title-font-size)));
5859
+ .sv-header__title .sd-title {
5860
+ --header-title-font-size: var(--sjs-font-headertitle-size, calc(2 * (var(--sjs-font-size, 16px))));
5861
+ font-size: var(--header-title-font-size);
5862
+ line-height: calc(1.25 * (var(--header-title-font-size)));
5863
+ color: var(--sjs-font-headertitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
5864
+ font-family: var(--sjs-font-headertitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
5865
+ font-weight: var(--sjs-font-headertitle-weight, 700);
5836
5866
  margin: 0;
5837
- color: var(--sjs-cover-title-forecolor, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
5838
- font-family: var(--sjs-font-surveytitle-family, var(--font-family));
5839
- font-weight: var(--sjs-font-surveytitle-weight, 700);
5840
5867
  }
5841
5868
 
5842
- .sv-cover__logo ~ .sv-cover__title {
5843
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5869
+ .sv-header__logo ~ .sv-header__title {
5870
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5844
5871
  }
5845
5872
 
5846
- .sv-cover__logo ~ .sv-cover__description {
5847
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5873
+ .sv-header__logo ~ .sv-header__description {
5874
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5848
5875
  }
5849
5876
 
5850
- .sv-cover__title ~ .sv-cover__description {
5877
+ .sv-header__title ~ .sv-header__description {
5851
5878
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5852
5879
  }
5853
5880
 
5854
- .sv-cover__description {
5881
+ .sv-header__description {
5855
5882
  display: flex;
5856
5883
  }
5857
5884
 
5858
- .sv-cover__description .sd-description {
5885
+ .sv-header__description .sd-description {
5886
+ --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
5887
+ font-size: var(--header-description-font-size);
5888
+ line-height: calc(1.5 * (var(--header-description-font-size)));
5889
+ color: var(--sjs-font-headerdescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
5890
+ font-family: var(--sjs-font-headerdescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
5891
+ font-weight: var(--sjs-font-headerdescription-weight, 400);
5859
5892
  margin: 0;
5860
- color: var(--sjs-cover-description-forecolor, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
5861
5893
  }
5862
5894
 
5863
- .sv-conver__content .sd-header__text h3 {
5895
+ .sv-header__content .sd-header__text h3 {
5864
5896
  margin: 0;
5865
5897
  }
5866
5898
 
5899
+ .sv-header--mobile {
5900
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5901
+ position: relative;
5902
+ z-index: 1;
5903
+ }
5904
+ .sv-header--mobile .sv-header__logo img {
5905
+ max-width: 100%;
5906
+ }
5907
+
5867
5908
  @keyframes rotationAnimation {
5868
5909
  from {
5869
5910
  rotate: 0deg;
@@ -6129,6 +6170,7 @@ sv-components-container,
6129
6170
  }
6130
6171
  .sd-multipletext--mobile .sd-multipletext__item {
6131
6172
  flex-basis: 0;
6173
+ min-width: 0;
6132
6174
  }
6133
6175
  .sd-multipletext--mobile .sd-multipletext__item .sd-input {
6134
6176
  padding: 0;
@@ -6150,6 +6192,11 @@ sv-components-container,
6150
6192
  .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item,
6151
6193
  .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item {
6152
6194
  flex-basis: auto;
6195
+ min-width: auto;
6196
+ width: 100%;
6197
+ }
6198
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item .sd-input,
6199
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item .sd-input {
6153
6200
  width: 100%;
6154
6201
  }
6155
6202
 
@@ -6169,7 +6216,7 @@ body {
6169
6216
  --sd-mobile-width: 600px;
6170
6217
  --sd-timer-size: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
6171
6218
  width: 100%;
6172
- font-family: var(--font-family, var(--font-family));
6219
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
6173
6220
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
6174
6221
  position: relative;
6175
6222
  }