survey-react 1.9.101 → 1.9.103

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.
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.101
2
+ * surveyjs - Survey JavaScript library v1.9.103
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
  */
@@ -470,6 +470,7 @@ sv-popup {
470
470
 
471
471
  .sv-popup__container {
472
472
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
473
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
473
474
  position: absolute;
474
475
  padding: 0;
475
476
  }
@@ -477,7 +478,7 @@ sv-popup {
477
478
  .sv-popup__shadow {
478
479
  width: 100%;
479
480
  height: 100%;
480
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
481
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
481
482
  }
482
483
 
483
484
  .sv-popup__body-content {
@@ -1122,8 +1123,8 @@ sv-popup {
1122
1123
  text-overflow: ellipsis;
1123
1124
  white-space: nowrap;
1124
1125
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1125
- font-size: calc(1 * var(--sjs-font-size, 16px));
1126
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1126
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1127
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
1127
1128
  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1128
1129
  }
1129
1130
 
@@ -1388,6 +1389,7 @@ sv-popup {
1388
1389
 
1389
1390
  .sv-list__item-icon {
1390
1391
  float: left;
1392
+ flex-shrink: 0;
1391
1393
  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1392
1394
  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1393
1395
  }
@@ -1863,7 +1865,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1863
1865
  }
1864
1866
 
1865
1867
  .sd-question__erbox--above-question {
1866
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
1867
1868
  margin-bottom: calc(var(--sd-base-vertical-padding) - var(--sjs-base-unit, var(--base-unit, 8px)));
1868
1869
  }
1869
1870
 
@@ -1871,6 +1872,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1871
1872
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1872
1873
  }
1873
1874
 
1875
+ .sd-element--with-frame > .sd-question__erbox--above-question {
1876
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
1877
+ }
1878
+
1874
1879
  .sd-element--with-frame > .sd-question__erbox--below-question {
1875
1880
  position: relative;
1876
1881
  margin-top: 0;
@@ -1990,8 +1995,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1990
1995
  gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1991
1996
  justify-content: center;
1992
1997
  min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
1993
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1994
- font-size: calc(1 * var(--sjs-font-size, 16px));
1998
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1999
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
1995
2000
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1996
2001
  }
1997
2002
  .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2153,12 +2158,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2153
2158
  position: relative;
2154
2159
  }
2155
2160
 
2156
- .sd-panel.sd-panel--as-page {
2157
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2158
- }
2159
- .sd-panel.sd-panel--as-page > .sd-panel__content {
2160
- padding-top: 0;
2161
- }
2162
2161
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
2163
2162
  padding-top: 0;
2164
2163
  padding-bottom: 0;
@@ -2189,7 +2188,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2189
2188
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2190
2189
  position: static;
2191
2190
  line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2192
- margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2191
+ margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2192
+ }
2193
+ .sd-panel.sd-panel--as-page .sd-panel__header + .sd-panel__content {
2194
+ margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2195
+ }
2196
+ .sd-panel.sd-panel--as-page > .sd-panel__content {
2197
+ padding-top: 0;
2193
2198
  }
2194
2199
 
