survey-react 1.9.109 → 1.9.111

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 +935 -677
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +301 -240
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +67 -53
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +673 -183
  12. package/survey.react.js +2616 -589
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.109
2
+ * surveyjs - Survey JavaScript library v1.9.111
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
  */
@@ -96,7 +96,7 @@ sv-popup {
96
96
 
97
97
  .sv-popup__container {
98
98
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
99
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
99
+ border-radius: var(--sjs-corner-radius, 4px);
100
100
  position: absolute;
101
101
  padding: 0;
102
102
  }
@@ -104,12 +104,12 @@ sv-popup {
104
104
  .sv-popup__shadow {
105
105
  width: 100%;
106
106
  height: 100%;
107
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
107
+ border-radius: var(--sjs-corner-radius, 4px);
108
108
  }
109
109
 
110
110
  .sv-popup__body-content {
111
111
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
112
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
112
+ border-radius: var(--sjs-corner-radius, 4px);
113
113
  width: 100%;
114
114
  height: 100%;
115
115
  box-sizing: border-box;
@@ -124,14 +124,40 @@ sv-popup {
124
124
  align-items: center;
125
125
  justify-content: center;
126
126
  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
127
- padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
127
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
128
128
  box-sizing: border-box;
129
129
  }
130
130
  .sv-popup.sv-popup--modal .sv-popup__body-content {
131
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
131
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
132
132
  height: auto;
133
133
  }
134
134
 
135
+ .sv-popup--confirm-delete .sv-popup__container {
136
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
137
+ }
138
+ .sv-popup--confirm-delete .sv-popup__body-content {
139
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
140
+ }
141
+ .sv-popup--confirm-delete .sv-popup__body-header {
142
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
143
+ margin-bottom: 0;
144
+ /* UI/Default */
145
+ font-family: var(--font-family);
146
+ font-size: var(--sjs-font-size, 16px);
147
+ font-style: normal;
148
+ font-weight: 400;
149
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
150
+ }
151
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
152
+ display: none;
153
+ }
154
+ .sv-popup--confirm-delete .sv-popup__body-footer {
155
+ padding-bottom: 0;
156
+ }
157
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
158
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
159
+ }
160
+
135
161
  .sv-popup.sv-popup--modal > .sv-popup__container {
136
162
  position: static;
137
163
  }
@@ -146,23 +172,23 @@ sv-popup {
146
172
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
147
173
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
148
174
  width: 100%;
149
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
175
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
150
176
  border: unset;
151
177
  }
152
178
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
153
179
  max-height: var(--sv-popup-overlay-height, 100vh);
154
180
  max-width: 100vw;
155
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
181
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
156
182
  background: var(--sjs-general-backcolor, var(--background, #fff));
157
183
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
158
- padding: calc(3 * 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)));
184
+ padding: calc(3 * (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))));
159
185
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
160
186
  }
161
187
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
162
188
  height: calc(100% - 10 * var(--base-unit, 8px));
163
189
  }
164
190
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
165
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
191
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
166
192
  }
167
193
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
168
194
  width: 100%;
@@ -211,22 +237,22 @@ sv-popup {
211
237
  }
212
238
 
213
239
  .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
214
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
240
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
215
241
  }
216
242
 
217
243
  .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
218
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
244
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
219
245
  }
220
246
 
221
247
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
222
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
248
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
223
249
  }
224
250
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
225
251
  transform: translate(-12px, -4px) rotate(-90deg);
226
252
  }
227
253
 
228
254
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
229
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
255
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
230
256
  }
231
257
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
232
258
  transform: translate(-4px, -4px) rotate(90deg);
@@ -241,42 +267,42 @@ sv-popup {
241
267
  display: block;
242
268
  width: 0;
243
269
  height: 0;
244
- border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
245
- border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
246
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
270
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
271
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
272
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
247
273
  align-self: center;
248
274
  }
249
275
 
250
276
  .sv-popup__body-header {
251
277
  font-family: Open Sans;
252
- font-size: calc(1.5 * var(--sjs-font-size, 16px));
253
- line-height: calc(2 * var(--sjs-font-size, 16px));
278
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
279
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
254
280
  font-style: normal;
255
281
  font-weight: 700;
256
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
282
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
257
283
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
258
284
  }
259
285
 
260
286
  .sv-popup__body-footer {
261
287
  display: flex;
262
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
288
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
263
289
  }
264
290
 
265
291
  .sv-popup__body-footer .sv-action-bar {
266
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
292
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
267
293
  }
268
294
 
269
295
  .sv-popup__button {
270
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
296
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
271
297
  }
272
298
 
273
299
  .sv-popup--modal .sv-list__filter,
274
300
  .sv-popup--overlay .sv-list__filter {
275
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
301
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
276
302
  }
277
303
  .sv-popup--modal .sv-list__filter-icon,
