survey-react 1.9.110 → 1.9.112

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 +784 -675
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +310 -241
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +66 -53
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +360 -207
  12. package/survey.react.js +770 -394
  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.110
2
+ * surveyjs - Survey JavaScript library v1.9.112
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,43 @@ 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__shadow {
136
+ height: initial;
137
+ }
138
+ .sv-popup--confirm-delete .sv-popup__container {
139
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
140
+ }
141
+ .sv-popup--confirm-delete .sv-popup__body-content {
142
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
143
+ }
144
+ .sv-popup--confirm-delete .sv-popup__body-header {
145
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
146
+ margin-bottom: 0;
147
+ /* UI/Default */
148
+ font-family: var(--font-family);
149
+ font-size: var(--sjs-font-size, 16px);
150
+ font-style: normal;
151
+ font-weight: 400;
152
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
153
+ }
154
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
155
+ display: none;
156
+ }
157
+ .sv-popup--confirm-delete .sv-popup__body-footer {
158
+ padding-bottom: 0;
159
+ }
160
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
161
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
162
+ }
163
+
135
164
  .sv-popup.sv-popup--modal > .sv-popup__container {
136
165
  position: static;
137
166
  }
@@ -146,23 +175,23 @@ sv-popup {
146
175
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
147
176
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
148
177
  width: 100%;
149
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
178
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
150
179
  border: unset;
151
180
  }
152
181
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
153
182
  max-height: var(--sv-popup-overlay-height, 100vh);
154
183
  max-width: 100vw;
155
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
184
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
156
185
  background: var(--sjs-general-backcolor, var(--background, #fff));
157
186
  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)));
187
+ 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
188
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
160
189
  }
161
190
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
162
191
  height: calc(100% - 10 * var(--base-unit, 8px));
163
192
  }
164
193
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
165
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
194
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
166
195
  }
167
196
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
168
197
  width: 100%;
@@ -211,22 +240,22 @@ sv-popup {
211
240
  }
212
241
 
213
242
  .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);
243
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
215
244
  }
216
245
 
217
246
  .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))));
247
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
219
248
  }
220
249
 
221
250
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
222
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
251
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
223
252
  }
224
253
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
225
254
  transform: translate(-12px, -4px) rotate(-90deg);
226
255
  }
227
256
 
228
257
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
229
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
258
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
230
259
  }
231
260
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
232
261
  transform: translate(-4px, -4px) rotate(90deg);
@@ -241,42 +270,42 @@ sv-popup {
241
270
  display: block;
242
271
  width: 0;
243
272
  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));
273
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
274
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
275
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
247
276
  align-self: center;
248
277
  }
249
278
 
250
279
  .sv-popup__body-header {
251
280
  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));
281
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
282
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
254
283
  font-style: normal;
255
284
  font-weight: 700;
256
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
285
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
257
286
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
258
287
  }
259
288
 
260
289
  .sv-popup__body-footer {
261
290
  display: flex;
262
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
291
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
263
292
  }
264
293
 
265
294
  .sv-popup__body-footer .sv-action-bar {
266
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
295
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
267
296
  }
268
297
 
269
298
  .sv-popup__button {
270
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
299
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
271
300
  }
272
301
 
273
302
  .sv-popup--modal .sv-list__filter,
274
303
  .sv-popup--overlay .sv-list__filter {
275
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
304
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
276
305
  }
277
306
  .sv-popup--modal .sv-list__filter-icon,
278
307
  .sv-popup--overlay .sv-list__filter-icon {
279
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
308
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
280
309
  }
281
310
 
282
311
  .sv-dropdown-popup.sv-popup--overlay {
@@ -295,8 +324,8 @@ sv-popup {
295
324
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
296
325
  border: none;
297
326
  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)));
327
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
328
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
300
329
  margin: 0;
301
330
  }
302
331
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -310,40 +339,40 @@ sv-popup {
310
339
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
311
340
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
312
341
  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)));
342
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
343
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
315
344
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
316
345
  }
317
346
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
318
347
  height: calc(100% - 6 * var(--base-unit, 8px));
319
348
  }
320
349
  .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)));
350
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
351
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
323
352
  }
324
353
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
325
354
  padding: 0;
326
355
  }
327
356
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
328
357
  flex-grow: 1;
329
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
358
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
330
359
  }
331
360
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
332
361
  display: flex;
333
362
  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)));
363
+ 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
364
  }
336
365
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
337
366
  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)));
