@sc-360-v2/storefront-cms-library 0.4.51 → 0.4.53

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 (40) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +2 -0
  4. package/dist/cart-details.scss +3207 -3207
  5. package/dist/cart.scss +271 -269
  6. package/dist/cartAttributes.scss +932 -935
  7. package/dist/checkout.scss +6496 -6460
  8. package/dist/dropdownTemplate.scss +4 -1
  9. package/dist/filters.scss +36 -4
  10. package/dist/functions.scss +91 -1
  11. package/dist/icon-list.scss +277 -268
  12. package/dist/language-selector.scss +702 -528
  13. package/dist/layouter.scss +307 -294
  14. package/dist/login.scss +1605 -1473
  15. package/dist/menu-v2.scss +752 -730
  16. package/dist/my-templates.scss +464 -463
  17. package/dist/myTemplates.scss +5 -5
  18. package/dist/order-status.scss +1877 -1856
  19. package/dist/product-image-allocation.scss +1365 -0
  20. package/dist/product-image-bundles.scss +1 -0
  21. package/dist/product-image.scss +6 -2
  22. package/dist/product-sizechart.scss +1826 -1826
  23. package/dist/profile.scss +23 -20
  24. package/dist/repeater-embla-controls.scss +6 -0
  25. package/dist/repeater.scss +920 -915
  26. package/dist/search.scss +361 -296
  27. package/dist/static-global.scss +5 -0
  28. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  29. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  30. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  31. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  32. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  33. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  34. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  35. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  36. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  37. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  38. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  39. package/dist/user-elements.scss +2555 -2471
  40. package/package.json +1 -1