278
304
  .sv-popup--overlay .sv-list__filter-icon {
279
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
305
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
280
306
  }
281
307
 
282
308
  .sv-dropdown-popup.sv-popup--overlay {
@@ -295,8 +321,8 @@ sv-popup {
295
321
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
296
322
  border: none;
297
323
  box-shadow: none;
298
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
299
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
324
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
325
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
300
326
  margin: 0;
301
327
  }
302
328
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -310,40 +336,40 @@ sv-popup {
310
336
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
311
337
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
312
338
  margin-top: 0;
313
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
314
- padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
339
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
315
341
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
316
342
  }
317
343
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
318
344
  height: calc(100% - 6 * var(--base-unit, 8px));
319
345
  }
320
346
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
321
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
322
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
347
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
348
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
323
349
  }
324
350
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
325
351
  padding: 0;
326
352
  }
327
353
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
328
354
  flex-grow: 1;
329
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
355
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
330
356
  }
331
357
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
332
358
  display: flex;
333
359
  align-items: center;
334
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
360
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
335
361
  }
336
362
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
337
363
  position: static;
338
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
339
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
364
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
365
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
366
  }
341
367
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
342
368
  display: flex;
343
369
  flex-direction: column;
344
370
  justify-content: center;
345
371
  flex-grow: 1;
346
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
372
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
347
373
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
348
374
  }
349
375
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -352,27 +378,27 @@ sv-popup {
352
378
  opacity: 0.25;
353
379
  }
354
380
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
355
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
356
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
357
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
381
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
382
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
383
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
358
384
  appearance: none;
359
385
  border: none;
360
386
  border-radius: 100%;
361
387
  background-color: transparent;
362
388
  }
363
389
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
364
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
365
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
390
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
391
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
366
392
  }
367
393
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
368
394
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
369
395
  }
370
396
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
371
397
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
372
- font-size: calc(1 * var(--sjs-font-size, 16px));
373
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
398
+ font-size: var(--sjs-font-size, 16px);
399
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
374
400
  font-family: var(--font-family);
375
- 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)));
401
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
376
402
  }
377
403
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
378
404
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -403,12 +429,12 @@ sv-popup {
403
429
  left: 50%;
404
430
  top: 50%;
405
431
  max-height: var(--sv-popup-overlay-max-height);
406
- min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
432
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
407
433
  height: auto;
408
434
  width: auto;
409
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
435
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
410
436
  max-width: var(--sv-popup-overlay-max-width);
411
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
437
+ border-radius: var(--sjs-corner-radius, 4px);
412
438
  overflow: hidden;
413
439
  margin: 0;
414
440
  }
@@ -435,7 +461,7 @@ sv-popup {
435
461
  display: inline-block;
436
462
  vertical-align: top;
437
463
  margin-top: 22px;
438
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
464
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
439
465
  width: 16px;
440
466
  height: 16px;
441
467
  cursor: pointer;
@@ -446,7 +472,7 @@ sv-popup {
446
472
  display: inline-block;
447
473
  vertical-align: top;
448
474
  margin-top: 22px;
449
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
475
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
450
476
  width: 16px;
451
477
  height: 16px;
452
478
  cursor: pointer;
@@ -474,7 +500,7 @@ sv-popup {
474
500
 
475
501
  .sv_progress-buttons__list li {
476
502
  width: 138px;
477
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
503
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
478
504
  font-family: var(--font-family, var(--font-family));
479
505
  position: relative;
480
506
  text-align: center;
@@ -528,12 +554,12 @@ sv-popup {
528
554
  }
529
555
 
530
556
  .sv_progress-toc {
531
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
557
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
532
558
  max-width: 336px;
533
559
  height: 100%;
534
560
  background: #FFFFFF;
535
561
  box-sizing: border-box;
536
- min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
562
+ min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px))));
537
563
  }
538
564
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
539
565
  background: rgba(25, 179, 148, 0.1);
@@ -544,11 +570,11 @@ sv-popup {
544
570
  white-space: break-spaces;
545
571
  }
546
572
  .sv_progress-toc .sv-list__item-body {
547
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
548
- padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
549
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
550
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
551
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
573
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
574
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
575
+ border-radius: var(--sjs-corner-radius, 4px);
576
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
577
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
552
578
  }
553
579
 