367
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
368
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
369
  }
341
370
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
342
371
  display: flex;
343
372
  flex-direction: column;
344
373
  justify-content: center;
345
374
  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)));
375
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
347
376
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
348
377
  }
349
378
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -352,27 +381,27 @@ sv-popup {
352
381
  opacity: 0.25;
353
382
  }
354
383
  .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)));
384
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
385
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
386
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
358
387
  appearance: none;
359
388
  border: none;
360
389
  border-radius: 100%;
361
390
  background-color: transparent;
362
391
  }
363
392
  .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)));
393
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
394
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
366
395
  }
367
396
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
368
397
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
369
398
  }
370
399
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
371
400
  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));
401
+ font-size: var(--sjs-font-size, 16px);
402
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
374
403
  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)));
404
+ 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
405
  }
377
406
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
378
407
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -403,12 +432,12 @@ sv-popup {
403
432
  left: 50%;
404
433
  top: 50%;
405
434
  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)));
435
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
407
436
  height: auto;
408
437
  width: auto;
409
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
438
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
410
439
  max-width: var(--sv-popup-overlay-max-width);
411
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
440
+ border-radius: var(--sjs-corner-radius, 4px);
412
441
  overflow: hidden;
413
442
  margin: 0;
414
443
  }
@@ -435,7 +464,7 @@ sv-popup {
435
464
  display: inline-block;
436
465
  vertical-align: top;
437
466
  margin-top: 22px;
438
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
467
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
439
468
  width: 16px;
440
469
  height: 16px;
441
470
  cursor: pointer;
@@ -446,7 +475,7 @@ sv-popup {
446
475
  display: inline-block;
447
476
  vertical-align: top;
448
477
  margin-top: 22px;
449
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
478
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
450
479
  width: 16px;
451
480
  height: 16px;
452
481
  cursor: pointer;
@@ -474,7 +503,7 @@ sv-popup {
474
503
 
475
504
  .sv_progress-buttons__list li {
476
505
  width: 138px;
477
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
506
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
478
507
  font-family: var(--font-family, var(--font-family));
479
508
  position: relative;
480
509
  text-align: center;
@@ -528,12 +557,12 @@ sv-popup {
528
557
  }
529
558
 
530
559
  .sv_progress-toc {
531
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
560
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
532
561
  max-width: 336px;
533
562
  height: 100%;
534
563
  background: #FFFFFF;
535
564
  box-sizing: border-box;
536
- min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
565
+ min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px))));
537
566
  }
538
567
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
539
568
  background: rgba(25, 179, 148, 0.1);
@@ -544,11 +573,11 @@ sv-popup {
544
573
  white-space: break-spaces;
545
574
  }
546
575
  .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)));
576
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
577
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
578
+ border-radius: var(--sjs-corner-radius, 4px);
579
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
580
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
552
581
  }
553
582
 
554
583
  .sv_progress-toc--left {
@@ -561,18 +590,18 @@ sv-popup {
561
590
 
562
591
  .sv_progress-toc--mobile {
563
592
  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)));
593
+ top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
594
+ right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
566
595
  width: auto;
567
596
  min-width: auto;
568
597
  height: auto;
569
598
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
570
599
  z-index: 15;
571
- border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
600
+ border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
572
601
  }
573
602
  .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)));
603
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
604
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
576
605
  }
577
606
  .sv_progress-toc--mobile:hover {
578
607
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -630,7 +659,7 @@ sv-popup {
630
659
 
631
660
  .sv-body {
632
661
  width: 100%;
633
- padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
662
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
634
663
  }
635
664
 
636
665
  .sv-body__timer,
@@ -656,7 +685,7 @@ sv-popup {
656
685
  }
657
686
 
658
687
  .sv-body__timer {
659
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
688
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
660
689
  box-sizing: border-box;
661
690
  }
662
691
 
@@ -1847,6 +1876,10 @@ sv-popup {
1847
1876
  justify-content: space-between;
1848
1877
  }
1849
1878
 
1879
+ .sv-dropdown input[readonly] {
1880
+ pointer-events: none;
1881
+ }
1882
+
1850
1883
  .sv-dropdown:focus,
1851
1884
  .sv-dropdown:focus-within {
1852
1885
  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 +2511,11 @@ select.sv-dropdown {
2478
2511
  }
2479
2512
 
2480
2513
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
2481
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2514
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2482
2515
  }
2483
2516
 
2484
2517
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
2485
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2518
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2486
2519
  }
2487
2520
 
2488
2521
  .sv-action-bar-item {
@@ -2490,10 +2523,10 @@ select.sv-dropdown {
2490
2523
  -moz-appearance: none;
2491
2524
  appearance: none;
2492
2525
  display: flex;
2493
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2526
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2494
2527
  box-sizing: border-box;
2495
2528
  border: none;
2496
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2529
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2497
2530
  background-color: transparent;
2498
2531
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2499
2532
  cursor: pointer;
@@ -2507,17 +2540,17 @@ button.sv-action-bar-item {
2507
2540
  }
2508
2541
 
2509
2542
  .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)));
