@sc-360-v2/storefront-cms-library 0.3.47 → 0.3.49

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.
@@ -0,0 +1,1437 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="userElements"] {
8
+ // width: var(
9
+ // --_sf-mob-el-wh-st-mx,
10
+ // var(
11
+ // --_sf-tab-el-wh-st-mx,
12
+ // var(
13
+ // --_sf-el-wh-st-mx,
14
+ // calc(
15
+ // 1% *
16
+ // var(
17
+ // --_ctm-mob-bun-ele-nw-wh-vl,
18
+ // var(--_ctm-tab-bun-ele-nw-wh-vl, var(--_ctm-bun-ele-nw-wh-vl, var(--_sf-nw-wh)))
19
+ // )
20
+ // )
21
+ // )
22
+ // )
23
+ // );
24
+
25
+ height: auto;
26
+
27
+ margin: var(
28
+ --_ctm-mob-bun-lt-mn,
29
+ var(
30
+ --_ctm-tab-bun-lt-mn,
31
+ var(--_ctm-bun-lt-mn, var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))))
32
+ )
33
+ );
34
+
35
+ background-color: var(
36
+ --_ctm-mob-bun-dn-bd-cr,
37
+ var(--_ctm-tab-bun-dn-bd-cr, var(--_ctm-bun-dn-bd-cr))
38
+ );
39
+ background-image: var(
40
+ --_ctm-mob-bun-dn-bd-ie,
41
+ var(--_ctm-tab-bun-dn-bd-ie, var(--_ctm-bun-dn-bd-ie))
42
+ );
43
+ background-attachment: var(
44
+ --_ctm-mob-bun-dn-bd-at,
45
+ var(--_ctm-tab-bun-dn-bd-at, var(--_ctm-bun-dn-bd-at))
46
+ );
47
+ background-position: var(
48
+ --_ctm-mob-bun-dn-bd-pn,
49
+ var(--_ctm-tab-bun-dn-bd-pn, var(--_ctm-bun-dn-bd-pn))
50
+ );
51
+ background-repeat: var(
52
+ --_ctm-mob-bun-dn-bd-rt,
53
+ var(--_ctm-tab-bun-dn-bd-rt, var(--_ctm-bun-dn-bd-rt))
54
+ );
55
+ background-size: var(
56
+ --_ctm-mob-bun-dn-bd-se,
57
+ var(--_ctm-tab-bun-dn-bd-se, var(--_ctm-bun-dn-bd-se))
58
+ );
59
+ padding: var(--_ctm-mob-bun-lt-pg, var(--_ctm-tab-bun-lt-pg, var(--_ctm-bun-lt-pg)));
60
+
61
+ border-color: var(
62
+ --_ctm-mob-bun-dn-br-cr,
63
+ var(--_ctm-tab-bun-dn-br-cr, var(--_ctm-bun-dn-br-cr))
64
+ );
65
+
66
+ border-style: var(
67
+ --_ctm-mob-bun-dn-br-se,
68
+ var(--_ctm-tab-bun-dn-br-se, var(--_ctm-bun-dn-br-se))
69
+ );
70
+
71
+ border-width: var(
72
+ --_ctm-mob-bun-dn-br-wh,
73
+ var(--_ctm-tab-bun-dn-br-wh, var(--_ctm-bun-dn-br-wh))
74
+ );
75
+
76
+ border-radius: var(
77
+ --_ctm-mob-bun-dn-br-rs,
78
+ var(--_ctm-tab-bun-dn-br-rs, var(--_ctm-bun-dn-br-rs))
79
+ );
80
+
81
+ box-shadow: var(
82
+ --_show-shadow,
83
+ var(--_ctm-mob-bun-dn-sw-ae, var(--_ctm-tab-bun-dn-sw-ae, var(--_ctm-bun-dn-sw-ae)))
84
+ var(--_ctm-mob-bun-dn-sw-br, var(--_ctm-tab-bun-dn-sw-br, var(--_ctm-bun-dn-sw-br)))
85
+ var(--_ctm-mob-bun-dn-sw-sd, var(--_ctm-tab-bun-dn-sw-sd, var(--_ctm-bun-dn-sw-sd)))
86
+ var(--_ctm-mob-bun-dn-sw-cr, var(--_ctm-tab-bun-dn-sw-cr, var(--_ctm-bun-dn-sw-cr)))
87
+ );
88
+
89
+ & > div {
90
+ &.wrapper {
91
+ width: 100%;
92
+ }
93
+ }
94
+
95
+ .embla {
96
+ width: 90%;
97
+ height: 100%;
98
+ position: relative;
99
+ display: flex;
100
+ flex-direction: column;
101
+ // overflow: hidden;
102
+
103
+ .embla__viewport {
104
+ width: 100%;
105
+ height: 100%;
106
+ position: relative;
107
+ display: flex;
108
+ flex-direction: column;
109
+
110
+ overflow: hidden;
111
+
112
+ .embla__container {
113
+ width: 100%;
114
+ height: 100%;
115
+ display: grid;
116
+ grid-template-rows: 100%;
117
+
118
+ grid-template-columns: repeat(
119
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
120
+ calc(
121
+ 100% /
122
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
123
+ )
124
+ );
125
+
126
+ grid-auto-flow: column;
127
+ gap: var(--_ctm-lt-qa-im-sg);
128
+
129
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
130
+ height: calc(
131
+ 100% - calc(
132
+ var(
133
+ --_ctm-mob-dn-pn-as-aw-se,
134
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
135
+ ) +
136
+ 10px
137
+ )
138
+ );
139
+ }
140
+
141
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
142
+ height: calc(
143
+ 100% - calc(
144
+ var(
145
+ --_ctm-mob-dn-pn-le-le-ht,
146
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
147
+ ) +
148
+ 20px
149
+ )
150
+ );
151
+ }
152
+
153
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
154
+ height: calc(
155
+ 100% - calc(
156
+ var(
157
+ --_ctm-mob-dn-pn-ds-dt-se,
158
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
159
+ ) +
160
+ 20px
161
+ )
162
+ );
163
+ }
164
+
165
+ .embla__slide {
166
+ width: 100%;
167
+ height: 100%;
168
+ white-space: nowrap;
169
+ }
170
+ }
171
+ }
172
+ &:not([data-display-style="Column"]) {
173
+ .embla__container {
174
+ grid-auto-columns: calc(
175
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
176
+ );
177
+ }
178
+ }
179
+
180
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
181
+ // overflow: unset;
182
+
183
+ .embla__viewport {
184
+ overflow: unset;
185
+ height: 80%;
186
+ flex-grow: 1;
187
+ &:not([data-is-builder-type="true"]) {
188
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
189
+ }
190
+
191
+ .embla__container {
192
+ overflow: unset;
193
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
194
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
195
+
196
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
197
+ grid-template-rows: unset;
198
+
199
+ grid-auto-flow: row;
200
+
201
+ &[data-overflow-hidden="true"] {
202
+ overflow: hidden;
203
+ }
204
+ }
205
+ }
206
+ }
207
+
208
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
209
+ .embla__viewport {
210
+ .embla__container {
211
+ grid-template-rows: repeat(
212
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
213
+ calc(
214
+ 100% /
215
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
216
+ )
217
+ );
218
+ }
219
+ }
220
+ }
221
+
222
+ &[data-display-style="Rows"] {
223
+ // overflow: unset;
224
+
225
+ .embla__viewport {
226
+ overflow: unset;
227
+ height: 80%;
228
+ flex-grow: 1;
229
+
230
+ &:not([data-is-builder-type="true"]) {
231
+ height: var(--_ctm-height);
232
+ }
233
+
234
+ .embla__container {
235
+ overflow: hidden;
236
+ height: var(--_ctm-height);
237
+ // min-height: var(--_ctm-height);
238
+
239
+ grid-template-columns: repeat(
240
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
241
+ 1fr
242
+ );
243
+ grid-template-rows: unset;
244
+ grid-auto-flow: row;
245
+ }
246
+ }
247
+ }
248
+
249
+ &[data-display-style="Column"] {
250
+ // overflow: unset;
251
+
252
+ .embla__viewport {
253
+ .embla__container {
254
+ display: flex;
255
+ .embla__slide {
256
+ width: unset;
257
+ height: 100%;
258
+ aspect-ratio: 1 / 2;
259
+ }
260
+ }
261
+ }
262
+ }
263
+ &[data-display-style="Masonry"] {
264
+ // overflow: unset;
265
+
266
+ .embla__viewport {
267
+ overflow: hidden;
268
+ height: 80%;
269
+ flex-grow: 1;
270
+
271
+ &:not([data-is-builder-type="true"]) {
272
+ height: var(--_ctm-height);
273
+ }
274
+
275
+ .embla__container {
276
+ overflow: unset;
277
+ display: block;
278
+
279
+ column-count: var(
280
+ --_ctm-mob-lt-is-pr-rw,
281
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
282
+ );
283
+ gap: unset;
284
+
285
+ column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
286
+
287
+ height: auto;
288
+
289
+ .embla__slide {
290
+ margin-bottom: var(
291
+ --_ctm-mob-lt-im-gp,
292
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
293
+ );
294
+ height: unset;
295
+
296
+ .gallery__slide {
297
+ height: unset;
298
+ }
299
+ }
300
+ }
301
+ }
302
+ }
303
+
304
+ .arrow-navigation {
305
+ display: flex;
306
+ position: absolute;
307
+ top: 50%;
308
+ left: 50%;
309
+ width: 100%;
310
+ justify-content: space-between;
311
+ transform: translate(-50%, -50%);
312
+ // padding-left: 20px;
313
+ &[data-control-type="Side"] {
314
+ .left-button,
315
+ .right-button {
316
+ background-color: transparent;
317
+ }
318
+ }
319
+ &[data-background-shape="Round"] {
320
+ .left-button,
321
+ .right-button {
322
+ background-color: #f2f5f5;
323
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
324
+ }
325
+ }
326
+ &[data-control-type="Bottom-Overflow"] {
327
+ transform: translateX(-50%);
328
+ width: 100%;
329
+ justify-content: center;
330
+ gap: 12px;
331
+ top: unset;
332
+ bottom: 6px;
333
+ }
334
+ &[data-control-type="Bottom"] {
335
+ transform: unset;
336
+ position: static;
337
+ width: 100%;
338
+ justify-content: center;
339
+ gap: 12px;
340
+ margin-top: 10px;
341
+ }
342
+ .left-button {
343
+ padding: 10px;
344
+ border-radius: 50%;
345
+ border: none;
346
+ width: var(
347
+ --_ctm-mob-dn-pn-as-aw-se,
348
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
349
+ );
350
+ height: var(
351
+ --_ctm-mob-dn-pn-as-aw-se,
352
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
353
+ );
354
+
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ cursor: pointer;
359
+ outline: none;
360
+ margin-left: 12px;
361
+ &:disabled {
362
+ & svg {
363
+ path {
364
+ stroke: rgb(192, 192, 192);
365
+ }
366
+ }
367
+ }
368
+ }
369
+ .right-button {
370
+ border-radius: 50%;
371
+ border: none;
372
+ width: var(
373
+ --_ctm-mob-dn-pn-as-aw-se,
374
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
375
+ );
376
+ height: var(
377
+ --_ctm-mob-dn-pn-as-aw-se,
378
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
379
+ );
380
+
381
+ display: flex;
382
+ align-items: center;
383
+ justify-content: center;
384
+ cursor: pointer;
385
+ outline: none;
386
+ margin-right: 12px;
387
+ padding: 10px;
388
+
389
+ &:disabled {
390
+ & svg {
391
+ path {
392
+ stroke: rgb(192, 192, 192);
393
+ }
394
+ }
395
+ }
396
+ }
397
+ .icon {
398
+ display: flex;
399
+
400
+ svg {
401
+ width: calc(
402
+ var(
403
+ --_ctm-mob-dn-pn-as-aw-se,
404
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
405
+ ) *
406
+ 0.5
407
+ );
408
+ height: calc(
409
+ var(
410
+ --_ctm-mob-dn-pn-as-aw-se,
411
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
412
+ ) *
413
+ 0.5
414
+ );
415
+
416
+ path {
417
+ stroke: var(
418
+ --_ctm-mob-dn-pn-as-aw-cr,
419
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
420
+ );
421
+ }
422
+ }
423
+ }
424
+ }
425
+
426
+ &[data-control-type="Side"] {
427
+ .embla__viewport {
428
+ width: calc(100% - 120px);
429
+ margin-inline: auto;
430
+ }
431
+ .left-button {
432
+ position: absolute;
433
+ left: 0;
434
+ top: 50%;
435
+ transform: translateY(-50%);
436
+ }
437
+ .right-button {
438
+ position: absolute;
439
+
440
+ right: 0;
441
+ top: 50%;
442
+ transform: translateY(-50%);
443
+ }
444
+ }
445
+
446
+ &[data-thumbnail-placement="top"] {
447
+ flex-direction: column-reverse;
448
+ }
449
+ &[data-thumbnail-placement="bottom"] {
450
+ flex-direction: column;
451
+ }
452
+ &[data-thumbnail-placement="left"] {
453
+ flex-direction: row-reverse;
454
+
455
+ .embla__thumbs {
456
+ width: var(--_ctm-lt-tl-se);
457
+ height: 100%;
458
+
459
+ & .embla__thumbs__container {
460
+ flex-direction: column;
461
+ height: 100%;
462
+ }
463
+ }
464
+ }
465
+ &[data-thumbnail-placement="right"] {
466
+ flex-direction: row;
467
+ .embla__thumbs {
468
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
469
+
470
+ height: 100%;
471
+
472
+ & .embla__thumbs__container {
473
+ flex-direction: column;
474
+ height: 100%;
475
+ }
476
+ }
477
+ }
478
+ .embla__dots {
479
+ display: flex;
480
+ flex-wrap: wrap;
481
+ justify-content: center;
482
+ align-items: center;
483
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
484
+ gap: 6px;
485
+ margin-top: 16px;
486
+
487
+ &[data-control-type="Bottom-Overflow"] {
488
+ position: absolute;
489
+ bottom: 10px;
490
+ left: 50%;
491
+ transform: translateX(-50%);
492
+ width: 75%;
493
+ }
494
+ .embla__dot {
495
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
496
+ -webkit-appearance: none;
497
+ appearance: none;
498
+ background-color: var(
499
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
500
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
501
+ );
502
+
503
+ touch-action: manipulation;
504
+ display: inline-flex;
505
+ text-decoration: none;
506
+ cursor: pointer;
507
+ border: 0;
508
+ padding: 0;
509
+ margin: 0;
510
+ // width: 0.6rem;
511
+ // height: 0.6rem;
512
+ width: var(
513
+ --_ctm-mob-dn-pn-ds-dt-se,
514
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
515
+ );
516
+ height: var(
517
+ --_ctm-mob-dn-pn-ds-dt-se,
518
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
519
+ );
520
+
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ border-radius: 50%;
525
+ }
526
+ .embla__dot:after {
527
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
528
+ width: var(
529
+ --_ctm-mob-dn-pn-ds-dt-se,
530
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
531
+ );
532
+ height: var(
533
+ --_ctm-mob-dn-pn-ds-dt-se,
534
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
535
+ );
536
+
537
+ border-radius: 50%;
538
+ display: flex;
539
+ align-items: center;
540
+ content: "";
541
+ }
542
+ .embla__dot--selected:after {
543
+ box-shadow: inset 0 0 0 1px var(--text-body);
544
+ background-color: var(
545
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
546
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
547
+ );
548
+ }
549
+ &[data-slider-control="Pagination Line"] {
550
+ .embla__dot {
551
+ width: var(
552
+ --_ctm-mob-dn-pn-le-le-wh,
553
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
554
+ );
555
+ height: var(
556
+ --_ctm-mob-dn-pn-le-le-ht,
557
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
558
+ );
559
+ background-color: var(
560
+ --_ctm-mob-dn-pn-le-or-le-cr,
561
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
562
+ );
563
+ border-radius: 6px;
564
+ }
565
+
566
+ .embla__dot--selected:after {
567
+ box-shadow: inset 0 0 0 1px var(--text-body);
568
+ border-radius: 6px;
569
+ width: var(
570
+ --_ctm-mob-dn-pn-le-le-wh,
571
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
572
+ );
573
+ height: var(
574
+ --_ctm-mob-dn-pn-le-le-ht,
575
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
576
+ );
577
+ background-color: var(
578
+ --_ctm-mob-dn-pn-le-ct-le-cr,
579
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
580
+ );
581
+ }
582
+ }
583
+ }
584
+
585
+ .embla__thumbs {
586
+ width: 100%;
587
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
588
+
589
+ position: relative;
590
+ display: grid;
591
+ grid-template-columns: 1fr;
592
+ overflow: hidden;
593
+ // margin: 10px;
594
+ padding: 10px;
595
+
596
+ .embla__thumbs__viewport {
597
+ width: 100%;
598
+ height: 100%;
599
+ position: relative;
600
+ display: flex;
601
+ flex-direction: column;
602
+
603
+ overflow: hidden;
604
+ }
605
+ .embla__thumbs__container {
606
+ display: flex;
607
+ flex-direction: row;
608
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
609
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
610
+
611
+ width: 100%;
612
+ // justify-content: center;
613
+ // height: 200px;
614
+
615
+ .embla__thumbs__slide {
616
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
617
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
618
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
619
+
620
+ & img {
621
+ width: 100%;
622
+ height: 100%;
623
+ }
624
+ }
625
+ }
626
+ }
627
+ }
628
+
629
+ .user_elements_horizontal_container {
630
+ display: flex;
631
+ flex-direction: column;
632
+ width: 100%;
633
+
634
+ // padding: 24px;
635
+ gap: 16px;
636
+
637
+ background-color: var(
638
+ --_ctm-mob-dn-wt-se-bd-cr,
639
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
640
+ );
641
+
642
+ border-color: var(
643
+ --_ctm-mob-dn-wt-se-br-cr,
644
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
645
+ );
646
+
647
+ border-style: var(
648
+ --_ctm-mob-dn-wt-se-br-se,
649
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
650
+ );
651
+
652
+ border-width: var(
653
+ --_ctm-mob-dn-wt-se-br-wh,
654
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
655
+ );
656
+
657
+ border-radius: var(
658
+ --_ctm-mob-dn-wt-se-br-rs,
659
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
660
+ );
661
+
662
+ box-shadow: var(
663
+ --_show-shadow,
664
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
665
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
666
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
667
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
668
+ );
669
+
670
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
671
+ &.vertical {
672
+ flex-direction: row;
673
+
674
+ &[data-content-alignment="Vertical"] {
675
+ flex-direction: column;
676
+ // max-width: 350px;
677
+ }
678
+
679
+ .user_elements_user_info_wrapper {
680
+ flex-direction: column;
681
+ justify-content: normal;
682
+ padding: 16px;
683
+ height: max-content;
684
+ gap: 16px;
685
+ background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
686
+ border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
687
+ border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
688
+ border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
689
+ border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
690
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
691
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
692
+
693
+ .user_elements_user_data_wrapper {
694
+ flex-direction: column;
695
+ white-space: nowrap;
696
+ align-items: flex-start;
697
+ gap: 16px;
698
+ }
699
+ }
700
+
701
+ .user_elements_quota_wrapper {
702
+ flex-direction: column;
703
+ align-items: flex-start;
704
+ height: fit-content;
705
+ background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
706
+ border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
707
+ border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
708
+ border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
709
+ border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
710
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
711
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
712
+
713
+ .quote_vertical_scroll_wrapper {
714
+ overflow-y: auto;
715
+ gap: var(--_ctm-lt-qa-im-sg);
716
+ display: flex;
717
+ width: 100%;
718
+ // max-height: 250px;
719
+ flex-direction: column;
720
+
721
+ .quote_item_wrapper {
722
+ flex-direction: column;
723
+ position: relative;
724
+
725
+ .quote_info_wrapper {
726
+ justify-content: space-between;
727
+ }
728
+
729
+ .quota_divider {
730
+ width: 100%;
731
+ height: 1px;
732
+ }
733
+ }
734
+ }
735
+ &[data-show-divider="true"] {
736
+ .quote_item_wrapper:not(:last-child)::before {
737
+ content: "";
738
+ position: absolute;
739
+ left: 0;
740
+ right: 0;
741
+ bottom: calc(
742
+ -1 *
743
+ (
744
+ var(
745
+ --_ctm-mob-lt-qa-im-sg,
746
+ var(--_ctm-tab-lt-qa-im-sg, var(--_ctm-lt-qa-im-sg))
747
+ ) /
748
+ 2
749
+ )
750
+ );
751
+ height: 2px;
752
+ background-color: gray;
753
+ // height: var(
754
+ // --_ctm-mob-dn-wt-se-dr-wt,
755
+ // var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
756
+ // );
757
+ // background-color: var(
758
+ // --_ctm-mob-dn-wt-se-dr-cr,
759
+ // var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
760
+ // );
761
+ }
762
+ }
763
+
764
+ .quote_vertical_scroll_wrap {
765
+ height: auto;
766
+ display: flex;
767
+ width: 100%;
768
+ flex-direction: column;
769
+ gap: 16px;
770
+
771
+ .quote_item_wrapper {
772
+ justify-content: space-between;
773
+ width: 100%;
774
+ align-items: center;
775
+ gap: 16px;
776
+ align-items: flex-start;
777
+ flex-direction: column;
778
+
779
+ .quota_divider {
780
+ height: 1px;
781
+ width: 100%;
782
+ }
783
+
784
+ .quote_info_wrapper {
785
+ width: 100%;
786
+ justify-content: space-between;
787
+ }
788
+ }
789
+ }
790
+ }
791
+
792
+ .user_elements_allowance_wrapper {
793
+ flex-direction: column;
794
+ align-items: flex-start;
795
+ background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
796
+ border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
797
+ border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
798
+ border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
799
+ border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
800
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
801
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
802
+
803
+ .allowance_vertical_scroll_wrapper {
804
+ overflow-y: scroll;
805
+ gap: var(--_ctm-lt-qa-im-sg);
806
+ display: flex;
807
+ width: 100%;
808
+ max-height: 250px;
809
+ flex-direction: column;
810
+
811
+ .allowance_item_wrapper {
812
+ flex-direction: column;
813
+
814
+ .allowance_info_wrapper {
815
+ justify-content: space-between;
816
+ }
817
+
818
+ .allowance_divider {
819
+ width: 100%;
820
+ height: 1px;
821
+ }
822
+ }
823
+ }
824
+
825
+ .allowance_vertical_scroll_wrap {
826
+ gap: var(--_ctm-lt-qa-im-sg);
827
+ display: flex;
828
+ width: 100%;
829
+ flex-direction: column;
830
+
831
+ .allowance_item_wrapper {
832
+ flex-direction: column;
833
+
834
+ .allowance_info_wrapper {
835
+ justify-content: space-between;
836
+ }
837
+
838
+ .allowance_divider {
839
+ width: 100%;
840
+ height: 1px;
841
+ }
842
+ }
843
+ }
844
+ }
845
+
846
+ .user_elements_user_info_secondary_wrapper {
847
+ flex-direction: column;
848
+ align-items: flex-start;
849
+ height: max-content;
850
+ background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
851
+ border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
852
+ border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
853
+ border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
854
+ border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
855
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
856
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
857
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
858
+
859
+ .overview_text {
860
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-cr);
861
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-fy);
862
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se);
863
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-se-ic);
864
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ft-wt);
865
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-le-ht);
866
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-lr-sg);
867
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-tt-an);
868
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-hg-dn-ue);
869
+ }
870
+
871
+ .shipping_address_wrapper {
872
+ flex-direction: row;
873
+ gap: 6px;
874
+ }
875
+
876
+ .secondary_info_divider {
877
+ height: 1px;
878
+ width: 100%;
879
+ }
880
+
881
+ .active_orders_wrapper {
882
+ flex-direction: row;
883
+ justify-content: space-between;
884
+ }
885
+
886
+ .payment_methods_wrapper {
887
+ flex-direction: row;
888
+ justify-content: space-between;
889
+ }
890
+
891
+ .my_cart_wrapper {
892
+ flex-direction: row;
893
+ align-items: center;
894
+ }
895
+ }
896
+ }
897
+
898
+ .user_elements_user_info_wrapper {
899
+ display: flex;
900
+ justify-content: space-between;
901
+ background-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-bd-cr);
902
+ border-color: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-cr);
903
+ border-radius: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-rs);
904
+ border-style: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-se);
905
+ border-width: var(--_ctm-dn-ur-io-dn-fl-ad-oy-br-wh);
906
+ box-shadow: var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-br)
907
+ var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ur-io-dn-fl-ad-oy-sw-cr);
908
+
909
+ .user_elements_user_name_wrapper {
910
+ display: flex;
911
+ gap: 6px;
912
+ align-items: center;
913
+
914
+ .user_elements_user_name {
915
+ display: flex;
916
+ flex: 1 0 0;
917
+ color: var(--_ctm-dn-ur-io-dn-ur-ne-dn-cr);
918
+ font-family: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-fy);
919
+ font-size: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se);
920
+ font-style: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-se-ic);
921
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ft-wt);
922
+ line-height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-le-ht);
923
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-ne-dn-lr-sg);
924
+ text-align: var(--_ctm-dn-ur-io-dn-ur-ne-dn-tt-an);
925
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-ne-dn-ue);
926
+ }
927
+
928
+ .icon {
929
+ cursor: pointer;
930
+ svg {
931
+ width: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
932
+ height: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-se);
933
+ path {
934
+ stroke: var(--_ctm-dn-ur-io-dn-ur-ne-dn-in-c1);
935
+ }
936
+ }
937
+ }
938
+ }
939
+
940
+ .user_elements_user_data_wrapper {
941
+ display: flex;
942
+ align-items: center;
943
+ gap: 12px;
944
+
945
+ .user_elements_user_data {
946
+ display: flex;
947
+
948
+ .user_elements_user_id {
949
+ display: flex;
950
+ flex: 1 0 0;
951
+ gap: 6px;
952
+ align-items: center;
953
+ color: var(--_ctm-dn-ur-io-dn-ur-id-dn-cr);
954
+ font-family: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-fy);
955
+ font-size: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se);
956
+ font-style: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-se-ic);
957
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-id-dn-ft-wt);
958
+ line-height: var(--_ctm-dn-ur-io-dn-ur-id-dn-le-ht);
959
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-id-dn-lr-sg);
960
+ text-align: var(--_ctm-dn-ur-io-dn-ur-id-dn-tt-an);
961
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-id-dn-ue);
962
+
963
+ .icon {
964
+ cursor: pointer;
965
+ svg {
966
+ width: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
967
+ height: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-se);
968
+ path {
969
+ stroke: var(--_ctm-dn-ur-io-dn-ur-id-dn-in-c1);
970
+ }
971
+ }
972
+ }
973
+ }
974
+
975
+ .user_elements_user_email {
976
+ display: flex;
977
+ flex: 1 0 0;
978
+ gap: 6px;
979
+ align-items: center;
980
+ color: var(--_ctm-dn-ur-io-dn-ur-el-dn-cr);
981
+ font-family: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-fy);
982
+ font-size: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se);
983
+ font-style: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-se-ic);
984
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-el-dn-ft-wt);
985
+ line-height: var(--_ctm-dn-ur-io-dn-ur-el-dn-le-ht);
986
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-el-dn-lr-sg);
987
+ text-align: var(--_ctm-dn-ur-io-dn-ur-el-dn-tt-an);
988
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-el-dn-ue);
989
+
990
+ .icon {
991
+ cursor: pointer;
992
+ svg {
993
+ width: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
994
+ height: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-se);
995
+ path {
996
+ stroke: var(--_ctm-dn-ur-io-dn-ur-el-dn-in-c1);
997
+ }
998
+ }
999
+ }
1000
+ }
1001
+
1002
+ .user_elements_user_phone {
1003
+ display: flex;
1004
+ flex: 1 0 0;
1005
+ gap: 6px;
1006
+ align-items: center;
1007
+ color: var(--_ctm-dn-ur-io-dn-ur-pe-dn-cr);
1008
+ font-family: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-fy);
1009
+ font-size: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se);
1010
+ font-style: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-se-ic);
1011
+ font-weight: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ft-wt);
1012
+ line-height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-le-ht);
1013
+ letter-spacing: var(--_ctm-dn-ur-io-dn-ur-pe-dn-lr-sg);
1014
+ text-align: var(--_ctm-dn-ur-io-dn-ur-pe-dn-tt-an);
1015
+ text-decoration: var(--_ctm-dn-ur-io-dn-ur-pe-dn-ue);
1016
+
1017
+ .icon {
1018
+ cursor: pointer;
1019
+ svg {
1020
+ width: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1021
+ height: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-se);
1022
+ path {
1023
+ stroke: var(--_ctm-dn-ur-io-dn-ur-pe-dn-in-c1);
1024
+ }
1025
+ }
1026
+ }
1027
+ }
1028
+ }
1029
+ }
1030
+ }
1031
+
1032
+ .user_elements_quota_wrapper {
1033
+ display: flex;
1034
+ flex-direction: row;
1035
+ width: 100%;
1036
+ align-items: center;
1037
+ gap: 16px;
1038
+ background-color: var(--_ctm-dn-qa-dn-fl-ad-oy-bd-cr);
1039
+ border-color: var(--_ctm-dn-qa-dn-fl-ad-oy-br-cr);
1040
+ border-radius: var(--_ctm-dn-qa-dn-fl-ad-oy-br-rs);
1041
+ border-style: var(--_ctm-dn-qa-dn-fl-ad-oy-br-se);
1042
+ border-width: var(--_ctm-dn-qa-dn-fl-ad-oy-br-wh);
1043
+ box-shadow: var(--_ctm-dn-qa-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-br)
1044
+ var(--_ctm-dn-qa-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-qa-dn-fl-ad-oy-sw-cr);
1045
+
1046
+ .quota_label_wrapper {
1047
+ display: flex;
1048
+ flex: 1 0 0;
1049
+ min-width: 109px;
1050
+
1051
+ .quota_label {
1052
+ display: flex;
1053
+ flex: 1 0 0;
1054
+ color: var(--_ctm-dn-qa-dn-qa-hg-dn-cr);
1055
+ font-family: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-fy);
1056
+ font-size: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se);
1057
+ font-style: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-se-ic);
1058
+ font-weight: var(--_ctm-dn-qa-dn-qa-hg-dn-ft-wt);
1059
+ line-height: var(--_ctm-dn-qa-dn-qa-hg-dn-le-ht);
1060
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-hg-dn-lr-sg);
1061
+ text-align: var(--_ctm-dn-qa-dn-qa-hg-dn-tt-an);
1062
+ text-decoration: var(--_ctm-dn-qa-dn-qa-hg-dn-ue);
1063
+ }
1064
+ }
1065
+
1066
+ .quota_upfront_wrapper {
1067
+ display: flex;
1068
+ gap: var(--_ctm-lt-qa-im-sg);
1069
+ flex-wrap: wrap;
1070
+ }
1071
+
1072
+ .quote_item_wrapper {
1073
+ display: flex;
1074
+ flex-direction: row;
1075
+ gap: var(--_ctm-lt-qa-im-sg);
1076
+
1077
+ .quote_info_wrapper {
1078
+ display: flex;
1079
+ gap: 12px;
1080
+ .quota_name_wrapper {
1081
+ display: flex;
1082
+ flex-direction: column;
1083
+ gap: 6px;
1084
+
1085
+ .quota_name {
1086
+ display: flex;
1087
+ flex: 1 0 0;
1088
+ color: var(--_ctm-dn-qa-dn-qa-ne-dn-cr);
1089
+ font-family: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-fy);
1090
+ font-size: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se);
1091
+ font-style: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-se-ic);
1092
+ font-weight: var(--_ctm-dn-qa-dn-qa-ne-dn-ft-wt);
1093
+ line-height: var(--_ctm-dn-qa-dn-qa-ne-dn-le-ht);
1094
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-ne-dn-lr-sg);
1095
+ text-align: var(--_ctm-dn-qa-dn-qa-ne-dn-tt-an);
1096
+ text-decoration: var(--_ctm-dn-qa-dn-qa-ne-dn-ue);
1097
+ }
1098
+
1099
+ .quota_expiry {
1100
+ display: flex;
1101
+ flex: 1 0 0;
1102
+ color: var(--_ctm-dn-qa-dn-qa-ey-dn-cr);
1103
+ font-family: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-fy);
1104
+ font-size: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se);
1105
+ font-style: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-se-ic);
1106
+ font-weight: var(--_ctm-dn-qa-dn-qa-ey-dn-ft-wt);
1107
+ line-height: var(--_ctm-dn-qa-dn-qa-ey-dn-le-ht);
1108
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-ey-dn-lr-sg);
1109
+ text-align: var(--_ctm-dn-qa-dn-qa-ey-dn-tt-an);
1110
+ text-decoration: var(--_ctm-dn-qa-dn-qa-ey-dn-ue);
1111
+ }
1112
+ }
1113
+
1114
+ .quota_inventory {
1115
+ display: flex;
1116
+ justify-content: center;
1117
+ align-items: center;
1118
+ color: var(--_ctm-dn-qa-dn-qa-iy-dn-cr);
1119
+ font-family: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-fy);
1120
+ font-size: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se);
1121
+ font-style: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-se-ic);
1122
+ font-weight: var(--_ctm-dn-qa-dn-qa-iy-dn-ft-wt);
1123
+ line-height: var(--_ctm-dn-qa-dn-qa-iy-dn-le-ht);
1124
+ letter-spacing: var(--_ctm-dn-qa-dn-qa-iy-dn-lr-sg);
1125
+ text-align: var(--_ctm-dn-qa-dn-qa-iy-dn-tt-an);
1126
+ text-decoration: var(--_ctm-dn-qa-dn-qa-iy-dn-ue);
1127
+ }
1128
+ }
1129
+
1130
+ .quota_divider {
1131
+ content: "";
1132
+ height: auto;
1133
+ width: 1px;
1134
+ background-color: #d0d5dd;
1135
+ }
1136
+ }
1137
+ }
1138
+
1139
+ .user_elements_allowance_wrapper {
1140
+ display: flex;
1141
+ flex-direction: row;
1142
+ width: 100%;
1143
+ align-items: center;
1144
+ gap: 16px;
1145
+ background-color: var(--_ctm-dn-ae-dn-fl-ad-oy-bd-cr);
1146
+ border-color: var(--_ctm-dn-ae-dn-fl-ad-oy-br-cr);
1147
+ border-radius: var(--_ctm-dn-ae-dn-fl-ad-oy-br-rs);
1148
+ border-style: var(--_ctm-dn-ae-dn-fl-ad-oy-br-se);
1149
+ border-width: var(--_ctm-dn-ae-dn-fl-ad-oy-br-wh);
1150
+ box-shadow: var(--_ctm-dn-ae-dn-fl-ad-oy-sw-ae) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-br)
1151
+ var(--_ctm-dn-ae-dn-fl-ad-oy-sw-sd) var(--_ctm-dn-ae-dn-fl-ad-oy-sw-cr);
1152
+
1153
+ .allowance_label_wrapper {
1154
+ display: flex;
1155
+ flex: 1 0 0;
1156
+ min-width: 109px;
1157
+
1158
+ .allowance_label {
1159
+ display: flex;
1160
+ flex: 1 0 0;
1161
+ white-space: nowrap;
1162
+ color: var(--_ctm-dn-ae-dn-ae-hg-dn-cr);
1163
+ font-family: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-fy);
1164
+ font-size: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se);
1165
+ font-style: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-se-ic);
1166
+ font-weight: var(--_ctm-dn-ae-dn-ae-hg-dn-ft-wt);
1167
+ line-height: var(--_ctm-dn-ae-dn-ae-hg-dn-le-ht);
1168
+ letter-spacing: var(--_ctm-dn-ae-dn-hg-ne-dn-lr-sg);
1169
+ text-align: var(--_ctm-dn-ae-dn-ae-hg-dn-tt-an);
1170
+ text-decoration: var(--_ctm-dn-ae-dn-ae-hg-dn-ue);
1171
+ }
1172
+ }
1173
+
1174
+ .allowance_upfront_wrapper {
1175
+ display: flex;
1176
+ gap: var(--_ctm-lt-qa-im-sg);
1177
+ flex-wrap: wrap;
1178
+ }
1179
+
1180
+ .allowance_item_wrapper {
1181
+ display: flex;
1182
+ flex-direction: row;
1183
+ gap: var(--_ctm-lt-qa-im-sg);
1184
+
1185
+ .allowance_info_wrapper {
1186
+ display: flex;
1187
+ gap: 12px;
1188
+ .allowance_name_wrapper {
1189
+ display: flex;
1190
+ flex-direction: column;
1191
+ gap: 6px;
1192
+
1193
+ .allowance_name {
1194
+ display: flex;
1195
+ flex: 1 0 0;
1196
+ color: var(--_ctm-dn-ae-dn-ae-ne-dn-cr);
1197
+ font-family: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-fy);
1198
+ font-size: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se);
1199
+ font-style: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-se-ic);
1200
+ font-weight: var(--_ctm-dn-ae-dn-ae-ne-dn-ft-wt);
1201
+ line-height: var(--_ctm-dn-ae-dn-ae-ne-dn-le-ht);
1202
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-ne-dn-lr-sg);
1203
+ text-align: var(--_ctm-dn-ae-dn-ae-ne-dn-tt-an);
1204
+ text-decoration: var(--_ctm-dn-ae-dn-ae-ne-dn-ue);
1205
+ }
1206
+
1207
+ .allowance_expiry {
1208
+ display: flex;
1209
+ flex: 1 0 0;
1210
+ color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1211
+ font-family: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-fy);
1212
+ font-size: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se);
1213
+ font-style: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-se-ic);
1214
+ font-weight: var(--_ctm-dn-ae-dn-ae-ey-dn-ft-wt);
1215
+ line-height: var(--_ctm-dn-ae-dn-ae-ey-dn-le-ht);
1216
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-ey-dn-lr-sg);
1217
+ text-align: var(--_ctm-dn-ae-dn-ae-ey-dn-tt-an);
1218
+ text-decoration: var(--_ctm-dn-ae-dn-ae-ey-dn-ue);
1219
+ }
1220
+ }
1221
+
1222
+ .allowance_inventory {
1223
+ display: flex;
1224
+ justify-content: center;
1225
+ align-items: center;
1226
+ color: var(--_ctm-dn-ae-dn-ae-ey-dn-cr);
1227
+ font-family: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-fy);
1228
+ font-size: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se);
1229
+ font-style: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-se-ic);
1230
+ font-weight: var(--_ctm-dn-ae-dn-ae-iy-dn-ft-wt);
1231
+ line-height: var(--_ctm-dn-ae-dn-ae-iy-dn-le-ht);
1232
+ letter-spacing: var(--_ctm-dn-ae-dn-ae-iy-dn-lr-sg);
1233
+ text-align: var(--_ctm-dn-ae-dn-ae-iy-dn-tt-an);
1234
+ text-decoration: var(--_ctm-dn-ae-dn-ae-iy-dn-ue);
1235
+ }
1236
+ }
1237
+
1238
+ .allowance_divider {
1239
+ content: "";
1240
+ height: auto;
1241
+ width: 1px;
1242
+ background-color: #d0d5dd;
1243
+ }
1244
+ }
1245
+ }
1246
+
1247
+ .user_elements_user_info_secondary_wrapper {
1248
+ display: flex;
1249
+ width: 100%;
1250
+ align-items: center;
1251
+ gap: 16px;
1252
+ background-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-bd-cr);
1253
+ border-color: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-cr);
1254
+ border-radius: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-rs);
1255
+ border-style: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-se);
1256
+ border-width: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-br-wh);
1257
+ box-shadow: var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-ae)
1258
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-br) var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-sd)
1259
+ var(--_ctm-dn-ur-sy-io-dn-fl-ad-oy-sw-cr);
1260
+
1261
+ .shipping_address_wrapper {
1262
+ display: flex;
1263
+ flex-direction: column;
1264
+ gap: 4px;
1265
+ flex: 1 0 0;
1266
+ align-self: stretch;
1267
+ justify-content: flex-start;
1268
+
1269
+ .shipping_address_label {
1270
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1271
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1272
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1273
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1274
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1275
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1276
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1277
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1278
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1279
+ }
1280
+
1281
+ .shipping_address {
1282
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1283
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1284
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1285
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1286
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1287
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1288
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1289
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1290
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1291
+ }
1292
+ }
1293
+
1294
+ .secondary_info_divider {
1295
+ content: "";
1296
+ height: 3rem;
1297
+ width: 1px;
1298
+ background-color: #d0d5dd;
1299
+ }
1300
+
1301
+ .active_orders_wrapper {
1302
+ display: flex;
1303
+ flex-direction: column;
1304
+ gap: 4px;
1305
+ flex: 1 0 0;
1306
+ align-self: stretch;
1307
+ justify-content: flex-start;
1308
+
1309
+ .active_order_label {
1310
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1311
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1312
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1313
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1314
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1315
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1316
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1317
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1318
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1319
+ }
1320
+
1321
+ .order_wrapper {
1322
+ display: flex;
1323
+ gap: 6px;
1324
+ .remaining_order {
1325
+ color: #243dc6;
1326
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1327
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1328
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1329
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1330
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1331
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1332
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1333
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1334
+ }
1335
+ .active_orders {
1336
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1337
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1338
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1339
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1340
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1341
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1342
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1343
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1344
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1345
+ }
1346
+ }
1347
+ }
1348
+
1349
+ .payment_methods_wrapper {
1350
+ display: flex;
1351
+ flex-direction: column;
1352
+ gap: 4px;
1353
+ flex: 1 0 0;
1354
+ align-self: stretch;
1355
+ justify-content: flex-start;
1356
+
1357
+ .payment_methods_label {
1358
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1359
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1360
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1361
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1362
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1363
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1364
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1365
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1366
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1367
+ }
1368
+
1369
+ .payment_wrapper {
1370
+ display: flex;
1371
+ gap: 6px;
1372
+ .remaining_payment {
1373
+ color: #243dc6;
1374
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1375
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1376
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1377
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1378
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1379
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1380
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1381
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1382
+ }
1383
+ .active_payment {
1384
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1385
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1386
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1387
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1388
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1389
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1390
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1391
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1392
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1393
+ }
1394
+ }
1395
+ }
1396
+
1397
+ .my_cart_wrapper {
1398
+ display: flex;
1399
+ flex-direction: row;
1400
+ gap: 16px;
1401
+ align-items: center;
1402
+
1403
+ .my_cart_info_wrapper {
1404
+ display: flex;
1405
+ flex-direction: column;
1406
+ gap: 4px;
1407
+ white-space: nowrap;
1408
+
1409
+ .my_cart_label {
1410
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-cr);
1411
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-fy);
1412
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se);
1413
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-se-ic);
1414
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ft-wt);
1415
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-le-ht);
1416
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-lr-sg);
1417
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-tt-an);
1418
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ll-dn-ue);
1419
+ }
1420
+
1421
+ .my_cart_value {
1422
+ color: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-cr);
1423
+ font-family: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-fy);
1424
+ font-size: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se);
1425
+ font-style: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-se-ic);
1426
+ font-weight: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ft-wt);
1427
+ line-height: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-le-ht);
1428
+ letter-spacing: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-lr-sg);
1429
+ text-align: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-tt-an);
1430
+ text-decoration: var(--_ctm-dn-ur-sy-io-dn-ur-sy-io-ve-dn-ue);
1431
+ }
1432
+ }
1433
+ }
1434
+ }
1435
+ }
1436
+ }
1437
+ }