package/dist/user-elements.scss CHANGED
@@ -1,2471 +1,2555 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="userElements"] {
9
- // width: var(
10
- // --_sf-mob-el-wh-st-mx,
11
- // var(
12
- // --_sf-tab-el-wh-st-mx,
13
- // var(
14
- // --_sf-el-wh-st-mx,
15
- // calc(
16
- // 1% *
17
- // var(
18
- // --_ctm-mob-bun-ele-nw-wh-vl,
19
- // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
20
- // )
21
- // )
22
- // )
23
- // )
24
- // );
25
- width: var(
26
- --_sf-el-wh-st-mx,
27
- calc(
28
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
29
- )
30
- );
31
-
32
- height: auto;
33
-
34
- margin: var(
35
- --_ctm-mob-bun-lt-mn,
36
- var(
37
- --_ctm-tab-bun-lt-mn,
38
- var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
39
- )
40
- );
41
-
42
- & > div {
43
- &.wrapper {
44
- width: 100%;
45
- }
46
- }
47
-
48
- .embla {
49
- width: 100%;
50
- height: 100%;
51
- position: relative;
52
- display: flex;
53
- flex-direction: column;
54
- // overflow: hidden;
55
-
56
- .embla__viewport {
57
- width: 100%;
58
- height: 100%;
59
- position: relative;
60
- display: flex;
61
- flex-direction: column;
62
-
63
- overflow: hidden;
64
-
65
- .embla__container {
66
- width: 100%;
67
- height: 100%;
68
- // display: grid;
69
- // grid-template-rows: 100%;
70
-
71
- // grid-template-columns: repeat(
72
- // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
73
- // calc(
74
- // 100% /
75
- // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
76
- // )
77
- // );
78
-
79
- // grid-auto-flow: column;
80
- display: flex;
81
- flex-direction: row;
82
- align-items: center;
83
- gap: var(--_ctm-lt-qa-im-sg);
84
-
85
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
86
- height: calc(
87
- 100% - calc(
88
- var(
89
- --_ctm-mob-dn-pn-as-aw-se,
90
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
91
- ) +
92
- 10px
93
- )
94
- );
95
- }
96
-
97
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
98
- height: calc(
99
- 100% - calc(
100
- var(
101
- --_ctm-mob-dn-pn-le-le-ht,
102
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
103
- ) +
104
- 20px
105
- )
106
- );
107
- }
108
-
109
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
110
- height: calc(
111
- 100% - calc(
112
- var(
113
- --_ctm-mob-dn-pn-ds-dt-se,
114
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
115
- ) +
116
- 20px
117
- )
118
- );
119
- }
120
-
121
- .embla__slide {
122
- // width: 100%;
123
- height: 100%;
124
- white-space: nowrap;
125
- position: relative;
126
- }
127
- }
128
- }
129
- &:not([data-display-style="Column"]) {
130
- .embla__container {
131
- grid-auto-columns: calc(
132
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
133
- );
134
- }
135
- }
136
-
137
- .arrow-navigation {
138
- display: flex;
139
- position: absolute;
140
- top: 50%;
141
- left: 50%;
142
- width: 100%;
143
- justify-content: space-between;
144
- transform: translate(-50%, -50%);
145
- // padding-left: 20px;
146
- &[data-control-type="Side"] {
147
- .left-button,
148
- .right-button {
149
- background-color: transparent;
150
- }
151
- }
152
- &[data-background-shape="Round"] {
153
- .left-button,
154
- .right-button {
155
- background-color: #f2f5f5;
156
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
157
- }
158
- }
159
- &[data-control-type="Bottom-Overflow"] {
160
- transform: translateX(-50%);
161
- width: 100%;
162
- justify-content: center;
163
- gap: 12px;
164
- top: unset;
165
- bottom: 6px;
166
- }
167
- &[data-control-type="Bottom"] {
168
- transform: unset;
169
- position: static;
170
- width: 100%;
171
- justify-content: center;
172
- gap: 12px;
173
- margin-top: 10px;
174
- }
175
- .left-button {
176
- padding: 10px;
177
- border-radius: 50%;
178
- border: none;
179
- width: var(
180
- --_ctm-mob-dn-pn-as-aw-se,
181
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
182
- );
183
- height: var(
184
- --_ctm-mob-dn-pn-as-aw-se,
185
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
186
- );
187
-
188
- display: flex;
189
- align-items: center;
190
- justify-content: center;
191
- cursor: pointer;
192
- outline: none;
193
- margin-left: 12px;
194
- &:disabled {
195
- & svg {
196
- path {
197
- stroke: rgb(192, 192, 192);
198
- }
199
- }
200
- }
201
- }
202
- .right-button {
203
- border-radius: 50%;
204
- border: none;
205
- width: var(
206
- --_ctm-mob-dn-pn-as-aw-se,
207
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
208
- );
209
- height: var(
210
- --_ctm-mob-dn-pn-as-aw-se,
211
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
212
- );
213
-
214
- display: flex;
215
- align-items: center;
216
- justify-content: center;
217
- cursor: pointer;
218
- outline: none;
219
- margin-right: 12px;
220
- padding: 10px;
221
-
222
- &:disabled {
223
- & svg {
224
- path {
225
- stroke: rgb(192, 192, 192);
226
- }
227
- }
228
- }
229
- }
230
- .icon {
231
- display: flex;
232
-
233
- svg {
234
- width: calc(
235
- var(
236
- --_ctm-mob-dn-pn-as-aw-se,
237
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
238
- ) *
239
- 0.5
240
- );
241
- height: calc(
242
- var(
243
- --_ctm-mob-dn-pn-as-aw-se,
244
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
245
- ) *
246
- 0.5
247
- );
248
-
249
- path {
250
- stroke: var(
251
- --_ctm-mob-dn-pn-as-aw-cr,
252
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
253
- );
254
- }
255
- }
256
- }
257
- }
258
-
259
- &[data-control-type="Side"] {
260
- .embla__viewport {
261
- width: calc(100% - 60px);
262
- margin-inline: auto;
263
- }
264
- .left-button {
265
- position: absolute;
266
- left: 0;
267
- top: 50%;
268
- transform: translateY(-50%);
269
- }
270
- .right-button {
271
- position: absolute;
272
-
273
- right: 0;
274
- top: 50%;
275
- transform: translateY(-50%);
276
- }
277
- }
278
-
279
- &[data-thumbnail-placement="top"] {
280
- flex-direction: column-reverse;
281
- }
282
- &[data-thumbnail-placement="bottom"] {
283
- flex-direction: column;
284
- }
285
- &[data-thumbnail-placement="left"] {
286
- flex-direction: row-reverse;
287
-
288
- .embla__thumbs {
289
- width: var(--_ctm-lt-tl-se);
290
- height: 100%;
291
-
292
- & .embla__thumbs__container {
293
- flex-direction: column;
294
- height: 100%;
295
- }
296
- }
297
- }
298
- &[data-thumbnail-placement="right"] {
299
- flex-direction: row;
300
- .embla__thumbs {
301
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
302
-
303
- height: 100%;
304
-
305
- & .embla__thumbs__container {
306
- flex-direction: column;
307
- height: 100%;
308
- }
309
- }
310
- }
311
- .embla__dots {
312
- display: flex;
313
- flex-wrap: wrap;
314
- justify-content: center;
315
- align-items: center;
316
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
317
- gap: 6px;
318
- margin-top: 16px;
319
-
320
- &[data-control-type="Bottom-Overflow"] {
321
- position: absolute;
322
- bottom: 10px;
323
- left: 50%;
324
- transform: translateX(-50%);
325
- width: 75%;
326
- }
327
- .embla__dot {
328
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
329
- -webkit-appearance: none;
330
- appearance: none;
331
- background-color: var(
332
- --_ctm-mob-dn-pn-ds-or-dt-cr,
333
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
334
- );
335
-
336
- touch-action: manipulation;
337
- display: inline-flex;
338
- text-decoration: none;
339
- cursor: pointer;
340
- border: 0;
341
- padding: 0;
342
- margin: 0;
343
- // width: 0.6rem;
344
- // height: 0.6rem;
345
- width: var(
346
- --_ctm-mob-dn-pn-ds-dt-se,
347
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
348
- );
349
- height: var(
350
- --_ctm-mob-dn-pn-ds-dt-se,
351
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
352
- );
353
-
354
- display: flex;
355
- align-items: center;
356
- justify-content: center;
357
- border-radius: 50%;
358
- }
359
- .embla__dot:after {
360
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
361
- width: var(
362
- --_ctm-mob-dn-pn-ds-dt-se,
363
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
364
- );
365
- height: var(
366
- --_ctm-mob-dn-pn-ds-dt-se,
367
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
368
- );
369
-
370
- border-radius: 50%;
371
- display: flex;
372
- align-items: center;
373
- content: "";
374
- }
375
- .embla__dot--selected:after {
376
- box-shadow: inset 0 0 0 1px var(--text-body);
377
- background-color: var(
378
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
379
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
380
- );
381
- }
382
- &[data-slider-control="Pagination Line"] {
383
- .embla__dot {
384
- width: var(
385
- --_ctm-mob-dn-pn-le-le-wh,
386
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
387
- );
388
- height: var(
389
- --_ctm-mob-dn-pn-le-le-ht,
390
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
391
- );
392
- background-color: var(
393
- --_ctm-mob-dn-pn-le-or-le-cr,
394
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
395
- );
396
- border-radius: 6px;
397
- }
398
-
399
- .embla__dot--selected:after {
400
- box-shadow: inset 0 0 0 1px var(--text-body);
401
- border-radius: 6px;
402
- width: var(
403
- --_ctm-mob-dn-pn-le-le-wh,
404
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
405
- );
406
- height: var(
407
- --_ctm-mob-dn-pn-le-le-ht,
408
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
409
- );
410
- background-color: var(
411
- --_ctm-mob-dn-pn-le-ct-le-cr,
412
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
413
- );
414
- }
415
- }
416
- }
417
-
418
- .embla__thumbs {
419
- width: 100%;
420
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
421
-
422
- position: relative;
423
- display: grid;
424
- grid-template-columns: 1fr;
425
- overflow: hidden;
426
- // margin: 10px;
427
- padding: 10px;
428
-
429
- .embla__thumbs__viewport {
430
- width: 100%;
431
- height: 100%;
432
- position: relative;
433
- display: flex;
434
- flex-direction: column;
435
-
436
- overflow: hidden;
437
- }
438
- .embla__thumbs__container {
439
- display: flex;
440
- flex-direction: row;
441
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
442
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
443
-
444
- width: 100%;
445
- // justify-content: center;
446
- // height: 200px;
447
-
448
- .embla__thumbs__slide {
449
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
450
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
451
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
452
-
453
- & img {
454
- width: 100%;
455
- height: 100%;
456
- }
457
- }
458
- }
459
- }
460
- }
461
- .user__element__container {
462
- display: flex;
463
- flex-direction: column;
464
-
465
- width: 100%;
466
- gap: prepareMediaVariable(--_ctm-lt-im-sg);
467
- background-color: var(
468
- --_ctm-mob-dn-wt-se-bd-cr,
469
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
470
- );
471
-
472
- border-color: var(
473
- --_ctm-mob-dn-wt-se-br-cr,
474
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
475
- );
476
-
477
- border-style: var(
478
- --_ctm-mob-dn-wt-se-br-se,
479
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
480
- );
481
-
482
- border-width: var(
483
- --_ctm-mob-dn-wt-se-br-wh,
484
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
485
- );
486
-
487
- border-radius: var(
488
- --_ctm-mob-dn-wt-se-br-rs,
489
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
490
- );
491
-
492
- box-shadow: var(
493
- --_show-shadow,
494
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
495
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
496
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
497
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
498
- );
499
-
500
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
501
- .user__element__item {
502
- position: relative;
503
- }
504
-
505
- &[data-display-type="Vertical"] {
506
- &[data-show-divider="true"] {
507
- .user__element__item:not(:last-child)::before {
508
- content: "";
509
- position: absolute;
510
- left: 0;
511
- right: 0;
512
- bottom: calc(
513
- -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
514
- );
515
-
516
- height: var(
517
- --_ctm-mob-dn-wt-se-dr-wt,
518
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
519
- );
520
- background-color: var(
521
- --_ctm-mob-dn-wt-se-dr-cr,
522
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
523
- );
524
- }
525
- }
526
-
527
- .user_elements_user_info_wrapper {
528
- flex-direction: column;
529
- align-items: flex-start;
530
-
531
- position: relative;
532
-
533
- .user_elements_user_data_wrapper {
534
- gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
535
- display: flex;
536
- width: 100%;
537
- // max-height: 250px;
538
- flex-direction: column;
539
- white-space: nowrap;
540
- }
541
- }
542
-
543
- .user_elements_quota_wrapper {
544
- flex-direction: column;
545
- align-items: flex-start;
546
-
547
- position: relative;
548
- }
549
-
550
- .user_elements_allowance_wrapper {
551
- flex-direction: column;
552
- align-items: flex-start;
553
- position: relative;
554
- }
555
-
556
- .user_elements_user_info_secondary_wrapper {
557
- flex-direction: column;
558
- align-items: flex-start;
559
- position: relative;
560
- }
561
-
562
- &[data-content-alignment="Horizontal"] {
563
- .user_elements_user_info_wrapper {
564
- flex-direction: row;
565
- justify-content: space-between;
566
- align-items: center;
567
- .user_elements_user_name_wrapper {
568
- width: unset;
569
- align-items: center;
570
- }
571
-
572
- .user_elements_user_data_wrapper {
573
- // max-height: 250px;
574
- flex-direction: row;
575
- width: unset;
576
- }
577
- }
578
- .user_elements_quota_wrapper {
579
- flex-direction: row;
580
- align-items: center;
581
- flex-wrap: wrap;
582
- .user_elements_user_name_wrapper {
583
- flex-direction: row;
584
- white-space: nowrap;
585
- }
586
- .quote_vertical_scroll_wrapper {
587
- flex-direction: row;
588
- flex-grow: 1;
589
- width: unset;
590
- }
591
- .embla__slide:not(:last-child)::before {
592
- content: "";
593
- position: absolute;
594
-
595
- background-color: var(
596
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
597
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
598
- );
599
- right: calc(
600
- -1 *
601
- (
602
- var(
603
- --_ctm-mob-lt-qa-im-sg,
604
- var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
605
- ) /
606
- 2
607
- )
608
- );
609
- height: 100%;
610
- width: var(
611
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
612
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
613
- );
614
- }
615
- .quota_label {
616
- white-space: nowrap;
617
- }
618
- .quote_info_wrapper {
619
- justify-content: flex-start;
620
- align-items: center;
621
- }
622
- .embla__container {
623
- gap: var(--_ctm-lt-qa-im-sg);
624
- }
625
- }
626
- .user_elements_allowance_wrapper {
627
- flex-direction: row;
628
- flex-wrap: wrap;
629
- align-items: center;
630
- .embla__slide:not(:last-child)::before {
631
- content: "";
632
- position: absolute;
633
-
634
- background-color: var(
635
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
636
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
637
- );
638
- right: calc(
639
- -1 *
640
- (
641
- var(
642
- --_ctm-mob-lt-ae-im-sg,
643
- var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
644
- ) /
645
- 2
646
- )
647
- );
648
- height: 100%;
649
- width: var(
650
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
651
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
652
- );
653
- left: unset;
654
- }
655
- .allowance_vertical_scroll_wrapper {
656
- width: unset;
657
- flex-grow: 1;
658
- }
659
- .embla__container {
660
- gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
661
- }
662
- }
663
- .user_elements_user_info_secondary_wrapper {
664
- flex-direction: row;
665
- justify-content: space-between;
666
- align-items: center;
667
- .order_wrapper {
668
- justify-content: flex-start;
669
- }
670
- }
671
- .secondary_vertical_scroll_wrapper {
672
- flex-direction: row;
673
- width: unset;
674
- justify-content: space-between;
675
- align-items: center;
676
- width: 100%;
677
- gap: 16px;
678
- @media (max-width: 768px) {
679
- flex-wrap: wrap;
680
- }
681
- .child {
682
- flex-direction: column;
683
- justify-content: flex-start;
684
- width: 100%;
685
- height: 44px;
686
- }
687
- }
688
- }
689
- }
690
- &[data-display-type="Horizontal"] {
691
- flex-direction: row;
692
- .user__element__item {
693
- width: 100%;
694
- flex-grow: 1;
695
- }
696
- .user__element__item {
697
- min-width: 200px;
698
- }
699
-
700
- &[data-show-divider="true"] {
701
- .user__element__item:not(:last-child)::before {
702
- content: "";
703
- position: absolute;
704
- top: 0;
705
- bottom: 0;
706
- right: calc(
707
- -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
708
- );
709
-
710
- width: var(
711
- --_ctm-mob-dn-wt-se-dr-wt,
712
- var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
713
- );
714
- background-color: var(
715
- --_ctm-mob-dn-wt-se-dr-cr,
716
- var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
717
- );
718
- }
719
- }
720
- }
721
-
722
- // without conditions
723
-
724
- .user_elements_user_info_wrapper {
725
- display: flex;
726
- flex-direction: column;
727
-
728
- background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
729
- border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
730
- border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
731
- border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
732
- border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
733
- box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
734
- var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
735
- gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
736
-
737
- padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
738
-
739
- .user_elements_user_name_wrapper {
740
- display: flex;
741
- gap: 6px;
742
- &[data-has-link="true"] {
743
- cursor: pointer;
744
- &:hover {
745
- color: var(--_primary-500);
746
- }
747
- }
748
- .user_elements_user_name {
749
- display: flex;
750
- color: var(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
751
- font-family: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
752
- font-size: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
753
- font-style: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
754
- font-weight: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
755
- line-height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht);
756
- letter-spacing: var(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
757
- text-align: var(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
758
- text-decoration: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
759
- }
760
-
761
- .icon {
762
- cursor: pointer;
763
- svg {
764
- width: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
765
- height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
766
- path {
767
- stroke: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
768
- }
769
- }
770
- }
771
- }
772
-
773
- .user_elements_user_data_wrapper {
774
- .user_elements_user_data {
775
- display: flex;
776
-
777
- .user_elements_user_id {
778
- display: flex;
779
-
780
- gap: 6px;
781
- align-items: center;
782
- color: var(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
783
- font-family: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
784
- font-size: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
785
- font-style: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
786
- font-weight: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
787
- line-height: var(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht);
788
- letter-spacing: var(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
789
- text-align: var(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
790
- text-decoration: var(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
791
-
792
- .icon {
793
- cursor: pointer;
794
- svg {
795
- width: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
796
- height: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
797
- path {
798
- stroke: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
799
- }
800
- }
801
- }
802
- }
803
-
804
- .user_elements_user_email {
805
- display: flex;
806
-
807
- gap: 6px;
808
- align-items: center;
809
- color: var(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
810
- font-family: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
811
- font-size: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
812
- font-style: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
813
- font-weight: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
814
- line-height: var(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht);
815
- letter-spacing: var(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
816
- text-align: var(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
817
- text-decoration: var(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
818
-
819
- .icon {
820
- cursor: pointer;
821
- svg {
822
- width: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
823
- height: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
824
- path {
825
- stroke: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
826
- }
827
- }
828
- }
829
- }
830
-
831
- .user_elements_user_phone {
832
- display: flex;
833
-
834
- gap: 6px;
835
- align-items: center;
836
- color: var(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
837
- font-family: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
838
- font-size: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
839
- font-style: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
840
- font-weight: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
841
- line-height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht);
842
- letter-spacing: var(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
843
- text-align: var(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
844
- text-decoration: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
845
-
846
- .icon {
847
- cursor: pointer;
848
- svg {
849
- width: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
850
- height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
851
- path {
852
- stroke: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
853
- }
854
- }
855
- }
856
- }
857
- }
858
- }
859
- .child {
860
- position: relative;
861
- }
862
- &[data-show-divider="true"] {
863
- .child:not(:last-child)::after {
864
- content: "";
865
- margin-inline: 16px;
866
- margin-top: 3px;
867
- width: var(--line-w, 1px);
868
- height: 20px;
869
- background-color: var(
870
- --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
871
- var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
872
- );
873
- // content: "";
874
- // position: absolute;
875
- // left: 0;
876
- // right: 0;
877
- // bottom: calc(
878
- // -1 *
879
- // (
880
- // var(
881
- // --_ctm-mob-lt-ur-io-im-sg,
882
- // var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
883
- // ) /
884
- // 2
885
- // )
886
- // );
887
-
888
- // height: var(
889
- // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
890
- // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
891
- // );
892
- // background-color: var(
893
- // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
894
- // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
895
- // );
896
- }
897
- // .user_elements_user_name_wrapper {
898
- // width: 100%;
899
- // position: relative;
900
- // &::after {
901
- // content: "";
902
- // position: absolute;
903
- // left: 0;
904
- // right: 0;
905
- // bottom: calc(
906
- // -1 *
907
- // (
908
- // var(
909
- // --_ctm-mob-lt-ur-io-im-sg,
910
- // var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
911
- // ) /
912
- // 2
913
- // )
914
- // );
915
- // height: var(
916
- // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
917
- // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
918
- // );
919
-
920
- // background-color: var(
921
- // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
922
- // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
923
- // );
924
- // }
925
- // }
926
- }
927
- }
928
-
929
- .user_elements_quota_wrapper {
930
- display: flex;
931
- flex-direction: column;
932
- width: 100%;
933
-
934
- background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
935
- border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
936
- border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
937
- border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
938
- border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
939
- box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
940
- var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
941
- gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
942
- .quota_label_wrapper {
943
- display: flex;
944
- flex-direction: column;
945
- min-width: 109px;
946
- gap: 10px;
947
-
948
- .quota_label {
949
- display: flex;
950
-
951
- color: var(--_ctm-dn-qa-dn-qa-hg-dn-cr);
952
- font-family: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
953
- font-size: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
954
- font-style: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
955
- font-weight: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
956
- line-height: var(--_ctm-dn-qa-dn-qa-hg-dn-le-ht);
957
- letter-spacing: var(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg);
958
- text-align: var(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
959
- text-decoration: var(--_ctm-dn-qa-dn-qa-hg-dn-ue);
960
- }
961
- }
962
-
963
- .quote_item_wrapper {
964
- display: flex;
965
- flex-direction: row;
966
- gap: var(--_ctm-lt-qa-im-sg);
967
-
968
- .quote_info_wrapper {
969
- display: flex;
970
- gap: 12px;
971
- justify-content: space-between;
972
- .quota_name_wrapper {
973
- display: flex;
974
- flex-direction: column;
975
- gap: 6px;
976
-
977
- .quota_name {
978
- display: flex;
979
-
980
- color: var(--_ctm-dn-qa-dn-qa-ne-dn-cr);
981
- font-family: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
982
- font-size: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
983
- font-style: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
984
- font-weight: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
985
- line-height: var(--_ctm-dn-qa-dn-qa-ne-dn-le-ht);
986
- letter-spacing: var(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg);
987
- text-align: var(--_ctm-dn-qa-dn-qa-ne-dn-tt-an);
988
- text-decoration: var(--_ctm-dn-qa-dn-qa-ne-dn-ue);
989
- }
990
-
991
- .quota_expiry {
992
- display: flex;
993
-
994
- color: var(--_ctm-dn-qa-dn-qa-ey-dn-cr);
995
- font-family: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
996
- font-size: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
997
- font-style: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
998
- font-weight: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
999
- line-height: var(--_ctm-dn-qa-dn-qa-ey-dn-le-ht);
1000
- letter-spacing: var(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg);
1001
- text-align: var(--_ctm-dn-qa-dn-qa-ey-dn-tt-an);
1002
- text-decoration: var(--_ctm-dn-qa-dn-qa-ey-dn-ue);
1003
- }
1004
- }
1005
-
1006
- .quota_inventory_parent {
1007
- display: flex;
1008
- }
1009
- .hilighted {
1010
- font-size: 20px;
1011
- font-weight: 700;
1012
- color: var(--_gray-900);
1013
- }
1014
- .quota_inventory {
1015
- display: flex;
1016
- justify-content: center;
1017
- align-items: center;
1018
- color: var(--_ctm-dn-qa-dn-qa-iy-dn-cr);
1019
- font-family: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
1020
- font-size: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1021
- font-style: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1022
- font-weight: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
1023
- line-height: var(--_ctm-dn-qa-dn-qa-iy-dn-le-ht);
1024
- letter-spacing: var(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg);
1025
- text-align: var(--_ctm-dn-qa-dn-qa-iy-dn-tt-an);
1026
- text-decoration: var(--_ctm-dn-qa-dn-qa-iy-dn-ue);
1027
- }
1028
- }
1029
-
1030
- .quota_divider {
1031
- content: "";
1032
- height: auto;
1033
- width: 1px;
1034
- background-color: #d0d5dd;
1035
- }
1036
- }
1037
-
1038
- &[data-show-divider="true"] {
1039
- .quote_item_wrapper:not(:last-child)::before {
1040
- content: "";
1041
- position: absolute;
1042
- left: 0;
1043
- right: 0;
1044
- bottom: calc(
1045
- -1 *
1046
- (
1047
- var(
1048
- --_ctm-mob-lt-qa-im-sg,
1049
- var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1050
- ) /
1051
- 2
1052
- )
1053
- );
1054
-
1055
- height: var(
1056
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1057
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1058
- );
1059
- background-color: var(
1060
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1061
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1062
- );
1063
- }
1064
- &[data-content-alignment="Vertical"] {
1065
- .quota_label_wrapper {
1066
- width: 100%;
1067
- position: relative;
1068
- &::after {
1069
- content: "";
1070
- position: absolute;
1071
- left: 0;
1072
- right: 0;
1073
- bottom: calc(
1074
- -1 *
1075
- (
1076
- var(
1077
- --_ctm-mob-lt-qa-im-sg,
1078
- var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1079
- ) /
1080
- 2
1081
- )
1082
- );
1083
- height: var(
1084
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1085
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1086
- );
1087
- background-color: var(
1088
- --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1089
- var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1090
- );
1091
- }
1092
- }
1093
- }
1094
- }
1095
-
1096
- .quote_vertical_scroll_wrap {
1097
- height: auto;
1098
- display: flex;
1099
- width: 100%;
1100
- flex-direction: column;
1101
- gap: 16px;
1102
-
1103
- .quote_item_wrapper {
1104
- justify-content: space-between;
1105
- width: 100%;
1106
- align-items: center;
1107
- gap: 16px;
1108
- align-items: flex-start;
1109
- flex-direction: column;
1110
-
1111
- .quota_divider {
1112
- height: 1px;
1113
- width: 100%;
1114
- }
1115
- }
1116
- }
1117
- .quote_vertical_scroll_wrapper {
1118
- overflow-y: auto;
1119
- gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1120
- display: flex;
1121
- width: 100%;
1122
- // max-height: 250px;
1123
- flex-direction: column;
1124
-
1125
- .quote_item_wrapper {
1126
- flex-direction: column;
1127
- position: relative;
1128
-
1129
- .quota_divider {
1130
- width: 100%;
1131
- height: 1px;
1132
- }
1133
- }
1134
- }
1135
- }
1136
-
1137
- .user_elements_allowance_wrapper {
1138
- display: flex;
1139
- flex-direction: column;
1140
- width: 100%;
1141
-
1142
- background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1143
- border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
1144
- border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1145
- border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1146
- border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1147
- box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1148
- var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1149
- gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1150
- .allowance_label_wrapper {
1151
- display: flex;
1152
- flex-direction: column;
1153
- min-width: 109px;
1154
- // align-items: center;
1155
- gap: 10px;
1156
-
1157
- .allowance_label {
1158
- display: flex;
1159
-
1160
- white-space: nowrap;
1161
- color: var(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1162
- font-family: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
1163
- font-size: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1164
- font-style: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1165
- font-weight: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
1166
- line-height: var(--_ctm-dn-ae-dn-ae-hg-dn-le-ht);
1167
- letter-spacing: var(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg);
1168
- text-align: var(--_ctm-dn-ae-dn-ae-hg-dn-tt-an);
1169
- text-decoration: var(--_ctm-dn-ae-dn-ae-hg-dn-ue);
1170
- }
1171
- }
1172
-
1173
- .allowance_upfront_wrapper {
1174
- display: flex;
1175
- gap: var(--_ctm-lt-qa-im-sg);
1176
- flex-wrap: wrap;
1177
- }
1178
-
1179
- .allowance_item_wrapper {
1180
- display: flex;
1181
- flex-direction: row;
1182
- gap: var(--_ctm-lt-qa-im-sg);
1183
-
1184
- .allowance_info_wrapper {
1185
- display: flex;
1186
- gap: 12px;
1187
- .allowance_name_wrapper {
1188
- display: flex;
1189
- flex-direction: column;
1190
- gap: 6px;
1191
-
1192
- .allowance_name {
1193
- display: flex;
1194
-
1195
- color: var(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1196
- font-family: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1197
- font-size: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1198
- font-style: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1199
- font-weight: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
1200
- line-height: var(--_ctm-dn-ae-dn-ae-ne-dn-le-ht);
1201
- letter-spacing: var(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg);
1202
- text-align: var(--_ctm-dn-ae-dn-ae-ne-dn-tt-an);
1203
- text-decoration: var(--_ctm-dn-ae-dn-ae-ne-dn-ue);
1204
- }
1205
-
1206
- .allowance_expiry {
1207
- display: flex;
1208
-
1209
- color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1210
- font-family: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1211
- font-size: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1212
- font-style: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1213
- font-weight: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
1214
- line-height: var(--_ctm-dn-ae-dn-ae-ey-dn-le-ht);
1215
- letter-spacing: var(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg);
1216
- text-align: var(--_ctm-dn-ae-dn-ae-ey-dn-tt-an);
1217
- text-decoration: var(--_ctm-dn-ae-dn-ae-ey-dn-ue);
1218
- }
1219
- }
1220
-
1221
- .allowance_inventory {
1222
- display: flex;
1223
- justify-content: center;
1224
- align-items: center;
1225
- color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1226
- font-family: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
1227
- font-size: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1228
- font-style: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1229
- font-weight: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
1230
- line-height: var(--_ctm-dn-ae-dn-ae-iy-dn-le-ht);
1231
- letter-spacing: var(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg);
1232
- text-align: var(--_ctm-dn-ae-dn-ae-iy-dn-tt-an);
1233
- text-decoration: var(--_ctm-dn-ae-dn-ae-iy-dn-ue);
1234
- }
1235
- }
1236
- }
1237
- &[data-show-divider="true"] {
1238
- .allowance_item_wrapper:not(:last-child)::before {
1239
- content: "";
1240
- position: absolute;
1241
- left: 0;
1242
- right: 0;
1243
- bottom: calc(
1244
- -1 *
1245
- (
1246
- var(
1247
- --_ctm-mob-lt-ae-im-sg,
1248
- var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1249
- ) /
1250
- 2
1251
- )
1252
- );
1253
-
1254
- height: var(
1255
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1256
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1257
- );
1258
- background-color: var(
1259
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1260
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1261
- );
1262
- }
1263
- &[data-content-alignment="Vertical"] {
1264
- .allowance_label_wrapper {
1265
- width: 100%;
1266
- position: relative;
1267
- gap: 10px;
1268
- &::after {
1269
- content: "";
1270
- position: absolute;
1271
- left: 0;
1272
- right: 0;
1273
- bottom: calc(
1274
- -1 *
1275
- (
1276
- var(
1277
- --_ctm-mob-lt-ae-im-sg,
1278
- var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1279
- ) /
1280
- 2
1281
- )
1282
- );
1283
- height: var(
1284
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1285
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1286
- );
1287
- background-color: var(
1288
- --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1289
- var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1290
- );
1291
- }
1292
- }
1293
- }
1294
- }
1295
-
1296
- .allowance_vertical_scroll_wrapper {
1297
- overflow-y: auto;
1298
- gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1299
- display: flex;
1300
- width: 100%;
1301
- flex-direction: column;
1302
-
1303
- .allowance_item_wrapper {
1304
- flex-direction: column;
1305
- position: relative;
1306
-
1307
- .allowance_info_wrapper {
1308
- justify-content: space-between;
1309
- }
1310
- }
1311
- }
1312
-
1313
- .allowance_vertical_scroll_wrap {
1314
- gap: var(--_ctm-lt-ae-im-sg);
1315
- display: flex;
1316
- width: 100%;
1317
- flex-direction: column;
1318
-
1319
- .allowance_item_wrapper {
1320
- flex-direction: column;
1321
-
1322
- .allowance_info_wrapper {
1323
- justify-content: space-between;
1324
- }
1325
- }
1326
- }
1327
- }
1328
-
1329
- .user_elements_user_info_secondary_wrapper {
1330
- display: flex;
1331
- flex-direction: column;
1332
- width: 100%;
1333
- background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1334
- border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1335
- border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1336
- border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1337
- border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1338
- box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1339
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1340
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1341
- gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1342
-
1343
- .secondary_vertical_scroll_wrapper {
1344
- // overflow-y: auto;
1345
- gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1346
- display: flex;
1347
- width: 100%;
1348
- // max-height: 250px;
1349
- flex-direction: column;
1350
-
1351
- .secondary_item_wrapper {
1352
- flex-direction: column;
1353
- position: relative;
1354
-
1355
- .quota_divider {
1356
- width: 100%;
1357
- height: 1px;
1358
- }
1359
- }
1360
- }
1361
-
1362
- .secondary_label {
1363
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1364
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1365
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1366
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1367
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
1368
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
1369
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
1370
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
1371
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
1372
- }
1373
-
1374
- .label {
1375
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1376
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1377
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1378
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1379
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1380
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1381
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1382
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1383
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1384
- }
1385
- .value {
1386
- color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1387
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1388
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1389
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1390
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1391
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1392
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1393
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1394
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1395
- }
1396
-
1397
- .secondary_info_divider {
1398
- content: "";
1399
- height: 3rem;
1400
- width: 1px;
1401
- background-color: #d0d5dd;
1402
- }
1403
-
1404
- .active_orders_wrapper {
1405
- display: flex;
1406
- flex-direction: column;
1407
- gap: 4px;
1408
-
1409
- justify-content: flex-start;
1410
-
1411
- .order_wrapper {
1412
- display: flex;
1413
- gap: 6px;
1414
- justify-content: right;
1415
- .remaining_order {
1416
- color: #243dc6;
1417
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1418
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1419
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1420
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1421
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1422
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1423
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1424
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1425
- }
1426
- }
1427
- }
1428
-
1429
- .payment_methods_wrapper {
1430
- display: flex;
1431
- flex-direction: column;
1432
- gap: 4px;
1433
-
1434
- justify-content: flex-start;
1435
-
1436
- .payment_wrapper {
1437
- display: flex;
1438
- gap: 6px;
1439
- .remaining_payment {
1440
- color: #243dc6;
1441
- font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1442
- font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1443
- font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1444
- font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1445
- line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1446
- letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1447
- text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1448
- text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1449
- }
1450
- }
1451
- }
1452
-
1453
- .my_cart_wrapper {
1454
- display: flex;
1455
- flex-direction: row;
1456
- gap: 16px;
1457
-
1458
- .my_cart_info_wrapper {
1459
- display: flex;
1460
- flex-direction: column;
1461
- gap: 4px;
1462
- white-space: nowrap;
1463
- }
1464
-
1465
- .my_cart_icon_wrappers {
1466
- position: relative;
1467
- display: inline-block;
1468
- width: var(
1469
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1470
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1471
- );
1472
- height: var(
1473
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1474
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1475
- );
1476
- .cart__quantity {
1477
- position: absolute;
1478
- top: -4px;
1479
- right: -6px;
1480
- // background-color: #ffd600; /* Yellow */
1481
- // color: black;
1482
- // font-size: 12px;
1483
- // font-weight: bold;
1484
- // padding: 2px 6px;
1485
- border-radius: 6px;
1486
-
1487
- min-width: 16px;
1488
- text-align: center;
1489
- display: flex;
1490
- align-items: center;
1491
- justify-content: center;
1492
- white-space: nowrap;
1493
-
1494
- width: calc(
1495
- var(
1496
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1497
- var(
1498
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1499
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1500
- )
1501
- ) *
1502
- 0.5
1503
- );
1504
- height: calc(
1505
- var(
1506
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1507
- var(
1508
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1509
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1510
- )
1511
- ) *
1512
- 0.5
1513
- );
1514
- }
1515
- // .cart__quantity {
1516
- // position: absolute;
1517
- // top: 0;
1518
- // right: 0;
1519
- // // background: yellow;
1520
- // // padding: 2px;
1521
- // // border-radius: 5px;
1522
- // // padding-inline: 5px;
1523
- // font-size: 12px;
1524
- // transform: translate(
1525
- // 0%,
1526
- // calc(
1527
- // var(
1528
- // --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1529
- // var(
1530
- // --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1531
- // var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1532
- // )
1533
- // ) *
1534
- // 0.1
1535
- // )
1536
- // );
1537
- // }
1538
-
1539
- .cart__quantity {
1540
- background-color: var(
1541
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1542
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr))
1543
- );
1544
-
1545
- border-color: var(
1546
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1547
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1548
- );
1549
-
1550
- border-style: var(
1551
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1552
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1553
- );
1554
-
1555
- border-width: var(
1556
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1557
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1558
- );
1559
-
1560
- border-radius: var(
1561
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1562
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1563
- );
1564
-
1565
- box-shadow: var(
1566
- --_show-shadow,
1567
- var(
1568
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1569
- var(
1570
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1571
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1572
- )
1573
- )
1574
- var(
1575
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1576
- var(
1577
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1578
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1579
- )
1580
- )
1581
- var(
1582
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1583
- var(
1584
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1585
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1586
- )
1587
- )
1588
- var(
1589
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1590
- var(
1591
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1592
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1593
- )
1594
- )
1595
- );
1596
- white-space: nowrap;
1597
-
1598
- color: var(
1599
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1600
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1601
- );
1602
- font-family: var(
1603
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1604
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1605
- );
1606
- font-size: calc(
1607
- var(
1608
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1609
- var(
1610
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1611
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1612
- )
1613
- ) /
1614
- 3
1615
- );
1616
- // font-size: var(
1617
- // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1618
- // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1619
- // );
1620
- font-weight: var(
1621
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1622
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1623
- );
1624
- font-style: var(
1625
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1626
- var(
1627
- --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1628
- var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1629
- )
1630
- );
1631
- text-align: var(
1632
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1633
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1634
- );
1635
- letter-spacing: var(
1636
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1637
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1638
- );
1639
- // line-height: var(
1640
- // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1641
- // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1642
- // );
1643
- text-decoration: var(
1644
- --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1645
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1646
- );
1647
- // padding: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-ct-pg);
1648
- }
1649
- .cart__icon {
1650
- display: var(--_sf-show-icon-ff, flex);
1651
- svg {
1652
- width: var(
1653
- --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1654
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1655
- );
1656
- height: var(
1657
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1658
- var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1659
- );
1660
- path {
1661
- stroke: var(
1662
- --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1663
- var(
1664
- --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1665
- var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1666
- )
1667
- );
1668
- }
1669
- }
1670
- }
1671
- }
1672
- }
1673
-
1674
- .child {
1675
- position: relative;
1676
- }
1677
- &[data-show-divider="true"] {
1678
- .child:not(:last-child)::before {
1679
- content: "";
1680
- position: absolute;
1681
- left: 0;
1682
- right: 0;
1683
- bottom: calc(
1684
- -1 *
1685
- (
1686
- var(
1687
- --_ctm-mob-lt-ur-io-sy-im-sg,
1688
- var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1689
- ) /
1690
- 2
1691
- )
1692
- );
1693
-
1694
- height: var(
1695
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1696
- var(
1697
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1698
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1699
- )
1700
- );
1701
- background-color: var(
1702
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1703
- var(
1704
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1705
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1706
- )
1707
- );
1708
- }
1709
- &[data-content-alignment="Horizontal"] {
1710
- .child:not(:last-child)::before {
1711
- // right: calc(
1712
- // -1 *
1713
- // (
1714
- // var(
1715
- // --_ctm-mob-lt-ur-io-sy-im-sg,
1716
- // var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1717
- // ) /
1718
- // 2
1719
- // )
1720
- // );
1721
- top: 0;
1722
-
1723
- width: var(
1724
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1725
- var(
1726
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1727
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1728
- )
1729
- );
1730
- height: 100%;
1731
- left: unset;
1732
- }
1733
- }
1734
- &[data-content-alignment="Vertical"] {
1735
- .secondary_label_wrapper {
1736
- width: 100%;
1737
- position: relative;
1738
- &::after {
1739
- content: "";
1740
- position: absolute;
1741
- left: 0;
1742
- right: 0;
1743
- bottom: calc(
1744
- -1 *
1745
- (
1746
- var(
1747
- --_ctm-mob-lt-ur-io-sy-im-sg,
1748
- var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1749
- ) /
1750
- 2
1751
- )
1752
- );
1753
- height: var(
1754
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1755
- var(
1756
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1757
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1758
- )
1759
- );
1760
-
1761
- background-color: var(
1762
- --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1763
- var(
1764
- --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1765
- var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1766
- )
1767
- );
1768
- }
1769
- }
1770
- }
1771
- }
1772
-
1773
- .secondary_info_divider {
1774
- height: 1px;
1775
- width: 100%;
1776
- }
1777
-
1778
- .active_orders_wrapper {
1779
- flex-direction: row;
1780
- justify-content: space-between;
1781
- padding-right: 16px;
1782
- }
1783
- .active_orders_wrapper > * {
1784
- box-sizing: border-box;
1785
- width: 100%;
1786
- line-height: 125%;
1787
- }
1788
-
1789
- .payment_methods_wrapper {
1790
- flex-direction: row;
1791
- justify-content: space-between;
1792
- }
1793
-
1794
- .my_cart_wrapper {
1795
- flex-direction: row;
1796
- align-items: start;
1797
- }
1798
- .my_cart_container {
1799
- display: flex;
1800
- align-items: center;
1801
- gap: 16px;
1802
- }
1803
-
1804
- .popover-container {
1805
- position: relative;
1806
- display: inline-block;
1807
- .popover-trigger {
1808
- cursor: pointer;
1809
- font-weight: 500;
1810
- color: #2b6cb0;
1811
- }
1812
-
1813
- .popover-box {
1814
- // position: absolute;
1815
- // top: calc(100% + 10px);
1816
- // right: 0;
1817
- // background: white;
1818
- // padding: 12px 16px;
1819
- // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1820
- // border-radius: 8px;
1821
- // min-width: 150px;
1822
- // z-index: 10;
1823
- position: absolute;
1824
- // border: 1px solid #ccc;
1825
- min-width: 150px;
1826
- max-width: 200px;
1827
- z-index: 1000;
1828
- left: 40px;
1829
- top: 0;
1830
- padding: 8px;
1831
- border-radius: 4px;
1832
- max-height: 150px;
1833
- overflow-y: auto;
1834
- }
1835
-
1836
- .popover-box {
1837
- display: flex;
1838
- flex-direction: column;
1839
-
1840
- // width: 100%;
1841
- gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
1842
- background-color: var(
1843
- --_ctm-mob-dn-pr-se-bd-cr,
1844
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1845
- );
1846
-
1847
- border-color: var(
1848
- --_ctm-mob-dn-pr-se-br-cr,
1849
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1850
- );
1851
-
1852
- border-style: var(
1853
- --_ctm-mob-dn-pr-se-br-se,
1854
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
1855
- );
1856
-
1857
- border-width: var(
1858
- --_ctm-mob-dn-pr-se-br-wh,
1859
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
1860
- );
1861
-
1862
- border-radius: var(
1863
- --_ctm-mob-dn-pr-se-br-rs,
1864
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
1865
- );
1866
-
1867
- box-shadow: var(
1868
- --_show-shadow,
1869
- var(
1870
- --_ctm-mob-dn-pr-se-sw-ae,
1871
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
1872
- )
1873
- var(
1874
- --_ctm-mob-dn-pr-se-sw-br,
1875
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
1876
- )
1877
- var(
1878
- --_ctm-mob-dn-pr-se-sw-sd,
1879
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
1880
- )
1881
- var(
1882
- --_ctm-mob-dn-pr-se-sw-cr,
1883
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
1884
- )
1885
- );
1886
-
1887
- padding: var(
1888
- --_ctm-mob-dn-pr-se-pg,
1889
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
1890
- );
1891
- }
1892
-
1893
- .popover-box strong {
1894
- display: block;
1895
- margin-bottom: 6px;
1896
- font-weight: bold;
1897
- }
1898
-
1899
- .popover-arrow {
1900
- position: absolute;
1901
- top: 8px;
1902
- left: -5px;
1903
- width: 12px;
1904
- height: 12px;
1905
- // background-color: var(
1906
- // --_ctm-mob-dn-pr-se-bd-cr,
1907
- // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1908
- // );
1909
- transform: rotate(-45deg);
1910
- box-shadow: -1px -1px 0px
1911
- var(
1912
- --_ctm-mob-dn-pr-se-br-cr,
1913
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1914
- );
1915
- }
1916
-
1917
- .popover_item {
1918
- // padding-inline: var(--_sf-cd-gp);
1919
- color: var(
1920
- --_ctm-mob-dn-pr-se-cr,
1921
- var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
1922
- );
1923
- font-family: var(
1924
- --_ctm-mob-dn-pr-se-ft-fy,
1925
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
1926
- );
1927
- font-size: var(
1928
- --_ctm-mob-dn-pr-se-ft-se,
1929
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
1930
- );
1931
- font-weight: var(
1932
- --_ctm-mob-dn-pr-se-ft-wt,
1933
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
1934
- );
1935
- font-style: var(
1936
- --_ctm-mob-dn-pr-se-ft-se-ic,
1937
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
1938
- );
1939
- text-align: var(
1940
- --_ctm-mob-dn-pr-se-tt-an,
1941
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
1942
- );
1943
- letter-spacing: var(
1944
- --_ctm-mob-dn-pr-se-lr-sg,
1945
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
1946
- );
1947
- line-height: var(
1948
- --_ctm-mob-dn-pr-se-le-ht,
1949
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
1950
- );
1951
- text-decoration: var(
1952
- --_ctm-mob-dn-pr-se-ue,
1953
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
1954
- );
1955
- // margin-left: 10px;
1956
- }
1957
- }
1958
- }
1959
- }
1960
-
1961
- // for dropdown
1962
-
1963
- .language__conatiner {
1964
- background-color: var(
1965
- --_ctm-mob-dn-dn-se-wt-se-bd-cr,
1966
- var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
1967
- );
1968
-
1969
- // border-color: var(
1970
- // --_ctm-mob-dn-dn-se-wt-se-br-cr,
1971
- // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
1972
- // );
1973
-
1974
- // border-style: var(
1975
- // --_ctm-mob-dn-dn-se-wt-se-br-se,
1976
- // var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
1977
- // );
1978
-
1979
- // border-width: var(
1980
- // --_ctm-mob-dn-dn-se-wt-se-br-wh,
1981
- // var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
1982
- // );
1983
-
1984
- // border: 1px solid
1985
- // var(
1986
- // --_ctm-mob-dn-dn-se-wt-se-br-cr,
1987
- // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
1988
- // );
1989
-
1990
- border-radius: var(
1991
- --_ctm-mob-dn-dn-se-wt-se-br-rs,
1992
- var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
1993
- );
1994
-
1995
- box-shadow: var(
1996
- --_show-shadow,
1997
- var(
1998
- --_ctm-mob-dn-dn-se-wt-se-sw-ae,
1999
- var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
2000
- )
2001
- var(
2002
- --_ctm-mob-dn-dn-se-wt-se-sw-br,
2003
- var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
2004
- )
2005
- var(
2006
- --_ctm-mob-dn-dn-se-wt-se-sw-sd,
2007
- var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
2008
- )
2009
- var(
2010
- --_ctm-mob-dn-dn-se-wt-se-sw-cr,
2011
- var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
2012
- )
2013
- );
2014
-
2015
- padding: var(
2016
- --_ctm-mob-dn-dn-se-lt-ss-pg,
2017
- var(--_ctm-tab-dn-dn-se-lt-ss-pg, var(--_ctm-dn-dn-se-lt-ss-pg))
2018
- );
2019
- // gap: var(
2020
- // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
2021
- // var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg))
2022
- // );
2023
- display: flex;
2024
- gap: var(
2025
- --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2026
- var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2027
- );
2028
-
2029
- .option:hover {
2030
- --_sf-hr-bd-cr: var(
2031
- --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2032
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
2033
- );
2034
- --_sf-hr-br-cr: var(
2035
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2036
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
2037
- );
2038
- --_sf-hr-br-se: var(
2039
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2040
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
2041
- );
2042
- --_sf-hr-br-wh: var(
2043
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2044
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
2045
- );
2046
- --_sf-hr-br-rs: var(
2047
- --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2048
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2049
- );
2050
-
2051
- // for shadow
2052
- --_sf-hr-sw-ae: var(
2053
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2054
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2055
- );
2056
- --_sf-hr-sw-br: var(
2057
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2058
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2059
- );
2060
- --_sf-hr-sw-hr: var(
2061
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2062
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2063
- );
2064
- --_sf-hr-sw-cr: var(
2065
- --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2066
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2067
- );
2068
-
2069
- // for font
2070
-
2071
- --_sf-hr-cr: var(
2072
- --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2073
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2074
- );
2075
- --_sf-hr-ft-fy: var(
2076
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2077
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2078
- );
2079
- --_sf-hr-ft-se: var(
2080
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2081
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2082
- );
2083
- --_sf-hr-ft-wt: var(
2084
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2085
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2086
- );
2087
- --_sf-hr-ft-se-ic: var(
2088
- --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2089
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
2090
- );
2091
- --_sf-hr-tt-an: var(
2092
- --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2093
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2094
- );
2095
- --_sf-hr-lr-sg: var(
2096
- --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2097
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2098
- );
2099
- --_sf-hr-le-ht: var(
2100
- --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2101
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2102
- );
2103
-
2104
- --_sf-hr-ue: var(
2105
- --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2106
- var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2107
- );
2108
- }
2109
-
2110
- .option[data-selected="true"] {
2111
- --_sf-sd-bd-cr: var(
2112
- --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2113
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2114
- );
2115
- --_sf-sd-br-cr: var(
2116
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2117
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2118
- );
2119
- --_sf-sd-br-se: var(
2120
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2121
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2122
- );
2123
- --_sf-sd-br-wh: var(
2124
- --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2125
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2126
- );
2127
- // new
2128
- --_sf-sd-sw-ae: var(
2129
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2130
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2131
- );
2132
- --_sf-sd-sw-br: var(
2133
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2134
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2135
- );
2136
- --_sf-sd-sw-sd: var(
2137
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2138
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2139
- );
2140
- --_sf-sd-sw-cr: var(
2141
- --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2142
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2143
- );
2144
-
2145
- // for font
2146
-
2147
- --_sf-sd-cr: var(
2148
- --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2149
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2150
- );
2151
- --_sf-sd-ft-fy: var(
2152
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2153
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2154
- );
2155
- --_sf-sd-ft-se: var(
2156
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2157
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2158
- );
2159
- --_sf-sd-ft-wt: var(
2160
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2161
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2162
- );
2163
- --_sf-sd-ft-se-ic: var(
2164
- --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2165
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
2166
- );
2167
- --_sf-sd-tt-an: var(
2168
- --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2169
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2170
- );
2171
- --_sf-sd-lr-sg: var(
2172
- --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2173
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2174
- );
2175
- --_sf-sd-le-ht: var(
2176
- --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2177
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2178
- );
2179
-
2180
- --_sf-sd-ue: var(
2181
- --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2182
- var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2183
- );
2184
- }
2185
-
2186
- .option {
2187
- width: 100%;
2188
- display: flex;
2189
- align-items: center;
2190
- cursor: pointer;
2191
- justify-content: var(
2192
- --_ctm-mob-dn-dn-se-lt-ss-at,
2193
- var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2194
- );
2195
-
2196
- position: relative;
2197
- box-sizing: border-box;
2198
-
2199
- padding: var(
2200
- --_ctm-mob-dn-dn-se-lt-ss-im-pg,
2201
- var(--_ctm-tab-dn-dn-se-lt-ss-im-pg, var(--_ctm-dn-dn-se-lt-ss-im-pg))
2202
- );
2203
- gap: var(
2204
- --_ctm-mob-dn-dn-se-lt-ss-im-sg,
2205
- var(--_ctm-tab-dn-dn-se-lt-ss-im-sg, var(--_ctm-dn-dn-se-lt-ss-im-sg))
2206
- );
2207
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2208
-
2209
- background-color: var(
2210
- --_sf-hr-bd-cr,
2211
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2212
- );
2213
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2214
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2215
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2216
-
2217
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2218
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2219
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2220
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2221
- //
2222
- &[data-selected="true"] {
2223
- border-color: var(
2224
- --_sf-sd-br-cr,
2225
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2226
- );
2227
-
2228
- background-color: var(
2229
- --_sf-sd-bd-cr,
2230
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2231
- );
2232
- border-style: var(
2233
- --_sf-sd-br-se,
2234
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2235
- );
2236
- border-width: var(
2237
- --_sf-sd-br-wh,
2238
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2239
- );
2240
- border-radius: var(
2241
- --_sf-sd-br-rs,
2242
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2243
- );
2244
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2245
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2246
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2247
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2248
- .language__name {
2249
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2250
- font-family: var(
2251
- --_sf-sd-ft-fy,
2252
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2253
- );
2254
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2255
- font-weight: 400;
2256
- // font-weight: var(
2257
- // --_sf-sd-ft-wt,
2258
- // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2259
- // );
2260
- font-style: var(
2261
- --_sf-sd-ft-se-ic,
2262
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2263
- );
2264
- text-align: var(
2265
- --_sf-sd-tt-an,
2266
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2267
- );
2268
- letter-spacing: var(
2269
- --_sf-sd-lr-sg,
2270
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2271
- );
2272
- line-height: var(
2273
- --_sf-sd-le-ht,
2274
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2275
- );
2276
- text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2277
- }
2278
- }
2279
- }
2280
- &[data-flex-direction="column"] {
2281
- .language__name {
2282
- // white-space: unset;
2283
- white-space: nowrap !important;
2284
- width: 150px;
2285
- overflow: hidden;
2286
- text-overflow: ellipsis;
2287
- }
2288
- }
2289
- &[data-flex-direction="row"] {
2290
- overflow-x: auto;
2291
- }
2292
- &[data-show-divider="true"] {
2293
- &[data-flex-direction="row"] {
2294
- .option:not(:last-child)::before {
2295
- content: "";
2296
- position: absolute;
2297
- top: 0;
2298
- bottom: 0; /* For full height divider */
2299
- right: calc(
2300
- -1 *
2301
- (
2302
- var(
2303
- --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2304
- var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2305
- ) /
2306
- 2
2307
- )
2308
- ); /* Half of your gap, assuming divider is centered in the gap */
2309
- width: var(
2310
- --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2311
- var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2312
- ); /* Divider thickness */
2313
- background-color: var(
2314
- --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2315
- var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2316
- ); /* Divider color */
2317
- }
2318
- }
2319
- &[data-flex-direction="column"] {
2320
- .option:not(:last-child)::before {
2321
- content: "";
2322
- position: absolute;
2323
- left: 0;
2324
- right: 0;
2325
- bottom: calc(
2326
- -1 *
2327
- (
2328
- var(
2329
- --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2330
- var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2331
- ) /
2332
- 2
2333
- )
2334
- );
2335
- height: var(
2336
- --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2337
- var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2338
- );
2339
- background-color: var(
2340
- --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2341
- var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2342
- );
2343
- }
2344
- }
2345
- }
2346
-
2347
- .option_select {
2348
- width: 100%;
2349
- display: flex;
2350
- align-items: center;
2351
- position: relative;
2352
- padding: 8px 16px 10px 16px;
2353
- .language__name {
2354
- padding-right: 20px;
2355
- }
2356
- }
2357
-
2358
- .language__name {
2359
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2360
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2361
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2362
- font-weight: 400;
2363
- font-style: var(
2364
- --_sf-hr-ft-se-ic,
2365
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2366
- );
2367
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2368
- letter-spacing: var(
2369
- --_sf-hr-lr-sg,
2370
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2371
- );
2372
- line-height: var(
2373
- --_sf-hr-le-ht,
2374
- prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2375
- );
2376
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2377
- white-space: nowrap;
2378
- }
2379
-
2380
- //Dropdown
2381
- .value__selected__new {
2382
- width: 100%;
2383
- padding: 8px 12px;
2384
- text-align: left;
2385
- }
2386
- .est__dropdown__main {
2387
- position: relative;
2388
- width: 100%;
2389
- margin-top: 0px;
2390
- label {
2391
- font-size: 14px;
2392
- color: var(--_gray-700);
2393
- margin-bottom: 8px;
2394
- display: block;
2395
- }
2396
-
2397
- .est__dropdown {
2398
- cursor: pointer;
2399
- position: relative;
2400
- color: var(--_gray-700);
2401
-
2402
- // border-radius: 6px;
2403
- // background-color: #fff;
2404
- display: flex;
2405
- justify-content: space-between;
2406
- align-items: center;
2407
- padding: prepareMediaVariable(--_ctm-dn-dn-se-dn-se-pg);
2408
-
2409
- width: 100%;
2410
-
2411
- &.open .list {
2412
- display: flex;
2413
- }
2414
- .est__dropdown__button {
2415
- display: flex;
2416
- align-items: center;
2417
- width: 100%;
2418
- }
2419
-
2420
- .est__dropdown__icon {
2421
- position: absolute;
2422
- // top: 10px;
2423
- right: 5px;
2424
- transition: all 200ms ease-in;
2425
- &.open {
2426
- transform: rotate(180deg);
2427
- transform: all 200ms ease-in;
2428
- }
2429
- &.close {
2430
- transform: rotate(0deg);
2431
- transform: all 200ms ease-in;
2432
- }
2433
- }
2434
-
2435
- .list {
2436
- display: none;
2437
- flex-direction: column;
2438
- border: 1px solid var(--_gray-200);
2439
- border-radius: 6px;
2440
- position: absolute;
2441
- top: 100%;
2442
- left: 0;
2443
- width: 100%;
2444
- background-color: #fff;
2445
- border-radius: 4px;
2446
- z-index: var(--_higher-zIndex);
2447
- max-height: 200px;
2448
- overflow-y: auto;
2449
- // margin-top: var(
2450
- // --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2451
- // var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2452
- // );
2453
- gap: var(
2454
- --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2455
- var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2456
- );
2457
-
2458
- &.top {
2459
- bottom: 100%;
2460
- top: auto;
2461
- }
2462
-
2463
- .option {
2464
- cursor: pointer;
2465
- }
2466
- }
2467
- }
2468
- }
2469
- }
2470
- }
2471
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="userElements"] {
9
+ // width: var(
10
+ // --_sf-mob-el-wh-st-mx,
11
+ // var(
12
+ // --_sf-tab-el-wh-st-mx,
13
+ // var(
14
+ // --_sf-el-wh-st-mx,
15
+ // calc(
16
+ // 1% *
17
+ // var(
18
+ // --_ctm-mob-bun-ele-nw-wh-vl,
19
+ // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
20
+ // )
21
+ // )
22
+ // )
23
+ // )
24
+ // );
25
+ width: var(
26
+ --_sf-el-wh-st-mx,
27
+ calc(
28
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
29
+ )
30
+ );
31
+
32
+ height: auto;
33
+
34
+ margin: var(
35
+ --_ctm-mob-bun-lt-mn,
36
+ var(
37
+ --_ctm-tab-bun-lt-mn,
38
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
39
+ )
40
+ );
41
+
42
+ & > div {
43
+ &.wrapper {
44
+ width: 100%;
45
+ }
46
+ }
47
+
48
+ .embla {
49
+ width: 100%;
50
+ height: 100%;
51
+ position: relative;
52
+ display: flex;
53
+ flex-direction: column;
54
+ // overflow: hidden;
55
+
56
+ .embla__viewport {
57
+ width: 100%;
58
+ height: 100%;
59
+ position: relative;
60
+ display: flex;
61
+ flex-direction: column;
62
+
63
+ overflow: hidden;
64
+
65
+ .embla__container {
66
+ width: 100%;
67
+ height: 100%;
68
+ // display: grid;
69
+ // grid-template-rows: 100%;
70
+
71
+ // grid-template-columns: repeat(
72
+ // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
73
+ // calc(
74
+ // 100% /
75
+ // var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
76
+ // )
77
+ // );
78
+
79
+ // grid-auto-flow: column;
80
+ display: flex;
81
+ flex-direction: row;
82
+ align-items: center;
83
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
84
+
85
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
86
+ height: calc(
87
+ 100% - calc(
88
+ var(
89
+ --_ctm-mob-dn-pn-as-aw-se,
90
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
91
+ ) +
92
+ 10px
93
+ )
94
+ );
95
+ }
96
+
97
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
98
+ height: calc(
99
+ 100% - calc(
100
+ var(
101
+ --_ctm-mob-dn-pn-le-le-ht,
102
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
103
+ ) +
104
+ 20px
105
+ )
106
+ );
107
+ }
108
+
109
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
110
+ height: calc(
111
+ 100% - calc(
112
+ var(
113
+ --_ctm-mob-dn-pn-ds-dt-se,
114
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
115
+ ) +
116
+ 20px
117
+ )
118
+ );
119
+ }
120
+
121
+ .embla__slide {
122
+ // width: 100%;
123
+ height: 100%;
124
+ white-space: nowrap;
125
+ position: relative;
126
+ }
127
+ }
128
+ }
129
+ &:not([data-display-style="Column"]) {
130
+ .embla__container {
131
+ grid-auto-columns: calc(
132
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
133
+ );
134
+ }
135
+ }
136
+
137
+ .arrow-navigation {
138
+ display: flex;
139
+ position: absolute;
140
+ top: 50%;
141
+ left: 50%;
142
+ width: 100%;
143
+ justify-content: space-between;
144
+ transform: translate(-50%, -50%);
145
+ // padding-left: 20px;
146
+ &[data-control-type="Side"] {
147
+ .left-button,
148
+ .right-button {
149
+ background-color: transparent;
150
+ }
151
+ }
152
+ &[data-background-shape="Round"] {
153
+ .left-button,
154
+ .right-button {
155
+ background-color: #f2f5f5;
156
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
157
+ }
158
+ }
159
+ &[data-control-type="Bottom-Overflow"] {
160
+ transform: translateX(-50%);
161
+ width: 100%;
162
+ justify-content: center;
163
+ gap: 12px;
164
+ top: unset;
165
+ bottom: 6px;
166
+ }
167
+ &[data-control-type="Bottom"] {
168
+ transform: unset;
169
+ position: static;
170
+ width: 100%;
171
+ justify-content: center;
172
+ gap: 12px;
173
+ margin-top: 10px;
174
+ }
175
+ .left-button {
176
+ padding: 10px;
177
+ border-radius: 50%;
178
+ border: none;
179
+ width: var(
180
+ --_ctm-mob-dn-pn-as-aw-se,
181
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
182
+ );
183
+ height: var(
184
+ --_ctm-mob-dn-pn-as-aw-se,
185
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
186
+ );
187
+
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ cursor: pointer;
192
+ outline: none;
193
+ margin-left: 12px;
194
+ &:disabled {
195
+ & svg {
196
+ path {
197
+ stroke: rgb(192, 192, 192);
198
+ }
199
+ }
200
+ }
201
+ }
202
+ .right-button {
203
+ border-radius: 50%;
204
+ border: none;
205
+ width: var(
206
+ --_ctm-mob-dn-pn-as-aw-se,
207
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
208
+ );
209
+ height: var(
210
+ --_ctm-mob-dn-pn-as-aw-se,
211
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
212
+ );
213
+
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ cursor: pointer;
218
+ outline: none;
219
+ margin-right: 12px;
220
+ padding: 10px;
221
+
222
+ &:disabled {
223
+ & svg {
224
+ path {
225
+ stroke: rgb(192, 192, 192);
226
+ }
227
+ }
228
+ }
229
+ }
230
+ .icon {
231
+ display: flex;
232
+
233
+ svg {
234
+ width: calc(
235
+ var(
236
+ --_ctm-mob-dn-pn-as-aw-se,
237
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
238
+ ) *
239
+ 0.5
240
+ );
241
+ height: calc(
242
+ var(
243
+ --_ctm-mob-dn-pn-as-aw-se,
244
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
245
+ ) *
246
+ 0.5
247
+ );
248
+
249
+ path {
250
+ stroke: var(
251
+ --_ctm-mob-dn-pn-as-aw-cr,
252
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
253
+ );
254
+ }
255
+ }
256
+ }
257
+ }
258
+
259
+ &[data-control-type="Side"] {
260
+ .embla__viewport {
261
+ width: calc(100% - 60px);
262
+ margin-inline: auto;
263
+ }
264
+ .left-button {
265
+ position: absolute;
266
+ left: 0;
267
+ top: 50%;
268
+ transform: translateY(-50%);
269
+ }
270
+ .right-button {
271
+ position: absolute;
272
+
273
+ right: 0;
274
+ top: 50%;
275
+ transform: translateY(-50%);
276
+ }
277
+ @media (max-width: 1024px) {
278
+ .embla__viewport {
279
+ width: calc(100% - 40px);
280
+ }
281
+ }
282
+ }
283
+
284
+ &[data-thumbnail-placement="top"] {
285
+ flex-direction: column-reverse;
286
+ }
287
+ &[data-thumbnail-placement="bottom"] {
288
+ flex-direction: column;
289
+ }
290
+ &[data-thumbnail-placement="left"] {
291
+ flex-direction: row-reverse;
292
+
293
+ .embla__thumbs {
294
+ width: var(--_ctm-lt-tl-se);
295
+ height: 100%;
296
+
297
+ & .embla__thumbs__container {
298
+ flex-direction: column;
299
+ height: 100%;
300
+ }
301
+ }
302
+ }
303
+ &[data-thumbnail-placement="right"] {
304
+ flex-direction: row;
305
+ .embla__thumbs {
306
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
307
+
308
+ height: 100%;
309
+
310
+ & .embla__thumbs__container {
311
+ flex-direction: column;
312
+ height: 100%;
313
+ }
314
+ }
315
+ }
316
+ .embla__dots {
317
+ display: flex;
318
+ flex-wrap: wrap;
319
+ justify-content: center;
320
+ align-items: center;
321
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
322
+ gap: 6px;
323
+ margin-top: 16px;
324
+
325
+ &[data-control-type="Bottom-Overflow"] {
326
+ position: absolute;
327
+ bottom: 10px;
328
+ left: 50%;
329
+ transform: translateX(-50%);
330
+ width: 75%;
331
+ }
332
+ .embla__dot {
333
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
334
+ -webkit-appearance: none;
335
+ appearance: none;
336
+ background-color: var(
337
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
338
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
339
+ );
340
+
341
+ touch-action: manipulation;
342
+ display: inline-flex;
343
+ text-decoration: none;
344
+ cursor: pointer;
345
+ border: 0;
346
+ padding: 0;
347
+ margin: 0;
348
+ // width: 0.6rem;
349
+ // height: 0.6rem;
350
+ width: var(
351
+ --_ctm-mob-dn-pn-ds-dt-se,
352
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
353
+ );
354
+ height: var(
355
+ --_ctm-mob-dn-pn-ds-dt-se,
356
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
357
+ );
358
+
359
+ display: flex;
360
+ align-items: center;
361
+ justify-content: center;
362
+ border-radius: 50%;
363
+ }
364
+ .embla__dot:after {
365
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
366
+ width: var(
367
+ --_ctm-mob-dn-pn-ds-dt-se,
368
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
369
+ );
370
+ height: var(
371
+ --_ctm-mob-dn-pn-ds-dt-se,
372
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
373
+ );
374
+
375
+ border-radius: 50%;
376
+ display: flex;
377
+ align-items: center;
378
+ content: "";
379
+ }
380
+ .embla__dot--selected:after {
381
+ box-shadow: inset 0 0 0 1px var(--text-body);
382
+ background-color: var(
383
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
384
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
385
+ );
386
+ }
387
+ &[data-slider-control="Pagination Line"] {
388
+ .embla__dot {
389
+ width: var(
390
+ --_ctm-mob-dn-pn-le-le-wh,
391
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
392
+ );
393
+ height: var(
394
+ --_ctm-mob-dn-pn-le-le-ht,
395
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
396
+ );
397
+ background-color: var(
398
+ --_ctm-mob-dn-pn-le-or-le-cr,
399
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
400
+ );
401
+ border-radius: 6px;
402
+ }
403
+
404
+ .embla__dot--selected:after {
405
+ box-shadow: inset 0 0 0 1px var(--text-body);
406
+ border-radius: 6px;
407
+ width: var(
408
+ --_ctm-mob-dn-pn-le-le-wh,
409
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
410
+ );
411
+ height: var(
412
+ --_ctm-mob-dn-pn-le-le-ht,
413
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
414
+ );
415
+ background-color: var(
416
+ --_ctm-mob-dn-pn-le-ct-le-cr,
417
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
418
+ );
419
+ }
420
+ }
421
+ }
422
+
423
+ .embla__thumbs {
424
+ width: 100%;
425
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
426
+
427
+ position: relative;
428
+ display: grid;
429
+ grid-template-columns: 1fr;
430
+ overflow: hidden;
431
+ // margin: 10px;
432
+ padding: 10px;
433
+
434
+ .embla__thumbs__viewport {
435
+ width: 100%;
436
+ height: 100%;
437
+ position: relative;
438
+ display: flex;
439
+ flex-direction: column;
440
+
441
+ overflow: hidden;
442
+ }
443
+ .embla__thumbs__container {
444
+ display: flex;
445
+ flex-direction: row;
446
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
447
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
448
+
449
+ width: 100%;
450
+ // justify-content: center;
451
+ // height: 200px;
452
+
453
+ .embla__thumbs__slide {
454
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
455
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
456
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
457
+
458
+ & img {
459
+ width: 100%;
460
+ height: 100%;
461
+ }
462
+ }
463
+ }
464
+ }
465
+ }
466
+ .user__element__container {
467
+ display: flex;
468
+ flex-direction: column;
469
+
470
+ width: 100%;
471
+ gap: prepareMediaVariable(--_ctm-lt-im-sg);
472
+ background-color: var(
473
+ --_ctm-mob-dn-wt-se-bd-cr,
474
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
475
+ );
476
+
477
+ border-color: var(
478
+ --_ctm-mob-dn-wt-se-br-cr,
479
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
480
+ );
481
+
482
+ border-style: var(
483
+ --_ctm-mob-dn-wt-se-br-se,
484
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
485
+ );
486
+
487
+ border-width: var(
488
+ --_ctm-mob-dn-wt-se-br-wh,
489
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
490
+ );
491
+
492
+ border-radius: var(
493
+ --_ctm-mob-dn-wt-se-br-rs,
494
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
495
+ );
496
+
497
+ box-shadow: var(
498
+ --_show-shadow,
499
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
500
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
501
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
502
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
503
+ );
504
+
505
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
506
+ .user__element__item {
507
+ position: relative;
508
+ }
509
+
510
+ &[data-display-type="Vertical"] {
511
+ &[data-show-divider="true"] {
512
+ .user__element__item:not(:last-child)::before {
513
+ content: "";
514
+ position: absolute;
515
+ left: 0;
516
+ right: 0;
517
+ bottom: calc(
518
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
519
+ );
520
+
521
+ height: var(
522
+ --_ctm-mob-dn-wt-se-dr-wt,
523
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
524
+ );
525
+ background-color: var(
526
+ --_ctm-mob-dn-wt-se-dr-cr,
527
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
528
+ );
529
+ }
530
+ }
531
+
532
+ .user_elements_user_info_wrapper {
533
+ flex-direction: column;
534
+ align-items: flex-start;
535
+
536
+ position: relative;
537
+
538
+ .user_elements_user_data_wrapper {
539
+ gap: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2);
540
+ display: flex;
541
+ width: 100%;
542
+ // max-height: 250px;
543
+ flex-direction: column;
544
+ white-space: nowrap;
545
+ align-items: center;
546
+ }
547
+ }
548
+
549
+ .user_elements_quota_wrapper {
550
+ flex-direction: column;
551
+ align-items: flex-start;
552
+
553
+ position: relative;
554
+ }
555
+
556
+ .user_elements_allowance_wrapper {
557
+ flex-direction: column;
558
+ align-items: flex-start;
559
+ position: relative;
560
+ }
561
+
562
+ .user_elements_user_info_secondary_wrapper {
563
+ flex-direction: column;
564
+ align-items: flex-start;
565
+ position: relative;
566
+ }
567
+
568
+ &[data-content-alignment="Horizontal"] {
569
+ .user_elements_user_info_wrapper {
570
+ flex-direction: row;
571
+ justify-content: space-between;
572
+ align-items: center;
573
+ .user_elements_user_name_wrapper {
574
+ width: unset;
575
+ align-items: center;
576
+ }
577
+
578
+ .user_elements_user_data_wrapper {
579
+ // max-height: 250px;
580
+ flex-direction: row;
581
+ width: unset;
582
+ }
583
+ @media (max-width: 767px) {
584
+ .user_elements_user_data_wrapper {
585
+ flex-direction: column;
586
+ align-items: flex-start;
587
+ }
588
+ }
589
+ }
590
+ .user_elements_quota_wrapper {
591
+ flex-direction: row;
592
+ align-items: center;
593
+ flex-wrap: wrap;
594
+ .user_elements_user_name_wrapper {
595
+ flex-direction: row;
596
+ white-space: nowrap;
597
+ }
598
+ .quote_vertical_scroll_wrapper {
599
+ flex-direction: row;
600
+ flex-grow: 1;
601
+ width: unset;
602
+ }
603
+ @media (max-width: 1024px) {
604
+ .quote_vertical_scroll_wrapper {
605
+ width: 100%;
606
+ }
607
+ }
608
+ .embla__slide:not(:last-child)::before {
609
+ content: "";
610
+ position: absolute;
611
+
612
+ background-color: var(
613
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
614
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
615
+ );
616
+ right: calc(
617
+ -1 *
618
+ (
619
+ var(
620
+ --_ctm-mob-lt-qa-im-sg,
621
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
622
+ ) /
623
+ 2
624
+ )
625
+ );
626
+ height: 100%;
627
+ width: var(
628
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
629
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
630
+ );
631
+ }
632
+ .quota_label {
633
+ white-space: nowrap;
634
+ }
635
+ .quote_info_wrapper {
636
+ justify-content: flex-start;
637
+ align-items: center;
638
+ }
639
+ .embla__container {
640
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
641
+ }
642
+ }
643
+ .user_elements_allowance_wrapper {
644
+ flex-direction: row;
645
+ flex-wrap: wrap;
646
+ align-items: center;
647
+ .embla__slide:not(:last-child)::before {
648
+ content: "";
649
+ position: absolute;
650
+
651
+ background-color: var(
652
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
653
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
654
+ );
655
+ right: calc(
656
+ -1 *
657
+ (
658
+ var(
659
+ --_ctm-mob-lt-ae-im-sg,
660
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
661
+ ) /
662
+ 2
663
+ )
664
+ );
665
+ height: 100%;
666
+ width: var(
667
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
668
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
669
+ );
670
+ left: unset;
671
+ }
672
+ .allowance_vertical_scroll_wrapper {
673
+ width: unset;
674
+ flex-grow: 1;
675
+ }
676
+ @media (max-width: 1024px) {
677
+ .allowance_vertical_scroll_wrapper {
678
+ width: 100%;
679
+ }
680
+ }
681
+ .embla__container {
682
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
683
+ }
684
+ }
685
+ .user_elements_user_info_secondary_wrapper {
686
+ flex-direction: row;
687
+ justify-content: space-between;
688
+ align-items: center;
689
+ .order_wrapper {
690
+ justify-content: flex-start;
691
+ }
692
+ }
693
+ .secondary_vertical_scroll_wrapper {
694
+ flex-direction: row;
695
+ width: unset;
696
+ justify-content: space-between;
697
+ align-items: center;
698
+ width: 100%;
699
+ gap: 16px;
700
+ @media (max-width: 768px) {
701
+ flex-wrap: wrap;
702
+ }
703
+ .child {
704
+ flex-direction: column;
705
+ justify-content: flex-start;
706
+ width: 100%;
707
+ height: 44px;
708
+ }
709
+ }
710
+ @media (max-width: 1024px) {
711
+ .user_elements_user_info_wrapper {
712
+ flex-direction: column;
713
+ align-items: flex-start;
714
+ }
715
+ .user_elements_quota_wrapper {
716
+ flex-direction: column;
717
+ align-items: flex-start;
718
+ }
719
+ .user_elements_allowance_wrapper {
720
+ flex-direction: column;
721
+ align-items: flex-start;
722
+ }
723
+ .secondary_vertical_scroll_wrapper {
724
+ gap: calc(prepareMediaVariable(--_ctm-lt-im-sg) / 2);
725
+ .child {
726
+ height: 100%;
727
+ }
728
+ .child:not(:last-child) {
729
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
730
+ padding-bottom: calc(prepareMediaVariable(--_ctm-lt-im-sg) / 2);
731
+ }
732
+ }
733
+ }
734
+ }
735
+ }
736
+ &[data-display-type="Horizontal"] {
737
+ flex-direction: row;
738
+ .user__element__item {
739
+ width: 100%;
740
+ flex-grow: 1;
741
+ }
742
+ .user__element__item {
743
+ min-width: 200px;
744
+ }
745
+
746
+ &[data-show-divider="true"] {
747
+ .user__element__item:not(:last-child)::before {
748
+ content: "";
749
+ position: absolute;
750
+ top: 0;
751
+ bottom: 0;
752
+ right: calc(
753
+ -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
754
+ );
755
+
756
+ width: var(
757
+ --_ctm-mob-dn-wt-se-dr-wt,
758
+ var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
759
+ );
760
+ background-color: var(
761
+ --_ctm-mob-dn-wt-se-dr-cr,
762
+ var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
763
+ );
764
+ }
765
+ }
766
+ }
767
+
768
+ // without conditions
769
+
770
+ .user_elements_user_info_wrapper {
771
+ display: flex;
772
+ flex-direction: column;
773
+
774
+ background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
775
+ border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
776
+ border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
777
+ border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
778
+ border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
779
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
780
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
781
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-im-sg);
782
+
783
+ padding: prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-pg);
784
+
785
+ .user_elements_user_name_wrapper {
786
+ display: flex;
787
+ gap: 6px;
788
+ &[data-has-link="true"] {
789
+ cursor: pointer;
790
+ &:hover {
791
+ color: var(--_primary-500);
792
+ }
793
+ }
794
+ .user_elements_user_name {
795
+ display: flex;
796
+ color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
797
+ font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
798
+ font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
799
+ font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
800
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
801
+ line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht);
802
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
803
+ text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
804
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
805
+ }
806
+
807
+ .icon {
808
+ cursor: pointer;
809
+ svg {
810
+ width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
811
+ height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
812
+ path {
813
+ stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
814
+ }
815
+ }
816
+ }
817
+ }
818
+
819
+ .user_elements_user_data_wrapper {
820
+ .user_elements_user_data {
821
+ display: flex;
822
+
823
+ .user_elements_user_id {
824
+ display: flex;
825
+
826
+ gap: 6px;
827
+ align-items: center;
828
+ color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
829
+ font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
830
+ font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
831
+ font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
832
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
833
+ line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht);
834
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
835
+ text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
836
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
837
+
838
+ .icon {
839
+ cursor: pointer;
840
+ svg {
841
+ width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
842
+ height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
843
+ path {
844
+ stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
845
+ }
846
+ }
847
+ }
848
+ }
849
+
850
+ .user_elements_user_email {
851
+ display: flex;
852
+
853
+ gap: 6px;
854
+ align-items: center;
855
+ color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
856
+ font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
857
+ font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
858
+ font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
859
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
860
+ line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht);
861
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
862
+ text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
863
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
864
+
865
+ .icon {
866
+ cursor: pointer;
867
+ svg {
868
+ width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
869
+ height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
870
+ path {
871
+ stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
872
+ }
873
+ }
874
+ }
875
+ }
876
+
877
+ .user_elements_user_phone {
878
+ display: flex;
879
+
880
+ gap: 6px;
881
+ align-items: center;
882
+ color: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
883
+ font-family: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
884
+ font-size: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
885
+ font-style: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
886
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
887
+ line-height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht);
888
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
889
+ text-align: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
890
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
891
+
892
+ .icon {
893
+ cursor: pointer;
894
+ svg {
895
+ width: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
896
+ height: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
897
+ path {
898
+ stroke: prepareMediaVariable(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
899
+ }
900
+ }
901
+ }
902
+ }
903
+ }
904
+ }
905
+ .child {
906
+ position: relative;
907
+ }
908
+ &[data-show-divider="true"] {
909
+ .child:not(:last-child)::after {
910
+ content: "";
911
+ margin-left: calc(prepareMediaVariable(--_ctm-dn-ur-io-dn-fl-ad-oy-im-gp) / 2);
912
+ // margin-top: 3px;
913
+ width: 6px;
914
+ height: 6px;
915
+ // width: var(--line-w, 1px);
916
+ // height: 20px;
917
+ background-color: var(
918
+ --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
919
+ var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
920
+ );
921
+ margin-block: auto;
922
+ border-radius: 50%;
923
+ // content: "";
924
+ // position: absolute;
925
+ // left: 0;
926
+ // right: 0;
927
+ // bottom: calc(
928
+ // -1 *
929
+ // (
930
+ // var(
931
+ // --_ctm-mob-lt-ur-io-im-sg,
932
+ // var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
933
+ // ) /
934
+ // 2
935
+ // )
936
+ // );
937
+
938
+ // height: var(
939
+ // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
940
+ // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
941
+ // );
942
+ // background-color: var(
943
+ // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
944
+ // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
945
+ // );
946
+ }
947
+ // .user_elements_user_name_wrapper {
948
+ // width: 100%;
949
+ // position: relative;
950
+ // &::after {
951
+ // content: "";
952
+ // position: absolute;
953
+ // left: 0;
954
+ // right: 0;
955
+ // bottom: calc(
956
+ // -1 *
957
+ // (
958
+ // var(
959
+ // --_ctm-mob-lt-ur-io-im-sg,
960
+ // var(--_ctm-tab-lt-ur-io-im-sg, var(--_ctm-lt-ur-io-im-sg))
961
+ // ) /
962
+ // 2
963
+ // )
964
+ // );
965
+ // height: var(
966
+ // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-wt,
967
+ // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-wt))
968
+ // );
969
+
970
+ // background-color: var(
971
+ // --_ctm-mob-dn-ur-io-dn-fl-ad-oy-dr-cr,
972
+ // var(--_ctm-tab-dn-ur-io-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ur-io-dn-fl-ad-oy-dr-cr))
973
+ // );
974
+ // }
975
+ // }
976
+ }
977
+ }
978
+
979
+ .user_elements_quota_wrapper {
980
+ display: flex;
981
+ flex-direction: column;
982
+ width: 100%;
983
+
984
+ background-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
985
+ border-color: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
986
+ border-radius: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
987
+ border-style: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
988
+ border-width: prepareMediaVariable(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
989
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
990
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
991
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
992
+ .quota_label_wrapper {
993
+ display: flex;
994
+ flex-direction: column;
995
+ min-width: 109px;
996
+ gap: 4px;
997
+
998
+ .quota_label {
999
+ display: flex;
1000
+
1001
+ color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-cr);
1002
+ font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
1003
+ font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1004
+ font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1005
+ font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
1006
+ line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-le-ht);
1007
+ letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg);
1008
+ text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1009
+ text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1010
+ }
1011
+ }
1012
+
1013
+ .quote_item_wrapper {
1014
+ display: flex;
1015
+ flex-direction: row;
1016
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1017
+
1018
+ .quote_info_wrapper {
1019
+ display: flex;
1020
+ gap: 12px;
1021
+ justify-content: space-between;
1022
+ .quota_name_wrapper {
1023
+ display: flex;
1024
+ flex-direction: column;
1025
+ // gap: 6px;
1026
+
1027
+ .quota_name {
1028
+ display: flex;
1029
+
1030
+ color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1031
+ font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1032
+ font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1033
+ font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1034
+ font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
1035
+ line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-le-ht);
1036
+ letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg);
1037
+ text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-tt-an);
1038
+ text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ne-dn-ue);
1039
+ }
1040
+
1041
+ .quota_expiry {
1042
+ display: flex;
1043
+
1044
+ color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-cr);
1045
+ font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
1046
+ font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
1047
+ font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
1048
+ font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
1049
+ line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-le-ht);
1050
+ letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg);
1051
+ text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-tt-an);
1052
+ text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-ey-dn-ue);
1053
+ }
1054
+ }
1055
+
1056
+ .quota_inventory_parent {
1057
+ display: flex;
1058
+ }
1059
+ .hilighted {
1060
+ font-size: 20px;
1061
+ font-weight: 700;
1062
+ color: var(--_thm-cs-be-cr-1);
1063
+ }
1064
+ .quota_inventory {
1065
+ display: flex;
1066
+ justify-content: center;
1067
+ align-items: center;
1068
+ margin-top: 6px;
1069
+ color: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-cr);
1070
+ font-family: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
1071
+ font-size: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1072
+ font-style: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1073
+ font-weight: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
1074
+ line-height: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-le-ht);
1075
+ letter-spacing: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg);
1076
+ text-align: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-tt-an);
1077
+ text-decoration: prepareMediaVariable(--_ctm-dn-qa-dn-qa-iy-dn-ue);
1078
+ }
1079
+ }
1080
+
1081
+ .quota_divider {
1082
+ content: "";
1083
+ height: auto;
1084
+ width: 1px;
1085
+ background-color: #d0d5dd;
1086
+ }
1087
+ }
1088
+
1089
+ &[data-show-divider="true"] {
1090
+ .quote_item_wrapper:not(:last-child)::before {
1091
+ content: "";
1092
+ position: absolute;
1093
+ left: 0;
1094
+ right: 0;
1095
+ bottom: calc(
1096
+ -1 *
1097
+ (
1098
+ var(
1099
+ --_ctm-mob-lt-qa-im-sg,
1100
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1101
+ ) /
1102
+ 2
1103
+ )
1104
+ );
1105
+
1106
+ height: var(
1107
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1108
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1109
+ );
1110
+ background-color: var(
1111
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1112
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1113
+ );
1114
+ }
1115
+ &[data-content-alignment="Vertical"] {
1116
+ .quota_label_wrapper {
1117
+ width: 100%;
1118
+ position: relative;
1119
+ &::after {
1120
+ content: "";
1121
+ position: absolute;
1122
+ left: 0;
1123
+ right: 0;
1124
+ bottom: calc(
1125
+ -1 *
1126
+ (
1127
+ var(
1128
+ --_ctm-mob-lt-qa-im-sg,
1129
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
1130
+ ) /
1131
+ 2
1132
+ )
1133
+ );
1134
+ height: var(
1135
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-wt,
1136
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-wt))
1137
+ );
1138
+ background-color: var(
1139
+ --_ctm-mob-dn-qa-dn-fl-ad-oy-dr-cr,
1140
+ var(--_ctm-tab-dn-qa-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-qa-dn-fl-ad-oy-dr-cr))
1141
+ );
1142
+ }
1143
+ }
1144
+ }
1145
+ }
1146
+
1147
+ .quote_vertical_scroll_wrap {
1148
+ height: auto;
1149
+ display: flex;
1150
+ width: 100%;
1151
+ flex-direction: column;
1152
+ gap: 16px;
1153
+
1154
+ .quote_item_wrapper {
1155
+ justify-content: space-between;
1156
+ width: 100%;
1157
+ align-items: center;
1158
+ gap: 16px;
1159
+ align-items: flex-start;
1160
+ flex-direction: column;
1161
+
1162
+ .quota_divider {
1163
+ height: 1px;
1164
+ width: 100%;
1165
+ }
1166
+ }
1167
+ }
1168
+ .quote_vertical_scroll_wrapper {
1169
+ overflow-y: auto;
1170
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1171
+ display: flex;
1172
+ width: 100%;
1173
+ // max-height: 250px;
1174
+ flex-direction: column;
1175
+
1176
+ .quote_item_wrapper {
1177
+ flex-direction: column;
1178
+ position: relative;
1179
+
1180
+ .quota_divider {
1181
+ width: 100%;
1182
+ height: 1px;
1183
+ }
1184
+ }
1185
+ }
1186
+ }
1187
+
1188
+ .user_elements_allowance_wrapper {
1189
+ display: flex;
1190
+ flex-direction: column;
1191
+ width: 100%;
1192
+
1193
+ background-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1194
+ border-color: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
1195
+ border-radius: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1196
+ border-style: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1197
+ border-width: prepareMediaVariable(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1198
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1199
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1200
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1201
+ .allowance_label_wrapper {
1202
+ display: flex;
1203
+ flex-direction: column;
1204
+ min-width: 109px;
1205
+ // align-items: center;
1206
+ gap: 4px;
1207
+
1208
+ .allowance_label {
1209
+ display: flex;
1210
+
1211
+ white-space: nowrap;
1212
+ color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1213
+ font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
1214
+ font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1215
+ font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1216
+ font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
1217
+ line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-le-ht);
1218
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg);
1219
+ text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-tt-an);
1220
+ text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-hg-dn-ue);
1221
+ }
1222
+ }
1223
+
1224
+ .allowance_upfront_wrapper {
1225
+ display: flex;
1226
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1227
+ flex-wrap: wrap;
1228
+ }
1229
+
1230
+ .allowance_item_wrapper {
1231
+ display: flex;
1232
+ flex-direction: row;
1233
+ gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);
1234
+
1235
+ .allowance_info_wrapper {
1236
+ display: flex;
1237
+ gap: 12px;
1238
+ .allowance_name_wrapper {
1239
+ display: flex;
1240
+ flex-direction: column;
1241
+ gap: 6px;
1242
+
1243
+ .allowance_name {
1244
+ display: flex;
1245
+
1246
+ color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1247
+ font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1248
+ font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1249
+ font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1250
+ font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
1251
+ line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-le-ht);
1252
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg);
1253
+ text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-tt-an);
1254
+ text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ne-dn-ue);
1255
+ }
1256
+
1257
+ .allowance_expiry {
1258
+ display: flex;
1259
+
1260
+ color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1261
+ font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1262
+ font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1263
+ font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1264
+ font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
1265
+ line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-le-ht);
1266
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg);
1267
+ text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-tt-an);
1268
+ text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-ue);
1269
+ }
1270
+ }
1271
+
1272
+ .allowance_inventory {
1273
+ display: flex;
1274
+ justify-content: center;
1275
+ align-items: center;
1276
+ color: prepareMediaVariable(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1277
+ font-family: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
1278
+ font-size: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1279
+ font-style: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1280
+ font-weight: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
1281
+ line-height: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-le-ht);
1282
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg);
1283
+ text-align: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-tt-an);
1284
+ text-decoration: prepareMediaVariable(--_ctm-dn-ae-dn-ae-iy-dn-ue);
1285
+ }
1286
+ }
1287
+ }
1288
+ &[data-show-divider="true"] {
1289
+ .allowance_item_wrapper:not(:last-child)::before {
1290
+ content: "";
1291
+ position: absolute;
1292
+ left: 0;
1293
+ right: 0;
1294
+ bottom: calc(
1295
+ -1 *
1296
+ (
1297
+ var(
1298
+ --_ctm-mob-lt-ae-im-sg,
1299
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1300
+ ) /
1301
+ 2
1302
+ )
1303
+ );
1304
+
1305
+ height: var(
1306
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1307
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1308
+ );
1309
+ background-color: var(
1310
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1311
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1312
+ );
1313
+ }
1314
+ &[data-content-alignment="Vertical"] {
1315
+ .allowance_label_wrapper {
1316
+ width: 100%;
1317
+ position: relative;
1318
+ gap: 10px;
1319
+ &::after {
1320
+ content: "";
1321
+ position: absolute;
1322
+ left: 0;
1323
+ right: 0;
1324
+ bottom: calc(
1325
+ -1 *
1326
+ (
1327
+ var(
1328
+ --_ctm-mob-lt-ae-im-sg,
1329
+ var(--_ctm-tab-lt-ae-im-sg, var(--_ctm-lt-ae-im-sg))
1330
+ ) /
1331
+ 2
1332
+ )
1333
+ );
1334
+ height: var(
1335
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-wt,
1336
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-wt, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-wt))
1337
+ );
1338
+ background-color: var(
1339
+ --_ctm-mob-dn-ae-dn-fl-ad-oy-dr-cr,
1340
+ var(--_ctm-tab-dn-ae-dn-fl-ad-oy-dr-cr, var(--_ctm-dn-ae-dn-fl-ad-oy-dr-cr))
1341
+ );
1342
+ }
1343
+ }
1344
+ }
1345
+ }
1346
+
1347
+ .allowance_vertical_scroll_wrapper {
1348
+ overflow-y: auto;
1349
+ gap: prepareMediaVariable(--_ctm-lt-ae-im-sg);
1350
+ display: flex;
1351
+ width: 100%;
1352
+ flex-direction: column;
1353
+
1354
+ .allowance_item_wrapper {
1355
+ flex-direction: column;
1356
+ position: relative;
1357
+
1358
+ .allowance_info_wrapper {
1359
+ justify-content: space-between;
1360
+ }
1361
+ }
1362
+ }
1363
+
1364
+ .allowance_vertical_scroll_wrap {
1365
+ gap: var(--_ctm-lt-ae-im-sg);
1366
+ display: flex;
1367
+ width: 100%;
1368
+ flex-direction: column;
1369
+
1370
+ .allowance_item_wrapper {
1371
+ flex-direction: column;
1372
+
1373
+ .allowance_info_wrapper {
1374
+ justify-content: space-between;
1375
+ }
1376
+ }
1377
+ }
1378
+ }
1379
+
1380
+ .user_elements_user_info_secondary_wrapper {
1381
+ display: flex;
1382
+ flex-direction: column;
1383
+ width: 100%;
1384
+ background-color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1385
+ border-color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1386
+ border-radius: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1387
+ border-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1388
+ border-width: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1389
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1390
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1391
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1392
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1393
+
1394
+ .secondary_vertical_scroll_wrapper {
1395
+ // overflow-y: auto;
1396
+ gap: prepareMediaVariable(--_ctm-lt-ur-io-sy-im-sg);
1397
+ display: flex;
1398
+ width: 100%;
1399
+ // max-height: 250px;
1400
+ flex-direction: column;
1401
+
1402
+ .secondary_item_wrapper {
1403
+ flex-direction: column;
1404
+ position: relative;
1405
+
1406
+ .quota_divider {
1407
+ width: 100%;
1408
+ height: 1px;
1409
+ }
1410
+ }
1411
+ }
1412
+
1413
+ .secondary_label {
1414
+ color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
1415
+ font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
1416
+ font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
1417
+ font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
1418
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
1419
+ line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
1420
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
1421
+ text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
1422
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
1423
+ }
1424
+
1425
+ .label {
1426
+ color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1427
+ font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1428
+ font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1429
+ font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1430
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1431
+ line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1432
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1433
+ text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1434
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1435
+ }
1436
+ .value {
1437
+ color: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1438
+ font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1439
+ font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1440
+ font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1441
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1442
+ line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1443
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1444
+ text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1445
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1446
+ }
1447
+
1448
+ .secondary_info_divider {
1449
+ content: "";
1450
+ height: 3rem;
1451
+ width: 1px;
1452
+ background-color: #d0d5dd;
1453
+ }
1454
+
1455
+ .active_orders_wrapper {
1456
+ display: flex;
1457
+ flex-direction: column;
1458
+ gap: 4px;
1459
+
1460
+ justify-content: flex-start;
1461
+
1462
+ .order_wrapper {
1463
+ display: flex;
1464
+ gap: 6px;
1465
+ justify-content: right;
1466
+ .remaining_order {
1467
+ color: #243dc6;
1468
+ font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1469
+ font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1470
+ font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1471
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1472
+ line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1473
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1474
+ text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1475
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1476
+ }
1477
+ }
1478
+ }
1479
+
1480
+ .payment_methods_wrapper {
1481
+ display: flex;
1482
+ flex-direction: column;
1483
+ gap: 4px;
1484
+
1485
+ justify-content: flex-start;
1486
+
1487
+ .payment_wrapper {
1488
+ display: flex;
1489
+ gap: 6px;
1490
+ .remaining_payment {
1491
+ color: #243dc6;
1492
+ font-family: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1493
+ font-size: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1494
+ font-style: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1495
+ font-weight: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1496
+ line-height: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1497
+ letter-spacing: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1498
+ text-align: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1499
+ text-decoration: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1500
+ }
1501
+ }
1502
+ }
1503
+
1504
+ .my_cart_wrapper {
1505
+ display: flex;
1506
+ flex-direction: row;
1507
+ gap: 16px;
1508
+
1509
+ .my_cart_info_wrapper {
1510
+ display: flex;
1511
+ flex-direction: column;
1512
+ gap: 4px;
1513
+ white-space: nowrap;
1514
+ }
1515
+
1516
+ .my_cart_icon_wrappers {
1517
+ position: relative;
1518
+ display: inline-block;
1519
+ width: var(
1520
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1521
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1522
+ );
1523
+ height: var(
1524
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1525
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1526
+ );
1527
+ .cart__quantity {
1528
+ position: absolute;
1529
+ top: -4px;
1530
+ right: -6px;
1531
+ // background-color: #ffd600; /* Yellow */
1532
+ // color: black;
1533
+ // font-size: 12px;
1534
+ // font-weight: bold;
1535
+ // padding: 2px 6px;
1536
+ border-radius: 6px;
1537
+
1538
+ min-width: 16px;
1539
+ text-align: center;
1540
+ display: flex;
1541
+ align-items: center;
1542
+ justify-content: center;
1543
+ white-space: nowrap;
1544
+
1545
+ width: calc(
1546
+ var(
1547
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1548
+ var(
1549
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1550
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1551
+ )
1552
+ ) *
1553
+ 0.5
1554
+ );
1555
+ height: calc(
1556
+ var(
1557
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1558
+ var(
1559
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1560
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1561
+ )
1562
+ ) *
1563
+ 0.5
1564
+ );
1565
+ }
1566
+ // .cart__quantity {
1567
+ // position: absolute;
1568
+ // top: 0;
1569
+ // right: 0;
1570
+ // // background: yellow;
1571
+ // // padding: 2px;
1572
+ // // border-radius: 5px;
1573
+ // // padding-inline: 5px;
1574
+ // font-size: 12px;
1575
+ // transform: translate(
1576
+ // 0%,
1577
+ // calc(
1578
+ // var(
1579
+ // --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1580
+ // var(
1581
+ // --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1582
+ // var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1583
+ // )
1584
+ // ) *
1585
+ // 0.1
1586
+ // )
1587
+ // );
1588
+ // }
1589
+
1590
+ .cart__quantity {
1591
+ background-color: var(
1592
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-bd-cr,
1593
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-bd-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-bd-cr))
1594
+ );
1595
+
1596
+ border-color: var(
1597
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-cr,
1598
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-cr))
1599
+ );
1600
+
1601
+ border-style: var(
1602
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-se,
1603
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-se))
1604
+ );
1605
+
1606
+ border-width: var(
1607
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-wh,
1608
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-wh, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-wh))
1609
+ );
1610
+
1611
+ border-radius: var(
1612
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-br-rs,
1613
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-br-rs, var(--_ctm-dn-ur-sy-io-dn-ct-ct-br-rs))
1614
+ );
1615
+
1616
+ box-shadow: var(
1617
+ --_show-shadow,
1618
+ var(
1619
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-ae,
1620
+ var(
1621
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-ae,
1622
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-ae)
1623
+ )
1624
+ )
1625
+ var(
1626
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-br,
1627
+ var(
1628
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-br,
1629
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-br)
1630
+ )
1631
+ )
1632
+ var(
1633
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-sd,
1634
+ var(
1635
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-sd,
1636
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-sd)
1637
+ )
1638
+ )
1639
+ var(
1640
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-sw-cr,
1641
+ var(
1642
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-sw-cr,
1643
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-sw-cr)
1644
+ )
1645
+ )
1646
+ );
1647
+ white-space: nowrap;
1648
+
1649
+ color: var(
1650
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-cr,
1651
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-cr, var(--_ctm-dn-ur-sy-io-dn-ct-ct-cr))
1652
+ );
1653
+ font-family: var(
1654
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-fy,
1655
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-fy, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-fy))
1656
+ );
1657
+ font-size: calc(
1658
+ var(
1659
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1660
+ var(
1661
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se,
1662
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se)
1663
+ )
1664
+ ) /
1665
+ 3
1666
+ );
1667
+ // font-size: var(
1668
+ // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se,
1669
+ // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se))
1670
+ // );
1671
+ font-weight: var(
1672
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-wt,
1673
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-wt, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-wt))
1674
+ );
1675
+ font-style: var(
1676
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1677
+ var(
1678
+ --_ctm-tab-dn-ur-sy-io-dn-ct-ct-ft-se-ic,
1679
+ var(--_ctm-dn-ur-sy-io-dn-ct-ct-ft-se-ic)
1680
+ )
1681
+ );
1682
+ text-align: var(
1683
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-tt-an,
1684
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-tt-an, var(--_ctm-dn-ur-sy-io-dn-ct-ct-tt-an))
1685
+ );
1686
+ letter-spacing: var(
1687
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-lr-sg,
1688
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-lr-sg, var(--_ctm-dn-ur-sy-io-dn-ct-ct-lr-sg))
1689
+ );
1690
+ // line-height: var(
1691
+ // --_ctm-mob-dn-ur-sy-io-dn-ct-ct-le-ht,
1692
+ // var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-le-ht, var(--_ctm-dn-ur-sy-io-dn-ct-ct-le-ht))
1693
+ // );
1694
+ text-decoration: var(
1695
+ --_ctm-mob-dn-ur-sy-io-dn-ct-ct-ue,
1696
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-ct-ue, var(--_ctm-dn-ur-sy-io-dn-ct-ct-ue))
1697
+ );
1698
+ // padding: prepareMediaVariable(--_ctm-dn-ur-sy-io-dn-ct-ct-pg);
1699
+ }
1700
+ .cart__icon {
1701
+ display: var(--_sf-show-icon-ff, flex);
1702
+ svg {
1703
+ width: var(
1704
+ --_ctm-mab-dn-ur-sy-io-dn-ct-in-in-se,
1705
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1706
+ );
1707
+ height: var(
1708
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-se,
1709
+ var(--_ctm-tab-dn-ur-sy-io-dn-ct-in-in-se, var(--_ctm-dn-ur-sy-io-dn-ct-in-in-se))
1710
+ );
1711
+ path {
1712
+ stroke: var(
1713
+ --_ctm-mob-dn-ur-sy-io-dn-ct-in-in-c1,
1714
+ var(
1715
+ --_ctm-tab-dn-ur-sy-io-dn-ct-in-in-c1,
1716
+ var(--_ctm-dn-ur-sy-io-dn-ct-in-in-c1)
1717
+ )
1718
+ );
1719
+ }
1720
+ }
1721
+ }
1722
+ }
1723
+ }
1724
+
1725
+ .child {
1726
+ position: relative;
1727
+ }
1728
+ &[data-show-divider="true"] {
1729
+ .child:not(:last-child)::before {
1730
+ content: "";
1731
+ position: absolute;
1732
+ left: 0;
1733
+ right: 0;
1734
+ bottom: calc(
1735
+ -1 *
1736
+ (
1737
+ var(
1738
+ --_ctm-mob-lt-ur-io-sy-im-sg,
1739
+ var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1740
+ ) /
1741
+ 2
1742
+ )
1743
+ );
1744
+
1745
+ height: var(
1746
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1747
+ var(
1748
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1749
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1750
+ )
1751
+ );
1752
+ background-color: var(
1753
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1754
+ var(
1755
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1756
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1757
+ )
1758
+ );
1759
+ }
1760
+ &[data-content-alignment="Horizontal"] {
1761
+ .child:not(:last-child)::before {
1762
+ // right: calc(
1763
+ // -1 *
1764
+ // (
1765
+ // var(
1766
+ // --_ctm-mob-lt-ur-io-sy-im-sg,
1767
+ // var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1768
+ // ) /
1769
+ // 2
1770
+ // )
1771
+ // );
1772
+ top: 0;
1773
+
1774
+ width: var(
1775
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1776
+ var(
1777
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1778
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1779
+ )
1780
+ );
1781
+ height: 100%;
1782
+ left: unset;
1783
+ }
1784
+ @media (max-width: 1024px) {
1785
+ .child:not(:last-child)::before {
1786
+ bottom: 0;
1787
+ height: var(
1788
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1789
+ var(
1790
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1791
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1792
+ )
1793
+ );
1794
+ width: 100%;
1795
+ left: unset;
1796
+ }
1797
+ }
1798
+ }
1799
+ &[data-content-alignment="Vertical"] {
1800
+ .secondary_label_wrapper {
1801
+ width: 100%;
1802
+ position: relative;
1803
+ &::after {
1804
+ content: "";
1805
+ position: absolute;
1806
+ left: 0;
1807
+ right: 0;
1808
+ bottom: calc(
1809
+ -1 *
1810
+ (
1811
+ var(
1812
+ --_ctm-mob-lt-ur-io-sy-im-sg,
1813
+ var(--_ctm-tab-lt-ur-io-sy-im-sg, var(--_ctm-lt-ur-io-sy-im-sg))
1814
+ ) /
1815
+ 2
1816
+ )
1817
+ );
1818
+ height: var(
1819
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1820
+ var(
1821
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-wt,
1822
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-wt)
1823
+ )
1824
+ );
1825
+
1826
+ background-color: var(
1827
+ --_ctm-mob-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1828
+ var(
1829
+ --_ctm-tab-dn-ur-sy-io-dn-fl-ad-oy-dr-cr,
1830
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-dr-cr)
1831
+ )
1832
+ );
1833
+ }
1834
+ }
1835
+ }
1836
+ }
1837
+
1838
+ .secondary_info_divider {
1839
+ height: 1px;
1840
+ width: 100%;
1841
+ }
1842
+
1843
+ .active_orders_wrapper {
1844
+ flex-direction: row;
1845
+ justify-content: space-between;
1846
+ padding-right: 16px;
1847
+ }
1848
+ .active_orders_wrapper > * {
1849
+ box-sizing: border-box;
1850
+ width: 100%;
1851
+ // line-height: 125%;
1852
+ }
1853
+
1854
+ .payment_methods_wrapper {
1855
+ flex-direction: row;
1856
+ justify-content: space-between;
1857
+ }
1858
+
1859
+ .my_cart_wrapper {
1860
+ flex-direction: row;
1861
+ align-items: start;
1862
+ }
1863
+ .my_cart_container {
1864
+ display: flex;
1865
+ align-items: center;
1866
+ gap: 16px;
1867
+ }
1868
+
1869
+ .popover-container {
1870
+ position: relative;
1871
+ display: inline-block;
1872
+ .popover-trigger {
1873
+ cursor: pointer;
1874
+ font-weight: 500;
1875
+ color: #2b6cb0;
1876
+ }
1877
+
1878
+ .popover-box {
1879
+ // position: absolute;
1880
+ // top: calc(100% + 10px);
1881
+ // right: 0;
1882
+ // background: white;
1883
+ // padding: 12px 16px;
1884
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
1885
+ // border-radius: 8px;
1886
+ // min-width: 150px;
1887
+ // z-index: 10;
1888
+ position: absolute;
1889
+ // border: 1px solid #ccc;
1890
+ min-width: 150px;
1891
+ max-width: 200px;
1892
+ z-index: 1000;
1893
+ left: 40px;
1894
+ top: 0;
1895
+ padding: 8px;
1896
+ border-radius: 4px;
1897
+ max-height: 150px;
1898
+ overflow-y: auto;
1899
+ }
1900
+
1901
+ .popover-box {
1902
+ display: flex;
1903
+ flex-direction: column;
1904
+
1905
+ // width: 100%;
1906
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
1907
+ background-color: var(
1908
+ --_ctm-mob-dn-pr-se-bd-cr,
1909
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1910
+ );
1911
+
1912
+ border-color: var(
1913
+ --_ctm-mob-dn-pr-se-br-cr,
1914
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1915
+ );
1916
+
1917
+ border-style: var(
1918
+ --_ctm-mob-dn-pr-se-br-se,
1919
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
1920
+ );
1921
+
1922
+ border-width: var(
1923
+ --_ctm-mob-dn-pr-se-br-wh,
1924
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
1925
+ );
1926
+
1927
+ border-radius: var(
1928
+ --_ctm-mob-dn-pr-se-br-rs,
1929
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
1930
+ );
1931
+
1932
+ box-shadow: var(
1933
+ --_show-shadow,
1934
+ var(
1935
+ --_ctm-mob-dn-pr-se-sw-ae,
1936
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
1937
+ )
1938
+ var(
1939
+ --_ctm-mob-dn-pr-se-sw-br,
1940
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
1941
+ )
1942
+ var(
1943
+ --_ctm-mob-dn-pr-se-sw-sd,
1944
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
1945
+ )
1946
+ var(
1947
+ --_ctm-mob-dn-pr-se-sw-cr,
1948
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
1949
+ )
1950
+ );
1951
+
1952
+ padding: var(
1953
+ --_ctm-mob-dn-pr-se-pg,
1954
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
1955
+ );
1956
+ }
1957
+
1958
+ .popover-box strong {
1959
+ display: block;
1960
+ margin-bottom: 6px;
1961
+ font-weight: bold;
1962
+ }
1963
+
1964
+ .popover-arrow {
1965
+ position: absolute;
1966
+ top: 8px;
1967
+ left: -5px;
1968
+ width: 12px;
1969
+ height: 12px;
1970
+ // background-color: var(
1971
+ // --_ctm-mob-dn-pr-se-bd-cr,
1972
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
1973
+ // );
1974
+ transform: rotate(-45deg);
1975
+ box-shadow: -1px -1px 0px
1976
+ var(
1977
+ --_ctm-mob-dn-pr-se-br-cr,
1978
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
1979
+ );
1980
+ }
1981
+
1982
+ .popover_item {
1983
+ // padding-inline: var(--_sf-cd-gp);
1984
+ color: var(
1985
+ --_ctm-mob-dn-pr-se-cr,
1986
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
1987
+ );
1988
+ font-family: var(
1989
+ --_ctm-mob-dn-pr-se-ft-fy,
1990
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
1991
+ );
1992
+ font-size: var(
1993
+ --_ctm-mob-dn-pr-se-ft-se,
1994
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
1995
+ );
1996
+ font-weight: var(
1997
+ --_ctm-mob-dn-pr-se-ft-wt,
1998
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
1999
+ );
2000
+ font-style: var(
2001
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2002
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2003
+ );
2004
+ text-align: var(
2005
+ --_ctm-mob-dn-pr-se-tt-an,
2006
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2007
+ );
2008
+ letter-spacing: var(
2009
+ --_ctm-mob-dn-pr-se-lr-sg,
2010
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2011
+ );
2012
+ line-height: var(
2013
+ --_ctm-mob-dn-pr-se-le-ht,
2014
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2015
+ );
2016
+ text-decoration: var(
2017
+ --_ctm-mob-dn-pr-se-ue,
2018
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2019
+ );
2020
+ // margin-left: 10px;
2021
+ }
2022
+ }
2023
+ }
2024
+ }
2025
+
2026
+ // for dropdown
2027
+
2028
+ .language__conatiner {
2029
+ background-color: var(
2030
+ --_ctm-mob-dn-dn-se-wt-se-bd-cr,
2031
+ var(--_ctm-tab-dn-dn-se-wt-se-bd-cr, var(--_ctm-dn-dn-se-wt-se-bd-cr))
2032
+ );
2033
+
2034
+ border-color: var(
2035
+ --_ctm-mob-dn-dn-se-wt-se-br-cr,
2036
+ var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2037
+ );
2038
+
2039
+ border-style: var(
2040
+ --_ctm-mob-dn-dn-se-wt-se-br-se,
2041
+ var(--_ctm-tab-dn-dn-se-wt-se-br-se, var(--_ctm-dn-dn-se-wt-se-br-se))
2042
+ );
2043
+
2044
+ border-width: var(
2045
+ --_ctm-mob-dn-dn-se-wt-se-br-wh,
2046
+ var(--_ctm-tab-dn-dn-se-dn-se-wt-se-br-wh, var(--_ctm-dn-dn-se-wt-se-br-wh))
2047
+ );
2048
+
2049
+ // border: 1px solid
2050
+ // var(
2051
+ // --_ctm-mob-dn-dn-se-wt-se-br-cr,
2052
+ // var(--_ctm-tab-dn-dn-se-wt-se-br-cr, var(--_ctm-dn-dn-se-wt-se-br-cr))
2053
+ // );
2054
+
2055
+ border-radius: var(
2056
+ --_ctm-mob-dn-dn-se-wt-se-br-rs,
2057
+ var(--_ctm-tab-dn-dn-se-wt-se-br-rs, var(--_ctm-dn-dn-se-wt-se-br-rs))
2058
+ );
2059
+
2060
+ box-shadow: var(
2061
+ --_show-shadow,
2062
+ var(
2063
+ --_ctm-mob-dn-dn-se-wt-se-sw-ae,
2064
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-ae, var(--_ctm-dn-dn-se-wt-se-sw-ae))
2065
+ )
2066
+ var(
2067
+ --_ctm-mob-dn-dn-se-wt-se-sw-br,
2068
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-br, var(--_ctm-dn-dn-se-wt-se-sw-br))
2069
+ )
2070
+ var(
2071
+ --_ctm-mob-dn-dn-se-wt-se-sw-sd,
2072
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-sd, var(--_ctm-dn-dn-se-wt-se-sw-sd))
2073
+ )
2074
+ var(
2075
+ --_ctm-mob-dn-dn-se-wt-se-sw-cr,
2076
+ var(--_ctm-tab-dn-dn-se-wt-se-sw-cr, var(--_ctm-dn-dn-se-wt-se-sw-cr))
2077
+ )
2078
+ );
2079
+
2080
+ // gap: var(
2081
+ // --_ctm-mob-dn-dn-se-lt-ss-it-ad-mn-qy-sg,
2082
+ // var(--_ctm-tab-dn-dn-se-lt-ss-it-ad-mn-qy-sg, var(--_ctm-dn-dn-se-lt-ss-it-ad-mn-qy-sg))
2083
+ // );
2084
+ display: flex;
2085
+ gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
2086
+
2087
+ .option:hover {
2088
+ --_sf-hr-bd-cr: var(
2089
+ --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
2090
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
2091
+ );
2092
+ --_sf-hr-br-cr: var(
2093
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
2094
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
2095
+ );
2096
+ --_sf-hr-br-se: var(
2097
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
2098
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
2099
+ );
2100
+ --_sf-hr-br-wh: var(
2101
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
2102
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
2103
+ );
2104
+ --_sf-hr-br-rs: var(
2105
+ --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
2106
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
2107
+ );
2108
+ --_sf-hr-pg: var(
2109
+ --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
2110
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
2111
+ );
2112
+ --_sf-hr-im-gp: var(
2113
+ --_ctm-mob-dn-dn-se-im-se-hr-se-im-gp,
2114
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-im-gp, var(--_ctm-dn-dn-se-im-se-hr-se-im-gp))
2115
+ );
2116
+
2117
+ // for shadow
2118
+ --_sf-hr-sw-ae: var(
2119
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
2120
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
2121
+ );
2122
+ --_sf-hr-sw-br: var(
2123
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
2124
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
2125
+ );
2126
+ --_sf-hr-sw-hr: var(
2127
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-hr,
2128
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-hr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-hr))
2129
+ );
2130
+ --_sf-hr-sw-cr: var(
2131
+ --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
2132
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
2133
+ );
2134
+
2135
+ // for font
2136
+
2137
+ --_sf-hr-cr: var(
2138
+ --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
2139
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
2140
+ );
2141
+ --_sf-hr-ft-fy: var(
2142
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
2143
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
2144
+ );
2145
+ --_sf-hr-ft-se: var(
2146
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
2147
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
2148
+ );
2149
+ --_sf-hr-ft-wt: var(
2150
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
2151
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
2152
+ );
2153
+ --_sf-hr-ft-se-ic: var(
2154
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
2155
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
2156
+ );
2157
+ --_sf-hr-tt-an: var(
2158
+ --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
2159
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
2160
+ );
2161
+ --_sf-hr-lr-sg: var(
2162
+ --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
2163
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
2164
+ );
2165
+ --_sf-hr-le-ht: var(
2166
+ --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
2167
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
2168
+ );
2169
+
2170
+ --_sf-hr-ue: var(
2171
+ --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
2172
+ var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
2173
+ );
2174
+ }
2175
+
2176
+ .option[data-selected="true"] {
2177
+ --_sf-sd-bd-cr: var(
2178
+ --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
2179
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
2180
+ );
2181
+ --_sf-sd-br-cr: var(
2182
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
2183
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
2184
+ );
2185
+ --_sf-sd-br-se: var(
2186
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
2187
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
2188
+ );
2189
+ --_sf-sd-br-rs: var(
2190
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-rs,
2191
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-rs, var(--_ctm-dn-dn-se-im-se-sd-se-br-rs))
2192
+ );
2193
+ --_sf-sd-br-wh: var(
2194
+ --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
2195
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
2196
+ );
2197
+ // new
2198
+ --_sf-sd-sw-ae: var(
2199
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
2200
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
2201
+ );
2202
+ --_sf-sd-sw-br: var(
2203
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
2204
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
2205
+ );
2206
+ --_sf-sd-sw-sd: var(
2207
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
2208
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
2209
+ );
2210
+ --_sf-sd-sw-cr: var(
2211
+ --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
2212
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
2213
+ );
2214
+ --_sf-sd-pg: var(
2215
+ --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
2216
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
2217
+ );
2218
+ --_sf-sd-im-gp: var(
2219
+ --_ctm-mob-dn-dn-se-im-se-sd-se-im-gp,
2220
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-im-gp, var(--_ctm-dn-dn-se-im-se-sd-se-im-gp))
2221
+ );
2222
+
2223
+ // for font
2224
+
2225
+ --_sf-sd-cr: var(
2226
+ --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
2227
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
2228
+ );
2229
+ --_sf-sd-ft-fy: var(
2230
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
2231
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
2232
+ );
2233
+ --_sf-sd-ft-se: var(
2234
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
2235
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
2236
+ );
2237
+ --_sf-sd-ft-wt: var(
2238
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
2239
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
2240
+ );
2241
+ --_sf-sd-ft-se-ic: var(
2242
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
2243
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
2244
+ );
2245
+ --_sf-sd-tt-an: var(
2246
+ --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
2247
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
2248
+ );
2249
+ --_sf-sd-lr-sg: var(
2250
+ --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
2251
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
2252
+ );
2253
+ --_sf-sd-le-ht: var(
2254
+ --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
2255
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
2256
+ );
2257
+
2258
+ --_sf-sd-ue: var(
2259
+ --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
2260
+ var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
2261
+ );
2262
+ }
2263
+
2264
+ .option {
2265
+ width: 100%;
2266
+ display: flex;
2267
+ align-items: center;
2268
+ cursor: pointer;
2269
+ justify-content: var(
2270
+ --_ctm-mob-dn-dn-se-lt-ss-at,
2271
+ var(--_ctm-tab-dn-dn-se-lt-ss-at, var(--_ctm-dn-dn-se-lt-ss-at))
2272
+ );
2273
+
2274
+ position: relative;
2275
+ box-sizing: border-box;
2276
+
2277
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
2278
+ gap: var(--_sf-hr-im-gp, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-im-gp));
2279
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr));
2280
+
2281
+ background-color: var(
2282
+ --_sf-hr-bd-cr,
2283
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2284
+ );
2285
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se));
2286
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs));
2287
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh));
2288
+
2289
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2290
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2291
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2292
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2293
+ //
2294
+ &[data-selected="true"] {
2295
+ border-color: var(
2296
+ --_sf-sd-br-cr,
2297
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
2298
+ );
2299
+
2300
+ background-color: var(
2301
+ --_sf-sd-bd-cr,
2302
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
2303
+ );
2304
+ border-style: var(
2305
+ --_sf-sd-br-se,
2306
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
2307
+ );
2308
+ border-width: var(
2309
+ --_sf-sd-br-wh,
2310
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
2311
+ );
2312
+ border-radius: var(
2313
+ --_sf-sd-br-rs,
2314
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
2315
+ );
2316
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
2317
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
2318
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
2319
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
2320
+ .language__name {
2321
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2322
+ font-family: var(
2323
+ --_sf-sd-ft-fy,
2324
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
2325
+ );
2326
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2327
+ font-weight: 400;
2328
+ // font-weight: var(
2329
+ // --_sf-sd-ft-wt,
2330
+ // prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
2331
+ // );
2332
+ font-style: var(
2333
+ --_sf-sd-ft-se-ic,
2334
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2335
+ );
2336
+ text-align: var(
2337
+ --_sf-sd-tt-an,
2338
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
2339
+ );
2340
+ letter-spacing: var(
2341
+ --_sf-sd-lr-sg,
2342
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2343
+ );
2344
+ line-height: var(
2345
+ --_sf-sd-le-ht,
2346
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht-dc)
2347
+ );
2348
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2349
+ }
2350
+ }
2351
+ }
2352
+ &[data-flex-direction="column"] {
2353
+ .language__name {
2354
+ // white-space: unset;
2355
+ white-space: nowrap !important;
2356
+ width: 150px;
2357
+ overflow: hidden;
2358
+ text-overflow: ellipsis;
2359
+ }
2360
+ }
2361
+ &[data-flex-direction="row"] {
2362
+ overflow-x: auto;
2363
+ }
2364
+ &[data-show-divider="true"] {
2365
+ &[data-flex-direction="row"] {
2366
+ .option:not(:last-child)::before {
2367
+ content: "";
2368
+ position: absolute;
2369
+ top: 0;
2370
+ bottom: 0; /* For full height divider */
2371
+ right: calc(
2372
+ -1 *
2373
+ (
2374
+ var(
2375
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2376
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2377
+ ) /
2378
+ 2
2379
+ )
2380
+ ); /* Half of your gap, assuming divider is centered in the gap */
2381
+ width: var(
2382
+ --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2383
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2384
+ ); /* Divider thickness */
2385
+ background-color: var(
2386
+ --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2387
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2388
+ ); /* Divider color */
2389
+ }
2390
+ }
2391
+ &[data-flex-direction="column"] {
2392
+ .option:not(:last-child)::before {
2393
+ content: "";
2394
+ position: absolute;
2395
+ left: 0;
2396
+ right: 0;
2397
+ bottom: calc(
2398
+ -1 *
2399
+ (
2400
+ var(
2401
+ --_ctm-mob-dn-dn-se-lt-ss-gp-bn-is,
2402
+ var(--_ctm-tab-dn-dn-se-lt-ss-gp-bn-is, var(--_ctm-dn-dn-se-lt-ss-gp-bn-is))
2403
+ ) /
2404
+ 2
2405
+ )
2406
+ );
2407
+ height: var(
2408
+ --_ctm-mob-dn-dn-se-wt-se-dr-wt,
2409
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-wt, var(--_ctm-dn-dn-se-wt-se-dr-wt))
2410
+ );
2411
+ background-color: var(
2412
+ --_ctm-mob-dn-dn-se-wt-se-dr-cr,
2413
+ var(--_ctm-tab-dn-dn-se-wt-se-dr-cr, var(--_ctm-dn-dn-se-wt-se-dr-cr))
2414
+ );
2415
+ }
2416
+ }
2417
+ }
2418
+
2419
+ .option_select {
2420
+ width: 100%;
2421
+ display: flex;
2422
+ align-items: center;
2423
+ position: relative;
2424
+ .language__name {
2425
+ padding-right: 20px;
2426
+ }
2427
+ }
2428
+
2429
+ .language__name {
2430
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
2431
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
2432
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
2433
+ font-weight: 400;
2434
+ font-style: var(
2435
+ --_sf-hr-ft-se-ic,
2436
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
2437
+ );
2438
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
2439
+ letter-spacing: var(
2440
+ --_sf-hr-lr-sg,
2441
+ prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
2442
+ );
2443
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
2444
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
2445
+ white-space: nowrap;
2446
+ }
2447
+
2448
+ //Dropdown
2449
+ .value__selected__new {
2450
+ width: 100%;
2451
+ padding: 8px 12px;
2452
+ text-align: left;
2453
+ }
2454
+ .est__dropdown__main {
2455
+ position: relative;
2456
+ width: 100%;
2457
+ margin-top: 0px;
2458
+ label {
2459
+ font-size: 14px;
2460
+ color: var(--_gray-700);
2461
+ margin-bottom: 8px;
2462
+ display: block;
2463
+ }
2464
+
2465
+ .est__dropdown {
2466
+ cursor: pointer;
2467
+ position: relative;
2468
+ color: var(--_gray-700);
2469
+
2470
+ // border-radius: 6px;
2471
+ // background-color: #fff;
2472
+ display: flex;
2473
+ justify-content: space-between;
2474
+ align-items: center;
2475
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-dn-se-pg);
2476
+
2477
+ width: 100%;
2478
+
2479
+ &.open .list {
2480
+ display: flex;
2481
+ }
2482
+ .est__dropdown__button {
2483
+ display: flex;
2484
+ align-items: center;
2485
+ width: 100%;
2486
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg);
2487
+ }
2488
+
2489
+ .est__dropdown__icon {
2490
+ position: absolute;
2491
+ // top: 10px;
2492
+ right: 10px;
2493
+ transition: all 200ms ease-in;
2494
+ &.open {
2495
+ transform: rotate(180deg);
2496
+ transform: all 200ms ease-in;
2497
+ }
2498
+ &.close {
2499
+ transform: rotate(0deg);
2500
+ transform: all 200ms ease-in;
2501
+ }
2502
+ }
2503
+
2504
+ .list {
2505
+ display: none;
2506
+ flex-direction: column;
2507
+ // border: 1px solid var(--_gray-200);
2508
+ position: absolute;
2509
+ top: 100%;
2510
+ left: 0;
2511
+ width: 100%;
2512
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-pg);
2513
+ background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-bd-cr);
2514
+ border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-rs);
2515
+ z-index: var(--_higher-zIndex);
2516
+ max-height: 200px;
2517
+ overflow-y: auto;
2518
+ border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh);
2519
+ border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se);
2520
+ border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
2521
+ // margin-top: var(
2522
+ // --_ctm-mob-lt-gp-bn-is,
2523
+ // var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
2524
+ // );
2525
+ gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
2526
+ // padding: 2px;
2527
+ // border-radius: 4px;
2528
+ // border: 1px solid var(--_gray-300);
2529
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
2530
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
2531
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
2532
+ prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
2533
+
2534
+ &.top {
2535
+ bottom: 100%;
2536
+ top: auto;
2537
+ }
2538
+
2539
+ .option {
2540
+ cursor: pointer;
2541
+ }
2542
+ &.show__panel {
2543
+ animation: slideUp 0.4s ease-in-out;
2544
+ }
2545
+
2546
+ &.hide__panel {
2547
+ animation: slideDown 0.4s ease-in-out;
2548
+ pointer-events: none;
2549
+ }
2550
+ }
2551
+ }
2552
+ }
2553
+ }
2554
+ }
2555
+ }