2543
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2544
+ font-size: var(--sjs-font-size, 16px);
2545
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2546
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2514
2547
  }
2515
2548
 
2516
2549
  .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)));
2550
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2551
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
2552
+ line-height: var(--sjs-font-size, 16px);
2553
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2521
2554
  }
2522
2555
 
2523
2556
  .sv-action:first-of-type .sv-action-bar-item {
@@ -2529,11 +2562,11 @@ button.sv-action-bar-item {
2529
2562
  }
2530
2563
 
2531
2564
  .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)));
2565
+ margin-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
2533
2566
  }
2534
2567
 
2535
2568
  .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)));
2569
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2537
2570
  }
2538
2571
 
2539
2572
  .sv-action-bar-item__icon svg {
@@ -2581,15 +2614,15 @@ button.sv-action-bar-item {
2581
2614
  -moz-appearance: none;
2582
2615
  appearance: none;
2583
2616
  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)));
2617
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2618
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2586
2619
  box-sizing: border-box;
2587
2620
  border: none;
2588
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2621
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2589
2622
  background-color: transparent;
2590
2623
  cursor: pointer;
2591
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2592
- font-size: calc(1 * var(--sjs-font-size, 16px));
2624
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2625
+ font-size: var(--sjs-font-size, 16px);
2593
2626
  font-family: var(--font-family, var(--font-family));
2594
2627
  }
2595
2628
 
@@ -2648,35 +2681,35 @@ button.sv-action-bar-item {
2648
2681
  }
2649
2682
 
2650
2683
  .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)));
2684
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2685
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2686
+ border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2654
2687
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2655
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2688
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2656
2689
  cursor: grabbing;
2657
2690
  position: absolute;
2658
2691
  z-index: 10000;
2659
2692
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
2660
2693
  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));
2694
+ font-size: var(--sjs-font-size, 16px);
2695
+ padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2696
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2664
2697
  }
2665
2698
 
2666
2699
  .sv-matrixdynamic__drag-icon {
2667
- padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2700
+ padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2668
2701
  }
2669
2702
 
2670
2703
  .sv-matrixdynamic__drag-icon:after {
2671
2704
  content: " ";
2672
2705
  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)));
2706
+ height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2707
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2675
2708
  border: 1px solid #e7e7e7;
2676
2709
  box-sizing: border-box;
2677
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2710
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2678
2711
  cursor: move;
2679
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2712
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2680
2713
  }
2681
2714
 
2682
2715
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -2708,7 +2741,7 @@ sv-popup {
2708
2741
 
2709
2742
  .sv-popup__container {
2710
2743
  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));
2744
+ border-radius: var(--sjs-corner-radius, 4px);
2712
2745
  position: absolute;
2713
2746
  padding: 0;
2714
2747
  }
@@ -2716,12 +2749,12 @@ sv-popup {
2716
2749
  .sv-popup__shadow {
2717
2750
  width: 100%;
2718
2751
  height: 100%;
2719
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2752
+ border-radius: var(--sjs-corner-radius, 4px);
2720
2753
  }
2721
2754
 
2722
2755
  .sv-popup__body-content {
2723
2756
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2724
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2757
+ border-radius: var(--sjs-corner-radius, 4px);
2725
2758
  width: 100%;
2726
2759
  height: 100%;
2727
2760
  box-sizing: border-box;
@@ -2736,14 +2769,43 @@ sv-popup {
2736
2769
  align-items: center;
2737
2770
  justify-content: center;
2738
2771
  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)));
2772
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2740
2773
  box-sizing: border-box;
2741
2774
  }
2742
2775
  .sv-popup.sv-popup--modal .sv-popup__body-content {
2743
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2776
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2744
2777
  height: auto;
2745
2778
  }
2746
2779
 
