survey-react 1.9.113 → 1.9.115

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 +274 -138
  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 +279 -168
  12. package/survey.react.js +1349 -950
  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.115
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));
@@ -2166,13 +2176,23 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2166
2176
  position: relative;
2167
2177
  }
2168
2178
 
2179
+ .sd-text__character-counter {
2180
+ overflow: hidden;
2181
+ text-overflow: ellipsis;
2182
+ white-space: nowrap;
2183
+ }
2184
+
2185
+ .sd-text__character-counter:focus-within {
2186
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2187
+ }
2188
+
2169
2189
  .sd-remaining-character-counter {
2170
2190
  display: none;
2171
2191
  flex-direction: row;
2172
2192
  justify-content: flex-end;
2173
2193
  align-items: flex-end;
2174
2194
  padding: 0px;
2175
- font-family: var(--font-family);
2195
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2176
2196
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2177
2197
  font-size: var(--sjs-font-size, 16px);
2178
2198
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2262,7 +2282,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2262
2282
  }
2263
2283
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2264
2284
  --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));
2285
+ font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2266
2286
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2267
2287
  font-size: var(--page-title-font-size);
2268
2288
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
@@ -2278,7 +2298,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2278
2298
  line-height: inherit;
2279
2299
  }
2280
2300
  .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));
2301
+ font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2282
2302
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2283
2303
  font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2284
2304
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -2405,7 +2425,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2405
2425
  border: none;
2406
2426
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2407
2427
  font-size: var(--sjs-font-size, 16px);
2408
- font-family: var(--font-family, var(--font-family));
2428
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2409
2429
  font-weight: 600;
2410
2430
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
2411
2431
  }
@@ -2817,7 +2837,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2817
2837
 
2818
2838
  .sd-page .sd-page__title {
2819
2839
  --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));
2840
+ font-family: var(--sjs-font-pagetitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2821
2841
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2822
2842
  font-size: var(--page-title-font-size);
2823
2843
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
@@ -2827,7 +2847,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2827
2847
  }
2828
2848
 
2829
2849
  .sd-page .sd-page__description {
2830
- font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2850
+ font-family: var(--sjs-font-pagedescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2831
2851
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2832
2852
  font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2833
2853
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -2916,7 +2936,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2916
2936
 
2917
2937
  .sd-title {
2918
2938
  display: block;
2919
- font-family: var(--font-family, var(--font-family));
2939
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2920
2940
  font-style: normal;
2921
2941
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2922
2942
  flex-direction: row;
@@ -2929,7 +2949,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2929
2949
  align-items: center;
2930
2950
  padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
2931
2951
  overflow: auto;
2932
- font-family: var(--font-family, var(--font-family));
2952
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
2933
2953
  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2934
2954
  box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2935
2955
  }
@@ -2944,11 +2964,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2944
2964
  flex-grow: 1;
2945
2965
  }
2946
2966
  .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));