2195
2200
  .sd-row ~ .sd-row .sd-panel--as-page {
@@ -2217,6 +2222,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2217
2222
 
2218
2223
  .sjs_sp_placeholder {
2219
2224
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2225
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2226
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2220
2227
  }
2221
2228
 
2222
2229
  .sjs_sp_container {
@@ -2366,13 +2373,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2366
2373
 
2367
2374
  .sd-table__cell {
2368
2375
  font-weight: normal;
2369
- font-size: calc(1 * var(--sjs-font-size, 16px));
2370
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2376
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2377
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2371
2378
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2372
2379
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2373
2380
  text-align: center;
2374
2381
  }
2375
2382
 
2383
+ .sd-table__cell--error {
2384
+ padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2385
+ }
2386
+ .sd-table__cell--error .sd-question__erbox--outside-question {
2387
+ margin: 0;
2388
+ }
2389
+
2390
+ .sd-table__cell--error-top {
2391
+ vertical-align: bottom;
2392
+ padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2393
+ }
2394
+
2395
+ .sd-table__cell--error-bottom {
2396
+ vertical-align: top;
2397
+ padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2398
+ }
2399
+
2376
2400
  .sd-table__cell--item .sd-selectbase__item {
2377
2401
  text-align: center;
2378
2402
  }
@@ -2388,6 +2412,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2388
2412
  opacity: 1;
2389
2413
  }
2390
2414
 
2415
+ .sd-table__cell--header .sv-vue-title-additional-div,
2416
+ .sd-table__cell--header {
2417
+ font-size: 0;
2418
+ line-height: 0;
2419
+ }
2420
+
2421
+ .sd-table__cell--header span {
2422
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2423
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2424
+ }
2425
+
2391
2426
  .sd-table__cell--header {
2392
2427
  font-weight: 600;
2393
2428
  vertical-align: top;
@@ -2567,27 +2602,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2567
2602
  margin: auto;
2568
2603
  }
2569
2604
 
2570
- .sd-body--responsive .sd-page {
2571
- padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-page-vertical-padding) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2572
- }
2573
- .sd-body--responsive .sd-page.sd-page__empty-header {
2574
- padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2575
- }
2576
-
2577
- .sd-root-modern--mobile .sd-page {
2578
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2579
- }
2580
-
2581
2605
  .sd-page {
2582
2606
  position: relative;
2583
2607
  display: flex;
2584
2608
  flex-direction: column;
2585
2609
  align-items: flex-start;
2586
- padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2610
+ padding: 0 calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2587
2611
  width: 100%;
2588
2612
  box-sizing: border-box;
2589
2613
  }
2590
2614
 
2615
+ .sd-root-modern--mobile .sd-page {
2616
+ padding: 0;
2617
+ }
2618
+
2591
2619
  .sd-page .sd-page__title {
2592
2620
  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2593
2621
  font-weight: var(--sjs-font-pagetitle-weight, 700);
@@ -2596,6 +2624,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2596
2624
  position: static;
2597
2625
  line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2598
2626
  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2627
+ margin-top: 0;
2599
2628
  }
2600
2629
 
2601
2630
  .sd-page .sd-page__description {
@@ -2605,7 +2634,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2605
2634
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2606
2635
  position: static;
2607
2636
  line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2608
- margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2637
+ margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2609
2638
  }
2610
2639
 
2611
2640
  .sd-row {
@@ -2616,14 +2645,22 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2616
2645
  margin-top: var(--sd-base-vertical-padding);
2617
2646
  }
2618
2647
 
2648
+ .sd-row.sd-page__row {
2649
+ margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2650
+ }
2651
+
2652
+ .sd-page__row.sd-row--compact {
2653
+ margin-top: var(--sd-base-vertical-padding);
2654
+ }
2655
+
2619
2656
  .sd-row:first-of-type {
2620
2657
  margin-top: 0;
2621
2658
  }
2622
2659
 