554
580
  .sv_progress-toc--left {
@@ -561,18 +587,18 @@ sv-popup {
561
587
 
562
588
  .sv_progress-toc--mobile {
563
589
  position: fixed;
564
- top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
565
- right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
590
+ top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
591
+ right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
566
592
  width: auto;
567
593
  min-width: auto;
568
594
  height: auto;
569
595
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
570
596
  z-index: 15;
571
- border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
597
+ border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
572
598
  }
573
599
  .sv_progress-toc--mobile > div {
574
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
575
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
600
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
601
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
576
602
  }
577
603
  .sv_progress-toc--mobile:hover {
578
604
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -582,7 +608,6 @@ sv-popup {
582
608
  color: var(--text-color, #404040);
583
609
  font-size: var(--font-size, var(--sjs-font-size, 16px));
584
610
  font-family: var(--font-family, var(--font-family));
585
- margin-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
586
611
  }
587
612
 
588
613
  .sv-container-modern__title {
@@ -631,6 +656,7 @@ sv-popup {
631
656
 
632
657
  .sv-body {
633
658
  width: 100%;
659
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
634
660
  }
635
661
 
636
662
  .sv-body__timer,
@@ -656,7 +682,7 @@ sv-popup {
656
682
  }
657
683
 
658
684
  .sv-body__timer {
659
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
685
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
660
686
  box-sizing: border-box;
661
687
  }
662
688
 
@@ -1847,6 +1873,10 @@ sv-popup {
1847
1873
  justify-content: space-between;
1848
1874
  }
1849
1875
 
1876
+ .sv-dropdown input[readonly] {
1877
+ pointer-events: none;
1878
+ }
1879
+
1850
1880
  .sv-dropdown:focus,
1851
1881
  .sv-dropdown:focus-within {
1852
1882
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E ");
@@ -2478,11 +2508,11 @@ select.sv-dropdown {
2478
2508
  }
2479
2509
 
2480
2510
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
2481
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2511
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2482
2512
  }
2483
2513
 
2484
2514
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
2485
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2515
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2486
2516
  }
2487
2517
 
2488
2518
  .sv-action-bar-item {
@@ -2490,10 +2520,10 @@ select.sv-dropdown {
2490
2520
  -moz-appearance: none;
2491
2521
  appearance: none;
2492
2522
  display: flex;
2493
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2523
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2494
2524
  box-sizing: border-box;
2495
2525
  border: none;
2496
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2526
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2497
2527
  background-color: transparent;
2498
2528
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2499
2529
  cursor: pointer;
@@ -2507,17 +2537,17 @@ button.sv-action-bar-item {
2507
2537
  }
2508
2538
 
2509
2539
  .sv-action-bar--default-size-mode .sv-action-bar-item {
2510
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2511
- font-size: calc(1 * var(--sjs-font-size, 16px));
2512
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2513
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2540
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2541
+ font-size: var(--sjs-font-size, 16px);
2542
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2543
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2514
2544
  }
2515
2545
 
2516
2546
  .sv-action-bar--small-size-mode .sv-action-bar-item {
2517
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2518
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
2519
- line-height: calc(1 * var(--sjs-font-size, 16px));
2520
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2547
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2548
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
2549
+ line-height: var(--sjs-font-size, 16px);
2550
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2521
2551
  }
2522
2552
 
2523
2553
  .sv-action:first-of-type .sv-action-bar-item {
@@ -2529,11 +2559,11 @@ button.sv-action-bar-item {
2529
2559
  }
2530
2560
 
2531
2561
  .sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
2532
- margin-inline-start: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2562
+ margin-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
2533
2563
  }
2534
2564
 
2535
2565
  .sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
2536
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2566
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2537
2567
  }
2538
2568
 
2539
2569
  .sv-action-bar-item__icon svg {
@@ -2581,15 +2611,15 @@ button.sv-action-bar-item {
2581
2611
  -moz-appearance: none;
2582
2612
  appearance: none;
2583
2613
  display: flex;
2584
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2585
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2614
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2615
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2586
2616
  box-sizing: border-box;
2587
2617
  border: none;
2588
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2618
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2589
2619
  background-color: transparent;
2590
2620
  cursor: pointer;
2591
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2592
- font-size: calc(1 * var(--sjs-font-size, 16px));
2621
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2622
+ font-size: var(--sjs-font-size, 16px);
2593
2623
  font-family: var(--font-family, var(--font-family));
2594
2624
  }
2595
2625
 
@@ -2648,35 +2678,35 @@ button.sv-action-bar-item {
2648
2678
  }
2649
2679
 
2650
2680
  .sv-dragged-element-shortcut {
2651
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2652
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2653
- border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2681
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2682
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2683
+ border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2654
2684
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2655
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2685
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2656
2686
  cursor: grabbing;
2657
2687
  position: absolute;
2658
2688
  z-index: 10000;
2659
2689
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
2660
2690
  font-family: var(--font-family, var(--font-family));
2661
- font-size: calc(1 * var(--sjs-font-size, 16px));
2662
- padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2663
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2691
+ font-size: var(--sjs-font-size, 16px);
2692
+ padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2693
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2664
2694
  }
2665
2695
 
2666
2696
  .sv-matrixdynamic__drag-icon {
2667
- padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2697
+ padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2668
2698
  }
2669
2699
 
2670
2700
  .sv-matrixdynamic__drag-icon:after {
2671
2701
  content: " ";
2672
2702
  display: block;
2673
- height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2674
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2703
+ height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2704
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2675
2705
  border: 1px solid #e7e7e7;
2676
2706
  box-sizing: border-box;
2677
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2707
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2678
2708
  cursor: move;
2679
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2709
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2680
2710
  }
2681
2711
 
2682
2712
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -2708,7 +2738,7 @@ sv-popup {
2708
2738
 
2709
2739
  .sv-popup__container {
2710
2740
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2711
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2741
+ border-radius: var(--sjs-corner-radius, 4px);
2712
2742
  position: absolute;
2713
2743
  padding: 0;
2714
2744
  }
@@ -2716,12 +2746,12 @@ sv-popup {
2716
2746
  .sv-popup__shadow {
2717
2747
  width: 100%;
2718
2748
  height: 100%;
2719
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2749
+ border-radius: var(--sjs-corner-radius, 4px);
2720
2750
  }
2721
2751
 
2722
2752
  .sv-popup__body-content {
2723
2753
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2724
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2754
+ border-radius: var(--sjs-corner-radius, 4px);
2725
2755
  width: 100%;
2726
2756
  height: 100%;
2727
2757
  box-sizing: border-box;
@@ -2736,14 +2766,40 @@ sv-popup {
2736
2766
  align-items: center;
2737
2767
  justify-content: center;
2738
2768
  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
2739
- padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2769
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2740
2770
  box-sizing: border-box;
2741
2771
  }
2742
2772
  .sv-popup.sv-popup--modal .sv-popup__body-content {
2743
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2773
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2744
2774
  height: auto;
2745
2775
  }
2746
2776
 
2777
+ .sv-popup--confirm-delete .sv-popup__container {
2778
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2779
+ }
2780
+ .sv-popup--confirm-delete .sv-popup__body-content {
2781
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2782
+ }
2783
+ .sv-popup--confirm-delete .sv-popup__body-header {
2784
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2785
+ margin-bottom: 0;
2786
+ /* UI/Default */
2787
+ font-family: var(--font-family);
2788
+ font-size: var(--sjs-font-size, 16px);
2789
+ font-style: normal;
2790
+ font-weight: 400;
2791
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
2792
+ }
2793
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
2794
+ display: none;
2795
+ }
2796
+ .sv-popup--confirm-delete .sv-popup__body-footer {
2797
+ padding-bottom: 0;
2798
+ }
2799
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
2800
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2801
+ }
2802
+
2747
2803
  .sv-popup.sv-popup--modal > .sv-popup__container {
2748
2804
  position: static;
2749
2805
  }
@@ -2758,23 +2814,23 @@ sv-popup {
2758
2814
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2759
2815
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2760
2816
  width: 100%;
2761
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2817
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2762
2818
  border: unset;
2763
2819
  }
2764
2820
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
2765
2821
  max-height: var(--sv-popup-overlay-height, 100vh);
2766
2822
  max-width: 100vw;
2767
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
2823
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
2768
2824
  background: var(--sjs-general-backcolor, var(--background, #fff));
2769
2825
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2770
- padding: calc(3 * 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)));
2826
+ padding: calc(3 * (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))));
2771
2827
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2772
2828
  }
2773
2829
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
2774
2830
  height: calc(100% - 10 * var(--base-unit, 8px));
2775
2831
  }
2776
2832
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
2777
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2833
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2778
2834
  }
2779
2835
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2780
2836
  width: 100%;
@@ -2823,22 +2879,22 @@ sv-popup {
2823
2879
  }
2824
2880
 
2825
2881
  .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
2826
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
2882
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
2827
2883
  }
2828
2884
 
2829
2885
  .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
2830
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2886
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2831
2887
  }
2832
2888
 
2833
2889
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
2834
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2890
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
2835
2891
  }