2780
+ .sv-popup--confirm-delete .sv-popup__shadow {
2781
+ height: initial;
2782
+ }
2783
+ .sv-popup--confirm-delete .sv-popup__container {
2784
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2785
+ }
2786
+ .sv-popup--confirm-delete .sv-popup__body-content {
2787
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2788
+ }
2789
+ .sv-popup--confirm-delete .sv-popup__body-header {
2790
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2791
+ margin-bottom: 0;
2792
+ /* UI/Default */
2793
+ font-family: var(--font-family);
2794
+ font-size: var(--sjs-font-size, 16px);
2795
+ font-style: normal;
2796
+ font-weight: 400;
2797
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
2798
+ }
2799
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
2800
+ display: none;
2801
+ }
2802
+ .sv-popup--confirm-delete .sv-popup__body-footer {
2803
+ padding-bottom: 0;
2804
+ }
2805
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
2806
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2807
+ }
2808
+
2747
2809
  .sv-popup.sv-popup--modal > .sv-popup__container {
2748
2810
  position: static;
2749
2811
  }
@@ -2758,23 +2820,23 @@ sv-popup {
2758
2820
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2759
2821
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2760
2822
  width: 100%;
2761
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2823
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2762
2824
  border: unset;
2763
2825
  }
2764
2826
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
2765
2827
  max-height: var(--sv-popup-overlay-height, 100vh);
2766
2828
  max-width: 100vw;
2767
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
2829
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
2768
2830
  background: var(--sjs-general-backcolor, var(--background, #fff));
2769
2831
  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)));
2832
+ 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
2833
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2772
2834
  }
2773
2835
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
2774
2836
  height: calc(100% - 10 * var(--base-unit, 8px));
2775
2837
  }
2776
2838
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
2777
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2839
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2778
2840
  }
2779
2841
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2780
2842
  width: 100%;
@@ -2823,22 +2885,22 @@ sv-popup {
2823
2885
  }
2824
2886
 
2825
2887
  .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);
2888
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
2827
2889
  }
2828
2890
 
2829
2891
  .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))));
2892
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2831
2893
  }
2832
2894
 
2833
2895
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
2834
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2896
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
2835
2897
  }
2836
2898
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
2837
2899
  transform: translate(-12px, -4px) rotate(-90deg);
2838
2900
  }
2839
2901
 
2840
2902
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
2841
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2903
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2842
2904
  }
2843
2905
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
2844
2906
  transform: translate(-4px, -4px) rotate(90deg);
@@ -2853,42 +2915,42 @@ sv-popup {
2853
2915
  display: block;
2854
2916
  width: 0;
2855
2917
  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));
2918
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2919
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2920
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
2859
2921
  align-self: center;
2860
2922
  }
2861
2923
 
2862
2924
  .sv-popup__body-header {
2863
2925
  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));
2926
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
2927
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
2866
2928
  font-style: normal;
2867
2929
  font-weight: 700;
2868
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2930
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2869
2931
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2870
2932
  }
2871
2933
 
2872
2934
  .sv-popup__body-footer {
2873
2935
  display: flex;
2874
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2936
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2875
2937
  }
2876
2938
 
2877
2939
  .sv-popup__body-footer .sv-action-bar {
2878
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2940
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2879
2941
  }
2880
2942
 
2881
2943
  .sv-popup__button {
2882
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2944
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2883
2945
  }
2884
2946
 
2885
2947
  .sv-popup--modal .sv-list__filter,
2886
2948
  .sv-popup--overlay .sv-list__filter {
2887
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2949
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2888
2950
  }
2889
2951
  .sv-popup--modal .sv-list__filter-icon,
2890
2952
  .sv-popup--overlay .sv-list__filter-icon {
2891
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2953
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2892
2954
  }
2893
2955
 
2894
2956
  .sv-dropdown-popup.sv-popup--overlay {
@@ -2907,8 +2969,8 @@ sv-popup {
2907
2969
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2908
2970
  border: none;
2909
2971
  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)));
2972
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2973
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2912
2974
  margin: 0;
2913
2975
  }
2914
2976
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -2922,40 +2984,40 @@ sv-popup {
2922
2984
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
2923
2985
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2924
2986
  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)));
2987
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2988
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2927
2989
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
2928
2990
  }
2929
2991
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
2930
2992
  height: calc(100% - 6 * var(--base-unit, 8px));
2931
2993
  }
2932
2994
  .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)));
2995
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2996
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2935
2997
  }