2623
- .sd-row.sd-page__row {
2660
+ .sd-page__title ~ .sd-row.sd-page__row {
2624
2661
  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2625
2662
  }
2626
- .sd-row.sd-page__row.sd-row--compact {
2663
+ .sd-page__title ~ .sd-row.sd-page__row.sd-row--compact {
2627
2664
  margin-top: var(--sd-base-vertical-padding);
2628
2665
  }
2629
2666
 
@@ -2721,10 +2758,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2721
2758
 
2722
2759
  .sd-root-modern .sd-container-modern__title .sd-header__text h3 {
2723
2760
  margin: 0;
2724
- color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2725
2761
  }
2726
2762
  .sd-root-modern .sd-container-modern__title .sd-description {
2727
2763
  margin: 0;
2764
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2728
2765
  }
2729
2766
 
2730
2767
  .sd-title .sv-title-actions {
@@ -2757,7 +2794,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2757
2794
  font-style: normal;
2758
2795
  font-family: var(--sjs-font-questiondescription-family, var(--font-family));
2759
2796
  font-weight: var(--sjs-font-questiondescription-weight, 400);
2760
- color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2797
+ color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2761
2798
  font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2762
2799
  line-height: calc(1.5 * var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2763
2800
  white-space: normal;
@@ -2813,7 +2850,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2813
2850
  .sd-item__control-label {
2814
2851
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
2815
2852
  font-style: normal;
2816
- font-weight: normal;
2853
+ font-weight: var(--sjs-font-editorfont-weight, 400);
2817
2854
  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2818
2855
  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2819
2856
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
@@ -3005,7 +3042,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3005
3042
 
3006
3043
  .sd-rating__item {
3007
3044
  position: relative;
3008
- background: transparent;
3045
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
3009
3046
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3010
3047
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3011
3048
  white-space: nowrap;
@@ -3474,6 +3511,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3474
3511
  .sv-tagbox__item {
3475
3512
  position: relative;
3476
3513
  display: flex;
3514
+ align-items: center;
3477
3515
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3478
3516
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3479
3517
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
@@ -3670,8 +3708,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3670
3708
  }
3671
3709
 
3672
3710
  .sd-imagepicker__text {
3673
- font-size: calc(1 * var(--sjs-font-size, 16px));
3674
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3711
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3712
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3675
3713
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3676
3714
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3677
3715
  }
@@ -3811,6 +3849,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3811
3849
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3812
3850
  }
3813
3851
 
3852
+ .sd-boolean.sd-boolean--checked .sd-boolean__label--true,
3853
+ .sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false {
3854
+ color: transparent;
3855
+ transition-duration: 0.15s;
3856
+ transition-property: color;
3857
+ transition-timing-function: linear;
3858
+ }
3859
+
3814
3860
  .sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
3815
3861
  display: none;
3816
3862
  }
@@ -3948,7 +3994,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3948
3994
  }
3949
3995
 
3950
3996
  .sd-paneldynamic__progress-text {
3951
- font-size: calc(1 * var(--sjs-font-size, 16px));
3997
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3998
+ line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3952
3999
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3953
4000
  margin: 0;
3954
4001
  margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4036,7 +4083,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4036
4083
  background-color: transparent;
4037
4084
  cursor: pointer;
4038
4085
  font-family: var(--font-family, var(--font-family));
4039
- font-size: calc(1 * var(--sjs-font-size, 16px));
4086
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4087
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4040
4088
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4041
4089
  overflow-x: hidden;
4042
4090
  white-space: nowrap;
@@ -4158,6 +4206,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4158
4206
  word-break: break-word;
4159
4207
  white-space: normal;
4160
4208
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4209
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4210
+ line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4161
4211
  }
4162
4212
 
4163
4213
  .sd-file__choose-btn--text {
@@ -4343,6 +4393,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4343
4393
 
4344
4394
  .sd-body__navigation .sd-btn {
4345
4395
  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4396
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4397
+ line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4398
+ }
4399
+
4400
+ .sd-root--compact .sd-body__navigation .sd-btn:not(.sd-btn--action) {
4401
+ background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
4402
+ }
4403
+ .sd-root--compact .sd-body__navigation .sd-btn:not(.sd-btn--action):hover {
4404
+ background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
4346
4405
  }
4347
4406
 
4348
4407
  .sd-root-modern--mobile .sd-body__navigation .sv-action:not(.sv-action--hidden),
@@ -4417,9 +4476,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4417
4476
  box-sizing: border-box;
4418
4477
  }
4419
4478
  .sd-body.sd-body--static {
4420
- max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
4479
+ max-width: calc(90 * var(--sjs-base-unit, var(--base-unit, 8px)));
4421
4480
  margin-left: auto;
4422
4481
  margin-right: auto;
4482
+ padding-top: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4483
+ padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
4423
4484
  }
4424
4485
  .sd-body.sd-body--static .sd-body__timer,
4425
4486
  .sd-body.sd-body--static .sd-body__navigation,
@@ -4427,15 +4488,33 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4427
4488
  margin-left: 0;
4428
4489
  margin-right: 0;
4429
4490
  }
4491
+ .sd-body.sd-body--static .sd-body__navigation {
4492
+ padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4493
+ }
4494
+ .sd-body.sd-body--static .sd-body__navigation.sd-action-bar {
4495
+ padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4496
+ padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4497
+ }
4430
4498
  .sd-body.sd-body--responsive {
4431
4499
  max-width: initial;
4500
+ padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4501
+ box-sizing: border-box;
4502
+ }
4503
+ .sd-body.sd-body--responsive .sd-page {
4504
+ padding: 0;
4505
+ }
4506
+ .sd-body.sd-body--responsive .sd-page.sd-page__empty-header {
4507
+ padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4432
4508
  }
4433
4509
  .sd-body.sd-body--responsive .sd-body__timer,
4434
4510
  .sd-body.sd-body--responsive .sd-body__navigation {
4435
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-page-vertical-padding);
4511
+ padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4512
+ }
4513
+ .sd-body.sd-body--responsive .sd-body__navigation {
4514
+ padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4436
4515
  }
4437
4516
  .sd-body.sd-body--responsive.sd-body--with-timer {
4438
- max-width: calc(100% + var(--sd-timer-size) * ( -1 - 64 / 144 ) + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4517
+ max-width: calc(100% + var(--sd-timer-size) * (-1 - 64 / 144) + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4439
4518
  margin-left: auto;
4440
4519
  margin-right: auto;
4441
4520
  }
@@ -4445,6 +4524,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4445
4524
  margin-left: 0;
4446
4525
  margin-right: 0;
4447
4526
  }
4527
+ .sd-root-modern--mobile .sd-body.sd-body--responsive, .sd-root-modern--mobile .sd-body.sd-body--static {
4528
+ padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4529
+ }
4530
+ .sd-root-modern--mobile .sd-body.sd-body--responsive .sd-body__navigation, .sd-root-modern--mobile .sd-body.sd-body--static .sd-body__navigation {
4531
+ padding-left: 0;
4532
+ padding-right: 0;
4533
+ padding-bottom: 0;
4534
+ }
4448
4535
 
4449
4536
  .sd-body__navigation.sd-action-bar {
4450
4537
  box-sizing: border-box;
@@ -4471,6 +4558,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4471
4558
  }
4472
4559
 
4473
4560
  .sd-root_background-image {
4561
+ background-position-x: center;
4474
4562
  position: absolute;
4475
4563
  top: 0;
4476
4564
  bottom: 0;
@@ -4565,8 +4653,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4565
4653
  font-weight: 600;
4566
4654
  font-family: var(--font-family, var(--font-family));
4567
4655
  font-style: normal;
4568
- font-size: calc(1 * var(--sjs-font-size, 16px));
4569
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
4656
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4657
+ line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4570
4658
  outline: none;
4571
4659
  }
4572
4660
 
@@ -5069,10 +5157,14 @@ sv-components-container,
5069
5157
  padding-bottom: 0;
5070
5158
  text-align: left;
5071
5159
  }
5072
- .sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(:first-of-type) {
5160
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
5073
5161
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5074
5162
  }
5075
- .sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(.sd-table__cell--actions):not(.sd-table__cell--row-text)::before {
5163
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell:first-of-type,
5164
+ .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell {
5165
+ margin-top: 0;
5166
+ }
5167
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell::before {
5076
5168
  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5077
5169
  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5078
5170
  content: attr(data-responsive-title);
@@ -5080,6 +5172,12 @@ sv-components-container,
5080
5172
  display: block;
5081
5173
  text-align: left;
5082
5174
  }
5175
+ .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell::before,
5176
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--actions::before,
5177
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text::before,
5178
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
5179
+ content: none;
5180
+ }
5083
5181
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions {
5084
5182
  width: auto;
5085
5183
  }
@@ -5115,6 +5213,19 @@ sv-components-container,
5115
5213
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:last-child:after {
5116
5214
  content: none;
5117
5215
  }
5216
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--error-top {
5217
+ margin-top: 0;
5218
+ }
5219
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type ~ .sd-table__cell:nth-of-type(2) {
5220
+ margin-top: 0;
5221
+ }
5222
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top .sd-question__erbox {
5223
+ margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5224
+ margin-bottom: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5225
+ }
5226
+ .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type .sd-question__erbox {
5227
+ margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5228
+ }
5118
5229
  .sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
5119
5230
  margin-left: 0;
5120
5231
  margin-right: 0;
@@ -5160,10 +5271,6 @@ body {
5160
5271
  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5161
5272
  }
5162
5273
 
5163
- .sd-container-modern {
5164
- margin-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
5165
- }
5166
-
5167
5274
  .sd-root-modern--mobile {
5168
5275
  --sd-timer-size: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
5169
5276
  }