2836
2892
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
2837
2893
  transform: translate(-12px, -4px) rotate(-90deg);
2838
2894
  }
2839
2895
 
2840
2896
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
2841
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2897
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2842
2898
  }
2843
2899
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
2844
2900
  transform: translate(-4px, -4px) rotate(90deg);
@@ -2853,42 +2909,42 @@ sv-popup {
2853
2909
  display: block;
2854
2910
  width: 0;
2855
2911
  height: 0;
2856
- border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2857
- border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2858
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
2912
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2913
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2914
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
2859
2915
  align-self: center;
2860
2916
  }
2861
2917
 
2862
2918
  .sv-popup__body-header {
2863
2919
  font-family: Open Sans;
2864
- font-size: calc(1.5 * var(--sjs-font-size, 16px));
2865
- line-height: calc(2 * var(--sjs-font-size, 16px));
2920
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
2921
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
2866
2922
  font-style: normal;
2867
2923
  font-weight: 700;
2868
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2924
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2869
2925
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2870
2926
  }
2871
2927
 
2872
2928
  .sv-popup__body-footer {
2873
2929
  display: flex;
2874
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2930
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2875
2931
  }
2876
2932
 
2877
2933
  .sv-popup__body-footer .sv-action-bar {
2878
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2934
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2879
2935
  }