2967
+ --survey-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
2968
+ font-size: var(--survey-title-font-size);
2969
+ line-height: calc(1.25 * (var(--survey-title-font-size)));
2970
+ color: var(--sjs-font-surveytitle-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
2971
+ font-family: var(--sjs-font-surveytitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2952
2972
  font-weight: var(--sjs-font-surveytitle-weight, 700);
2953
2973
  }
2954
2974
  .sd-header__text h3 {
@@ -2959,6 +2979,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2959
2979
  font-weight: 400;
2960
2980
  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2961
2981
  }
2982
+ .sd-header__text .sd-description {
2983
+ --survey-description-font-size: var(--sjs-font-surveydescription-size, var(--sjs-font-size, 16px));
2984
+ font-size: var(--survey-description-font-size);
2985
+ line-height: calc(1.5 * (var(--survey-description-font-size)));
2986
+ color: var(--sjs-font-surveydescription-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2987
+ font-family: var(--sjs-font-surveydescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2988
+ font-weight: var(--sjs-font-surveydescription-weight, 400);
2989
+ }
2962
2990
 
2963
2991
  .sd-title .sv-title-actions {
2964
2992
  width: 100%;
@@ -3005,7 +3033,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3005
3033
 
3006
3034
  .sd-description {
3007
3035
  font-style: normal;
3008
- font-family: var(--sjs-font-questiondescription-family, var(--font-family));
3036
+ font-family: var(--sjs-font-questiondescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3009
3037
  font-weight: var(--sjs-font-questiondescription-weight, 400);
3010
3038
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
3011
3039
  font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
@@ -3061,7 +3089,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3061
3089
  }
3062
3090
 
3063
3091
  .sd-item__control-label {
3064
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3092
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3065
3093
  font-style: normal;
3066
3094
  font-weight: var(--sjs-font-editorfont-weight, 400);
3067
3095
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
@@ -3201,6 +3229,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3201
3229
 
3202
3230
  .sd-matrix__label {
3203
3231
  display: flex;
3232
+ position: relative;
3204
3233
  justify-content: center;
3205
3234
  }
3206
3235
 
@@ -3505,7 +3534,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3505
3534
  }
3506
3535
 
3507
3536
  .sd-rating__item-text.sd-rating__item-text {
3508
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3537
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3509
3538
  font-weight: var(--sjs-font-editorfont-weight, 400);
3510
3539
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3511
3540
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3622,7 +3651,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3622
3651
 
3623
3652
  .sd-dropdown option {
3624
3653
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3625
- font-family: var(--font-family, var(--font-family));
3654
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
3626
3655
  font-size: var(--sjs-font-size, 16px);
3627
3656
  }
3628
3657
 
@@ -3637,7 +3666,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3637
3666
  text-overflow: ellipsis;
3638
3667
  white-space: nowrap;
3639
3668
  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));
3669
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3641
3670
  font-weight: var(--sjs-font-editorfont-weight, 400);
3642
3671
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3643
3672
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3687,7 +3716,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3687
3716
  border: none;
3688
3717
  outline: none;
3689
3718
  padding: 0;
3690
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
3719
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3691
3720
  font-weight: var(--sjs-font-editorfont-weight, 400);
3692
3721
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3693
3722
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
@@ -3740,6 +3769,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3740
3769
  .sv-dropdown-popup .sd-list__item-body {
3741
3770
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3742
3771
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3772
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3773
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3774
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3743
3775
  }
3744
3776
 
3745
3777
  [dir=rtl] .sd-dropdown,
@@ -4033,7 +4065,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4033
4065
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4034
4066
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4035
4067
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4036
- font-family: var(--font-family);
4068
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4037
4069
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
4038
4070
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
4039
4071
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -4046,7 +4078,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4046
4078
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4047
4079
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
4048
4080
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
4049
- font-family: var(--font-family);
4081
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4050
4082
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
4051
4083
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
4052
4084
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -4059,7 +4091,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4059
4091
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4060
4092
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
4061
4093
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
4062
- font-family: var(--font-family);
4094
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4063
4095
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
4064
4096
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
4065
4097
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -4072,7 +4104,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4072
4104
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4073
4105
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
4074
4106
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
4075
- font-family: var(--font-family);
4107
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4076
4108
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
4077
4109
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
4078
4110
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -4087,7 +4119,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4087
4119
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4088
4120
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
4089
4121
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
4090
- font-family: var(--font-family);
4122
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4091
4123
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
4092
4124
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
4093
4125
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -4103,7 +4135,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4103
4135
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4104
4136
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4105
4137
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4106
- font-family: var(--font-family);
4138
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4107
4139
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
4108
4140
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
4109
4141
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -4143,7 +4175,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4143
4175
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4144
4176
  font-weight: 600;
4145
4177
  font-style: normal;
4146
- font-family: var(--font-family, var(--font-family));
4178
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4147
4179
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4148
4180
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4149
4181
  }
@@ -4219,7 +4251,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4219
4251
  .sd-boolean__thumb,
4220
4252
  .sd-boolean__label {
4221
4253
  display: block;
4222
- font-family: var(--sjs-font-editorfont-family, var(--font-family));
4254
+ font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
4223
4255
  font-weight: var(--sjs-font-editorfont-weight, 400);
4224
4256
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4225
4257
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -4473,7 +4505,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4473
4505
  border: none;
4474
4506
  background-color: transparent;
4475
4507
  cursor: pointer;
4476
- font-family: var(--font-family, var(--font-family));
4508
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4477
4509
  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4478
4510
  line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4479
4511
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -4679,9 +4711,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4679
4711
  .sd-file__preview {
4680
4712
  position: relative;
4681
4713
  display: flex;
4682
- align-items: center;
4714
+ align-items: stretch;
4683
4715
  flex-direction: column;
4684
4716
  min-height: 100%;
4717
+ width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4685
4718
  margin: 0;
4686
4719
  }
4687
4720
  .sd-file__preview .sd-file__default-image {
@@ -4711,6 +4744,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4711
4744
  white-space: normal;
4712
4745
  word-break: break-all;
4713
4746
  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4747
+ min-width: 100%;
4748
+ max-width: 100%;
4714
4749
  overflow: hidden;
4715
4750
  max-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4716
4751
  text-overflow: ellipsis;
@@ -4731,23 +4766,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4731
4766
  .sd-file__image-wrapper {
4732
4767
  position: relative;
4733
4768
  text-align: center;
4734
- min-width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4769
+ display: flex;
4770
+ align-items: center;
4771
+ justify-content: center;
4772
+ width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4735
4773
  min-height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4774
+ height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4775
+ background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4736
4776
  }
4737
4777
  .sd-file__image-wrapper img:not(.sd-file__default-image) {
4738
4778
  display: block;
4779
+ max-width: 100%;
4780
+ max-height: 100%;
4739
4781
  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4740
4782
  height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4741
4783
  object-fit: contain;
4742
- background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4743
4784
  }
4744
4785
 
4745
- .sd-file--single img:hover + .sd-file__remove-file-button {
4746
- display: none;
4786
+ .sd-file__image-wrapper--default-image {
4787
+ background: transparent;
4747
4788
  }
4748
4789
 
4749
- .sd-file--mobile:first-child .sd-file__list {
4750
- height: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4790
+ .sd-file--single img:hover + .sd-file__remove-file-button {
4791
+ display: none;
4751
4792
  }
4752
4793
 
4753
4794
  .sd-file--single-image {
@@ -4765,6 +4806,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4765
4806
  max-height: 100%;
4766
4807
  width: 100%;
4767
4808
  }
4809
+ .sd-file--single-image .sd-file__image-wrapper {
4810
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
4811
+ }
4768
4812
  .sd-file--single-image .sd-file__image-wrapper {
4769
4813
  min-height: 100%;
4770
4814
  min-width: 100%;
@@ -4772,7 +4816,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4772
4816
  .sd-file--single-image .sd-file__image-wrapper img {
4773
4817
  width: 100%;
4774
4818
  height: 100%;
4775
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
4776
4819
  }
4777
4820
  .sd-file--single-image .sd-file__sign {
4778
4821
  position: absolute;
@@ -4783,10 +4826,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4783
4826
  .sd-file--single-image .sd-file__sign a {
4784
4827
  color: transparent;
4785
4828
  width: 100%;
4829
+ min-width: 100%;
4830
+ max-width: 100%;
4786
4831
  height: 100%;
4787
4832
  outline: none;
4788
4833
  }
4789
4834
 
4835
+ .sd-file__image-wrapper.sd-file__image-wrapper--default-image {
4836
+ background: transparent;
4837
+ }
4838
+
4790
4839
  .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use {
4791
4840
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4792
4841
  }
@@ -4833,7 +4882,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4833
4882
  }
4834
4883
 
4835
4884
  .sd-file__video-container {
4836
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4885
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4837
4886
  position: absolute;
4838
4887
  top: 0;
4839
4888
  left: 0;
@@ -4894,7 +4943,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4894
4943
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4895
4944
  border-radius: var(--sjs-corner-radius, 4px);
4896
4945
  cursor: pointer;
4897
- font-family: var(--font-family, var(--font-family));
4946
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4898
4947
  font-style: normal;
4899
4948
  font-weight: 600;
4900
4949
  font-size: var(--sjs-font-size, 16px);
@@ -5042,7 +5091,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5042
5091
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5043
5092
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
5044
5093
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
5045
- font-family: var(--font-family);
5094
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5046
5095
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
5047
5096
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
5048
5097
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -5056,7 +5105,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5056
5105
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5057
5106
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
5058
5107
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
5059
- font-family: var(--font-family);
5108
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5060
5109
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
5061
5110
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
5062
5111
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5070,7 +5119,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5070
5119
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5071
5120
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
5072
5121
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
5073
- font-family: var(--font-family);
5122
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5074
5123
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
5075
5124
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
5076
5125
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5088,7 +5137,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5088
5137
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5089
5138
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
5090
5139
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
5091
- font-family: var(--font-family);
5140
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5092
5141
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
5093
5142
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
5094
5143
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5108,7 +5157,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5108
5157
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5109
5158
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5110
5159
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5111
- font-family: var(--font-family);
5160
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5112
5161
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
5113
5162
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
5114
5163
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5153,7 +5202,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5153
5202
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5154
5203
  font-weight: 600;
5155
5204
  font-style: normal;
5156
- font-family: var(--font-family, var(--font-family));
5205
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5157
5206
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5158
5207
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5159
5208
  }
@@ -5241,6 +5290,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5241
5290
  background-color: transparent;
5242
5291
  }
5243
5292
 
5293
+ .sd-multipletext-item__character-counter {
5294
+ overflow: hidden;
5295
+ text-overflow: ellipsis;
5296
+ white-space: nowrap;
5297
+ }
5298
+
5299
+ .sd-question__content:focus-within .sd-multipletext-item__character-counter {
5300
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5301
+ }
5302
+
5244
5303
  .sd-multipletext__cell {
5245
5304
  padding-left: 0;
5246
5305
  padding-right: 0;
@@ -5277,7 +5336,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5277
5336
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5278
5337
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5279
5338
  font-weight: 600;
5280
- font-family: var(--font-family, var(--font-family));
5339
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5281
5340
  font-style: normal;
5282
5341
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5283
5342
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
@@ -5317,6 +5376,10 @@ svg.sd-action--icon {
5317
5376
  opacity: 0.25;
5318
5377
  pointer-events: none;
5319
5378
  }
5379
+ .sd-action:disabled use,
5380
+ .sd-action--disabled use {
5381
+ fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
5382
+ }
5320
5383
 
5321
5384
  .sd-action:not(.sd-action--pressed):hover,
5322
5385
  .sd-action:not(.sd-action--pressed):focus {
@@ -5395,7 +5458,7 @@ svg.sd-action--icon {
5395
5458
  }
5396
5459
 
5397
5460
  .sd-completedpage {
5398
- font-family: var(--font-family, var(--font-family));
5461
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5399
5462
  font-weight: bold;
5400
5463
  box-sizing: border-box;
5401
5464
  text-align: center;
@@ -5407,7 +5470,7 @@ svg.sd-action--icon {
5407
5470
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5408
5471
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
5409
5472
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
5410
- font-family: var(--font-family);
5473
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5411
5474
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
5412
5475
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
5413
5476
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
@@ -5421,7 +5484,7 @@ svg.sd-action--icon {
5421
5484
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5422
5485
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
5423
5486
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
5424
- font-family: var(--font-family);
5487
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5425
5488
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
5426
5489
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
5427
5490
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
@@ -5435,7 +5498,7 @@ svg.sd-action--icon {
5435
5498
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5436
5499
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
5437
5500
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
5438
- font-family: var(--font-family);
5501
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5439
5502
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
5440
5503
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
5441
5504
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
@@ -5453,7 +5516,7 @@ svg.sd-action--icon {
5453
5516
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5454
5517
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
5455
5518
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
5456
- font-family: var(--font-family);
5519
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5457
5520
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
5458
5521
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
5459
5522
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
@@ -5473,7 +5536,7 @@ svg.sd-action--icon {
5473
5536
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5474
5537
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5475
5538
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5476
- font-family: var(--font-family);
5539
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5477
5540
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
5478
5541
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
5479
5542
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
@@ -5518,7 +5581,7 @@ svg.sd-action--icon {
5518
5581
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5519
5582
  font-weight: 600;
5520
5583
  font-style: normal;
5521
- font-family: var(--font-family, var(--font-family));
5584
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5522
5585
  font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5523
5586
  line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5524
5587
  }
@@ -5745,26 +5808,27 @@ svg.sd-action--icon {
5745
5808
  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
5746
5809
  }
5747
5810
 
5748
- .sv-cover {
5811
+ .sv-header {
5749
5812
  position: relative;
5750
- background-color: var(--sjs-cover-backcolor);
5813
+ background-color: var(--sjs-header-backcolor, var(--sjs-primary-backcolor, var(--primary, #19b394)));
5751
5814
  }
5752
5815
 
5753
- .sv-conver__overlap {
5816
+ .sv-header__overlap {
5754
5817
  margin-bottom: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5755
5818
  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5756
5819
  }
5757
5820
 
5758
- .sv-conver__overlap.sv-conver__without-background {
5821
+ .sv-header__overlap.sv-header__without-background {
5759
5822
  margin-bottom: 0;
5760
5823
  padding-bottom: 0;
5761
5824
  }
5762
5825
 
5763
- .sv-conver__without-background .sv-conver__content {
5826
+ .sv-header__without-background .sv-header--mobile,
5827
+ .sv-header__without-background .sv-header__content {
5764
5828
  padding-bottom: 0;
5765
5829
  }
5766
5830
 
5767
- .sv-conver__content {
5831
+ .sv-header__content {
5768
5832
  padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5769
5833
  box-sizing: border-box;
5770
5834
  height: 100%;
@@ -5775,13 +5839,13 @@ svg.sd-action--icon {
5775
5839
  grid-auto-rows: 1fr 1fr 1fr;
5776
5840
  }
5777
5841
 
5778
- .sv-conver__content--static {
5842
+ .sv-header__content--static {
5779
5843
  max-width: calc(88 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5780
5844
  margin-left: auto;
5781
5845
  margin-right: auto;
5782
5846
  }
5783
5847
 
5784
- .sv-cover__background-image {
5848
+ .sv-header__background-image {
5785
5849
  width: 100%;
5786
5850
  height: 100%;
5787
5851
  position: absolute;
@@ -5792,15 +5856,15 @@ svg.sd-action--icon {
5792
5856
  background-position-x: center;
5793
5857
  }
5794
5858
 
5795
- .sv-cover__background-image--contain {
5859
+ .sv-header__background-image--contain {
5796
5860
  background-repeat: no-repeat;
5797
5861
  }
5798
5862
 
5799
- .sv-cover__cell {
5863
+ .sv-header__cell {
5800
5864
  position: relative;
5801
5865
  }
5802
5866
 
5803
- .sv-cover__cell-content {
5867
+ .sv-header__cell-content {
5804
5868
  display: flex;
5805
5869
  flex-direction: column;
5806
5870
  position: absolute;
@@ -5809,61 +5873,80 @@ svg.sd-action--icon {
5809
5873
  bottom: 0;
5810
5874
  }
5811
5875
 
5812
- .sv-cover__cell--left .sv-cover__cell-content {
5876
+ .sv-header__cell--left .sv-header__cell-content {
5813
5877
  left: 0;
5814
5878
  }
5815
5879
 
5816
- .sv-cover__cell--center .sv-cover__cell-content {
5880
+ .sv-header__cell--center .sv-header__cell-content {
5817
5881
  min-width: 100%;
5882
+ left: 50%;
5883
+ transform: translateX(-50%);
5818
5884
  }
5819
5885
 
5820
- .sv-cover__cell--right .sv-cover__cell-content {
5886
+ .sv-header__cell--right .sv-header__cell-content {
5821
5887
  right: 0;
5822
5888
  }
5823
5889
 
5824
- .sv-cover__logo {
5890
+ .sv-header__logo {
5825
5891
  display: flex;
5826
5892
  }
5893
+ .sv-header__logo img {
5894
+ display: block;
5895
+ }
5827
5896
 
5828
- .sv-cover__title {
5897
+ .sv-header__title {
5829
5898
  display: flex;
5830
5899
  }
5831
5900
 
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)));
5901
+ .sv-header__title .sd-title {
5902
+ --header-title-font-size: var(--sjs-font-headertitle-size, calc(2 * (var(--sjs-font-size, 16px))));
5903
+ font-size: var(--header-title-font-size);
5904
+ line-height: calc(1.25 * (var(--header-title-font-size)));
5905
+ color: var(--sjs-font-headertitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
5906
+ font-family: var(--sjs-font-headertitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
5907
+ font-weight: var(--sjs-font-headertitle-weight, 700);
5836
5908
  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
5909
  }
5841
5910
 
5842
- .sv-cover__logo ~ .sv-cover__title {
5843
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5911
+ .sv-header__logo ~ .sv-header__title {
5912
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5844
5913
  }
5845
5914
 
5846
- .sv-cover__logo ~ .sv-cover__description {
5847
- margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5915
+ .sv-header__logo ~ .sv-header__description {
5916
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5848
5917
  }
5849
5918
 
5850
- .sv-cover__title ~ .sv-cover__description {
5919
+ .sv-header__title ~ .sv-header__description {
5851
5920
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5852
5921
  }
5853
5922
 
5854
- .sv-cover__description {
5923
+ .sv-header__description {
5855
5924
  display: flex;
5856
5925
  }
5857
5926
 
5858
- .sv-cover__description .sd-description {
5927
+ .sv-header__description .sd-description {
5928
+ --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
5929
+ font-size: var(--header-description-font-size);
5930
+ line-height: calc(1.5 * (var(--header-description-font-size)));
5931
+ color: var(--sjs-font-headerdescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
5932
+ font-family: var(--sjs-font-headerdescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
5933
+ font-weight: var(--sjs-font-headerdescription-weight, 400);
5859
5934
  margin: 0;
5860
- color: var(--sjs-cover-description-forecolor, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
5861
5935
  }
5862
5936
 
5863
- .sv-conver__content .sd-header__text h3 {
5937
+ .sv-header__content .sd-header__text h3 {
5864
5938
  margin: 0;
5865
5939
  }
5866
5940
 
5941
+ .sv-header--mobile {
5942
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5943
+ position: relative;
5944
+ z-index: 1;
5945
+ }
5946
+ .sv-header--mobile .sv-header__logo img {
5947
+ max-width: 100%;
5948
+ }
5949
+
5867
5950
  @keyframes rotationAnimation {
5868
5951
  from {
5869
5952
  rotate: 0deg;
@@ -6003,15 +6086,34 @@ sv-components-container,
6003
6086
  display: none;
6004
6087
  }
6005
6088
  .sd-root-modern.sd-root-modern--mobile .sd-table tr {
6006
- display: block;
6089
+ display: flex;
6090
+ flex-direction: column;
6007
6091
  }
6008
6092
  .sd-root-modern.sd-root-modern--mobile .sd-matrix__table .sd-table__row {
6009
6093
  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
6010
6094
  }
6011
- .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr {
6012
- padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
6095
+ .sd-root-modern.sd-root-modern--mobile .sd-table__row {
6096
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6097
+ }
6098
+ .sd-root-modern.sd-root-modern--mobile .sd-table__row--expanded .sd-table__cell-action--show-detail-mobile {
6099
+ display: none;
6100
+ }
6101
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) .sd-table__row {
6102
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6103
+ }
6104
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) .sd-table__row.sd-table__row--has-end-actions {
6105
+ padding-bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6106
+ }
6107
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions) {
6108
+ padding-bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6109
+ }
6110
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions):not(:last-of-type) {
6111
+ padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6013
6112
  }
6014
- .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr::after {
6113
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions):not(:last-of-type)::after {
6114
+ bottom: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6115
+ }
6116
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--expanded)::after {
6015
6117
  z-index: 12;
6016
6118
  content: " ";
6017
6119
  display: block;
@@ -6019,20 +6121,32 @@ sv-components-container,
6019
6121
  height: 1px;
6020
6122
  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
6021
6123
  left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6022
- bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6124
+ bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6023
6125
  width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
6024
6126
  z-index: 12;
6025
6127
  }
6128
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--show-detail-mobile,
6129
+ .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--remove-row {
6130
+ margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6131
+ }
6026
6132
  .sd-root-modern.sd-root-modern--mobile .sd-matrix__label {
6027
6133
  justify-content: start;
6028
6134
  }
6029
6135
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
6136
+ border-top: none;
6137
+ border-bottom: none;
6030
6138
  display: block;
6031
6139
  padding-top: 0;
6032
6140
  padding-bottom: 0;
6033
6141
  text-align: left;
6034
6142
  }
6035
6143
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
6144
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6145
+ }
6146
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error {
6147
+ margin-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6148
+ }
6149
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error.sd-table__cell--error-bottom .sd-question__erbox {
6036
6150
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
6037
6151
  }
6038
6152
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell:first-of-type,
@@ -6040,27 +6154,46 @@ sv-components-container,
6040
6154
  margin-top: 0;
6041
6155
  }
6042
6156
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell::before {
6043
- padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6044
6157
  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
6045
6158
  content: attr(data-responsive-title);
6046
6159
  font-weight: 600;
6047
6160
  display: block;
6048
6161
  text-align: left;
6049
6162
  }
6163
+ .sd-root-modern.sd-root-modern--mobile .sd-table--no-header {
6164
+ padding-top: 0;
6165
+ }
6166
+ .sd-root-modern.sd-root-modern--mobile .sd-table--no-header .sd-table__cell::before {
6167
+ content: none;
6168
+ }
6050
6169
  .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell::before,
6051
6170
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--actions::before,
6052
6171
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text::before,
6053
6172
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
6054
6173
  content: none;
6055
6174
  }
6175
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--detail-panel {
6176
+ padding-top: 0;
6177
+ padding-bottom: 0;
6178
+ border-top: 0;
6179
+ border-bottom: 0;
6180
+ }
6181
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--detail-panel .sd-panel__content {
6182
+ padding-top: 0;
6183
+ }
6056
6184
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions {
6057
6185
  width: auto;
6186
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
6187
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
6058
6188
  }
6059
6189
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions .sd-action-bar {
6060
6190
  margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6061
- justify-content: flex-end;
6191
+ margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6062
6192
  background: var(--sjs-general-backcolor, var(--background, #fff));
6063
6193
  }
6194
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions #show-detail-mobile {
6195
+ flex-grow: 1;
6196
+ }
6064
6197
  .sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn {
6065
6198
  opacity: 1;
6066
6199
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6077,10 +6210,6 @@ sv-components-container,
6077
6210
  }
6078
6211
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
6079
6212
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
6080
- padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6081
- }
6082
- .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child) {
6083
- padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6084
6213
  }
6085
6214
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr::after {
6086
6215
  bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6095,11 +6224,12 @@ sv-components-container,
6095
6224
  margin-top: 0;
6096
6225
  }
6097
6226
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top .sd-question__erbox {
6098
- margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6099
- margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6227
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6228
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6100
6229
  }
6101
6230
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type .sd-question__erbox {
6102
- margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6231
+ margin-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6232
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
6103
6233
  }
6104
6234
  .sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
6105
6235
  margin-left: 0;
@@ -6129,6 +6259,7 @@ sv-components-container,
6129
6259
  }
6130
6260
  .sd-multipletext--mobile .sd-multipletext__item {
6131
6261
  flex-basis: 0;
6262
+ min-width: 0;
6132
6263
  }
6133
6264
  .sd-multipletext--mobile .sd-multipletext__item .sd-input {
6134
6265
  padding: 0;
@@ -6150,6 +6281,11 @@ sv-components-container,
6150
6281
  .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item,
6151
6282
  .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item {
6152
6283
  flex-basis: auto;
6284
+ min-width: auto;
6285
+ width: 100%;
6286
+ }
6287
+ .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item .sd-input,
6288
+ .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item .sd-input {
6153
6289
  width: 100%;
6154
6290
  }
6155
6291
 
@@ -6169,7 +6305,7 @@ body {
6169
6305
  --sd-mobile-width: 600px;
6170
6306
  --sd-timer-size: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
6171
6307
  width: 100%;
6172
- font-family: var(--font-family, var(--font-family));
6308
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
6173
6309
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
6174
6310
  position: relative;
6175
6311
  }