2936
2998
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
2937
2999
  padding: 0;
2938
3000
  }
2939
3001
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
2940
3002
  flex-grow: 1;
2941
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3003
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2942
3004
  }
2943
3005
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
2944
3006
  display: flex;
2945
3007
  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)));
3008
+ 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
3009
  }
2948
3010
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
2949
3011
  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)));
3012
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3013
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2952
3014
  }
2953
3015
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
2954
3016
  display: flex;
2955
3017
  flex-direction: column;
2956
3018
  justify-content: center;
2957
3019
  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)));
3020
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2959
3021
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2960
3022
  }
2961
3023
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -2964,27 +3026,27 @@ sv-popup {
2964
3026
  opacity: 0.25;
2965
3027
  }
2966
3028
  .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)));
3029
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3030
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3031
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2970
3032
  appearance: none;
2971
3033
  border: none;
2972
3034
  border-radius: 100%;
2973
3035
  background-color: transparent;
2974
3036
  }
2975
3037
  .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)));
3038
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3039
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2978
3040
  }
2979
3041
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
2980
3042
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2981
3043
  }
2982
3044
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2983
3045
  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));
3046
+ font-size: var(--sjs-font-size, 16px);
3047
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2986
3048
  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)));
3049
+ 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
3050
  }
2989
3051
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
2990
3052
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -3015,12 +3077,12 @@ sv-popup {
3015
3077
  left: 50%;
3016
3078
  top: 50%;
3017
3079
  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)));
3080
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3019
3081
  height: auto;
3020
3082
  width: auto;
3021
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
3083
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
3022
3084
  max-width: var(--sv-popup-overlay-max-width);
3023
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3085
+ border-radius: var(--sjs-corner-radius, 4px);
3024
3086
  overflow: hidden;
3025
3087
  margin: 0;
3026
3088
  }
@@ -3034,7 +3096,7 @@ sv-popup {
3034
3096
  display: flex;
3035
3097
  align-items: center;
3036
3098
  flex-direction: row;
3037
- font-size: calc(1 * var(--sjs-font-size, 16px));
3099
+ font-size: var(--sjs-font-size, 16px);
3038
3100
  overflow: auto;
3039
3101
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3040
3102
  }
@@ -3052,10 +3114,10 @@ sv-popup {
3052
3114
  align-items: center;
3053
3115
  appearance: none;
3054
3116
  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));
3117
+ padding: 11px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3118
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3057
3119
  outline: none;
3058
- font-size: calc(1 * var(--sjs-font-size, 16px));
3120
+ font-size: var(--sjs-font-size, 16px);
3059
3121
  font-weight: 400;
