survey-react 1.9.94 → 1.9.96

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 +184 -148
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +83 -60
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +43 -24
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +129 -77
  12. package/survey.react.js +336 -154
  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.94
2
+ * surveyjs - Survey JavaScript library v1.9.96
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
  */
@@ -273,15 +273,15 @@ button.sv-action-bar-item {
273
273
 
274
274
  .sv-action-bar--default-size-mode .sv-action-bar-item {
275
275
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
276
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
277
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
276
+ font-size: calc(1 * var(--sjs-font-size, 16px));
277
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
278
278
  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
279
279
  }
280
280
 
281
281
  .sv-action-bar--small-size-mode .sv-action-bar-item {
282
282
  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
283
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
284
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
283
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
284
+ line-height: calc(1 * var(--sjs-font-size, 16px));
285
285
  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
286
286
  }
287
287
 
@@ -353,8 +353,8 @@ button.sv-action-bar-item {
353
353
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
354
354
  background-color: transparent;
355
355
  cursor: pointer;
356
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
357
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
356
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
357
+ font-size: calc(1 * var(--sjs-font-size, 16px));
358
358
  font-family: var(--font-family, var(--font-family));
359
359
  }
360
360
 
@@ -420,9 +420,9 @@ button.sv-action-bar-item {
420
420
  z-index: 10000;
421
421
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
422
422
  font-family: var(--font-family, var(--font-family));
423
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
423
+ font-size: calc(1 * var(--sjs-font-size, 16px));
424
424
  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
425
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
425
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
426
426
  }
427
427
 
428
428
  .sv-matrixdynamic__drag-icon {
@@ -622,8 +622,8 @@ sv-popup {
622
622
 
623
623
  .sv-popup__body-header {
624
624
  font-family: Open Sans;
625
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
626
- line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
625
+ font-size: calc(1.5 * var(--sjs-font-size, 16px));
626
+ line-height: calc(2 * var(--sjs-font-size, 16px));
627
627
  font-style: normal;
628
628
  font-weight: 700;
629
629
  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -742,8 +742,8 @@ sv-popup {
742
742
  }
743
743
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
744
744
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
745
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
746
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
745
+ font-size: calc(1 * var(--sjs-font-size, 16px));
746
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
747
747
  font-family: var(--font-family);
748
748
  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(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
749
749
  }
@@ -759,11 +759,13 @@ sv-popup {
759
759
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
760
760
  font-weight: 600;
761
761
  }
762
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
763
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
764
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
762
+
763
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
764
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
765
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
765
766
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
766
767
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
768
+ font-weight: 400;
767
769
  }
768
770
 
769
771
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -793,7 +795,7 @@ sv-popup {
793
795
  display: flex;
794
796
  align-items: center;
795
797
  flex-direction: row;
796
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
798
+ font-size: calc(1 * var(--sjs-font-size, 16px));
797
799
  overflow: auto;
798
800
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
799
801
  }
@@ -812,9 +814,9 @@ sv-popup {
812
814
  appearance: none;
813
815
  width: 100%;
814
816
  padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
815
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
817
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
816
818
  outline: none;
817
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
819
+ font-size: calc(1 * var(--sjs-font-size, 16px));
818
820
  font-weight: 400;
819
821
  background: var(--sjs-general-backcolor, var(--background, #fff));
820
822
  cursor: pointer;
@@ -931,7 +933,7 @@ sv-popup {
931
933
  background-color: cadetblue;
932
934
  padding: 1px;
933
935
  font-family: var(--font-family, var(--font-family));
934
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
936
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
935
937
  font-style: normal;
936
938
  font-weight: 400;
937
939
  line-height: 1.42857143;
@@ -960,7 +962,7 @@ sv-popup {
960
962
  .sv_window_title {
961
963
  padding: 8px 14px;
962
964
  margin: 0;
963
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
965
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
964
966
  background-color: #f7f7f7;
965
967
  border-bottom: 1px solid #ebebeb;
966
968
  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -977,7 +979,7 @@ sv-popup {
977
979
  .sv_window_title a:link,
978
980
  .sv_window_title a:visited {
979
981
  text-decoration: none;
980
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
982
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
981
983
  font-style: normal;
982
984
  color: black;
983
985
  }
@@ -998,8 +1000,8 @@ sv-popup {
998
1000
 
999
1001
  .sv-brand-info__text {
1000
1002
  font-weight: 600;
1001
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1002
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1003
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1004
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1003
1005
  color: #161616;
1004
1006
  }
1005
1007
 
@@ -1012,8 +1014,8 @@ sv-popup {
1012
1014
 
1013
1015
  .sv-brand-info__terms {
1014
1016
  font-weight: 400;
1015
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1016
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1017
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
1018
+ line-height: calc(1 * var(--sjs-font-size, 16px));
1017
1019
  }
1018
1020
  .sv-brand-info__terms a {
1019
1021
  color: #909090;
@@ -1091,12 +1093,12 @@ sv-popup {
1091
1093
  justify-content: center;
1092
1094
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1093
1095
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1094
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1096
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1095
1097
  border-radius: 100%;
1096
1098
  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
1097
1099
  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1098
1100
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1099
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1101
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1100
1102
  box-sizing: border-box;
1101
1103
  font-weight: 600;
1102
1104
  margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -1113,8 +1115,8 @@ sv-popup {
1113
1115
  text-overflow: ellipsis;
1114
1116
  white-space: nowrap;
1115
1117
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1116
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1117
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1118
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1119
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1118
1120
  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1119
1121
  }
1120
1122
 
@@ -1238,8 +1240,8 @@ sv-popup {
1238
1240
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
1239
1241
  font-family: var(--font-family, var(--font-family));
1240
1242
  font-style: normal;
1241
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1242
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1243
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1244
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1243
1245
  white-space: break-spaces;
1244
1246
  display: flex;
1245
1247
  justify-content: center;
@@ -1283,8 +1285,8 @@ sv-popup {
1283
1285
  }
1284
1286
 
1285
1287
  .sv-list__empty-text {
1286
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1287
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1288
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1289
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1288
1290
  font-weight: 400;
1289
1291
  text-align: center;
1290
1292
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1310,8 +1312,8 @@ sv-popup {
1310
1312
  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1311
1313
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1312
1314
  font-weight: normal;
1313
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1314
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1315
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1316
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1315
1317
  cursor: pointer;
1316
1318
  overflow: hidden;
1317
1319
  text-overflow: ellipsis;
@@ -1450,11 +1452,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1450
1452
  box-sizing: border-box;
1451
1453
  width: 100%;
1452
1454
  outline: none;
1453
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1455
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1454
1456
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1455
1457
  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1456
1458
  padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1457
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1459
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1458
1460
  border: none;
1459
1461
  }
1460
1462
 
@@ -1482,15 +1484,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1482
1484
  background: var(--sjs-general-backcolor, var(--background, #fff));
1483
1485
  opacity: 0;
1484
1486
  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1485
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
1487
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1486
1488
  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
1487
1489
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1488
1490
  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
1489
1491
  text-align: center;
1490
1492
  z-index: 1600;
1491
1493
  font-family: var(--font-family, var(--font-family));
1492
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1493
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1494
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1495
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1494
1496
  display: flex;
1495
1497
  flex-direction: row;
1496
1498
  justify-content: center;
@@ -1535,8 +1537,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1535
1537
 
1536
1538
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
1537
1539
  font-weight: 600;
1538
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1539
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1540
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1541
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1540
1542
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1541
1543
  color: #ffffff;
1542
1544
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
@@ -1580,23 +1582,26 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1580
1582
  opacity: 0.35;
1581
1583
  }
1582
1584
 
1585
+ .sd-title.sd-element__title {
1586
+ font-family: var(--sjs-font-questiontitle-family, var(--font-family));
1587
+ font-weight: var(--sjs-font-questiontitle-weight, 600);
1588
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1589
+ }
1590
+
1583
1591
  .sd-element__title {
1584
1592
  font-size: 0;
1585
1593
  line-height: 0;
1586
1594
  position: static;
1587
- font-family: var(--sjs-font-questiontitle-family, var(--font-family));
1588
- font-weight: var(--sjs-font-questiontitle-weight, 600);
1589
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1590
1595
  margin: 0;
1591
1596
  }
1592
1597
  .sd-element__title .sd-element__num {
1593
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1594
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1598
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
1599
+ line-height: calc(1 * var(--sjs-font-size, 16px));
1595
1600
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1596
1601
  }
1597
1602
  .sd-element__title span {
1598
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
1599
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1603
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1604
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1600
1605
  }
1601
1606
  .sd-element__title .sv-title-actions__title {
1602
1607
  font-size: 0;
@@ -1620,8 +1625,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1620
1625
  padding-inline-start: 0;
1621
1626
  padding-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1622
1627
  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1623
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1624
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1628
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
1629
+ line-height: calc(1 * var(--sjs-font-size, 16px));
1625
1630
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1626
1631
  margin-inline-start: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1627
1632
  text-align: end;
@@ -1810,8 +1815,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1810
1815
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1811
1816
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
1812
1817
  font-weight: 600;
1813
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1814
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1818
+ line-height: calc(1 * var(--sjs-font-size, 16px));
1819
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
1815
1820
  white-space: normal;
1816
1821
  text-align: left;
1817
1822
  }
@@ -1901,7 +1906,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1901
1906
  }
1902
1907
 
1903
1908
  .sd-question__comment-area {
1904
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1909
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1905
1910
  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1906
1911
  display: flex;
1907
1912
  flex-direction: column;
@@ -1919,7 +1924,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1919
1924
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1920
1925
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1921
1926
  opacity: 0.75;
1922
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
1927
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1923
1928
  z-index: 1000;
1924
1929
  }
1925
1930
 
@@ -1951,8 +1956,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1951
1956
  gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1952
1957
  justify-content: center;
1953
1958
  min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
1954
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1955
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1959
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1960
+ font-size: calc(1 * var(--sjs-font-size, 16px));
1956
1961
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1957
1962
  }
1958
1963
  .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -1982,13 +1987,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1982
1987
  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1983
1988
  box-sizing: border-box;
1984
1989
  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1985
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1990
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
1986
1991
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
1987
1992
  font-weight: var(--sjs-font-editorfont-weight, 400);
1988
1993
  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1989
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
1990
- background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
1991
- box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
1994
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1995
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
1996
+ box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1992
1997
  border: none;
1993
1998
  border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1994
1999
  text-align: start;
@@ -1999,7 +2004,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1999
2004
  }
2000
2005
 
2001
2006
  .sd-input--disabled {
2002
- background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
2007
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2003
2008
  -webkit-user-select: none;
2004
2009
  -moz-user-select: none;
2005
2010
  -ms-user-select: none;
@@ -2044,8 +2049,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2044
2049
  align-items: flex-end;
2045
2050
  padding: 0px;
2046
2051
  font-family: var(--font-family);
2047
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2048
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2052
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2053
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2049
2054
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2050
2055
  position: absolute;
2051
2056
  inset-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2121,10 +2126,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2121
2126
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2122
2127
  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2123
2128
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2124
- font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2129
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2125
2130
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2126
2131
  position: static;
2127
- line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2132
+ line-height: calc(2 * var(--sjs-font-size, 16px));
2128
2133
  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2129
2134
  }
2130
2135
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
@@ -2137,10 +2142,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2137
2142
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
2138
2143
  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2139
2144
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2140
- font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2145
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2141
2146
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2142
2147
  position: static;
2143
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2148
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2144
2149
  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2145
2150
  }
2146
2151
 
@@ -2234,8 +2239,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2234
2239
  appearance: none;
2235
2240
  background: transparent;
2236
2241
  border: none;
2237
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2238
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2242
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2243
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2239
2244
  font-family: var(--font-family, var(--font-family));
2240
2245
  font-weight: 600;
2241
2246
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -2306,8 +2311,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2306
2311
 
2307
2312
  .sd-table__cell {
2308
2313
  font-weight: normal;
2309
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2310
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2314
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2315
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2311
2316
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2312
2317
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2313
2318
  text-align: center;
@@ -2531,20 +2536,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2531
2536
  .sd-page .sd-page__title {
2532
2537
  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2533
2538
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2534
- font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2539
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2535
2540
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2536
2541
  position: static;
2537
- line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2542
+ line-height: calc(2 * var(--sjs-font-size, 16px));
2538
2543
  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2539
2544
  }
2540
2545
 
2541
2546
  .sd-page .sd-page__description {
2542
2547
  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2543
2548
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2544
- font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2549
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2545
2550
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2546
2551
  position: static;
2547
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2552
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2548
2553
  margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2549
2554
  }
2550
2555
 
@@ -2585,7 +2590,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2585
2590
  }
2586
2591
  .sd-page__row.sd-row--multiple:not(.sd-row--compact) {
2587
2592
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
2588
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2593
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2589
2594
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2590
2595
  }
2591
2596
  .sd-page__row.sd-row--multiple.sd-row--compact {
@@ -2638,16 +2643,16 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2638
2643
  .sd-header__text .sd-title {
2639
2644
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2640
2645
  font-family: var(--sjs-font-surveytitle-family, var(--font-family));
2641
- font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2646
+ font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2642
2647
  font-weight: var(--sjs-font-surveytitle-weight, 700);
2643
2648
  }
2644
2649
  .sd-header__text h3 {
2645
- line-height: calc(2.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2650
+ line-height: calc(2.5 * var(--sjs-font-size, 16px));
2646
2651
  }
2647
2652
  .sd-header__text h5 {
2648
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2653
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2649
2654
  font-weight: 400;
2650
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2655
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2651
2656
  }
2652
2657
 
2653
2658
  .sd-title .sv-title-actions {
@@ -2697,8 +2702,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2697
2702
  font-family: var(--sjs-font-questiondescription-family, var(--font-family));
2698
2703
  font-weight: var(--sjs-font-questiondescription-weight, 400);
2699
2704
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2700
- font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
2701
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2705
+ font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2706
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2702
2707
  white-space: normal;
2703
2708
  word-break: break-word;
2704
2709
  }
@@ -2719,8 +2724,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2719
2724
  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2720
2725
  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2721
2726
  box-sizing: border-box;
2722
- background: var(--sd-item-default-background, var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9))));
2723
- box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
2727
+ background: var(--sd-item-default-background, var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))));
2728
+ box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2724
2729
  border: none;
2725
2730
  flex-shrink: 0;
2726
2731
  }
@@ -2736,7 +2741,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2736
2741
  }
2737
2742
 
2738
2743
  .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
2739
- background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
2744
+ background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
2740
2745
  outline: none;
2741
2746
  }
2742
2747
 
@@ -2745,12 +2750,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2745
2750
  }
2746
2751
 
2747
2752
  .sd-item__control-label {
2748
- font-family: var(--font-family, var(--font-family));
2753
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
2749
2754
  font-style: normal;
2750
2755
  font-weight: normal;
2751
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2752
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2753
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
2756
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2757
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2758
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2754
2759
  white-space: normal;
2755
2760
  word-break: break-word;
2756
2761
  width: 100%;
@@ -2942,8 +2947,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2942
2947
 
2943
2948
  .sd-rating__item {
2944
2949
  position: relative;
2945
- background: var(--sjs-general-backcolor, var(--background, #fff));
2946
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2950
+ background: transparent;
2951
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2947
2952
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2948
2953
  white-space: nowrap;
2949
2954
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2954,10 +2959,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2954
2959
  box-sizing: border-box;
2955
2960
  min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2956
2961
  text-align: center;
2957
- border: 2px solid var(--sjs-general-backcolor, var(--background, #fff));
2962
+ border: 2px solid transparent;
2958
2963
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2959
2964
  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
2960
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2965
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2961
2966
  }
2962
2967
 
2963
2968
  .sd-rating__item--fixed-size {
@@ -3014,7 +3019,6 @@ legend + sv-ng-rating-item + .sd-rating__item {
3014
3019
 
3015
3020
  .sd-rating__item-smiley {
3016
3021
  position: relative;
3017
- background: var(--sjs-general-backcolor, var(--background, #fff));
3018
3022
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3019
3023
  white-space: nowrap;
3020
3024
  padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3105,7 +3109,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3105
3109
 
3106
3110
  .sd-rating__item-star {
3107
3111
  position: relative;
3108
- background: var(--sjs-general-backcolor, var(--background, #fff));
3109
3112
  width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3110
3113
  height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3111
3114
  }
@@ -3195,8 +3198,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3195
3198
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3196
3199
  font-weight: var(--sjs-font-editorfont-weight, 400);
3197
3200
  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3198
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
3199
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3201
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3202
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3200
3203
  display: inline-block;
3201
3204
  }
3202
3205
  .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
@@ -3220,6 +3223,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3220
3223
  min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3221
3224
  }
3222
3225
 
3226
+ .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
3227
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3228
+ }
3229
+
3223
3230
  .sv-ranking-item--error .sv-ranking-item__index {
3224
3231
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
3225
3232
  box-shadow: 0px 1px 2px transparent;
@@ -3239,7 +3246,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3239
3246
  }
3240
3247
 
3241
3248
  .sv-ranking-item__content.sd-ranking-item__content {
3242
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3249
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3243
3250
  }
3244
3251
 
3245
3252
  .sd-dropdown {
@@ -3273,7 +3280,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3273
3280
  .sd-dropdown option {
3274
3281
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3275
3282
  font-family: var(--font-family, var(--font-family));
3276
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3283
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3277
3284
  }
3278
3285
 
3279
3286
  .sd-dropdown__value {
@@ -3282,9 +3289,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3282
3289
  overflow: hidden;
3283
3290
  text-overflow: ellipsis;
3284
3291
  white-space: nowrap;
3285
- font-family: var(--font-family, var(--font-family));
3286
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3287
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
3292
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3293
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3294
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3295
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3296
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3288
3297
  position: relative;
3289
3298
  }
3290
3299
 
@@ -3322,8 +3331,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3322
3331
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3323
3332
  font-weight: var(--sjs-font-editorfont-weight, 400);
3324
3333
  color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3325
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
3326
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3334
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3335
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3327
3336
  background-color: transparent;
3328
3337
  overflow: hidden;
3329
3338
  text-overflow: ellipsis;
@@ -3339,7 +3348,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3339
3348
 
3340
3349
  .sd-dropdown__filter-string-input::placeholder {
3341
3350
  font-family: var(--font-family, var(--font-family));
3342
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3351
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3343
3352
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3344
3353
  width: 100%;
3345
3354
  max-width: 100%;
@@ -3347,7 +3356,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3347
3356
  text-overflow: ellipsis;
3348
3357
  white-space: nowrap;
3349
3358
  display: inline-block;
3350
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3359
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3351
3360
  appearance: none;
3352
3361
  }
3353
3362
 
@@ -3497,12 +3506,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3497
3506
 
3498
3507
  .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
3499
3508
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3500
- line-height: calc(2.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3509
+ line-height: calc(2.5 * var(--sjs-font-size, 16px));
3501
3510
  }
3502
3511
 
3503
3512
  .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
3504
3513
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3505
- line-height: calc(2.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3514
+ line-height: calc(2.5 * var(--sjs-font-size, 16px));
3506
3515
  }
3507
3516
 
3508
3517
  .sd-imagepicker {
@@ -3591,8 +3600,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3591
3600
  }
3592
3601
 
3593
3602
  .sd-imagepicker__text {
3594
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3595
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3603
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3604
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3596
3605
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3597
3606
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3598
3607
  }
@@ -3658,7 +3667,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3658
3667
 
3659
3668
  .sd-expression {
3660
3669
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3661
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3670
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3662
3671
  }
3663
3672
 
3664
3673
  .sd-progress {
@@ -3679,8 +3688,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3679
3688
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3680
3689
  right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3681
3690
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3682
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3683
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3691
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
3692
+ line-height: calc(1 * var(--sjs-font-size, 16px));
3684
3693
  font-weight: 600;
3685
3694
  }
3686
3695
  @media only screen and (min-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
@@ -3694,13 +3703,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3694
3703
  }
3695
3704
  }
3696
3705
 
3706
+ .sd-boolean-root {
3707
+ box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3708
+ border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3709
+ }
3710
+
3697
3711
  .sd-boolean {
3698
3712
  display: flex;
3699
3713
  width: max-content;
3700
3714
  position: relative;
3701
3715
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3702
- background: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
3703
- box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px rgba(0, 0, 0, 0.15));
3716
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
3717
+ box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3704
3718
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3705
3719
  }
3706
3720
 
@@ -3709,9 +3723,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3709
3723
  display: block;
3710
3724
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3711
3725
  font-weight: var(--sjs-font-editorfont-weight, 400);
3712
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))))));
3726
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3713
3727
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3714
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3728
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3715
3729
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3716
3730
  }
3717
3731
 
@@ -3741,8 +3755,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3741
3755
  }
3742
3756
 
3743
3757
  .sd-boolean__thumb {
3744
- background: var(--sjs-general-backcolor, var(--background, #fff));
3745
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
3758
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3759
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3746
3760
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3747
3761
  transition-duration: 0.2s;
3748
3762
  transition-property: margin-left, transform;
@@ -3774,7 +3788,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3774
3788
  }
3775
3789
 
3776
3790
  .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
3777
- background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
3791
+ background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
3778
3792
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3779
3793
  }
3780
3794
 
@@ -3869,7 +3883,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3869
3883
  }
3870
3884
 
3871
3885
  .sd-paneldynamic__progress-text {
3872
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3886
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3873
3887
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3874
3888
  margin: 0;
3875
3889
  margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3957,7 +3971,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3957
3971
  background-color: transparent;
3958
3972
  cursor: pointer;
3959
3973
  font-family: var(--font-family, var(--font-family));
3960
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3974
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3961
3975
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3962
3976
  overflow-x: hidden;
3963
3977
  white-space: nowrap;
@@ -4004,7 +4018,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4004
4018
  }
4005
4019
 
4006
4020
  .sd-tab-item__title {
4007
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4021
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4008
4022
  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4009
4023
  display: flex;
4010
4024
  align-items: center;
@@ -4025,8 +4039,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4025
4039
  .sd-file {
4026
4040
  min-height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
4027
4041
  position: relative;
4028
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4029
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4042
+ font-size: calc(1 * var(--sjs-font-size, 16px));
4043
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4030
4044
  }
4031
4045
  .sd-file .sv-action-bar {
4032
4046
  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
@@ -4161,8 +4175,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4161
4175
  .sd-file__sign {
4162
4176
  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4163
4177
  text-align: center;
4164
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4165
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4178
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
4179
+ line-height: calc(1 * var(--sjs-font-size, 16px));
4166
4180
  }
4167
4181
  .sd-file__sign a {
4168
4182
  display: block;
@@ -4174,7 +4188,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4174
4188
  overflow: hidden;
4175
4189
  max-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4176
4190
  text-overflow: ellipsis;
4177
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4191
+ line-height: calc(1 * var(--sjs-font-size, 16px));
4178
4192
  display: -webkit-box;
4179
4193
  -webkit-line-clamp: 3;
4180
4194
  -webkit-box-orient: vertical;
@@ -4284,14 +4298,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4284
4298
  -moz-appearance: none;
4285
4299
  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4286
4300
  background: var(--sjs-general-backcolor, var(--background, #fff));
4287
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
4301
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4288
4302
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
4289
4303
  cursor: pointer;
4290
4304
  font-family: var(--font-family, var(--font-family));
4291
4305
  font-style: normal;
4292
4306
  font-weight: 600;
4293
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4294
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4307
+ font-size: calc(1 * var(--sjs-font-size, 16px));
4308
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4295
4309
  text-align: center;
4296
4310
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4297
4311
  border: none;
@@ -4465,6 +4479,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4465
4479
  padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4466
4480
  }
4467
4481
 
4482
+ .sd-multipletext .sd-input .sd-input {
4483
+ background: transparent;
4484
+ }
4485
+
4468
4486
  .sd-action {
4469
4487
  appearance: none;
4470
4488
  border: none;
@@ -4475,8 +4493,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4475
4493
  font-weight: 600;
4476
4494
  font-family: var(--font-family, var(--font-family));
4477
4495
  font-style: normal;
4478
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4479
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4496
+ font-size: calc(1 * var(--sjs-font-size, 16px));
4497
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4480
4498
  outline: none;
4481
4499
  }
4482
4500
 
@@ -4585,7 +4603,7 @@ svg.sd-action--icon {
4585
4603
  height: auto;
4586
4604
  }
4587
4605
  .sd-completedpage h3 {
4588
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4606
+ font-size: calc(1.5 * var(--sjs-font-size, 16px));
4589
4607
  }
4590
4608
 
4591
4609
  .sd-completedpage:before,
@@ -4652,15 +4670,15 @@ svg.sd-action--icon {
4652
4670
 
4653
4671
  .sd-progress-buttons__page-title {
4654
4672
  width: 100%;
4655
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4673
+ font-size: calc(1 * var(--sjs-font-size, 16px));
4656
4674
  font-weight: 600;
4657
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4675
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4658
4676
  }
4659
4677
 
4660
4678
  .sd-progress-buttons__page-description {
4661
4679
  width: 100%;
4662
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4663
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4680
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
4681
+ line-height: calc(1 * var(--sjs-font-size, 16px));
4664
4682
  font-weight: 600;
4665
4683
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4666
4684
  }
@@ -4697,6 +4715,25 @@ svg.sd-action--icon {
4697
4715
  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4698
4716
  }
4699
4717
 
4718
+ .sv_progress-toc--mobile {
4719
+ position: fixed;
4720
+ top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4721
+ right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4722
+ width: auto;
4723
+ min-width: auto;
4724
+ height: auto;
4725
+ background-color: transparent;
4726
+ z-index: 15;
4727
+ border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4728
+ }
4729
+ .sv_progress-toc--mobile > div {
4730
+ width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4731
+ height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4732
+ }
4733
+ .sv_progress-toc--mobile:hover {
4734
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4735
+ }
4736
+
4700
4737
  .sd-list {
4701
4738
  padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4702
4739
  padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4708,8 +4745,8 @@ svg.sd-action--icon {
4708
4745
  .sd-list__item.sd-list__item .sd-list__item-body {
4709
4746
  padding-block: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4710
4747
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
4711
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4712
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4748
+ font-size: calc(1 * var(--sjs-font-size, 16px));
4749
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
4713
4750
  }
4714
4751
 
4715
4752
  .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {
@@ -4731,8 +4768,7 @@ svg.sd-action--icon {
4731
4768
  display: flex;
4732
4769
  border-radius: 100%;
4733
4770
  padding: calc(var(--sd-timer-size) / 144 * 8);
4734
- filter: drop-shadow(0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1));
4735
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1019607843);
4771
+ box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
4736
4772
  box-sizing: border-box;
4737
4773
  }
4738
4774
 
@@ -4788,7 +4824,7 @@ svg.sd-action--icon {
4788
4824
  .sd-timer__text--minor {
4789
4825
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4790
4826
  font-weight: 600;
4791
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4827
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
4792
4828
  }
4793
4829
 
4794
4830
  sv-components-container,
@@ -4884,8 +4920,8 @@ sv-components-container,
4884
4920
  flex-direction: column;
4885
4921
  }
4886
4922
  .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
4887
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4888
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
4923
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
4924
+ line-height: calc(1 * var(--sjs-font-size, 16px));
4889
4925
  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4890
4926
  padding-right: 0;
4891
4927
  border-right: none;
@@ -5088,7 +5124,7 @@ body {
5088
5124
  }
5089
5125
 
5090
5126
  .sv-popup.sv-popup--modal .sv-popup__body-content {
5091
- box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
5127
+ box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
5092
5128
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
5093
5129
  }
5094
5130
  .sv-popup.sv-popup--modal .sv-popup__body-footer {