2880
2936
 
2881
2937
  .sv-popup__button {
2882
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2938
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2883
2939
  }
2884
2940
 
2885
2941
  .sv-popup--modal .sv-list__filter,
2886
2942
  .sv-popup--overlay .sv-list__filter {
2887
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2943
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2888
2944
  }
2889
2945
  .sv-popup--modal .sv-list__filter-icon,
2890
2946
  .sv-popup--overlay .sv-list__filter-icon {
2891
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2947
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2892
2948
  }
2893
2949
 
2894
2950
  .sv-dropdown-popup.sv-popup--overlay {
@@ -2907,8 +2963,8 @@ sv-popup {
2907
2963
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2908
2964
  border: none;
2909
2965
  box-shadow: none;
2910
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2911
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2966
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2967
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2912
2968
  margin: 0;
2913
2969
  }
2914
2970
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -2922,40 +2978,40 @@ sv-popup {
2922
2978
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
2923
2979
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2924
2980
  margin-top: 0;
2925
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2926
- padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2981
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2982
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2927
2983
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
2928
2984
  }
2929
2985
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
2930
2986
  height: calc(100% - 6 * var(--base-unit, 8px));
2931
2987
  }
2932
2988
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
2933
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2934
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2989
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2990
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2935
2991
  }
2936
2992
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
2937
2993
  padding: 0;
2938
2994
  }
2939
2995
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
2940
2996
  flex-grow: 1;
2941
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2997
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2942
2998
  }
2943
2999
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
2944
3000
  display: flex;
2945
3001
  align-items: center;
2946
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3002
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2947
3003
  }
2948
3004
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
2949
3005
  position: static;
2950
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2951
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3006
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3007
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2952
3008
  }
2953
3009
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
2954
3010
  display: flex;
2955
3011
  flex-direction: column;
2956
3012
  justify-content: center;
2957
3013
  flex-grow: 1;
2958
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3014
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2959
3015
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2960
3016
  }
2961
3017
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -2964,27 +3020,27 @@ sv-popup {
2964
3020
  opacity: 0.25;
2965
3021
  }
2966
3022
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
2967
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2968
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2969
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3023
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3024
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3025
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2970
3026
  appearance: none;
2971
3027
  border: none;
2972
3028
  border-radius: 100%;
2973
3029
  background-color: transparent;
2974
3030
  }
2975
3031
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
2976
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2977
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3032
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3033
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2978
3034
  }
2979
3035
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
2980
3036
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2981
3037
  }
2982
3038
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2983
3039
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2984
- font-size: calc(1 * var(--sjs-font-size, 16px));
2985
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3040
+ font-size: var(--sjs-font-size, 16px);
3041
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2986
3042
  font-family: var(--font-family);
2987
- 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)));
3043
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
2988
3044
  }
2989
3045
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
2990
3046
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -3015,12 +3071,12 @@ sv-popup {
3015
3071
  left: 50%;
3016
3072
  top: 50%;
3017
3073
  max-height: var(--sv-popup-overlay-max-height);
3018
- min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3074
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3019
3075
  height: auto;
3020
3076
  width: auto;
3021
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
3077
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
3022
3078
  max-width: var(--sv-popup-overlay-max-width);
3023
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3079
+ border-radius: var(--sjs-corner-radius, 4px);
3024
3080
  overflow: hidden;
3025
3081
  margin: 0;
3026
3082
  }
@@ -3034,7 +3090,7 @@ sv-popup {
3034
3090
  display: flex;
3035
3091
  align-items: center;
3036
3092
  flex-direction: row;
3037
- font-size: calc(1 * var(--sjs-font-size, 16px));
3093
+ font-size: var(--sjs-font-size, 16px);
3038
3094
  overflow: auto;
3039
3095
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3040
3096
  }