3060
3122
  background: var(--sjs-general-backcolor, var(--background, #fff));
3061
3123
  cursor: pointer;
@@ -3073,7 +3135,7 @@ sv-popup {
3073
3135
 
3074
3136
  .sv-button-group__item-icon {
3075
3137
  display: block;
3076
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3138
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3077
3139
  }
3078
3140
  .sv-button-group__item-icon use {
3079
3141
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3104,7 +3166,7 @@ sv-popup {
3104
3166
  }
3105
3167
 
3106
3168
  .sv-button-group__item-icon + .sv-button-group__item-caption {
3107
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3169
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3108
3170
  }
3109
3171
 
3110
3172
  .sv-button-group__item--disabled {
@@ -3158,7 +3220,7 @@ sv-popup {
3158
3220
 
3159
3221
  .sv-title-actions .sv-title-actions__title {
3160
3222
  flex-wrap: wrap;
3161
- flex: 0 0 auto;
3223
+ flex: 0 1 auto;
3162
3224
  max-width: unset;
3163
3225
  min-width: unset;
3164
3226
  }
@@ -3175,7 +3237,7 @@ sv-popup {
3175
3237
  background-color: cadetblue;
3176
3238
  padding: 1px;
3177
3239
  font-family: var(--font-family, var(--font-family));
3178
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3240
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3179
3241
  font-style: normal;
3180
3242
  font-weight: 400;
3181
3243
  line-height: 1.42857143;
@@ -3194,7 +3256,7 @@ sv-popup {
3194
3256
  background-clip: padding-box;
3195
3257
  border: 1px solid #ccc;
3196
3258
  border: 1px solid rgba(0, 0, 0, 0.2);
3197
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3259
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3198
3260
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3199
3261
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3200
3262
  line-break: auto;
@@ -3204,10 +3266,10 @@ sv-popup {
3204
3266
  .sv_window_title {
3205
3267
  padding: 8px 14px;
3206
3268
  margin: 0;
3207
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3269
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3208
3270
  background-color: #f7f7f7;
3209
3271
  border-bottom: 1px solid #ebebeb;
3210
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
3272
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
3211
3273
  display: flex;
3212
3274
  }
3213
3275
 
@@ -3222,7 +3284,7 @@ sv-popup {
3222
3284
  .sv_window_title a:link,
3223
3285
  .sv_window_title a:visited {
3224
3286
  text-decoration: none;
3225
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3287
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3226
3288
  font-style: normal;
3227
3289
  color: black;
3228
3290
  }
@@ -3247,8 +3309,8 @@ sv-popup {
3247
3309
 
3248
3310
  .sv-brand-info__text {
3249
3311
  font-weight: 600;
3250
- font-size: calc(1 * var(--sjs-font-size, 16px));
3251
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3312
+ font-size: var(--sjs-font-size, 16px);
3313
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3252
3314
  color: #161616;
3253
3315
  }
3254
3316
 
@@ -3261,8 +3323,8 @@ sv-popup {
3261
3323
 
3262
3324
  .sv-brand-info__terms {
3263
3325
  font-weight: 400;
3264
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
3265
- line-height: calc(1 * var(--sjs-font-size, 16px));
3326
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
3327
+ line-height: var(--sjs-font-size, 16px);
3266
3328
  }
3267
3329
  .sv-brand-info__terms a {
3268
3330
  color: #909090;
@@ -3297,21 +3359,21 @@ sv-popup {
3297
3359
 
3298
3360
  .sv-ranking-item:focus .sv-ranking-item__icon--focus {
3299
3361
  visibility: visible;
3300
- top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3301
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3362
+ top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3363
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3302
3364
  }
3303
3365
 
3304
3366
  .sv-ranking-item:focus .sv-ranking-item__index {
3305
3367
  background: var(--sjs-general-backcolor, var(--background, #fff));
3306
- outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3368
+ outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3307
3369
  }
3308
3370
 
3309
3371
  .sv-ranking-item__content.sv-ranking-item__content {
3310
3372
  display: flex;
3311
3373
  align-items: center;
3312
3374
  line-height: 1em;
3313
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
3314
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3375
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
3376
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3315
3377
  }
3316
3378
 
3317
3379
  .sv-ranking-item__icon-container {
@@ -3320,8 +3382,8 @@ sv-popup {
3320
3382
  top: 0;
3321
3383
  bottom: 0;
3322
3384
  flex-shrink: 0;
3323
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3324
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3385
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3386
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3325
3387
  }
3326
3388
 
3327
3389
  .sv-ranking-item--disabled.sv-ranking-item--disabled {
@@ -3335,9 +3397,9 @@ sv-popup {
3335
3397
  visibility: hidden;
3336
3398
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3337
3399
  position: absolute;
3338
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3339
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3340
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3400
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3401
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3402
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3341
3403
  }
3342
3404
 
3343
3405
  .sv-ranking-item__index.sv-ranking-item__index {
@@ -3347,21 +3409,21 @@ sv-popup {
3347
3409
  justify-content: center;
3348
3410
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3349
3411
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3350
- font-size: calc(1 * var(--sjs-font-size, 16px));
3412
+ font-size: var(--sjs-font-size, 16px);
3351
3413
  border-radius: 100%;
3352
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
3353
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3354
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3355
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3414
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
3415
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3416
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3417
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3356
3418
  box-sizing: border-box;
3357
3419
  font-weight: 600;
3358
- margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3420
+ margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3359
3421
  }
3360
3422
  .sv-ranking-item__index.sv-ranking-item__index:empty {
3361
3423
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
3362
3424
  background-position: center;
3363
3425
  background-repeat: no-repeat;
3364
- background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3426
+ background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3365
3427
  }
3366
3428
 
3367
3429
  .sv-ranking-item__text {
@@ -3370,9 +3432,9 @@ sv-popup {
3370
3432
  text-overflow: ellipsis;
3371
3433
  white-space: nowrap;
3372
3434
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3373
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3374
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3375
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3435
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3436
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3437
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3376
3438
  }
3377
3439
 
3378
3440
  .sd-ranking--disabled .sv-ranking-item__text {
@@ -3388,18 +3450,18 @@ sv-popup {
3388
3450
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
3389
3451
  display: none;
3390
3452
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3391
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3392
- width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3393
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3453
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3454
+ width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3455
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3394
3456
  z-index: 1;
3395
3457
  position: absolute;
3396
3458
  left: 0;
3397
- top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3459
+ top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3398
3460
  }
3399
3461
 
3400
3462
  [dir=rtl] .sv-ranking-item__ghost {
3401
3463
  left: initilal;
3402
- right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3464
+ right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3403
3465
  }
3404
3466
 
3405
3467
  .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -3412,7 +3474,7 @@ sv-popup {
3412
3474
 
3413
3475
  .sv-ranking-item--drag .sv-ranking-item__content {
3414
3476
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3415
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3477
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3416
3478
  }
3417
3479
 
3418
3480
  .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -3460,7 +3522,7 @@ sv-popup {
3460
3522
  }
3461
3523
 
3462
3524
  .sv-ranking-shortcut .sv-ranking-item__text {
3463
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3525
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3464
3526
  }
3465
3527
 
3466
3528
  .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -3468,16 +3530,16 @@ sv-popup {
3468
3530
  }
3469
3531
 
3470
3532
  .sv-ranking-shortcut .sv-ranking-item__icon {
3471
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3472
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3473
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3533
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3534
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3535
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3474
3536
  }
3475
3537
 
3476
3538
  .sv-ranking-shortcut .sv-ranking-item__content {
3477
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3539
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3478
3540
  }
3479
3541
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
3480
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3542
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3481
3543
  }
3482
3544
 
3483
3545
  .sv-ranking--select-to-rank {
@@ -3488,39 +3550,42 @@ sv-popup {
3488
3550
  flex-direction: column-reverse;
3489
3551
  }
3490
3552
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
3491
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3553
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3492
3554
  height: 1px;
3493
3555
  }
3494
3556
  .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
3495
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3496
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3557
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3558
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3497
3559
  display: flex;
3498
3560
  justify-content: center;
3499
3561
  align-items: center;
3500
3562
  }
3501
3563
 
3564
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container {
3565
+ max-width: calc(50% - 1px);
3566
+ }
3502
3567
  .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
3503
3568
  width: 1px;
3504
3569
  }
3505
3570
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
3506
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3571
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
3507
3572
  }
3508
3573
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
3509
3574
  left: initial;
3510
3575
  }
3511
3576
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
3512
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3577
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3513
3578
  }
3514
3579
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
3515
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3580
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3516
3581
  }
3517
3582
 
3518
3583
  .sv-ranking__container-placeholder {
3519
3584
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3520
3585
  font-family: var(--font-family, var(--font-family));
3521
3586
  font-style: normal;
3522
- font-size: calc(1 * var(--sjs-font-size, 16px));
3523
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3587
+ font-size: var(--sjs-font-size, 16px);
3588
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3524
3589
  white-space: break-spaces;
3525
3590
  display: flex;
3526
3591
  justify-content: center;
@@ -3558,15 +3623,15 @@ sv-popup {
3558
3623
  width: 100%;
3559
3624
  font-family: var(--font-family, var(--font-family));
3560
3625
  box-sizing: border-box;
3561
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3626
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3562
3627
  overflow: hidden;
3563
3628
  text-overflow: ellipsis;
3564
3629
  white-space: nowrap;
3565
3630
  }
3566
3631
 
3567
3632
  .sv-list__empty-text {
3568
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3569
- font-size: calc(1 * var(--sjs-font-size, 16px));
3633
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3634
+ font-size: var(--sjs-font-size, 16px);
3570
3635
  font-weight: 400;
3571
3636
  text-align: center;
3572
3637
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3587,13 +3652,13 @@ sv-popup {
3587
3652
  width: 100%;
3588
3653
  align-items: center;
3589
3654
  box-sizing: border-box;
3590
- padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3591
- padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3592
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3655
+ padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
3656
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3657
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3593
3658
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3594
3659
  font-weight: normal;
3595
- font-size: calc(1 * var(--sjs-font-size, 16px));
3596
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3660
+ font-size: var(--sjs-font-size, 16px);
3661
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3597
3662
  cursor: pointer;
3598
3663
  overflow: hidden;
3599
3664
  text-align: left;
@@ -3605,14 +3670,14 @@ sv-popup {
3605
3670
  outline: none;
3606
3671
  }
3607
3672
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
3608
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3609
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3610
- padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3611
- padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3612
- padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3673
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3674
+ border-radius: var(--sjs-corner-radius, 4px);
3675
+ padding-block: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3676
+ padding-inline-end: calc(7.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3677
+ padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3613
3678
  }
3614
3679
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
3615
- margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3680
+ margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3616
3681
  }
3617
3682
 
3618
3683
  .sv-list__item:hover,
@@ -3628,17 +3693,17 @@ sv-popup {
3628
3693
  padding: 0;
3629
3694
  }
3630
3695
  .sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
3631
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3632
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3633
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3696
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3697
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3698
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3634
3699
  display: flex;
3635
3700
  }
3636
3701
 
3637
3702
  .sv-list__item-icon {
3638
3703
  float: left;
3639
3704
  flex-shrink: 0;
3640
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3641
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3705
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3706
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3642
3707
  }
3643
3708
  .sv-list__item-icon svg {
3644
3709
  display: block;
@@ -3654,7 +3719,7 @@ sv-popup {
3654
3719
  }
3655
3720
 
3656
3721
  .sv-list__item-separator {
3657
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3722
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3658
3723
  height: 1px;
3659
3724
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3660
3725
  }
@@ -3708,18 +3773,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3708
3773
  .sv-list__filter {
3709
3774
  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3710
3775
  background: var(--sjs-general-backcolor, var(--background, #fff));
3711
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3776
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3712
3777
  }
3713
3778
 
3714
3779
  .sv-list__filter-icon {
3715
3780
  display: block;
3716
3781
  position: absolute;
3717
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3718
- inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3782
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3783
+ inset-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3719
3784
  }
3720
3785
  .sv-list__filter-icon .sv-svg-icon {
3721
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3722
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3786
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3787
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3723
3788
  }
3724
3789
  .sv-list__filter-icon .sv-svg-icon use {
3725
3790
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3734,11 +3799,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3734
3799
  box-sizing: border-box;
3735
3800
  width: 100%;
3736
3801
  outline: none;
3737
- font-size: calc(1 * var(--sjs-font-size, 16px));
3802
+ font-size: var(--sjs-font-size, 16px);
3738
3803
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3739
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3740
- padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
3741
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3804
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3805
+ padding-inline-start: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3806
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3742
3807
  border: none;
3743
3808
  }
3744
3809
 
@@ -3762,24 +3827,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3762
3827
  .sv-save-data_root {
3763
3828
  position: fixed;
3764
3829
  left: 50%;
3765
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3830
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3766
3831
  background: var(--sjs-general-backcolor, var(--background, #fff));
3767
3832
  opacity: 0;
3768
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3833
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3769
3834
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3770
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3835
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
3771
3836
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3772
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3837
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3773
3838
  text-align: center;
3774
3839
  z-index: 1600;
3775
3840
  font-family: var(--font-family, var(--font-family));
3776
- font-size: calc(1 * var(--sjs-font-size, 16px));
3777
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3841
+ font-size: var(--sjs-font-size, 16px);
3842
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3778
3843
  display: flex;
3779
3844
  flex-direction: row;
3780
3845
  justify-content: center;
3781
3846
  align-items: center;
3782
- transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
3847
+ transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3783
3848
  transition-timing-function: ease-in;
3784
3849
  transition-property: transform, opacity;
3785
3850
  transition-delay: 0.25s;
@@ -3813,20 +3878,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3813
3878
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3814
3879
  color: var(--sjs-general-backcolor, var(--background, #fff));
3815
3880
  font-weight: 600;
3816
- 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)));
3817
- gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3881
+ 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))));
3882
+ gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3818
3883
  }
3819
3884
 
3820
3885
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3821
3886
  font-weight: 600;
3822
- font-size: calc(1 * var(--sjs-font-size, 16px));
3823
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3824
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3887
+ font-size: var(--sjs-font-size, 16px);
3888
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3889
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3825
3890
  color: #ffffff;
3826
3891
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3827
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
3828
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3829
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3892
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
3893
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3894
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3830
3895
  display: flex;
3831
3896
  align-items: center;
3832
3897
  }
@@ -3972,6 +4037,10 @@ sv-components-container,
3972
4037
  flex-grow: 1;
3973
4038
  }
3974
4039
 
4040
+ .sv-components-row > .sv-components-column--expandable {
4041
+ width: 1px;
4042
+ }
4043
+
3975
4044
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question,
3976
4045
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
3977
4046
  display: block;