@@ -3052,10 +3108,10 @@ sv-popup {
3052
3108
  align-items: center;
3053
3109
  appearance: none;
3054
3110
  width: 100%;
3055
- padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3056
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3111
+ padding: 11px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3112
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3057
3113
  outline: none;
3058
- font-size: calc(1 * var(--sjs-font-size, 16px));
3114
+ font-size: var(--sjs-font-size, 16px);
3059
3115
  font-weight: 400;
3060
3116
  background: var(--sjs-general-backcolor, var(--background, #fff));
3061
3117
  cursor: pointer;
@@ -3073,7 +3129,7 @@ sv-popup {
3073
3129
 
3074
3130
  .sv-button-group__item-icon {
3075
3131
  display: block;
3076
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3132
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3077
3133
  }
3078
3134
  .sv-button-group__item-icon use {
3079
3135
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3104,7 +3160,7 @@ sv-popup {
3104
3160
  }
3105
3161
 
3106
3162
  .sv-button-group__item-icon + .sv-button-group__item-caption {
3107
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3163
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3108
3164
  }
3109
3165
 
3110
3166
  .sv-button-group__item--disabled {
@@ -3175,7 +3231,7 @@ sv-popup {
3175
3231
  background-color: cadetblue;
3176
3232
  padding: 1px;
3177
3233
  font-family: var(--font-family, var(--font-family));
3178
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3234
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3179
3235
  font-style: normal;
3180
3236
  font-weight: 400;
3181
3237
  line-height: 1.42857143;
@@ -3194,7 +3250,7 @@ sv-popup {
3194
3250
  background-clip: padding-box;
3195
3251
  border: 1px solid #ccc;
3196
3252
  border: 1px solid rgba(0, 0, 0, 0.2);
3197
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3253
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3198
3254
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3199
3255
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3200
3256
  line-break: auto;
@@ -3204,10 +3260,11 @@ sv-popup {
3204
3260
  .sv_window_title {
3205
3261
  padding: 8px 14px;
3206
3262
  margin: 0;
3207
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3263
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3208
3264
  background-color: #f7f7f7;
3209
3265
  border-bottom: 1px solid #ebebeb;
3210
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
3266
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
3267
+ display: flex;
3211
3268
  }
3212
3269
 
3213
3270
  .sv_window_content {
@@ -3221,7 +3278,7 @@ sv-popup {
3221
3278
  .sv_window_title a:link,
3222
3279
  .sv_window_title a:visited {
3223
3280
  text-decoration: none;
3224
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3281
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3225
3282
  font-style: normal;
3226
3283
  color: black;
3227
3284
  }
@@ -3246,8 +3303,8 @@ sv-popup {
3246
3303
 
3247
3304
  .sv-brand-info__text {
3248
3305
  font-weight: 600;
3249
- font-size: calc(1 * var(--sjs-font-size, 16px));
3250
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3306
+ font-size: var(--sjs-font-size, 16px);
3307
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3251
3308
  color: #161616;
3252
3309
  }
3253
3310
 
@@ -3260,8 +3317,8 @@ sv-popup {
3260
3317
 
3261
3318
  .sv-brand-info__terms {
3262
3319
  font-weight: 400;
3263
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
3264
- line-height: calc(1 * var(--sjs-font-size, 16px));
3320
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
3321
+ line-height: var(--sjs-font-size, 16px);
3265
3322
  }
3266
3323
  .sv-brand-info__terms a {
3267
3324
  color: #909090;
@@ -3296,21 +3353,21 @@ sv-popup {
3296
3353
 
3297
3354
  .sv-ranking-item:focus .sv-ranking-item__icon--focus {
3298
3355
  visibility: visible;
3299
- top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3300
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3356
+ top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3357
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3301
3358
  }
3302
3359
 
3303
3360
  .sv-ranking-item:focus .sv-ranking-item__index {
3304
3361
  background: var(--sjs-general-backcolor, var(--background, #fff));
3305
- outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3362
+ outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3306
3363
  }
3307
3364
 
3308
3365
  .sv-ranking-item__content.sv-ranking-item__content {
3309
3366
  display: flex;
3310
3367
  align-items: center;
3311
3368
  line-height: 1em;
3312
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
3313
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3369
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
3370
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3314
3371
  }
3315
3372
 
3316
3373
  .sv-ranking-item__icon-container {
@@ -3319,8 +3376,8 @@ sv-popup {
3319
3376
  top: 0;
3320
3377
  bottom: 0;
3321
3378
  flex-shrink: 0;
3322
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3323
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3379
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3380
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3324
3381
  }
3325
3382
 
3326
3383
  .sv-ranking-item--disabled.sv-ranking-item--disabled {
@@ -3334,9 +3391,9 @@ sv-popup {
3334
3391
  visibility: hidden;
3335
3392
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3336
3393
  position: absolute;
3337
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3338
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3339
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3394
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3395
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3396
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3340
3397
  }
3341
3398
 
3342
3399
  .sv-ranking-item__index.sv-ranking-item__index {
@@ -3346,21 +3403,21 @@ sv-popup {
3346
3403
  justify-content: center;
3347
3404
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3348
3405
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3349
- font-size: calc(1 * var(--sjs-font-size, 16px));
3406
+ font-size: var(--sjs-font-size, 16px);
3350
3407
  border-radius: 100%;
3351
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
3352
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3353
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3354
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3408
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
3409
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3410
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3411
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3355
3412
  box-sizing: border-box;
3356
3413
  font-weight: 600;
3357
- margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3414
+ margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3358
3415
  }
3359
3416
  .sv-ranking-item__index.sv-ranking-item__index:empty {
3360
3417
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
3361
3418
  background-position: center;
3362
3419
  background-repeat: no-repeat;
3363
- background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3420
+ background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3364
3421
  }
3365
3422
 
3366
3423
  .sv-ranking-item__text {
@@ -3369,9 +3426,9 @@ sv-popup {
3369
3426
  text-overflow: ellipsis;
3370
3427
  white-space: nowrap;
3371
3428
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3372
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3373
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3374
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3429
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3430
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3431
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3375
3432
  }
3376
3433
 
3377
3434
  .sd-ranking--disabled .sv-ranking-item__text {
@@ -3387,18 +3444,18 @@ sv-popup {
3387
3444
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
3388
3445
  display: none;
3389
3446
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3390
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3391
- width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3392
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3447
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3448
+ width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3449
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3393
3450
  z-index: 1;
3394
3451
  position: absolute;
3395
3452
  left: 0;
3396
- top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3453
+ top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3397
3454
  }
3398
3455
 
3399
3456
  [dir=rtl] .sv-ranking-item__ghost {
3400
3457
  left: initilal;
3401
- right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3458
+ right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3402
3459
  }
3403
3460
 
3404
3461
  .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -3411,7 +3468,7 @@ sv-popup {
3411
3468
 
3412
3469
  .sv-ranking-item--drag .sv-ranking-item__content {
3413
3470
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3414
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3471
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3415
3472
  }
3416
3473
 
3417
3474
  .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -3459,7 +3516,7 @@ sv-popup {
3459
3516
  }
3460
3517
 
3461
3518
  .sv-ranking-shortcut .sv-ranking-item__text {
3462
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3519
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3463
3520
  }
3464
3521
 
3465
3522
  .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -3467,16 +3524,16 @@ sv-popup {
3467
3524
  }
3468
3525
 
3469
3526
  .sv-ranking-shortcut .sv-ranking-item__icon {
3470
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3471
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3472
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3527
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3528
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3529
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3473
3530
  }
3474
3531
 
3475
3532
  .sv-ranking-shortcut .sv-ranking-item__content {
3476
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3533
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3477
3534
  }
3478
3535
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
3479
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3536
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3480
3537
  }
3481
3538
 
3482
3539
  .sv-ranking--select-to-rank {
@@ -3487,12 +3544,12 @@ sv-popup {
3487
3544
  flex-direction: column-reverse;
3488
3545
  }
3489
3546
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
3490
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3547
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3491
3548
  height: 1px;
3492
3549
  }
3493
3550
  .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
3494
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3495
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3551
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3552
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3496
3553
  display: flex;
3497
3554
  justify-content: center;
3498
3555
  align-items: center;
@@ -3502,24 +3559,24 @@ sv-popup {
3502
3559
  width: 1px;
3503
3560
  }
3504
3561
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
3505
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3562
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
3506
3563
  }
3507
3564
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
3508
3565
  left: initial;
3509
3566
  }
3510
3567
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
3511
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3568
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3512
3569
  }
3513
3570
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
3514
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3571
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3515
3572
  }
3516
3573
 
3517
3574
  .sv-ranking__container-placeholder {
3518
3575
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3519
3576
  font-family: var(--font-family, var(--font-family));
3520
3577
  font-style: normal;
3521
- font-size: calc(1 * var(--sjs-font-size, 16px));
3522
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3578
+ font-size: var(--sjs-font-size, 16px);
3579
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3523
3580
  white-space: break-spaces;
3524
3581
  display: flex;
3525
3582
  justify-content: center;
@@ -3557,15 +3614,15 @@ sv-popup {
3557
3614
  width: 100%;
3558
3615
  font-family: var(--font-family, var(--font-family));
3559
3616
  box-sizing: border-box;
3560
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3617
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3561
3618
  overflow: hidden;
3562
3619
  text-overflow: ellipsis;
3563
3620
  white-space: nowrap;
3564
3621
  }
3565
3622
 
3566
3623
  .sv-list__empty-text {
3567
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3568
- font-size: calc(1 * var(--sjs-font-size, 16px));
3624
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3625
+ font-size: var(--sjs-font-size, 16px);
3569
3626
  font-weight: 400;
3570
3627
  text-align: center;
3571
3628
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3586,13 +3643,13 @@ sv-popup {
3586
3643
  width: 100%;
3587
3644
  align-items: center;
3588
3645
  box-sizing: border-box;
3589
- padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3590
- padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3591
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3646
+ padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
3647
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3648
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3592
3649
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3593
3650
  font-weight: normal;
3594
- font-size: calc(1 * var(--sjs-font-size, 16px));
3595
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3651
+ font-size: var(--sjs-font-size, 16px);
3652
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3596
3653
  cursor: pointer;
3597
3654
  overflow: hidden;
3598
3655
  text-align: left;
@@ -3604,14 +3661,14 @@ sv-popup {
3604
3661
  outline: none;
3605
3662
  }
3606
3663
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
3607
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3608
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3609
- padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3610
- padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3611
- padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3664
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3665
+ border-radius: var(--sjs-corner-radius, 4px);
3666
+ padding-block: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3667
+ padding-inline-end: calc(7.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3668
+ padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3612
3669
  }
3613
3670
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
3614
- margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3671
+ margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3615
3672
  }
3616
3673
 
3617
3674
  .sv-list__item:hover,
@@ -3627,17 +3684,17 @@ sv-popup {
3627
3684
  padding: 0;
3628
3685
  }
3629
3686
  .sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
3630
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3631
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3632
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3687
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3688
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3689
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3633
3690
  display: flex;
3634
3691
  }
3635
3692
 
3636
3693
  .sv-list__item-icon {
3637
3694
  float: left;
3638
3695
  flex-shrink: 0;
3639
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3640
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3696
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3697
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3641
3698
  }
3642
3699
  .sv-list__item-icon svg {
3643
3700
  display: block;
@@ -3653,7 +3710,7 @@ sv-popup {
3653
3710
  }
3654
3711
 
3655
3712
  .sv-list__item-separator {
3656
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3713
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3657
3714
  height: 1px;
3658
3715
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3659
3716
  }
@@ -3707,18 +3764,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3707
3764
  .sv-list__filter {
3708
3765
  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3709
3766
  background: var(--sjs-general-backcolor, var(--background, #fff));
3710
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3767
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3711
3768
  }
3712
3769
 
3713
3770
  .sv-list__filter-icon {
3714
3771
  display: block;
3715
3772
  position: absolute;
3716
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3717
- inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3773
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3774
+ inset-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3718
3775
  }
3719
3776
  .sv-list__filter-icon .sv-svg-icon {
3720
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3721
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3777
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3778
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3722
3779
  }
3723
3780
  .sv-list__filter-icon .sv-svg-icon use {
3724
3781
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3733,11 +3790,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3733
3790
  box-sizing: border-box;
3734
3791
  width: 100%;
3735
3792
  outline: none;
3736
- font-size: calc(1 * var(--sjs-font-size, 16px));
3793
+ font-size: var(--sjs-font-size, 16px);
3737
3794
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3738
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3739
- padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
3740
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3795
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3796
+ padding-inline-start: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3797
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3741
3798
  border: none;
3742
3799
  }
3743
3800
 
@@ -3761,24 +3818,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3761
3818
  .sv-save-data_root {
3762
3819
  position: fixed;
3763
3820
  left: 50%;
3764
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3821
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3765
3822
  background: var(--sjs-general-backcolor, var(--background, #fff));
3766
3823
  opacity: 0;
3767
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3824
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3768
3825
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3769
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3826
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
3770
3827
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3771
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3828
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3772
3829
  text-align: center;
3773
3830
  z-index: 1600;
3774
3831
  font-family: var(--font-family, var(--font-family));
3775
- font-size: calc(1 * var(--sjs-font-size, 16px));
3776
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3832
+ font-size: var(--sjs-font-size, 16px);
3833
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3777
3834
  display: flex;
3778
3835
  flex-direction: row;
3779
3836
  justify-content: center;
3780
3837
  align-items: center;
3781
- transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
3838
+ transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3782
3839
  transition-timing-function: ease-in;
3783
3840
  transition-property: transform, opacity;
3784
3841
  transition-delay: 0.25s;
@@ -3812,20 +3869,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3812
3869
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3813
3870
  color: var(--sjs-general-backcolor, var(--background, #fff));
3814
3871
  font-weight: 600;
3815
- padding: calc(2 * 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))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3816
- gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3872
+ padding: calc(2 * (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)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3873
+ gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3817
3874
  }
3818
3875
 
3819
3876
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3820
3877
  font-weight: 600;
3821
- font-size: calc(1 * var(--sjs-font-size, 16px));
3822
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3823
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3878
+ font-size: var(--sjs-font-size, 16px);
3879
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3880
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3824
3881
  color: #ffffff;
3825
3882
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3826
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
3827
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3828
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3883
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
3884
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3885
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3829
3886
  display: flex;
3830
3887
  align-items: center;
3831
3888
  }
@@ -3971,6 +4028,10 @@ sv-components-container,
3971
4028
  flex-grow: 1;
3972
4029
  }
3973
4030
 
4031
+ .sv-components-row > .sv-components-column--expandable {
4032
+ width: 1px;
4033
+ }
4034
+
3974
4035
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question,
3975
4036
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
3976
4037
  display: block;