@sc-360-v2/storefront-cms-library 0.4.80 → 0.4.81

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 (10) hide show
  1. package/dist/allocations.scss +1613 -1603
  2. package/dist/builder.js +1 -1
  3. package/dist/buyForHeaders.scss +6 -0
  4. package/dist/buyForPopup.scss +0 -2
  5. package/dist/cart.scss +16 -8
  6. package/dist/shipping-payments.scss +0 -1
  7. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +152 -1
  8. package/dist/types/builder/tools/element-edit/userElements.d.ts +10 -0
  9. package/dist/user-elements.scss +2 -0
  10. package/package.json +1 -1
package/dist/allocations.scss CHANGED
@@ -1,1603 +1,1613 @@
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="allocations"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
24
- // min-width: 400px;
25
- // max-width: 700px;
26
- width: 100%;
27
- height: prepareMediaVariable(--_ctm-lt-ht);
28
- }
29
- }
30
-
31
- .loading__container {
32
- width: 100%;
33
- height: 25vh;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- }
38
-
39
- .allocations__element {
40
- background-color: var(
41
- --_ctm-mob-dn-wt-se-bd-cr,
42
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
- );
44
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
- display: flex;
46
- flex-direction: column;
47
- --_sf-gp: var(
48
- --_ctm-mob-lt-im-sg,
49
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
50
- );
51
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
- row-gap: var(--_sf-gp);
53
- width: 100%;
54
- // height: 100%;
55
- border-color: var(
56
- --_ctm-mob-dn-wt-se-br-cr,
57
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
58
- );
59
- border-style: var(
60
- --_ctm-mob-dn-wt-se-br-se,
61
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
62
- );
63
- border-width: var(
64
- --_ctm-mob-dn-wt-se-br-wh,
65
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
66
- );
67
- border-radius: var(
68
- --_ctm-mob-dn-wt-se-br-rs,
69
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
70
- );
71
- box-shadow: var(
72
- --_show-shadow,
73
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
- );
78
-
79
- &[data-divider-show="true"] {
80
- --_sf-dvdr: var(
81
- --_ctm-mob-dn-dr-dr-wh,
82
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
83
- )
84
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
85
- var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
- --_sf-dvdr-gap: var(--_sf-gp);
87
- }
88
- &[data-icon-position="Left"] {
89
- --_sf-fd: row-reverse;
90
- --_sf-jc: flex-end;
91
- }
92
- &[data-show-icon="false"] {
93
- --_sf-show-icon-ff: none;
94
- }
95
- &[data-divider-show="true"] {
96
- // .accordion-item:not(:last-child) {
97
- // border-bottom: var(
98
- // --_ctm-mob-dn-dr-dr-wh,
99
- // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
100
- // )
101
- // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
102
- // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
103
- // }
104
- }
105
-
106
- .load__more__button__container {
107
- display: flex;
108
- width: 100%;
109
- margin-top: 10px;
110
- &:hover {
111
- --_sf-hr-bn-at: var(
112
- --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
113
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
114
- );
115
- }
116
-
117
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
118
- }
119
-
120
- .btn__with__text[data-btn-name="redeemButton"] {
121
- &[data-show-shadow="false"] {
122
- --_show-shadow: none;
123
- }
124
- &[data-icon-position="left"] {
125
- --_sf-fd-bn: row;
126
- }
127
- &[data-icon-position="right"] {
128
- --_sf-fd-bn: row-reverse;
129
- }
130
- &[data-icon-position="center"] {
131
- --_sf-fd-bn: row;
132
- }
133
-
134
- &:hover {
135
- --_sf-hr-bd-cr: var(
136
- --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
137
- var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
138
- );
139
- --_sf-hr-br-cr: var(
140
- --_ctm-mob-dn-rm-bn-hr-se-br-cr,
141
- var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
142
- );
143
- --_sf-hr-br-se: var(
144
- --_ctm-mob-dn-rm-bn-hr-se-br-se,
145
- var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
146
- );
147
- --_sf-hr-br-wh: var(
148
- --_ctm-mob-dn-rm-bn-hr-se-br-wh,
149
- var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
150
- );
151
- --_sf-hr-br-rs: var(
152
- --_ctm-mob-dn-rm-bn-hr-se-br-rs,
153
- var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
154
- );
155
- --_sf-hr-at: var(
156
- --_ctm-mob-dn-rm-bn-hr-se-at,
157
- var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
158
- );
159
- --_sf-hr-gp: var(
160
- --_ctm-mob-dn-rm-bn-hr-se-gp,
161
- var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
162
- );
163
-
164
- // for shadow
165
- --_sf-hr-sw-ae: var(
166
- --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
167
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
168
- );
169
- --_sf-hr-sw-br: var(
170
- --_ctm-mob-dn-rm-bn-hr-se-sw-br,
171
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
172
- );
173
- --_sf-hr-sw-hr: var(
174
- --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
175
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
176
- );
177
- --_sf-hr-sw-cr: var(
178
- --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
179
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
180
- );
181
-
182
- // for font
183
-
184
- --_sf-hr-cr: var(
185
- --_ctm-mob-dn-rm-bn-hr-se-cr,
186
- var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
187
- );
188
- --_sf-hr-ft-fy: var(
189
- --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
190
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
191
- );
192
- --_sf-hr-ft-se: var(
193
- --_ctm-mob-dn-rm-bn-hr-se-ft-se,
194
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
195
- );
196
- --_sf-hr-ft-wt: var(
197
- --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
198
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
199
- );
200
- --_sf-hr-ft-se-ic: var(
201
- --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
202
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
203
- );
204
- --_sf-hr-tt-an: var(
205
- --_ctm-mob-dn-rm-bn-hr-se-tt-an,
206
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
207
- );
208
- --_sf-hr-lr-sg: var(
209
- --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
210
- var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
211
- );
212
- --_sf-hr-le-ht: var(
213
- --_ctm-mob-dn-rm-bn-hr-se-le-ht,
214
- var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
215
- );
216
-
217
- --_sf-hr-in-se: var(
218
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
219
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
220
- );
221
- --_sf-hr-in-se: var(
222
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
223
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
224
- );
225
- --_sf-hr-in-c1: var(
226
- --_ctm-mob-dn-rm-bn-hr-se-in-c1,
227
- var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
228
- );
229
- --_sf-hr-ue: var(
230
- --_ctm-mob-dn-rm-bn-hr-se-ue,
231
- var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
232
- );
233
-
234
- // for pading and width
235
- --_sf-hr-pg: var(
236
- --_ctm-mob-dn-rm-bn-hr-pg,
237
- var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
238
- );
239
- --_sf-hr-wh: var(
240
- --_ctm-mob-dn-rm-bn-hr-wh,
241
- var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
242
- );
243
-
244
- &[data-hover-show-shadow="false"] {
245
- --_hover-show-shadow: none;
246
- }
247
- &[data-hover-show-icon="false"] {
248
- --_hover-show-icon: none;
249
- }
250
- }
251
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
252
-
253
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
254
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
255
- display: flex;
256
- flex-direction: var(--_sf-fd-bn);
257
- align-items: center;
258
-
259
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
260
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));
261
-
262
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
263
-
264
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
265
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
266
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
267
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
268
-
269
- &[data-show-border="true"] {
270
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
271
-
272
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se));
273
-
274
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh));
275
- }
276
-
277
- .txt {
278
- display: flex;
279
-
280
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
281
-
282
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
283
-
284
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
285
-
286
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt));
287
-
288
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic));
289
-
290
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an));
291
-
292
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg));
293
-
294
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht));
295
-
296
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
297
- }
298
-
299
- .icon {
300
- display: var(--_hover-show-icon, var(--_show-icon, flex));
301
- svg {
302
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
303
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
304
-
305
- path {
306
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
307
- }
308
- }
309
- }
310
- [data-element-style="Text"] {
311
- display: inline-block;
312
- width: 100%;
313
- }
314
-
315
- .icon--hover {
316
- // position: absolute;
317
- // inset: 0;
318
- // opacity: 0;
319
- display: none;
320
- transition: opacity 0.2s ease;
321
- }
322
-
323
- &:hover .icon--hover {
324
- // opacity: 1;
325
- display: flex;
326
- }
327
-
328
- &:hover .icon--default {
329
- // opacity: 0;
330
- display: none;
331
- }
332
- }
333
- }
334
-
335
- .allocations_table_wrapper {
336
- display: flex;
337
- flex-direction: column;
338
- align-self: stretch;
339
- align-items: center;
340
- overflow-x: auto;
341
- width: 100%;
342
- .table__common_parent {
343
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
344
- width: 100%;
345
-
346
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
347
- // --_aspect-ratio: calc(
348
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
349
- // );
350
-
351
- .pagination:hover {
352
- --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
353
- }
354
-
355
- .pagination .active:hover {
356
- cursor: pointer;
357
- --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
358
- --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
359
- --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
360
- --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
361
- --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
362
- --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
363
- --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
364
- --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
365
- --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
366
- }
367
- &[data-widget-shadow="false"] {
368
- .table__wrapper {
369
- --_show-shadow: none;
370
- }
371
- }
372
- &[data-widget-border="true"] {
373
- .table__wrapper {
374
- border-color: var(
375
- --_ctm-mob-dn-te-wt-br-cr,
376
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
377
- );
378
- border-style: var(
379
- --_ctm-mob-dn-te-wt-br-se,
380
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
381
- );
382
- border-width: var(
383
- --_ctm-mob-dn-te-wt-br-wh,
384
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
385
- );
386
- }
387
- }
388
- &[data-table-shadow="false"] {
389
- .table__container {
390
- --_show-table-shadow: none;
391
- }
392
- }
393
- &[data-table-border="true"] {
394
- .table__container {
395
- border-color: var(
396
- --_ctm-mob-dn-te-br-cr,
397
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
398
- );
399
- border-style: var(
400
- --_ctm-mob-dn-te-br-se,
401
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
402
- );
403
- border-width: var(
404
- --_ctm-mob-dn-te-br-wh,
405
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
406
- );
407
- }
408
- }
409
-
410
- &[data-header-divider="true"] {
411
- thead tr th {
412
- border-bottom: 1px solid
413
- var(
414
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
415
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
416
- );
417
- }
418
- }
419
- &[data-row-divider="true"] {
420
- tbody tr {
421
- border-bottom: 1px solid
422
- var(
423
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
424
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
425
- );
426
- }
427
- }
428
- &[data-column-divider="true"] {
429
- tbody tr td,
430
- thead tr th {
431
- border-right: 1px solid
432
- var(
433
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
434
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
435
- );
436
- }
437
-
438
- tbody tr td:last-child,
439
- thead tr th:last-child {
440
- border-right: none;
441
- }
442
- }
443
- &[data-show-more-rows="onScroll"] {
444
- .table__container {
445
- overflow-y: scroll;
446
- height: var(
447
- --_ctm-mob-lt-te-ht,
448
- var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
449
- ) !important;
450
-
451
- &::-webkit-scrollbar {
452
- width: var(
453
- --_ctm-mob-dn-sl-br-sl-br-wh,
454
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
455
- );
456
- }
457
-
458
- &::-webkit-scrollbar-track {
459
- background-color: var(--_base-white);
460
- }
461
-
462
- &::-webkit-scrollbar-thumb {
463
- background-color: var(
464
- --_ctm-mob-dn-sl-br-sl-br-cr,
465
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
466
- );
467
- }
468
-
469
- // // Scrollbar thumb when hovered
470
- // &::-webkit-scrollbar-thumb:hover {
471
- // background-color: #555; // Darker color when hovering over the thumb
472
- // }
473
-
474
- // // For Firefox, using scrollbar-width and scrollbar-color
475
- // scrollbar-width: thin; // Thin scrollbar
476
- // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
477
- }
478
- }
479
-
480
- &[data-alternative-row-colors="true"] {
481
- tbody .tbody__row__divider:nth-child(odd) {
482
- background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
483
- }
484
- }
485
- .table__wrapper {
486
- flex: 1 1 auto;
487
- min-width: 0;
488
- overflow-x: auto;
489
- padding: var(
490
- --_ctm-mob-lt-pg,
491
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
492
- );
493
-
494
- background-color: var(
495
- --_ctm-mob-dn-te-wt-bd-cr,
496
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
497
- );
498
-
499
- border-radius: var(
500
- --_ctm-mob-dn-te-wt-br-rs,
501
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
502
- );
503
-
504
- box-shadow: var(
505
- --_show-shadow,
506
- var(
507
- --_ctm-mob-dn-te-wt-sw-ae,
508
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
509
- )
510
- var(
511
- --_ctm-mob-dn-te-wt-sw-br,
512
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
513
- )
514
- var(
515
- --_ctm-mob-dn-te-wt-sw-sd,
516
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
517
- )
518
- var(
519
- --_ctm-mob-dn-te-wt-sw-cr,
520
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
521
- )
522
- );
523
-
524
- width: 100%;
525
-
526
- .table__container {
527
- background-color: var(
528
- --_ctm-mob-dn-te-bd-cr,
529
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
530
- );
531
-
532
- border-radius: var(
533
- --_ctm-mob-dn-te-br-rs,
534
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
535
- );
536
-
537
- box-shadow: var(
538
- --_show-table-shadow,
539
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
540
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
541
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
542
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
543
- );
544
- }
545
-
546
- h3 {
547
- text-align: center;
548
- width: 100%;
549
- margin-bottom: 10px;
550
- }
551
- table {
552
- border-collapse: collapse;
553
- // border: none;
554
- width: 100%;
555
- // height: 100%;
556
- text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
557
- width: max-content;
558
- min-width: 100%;
559
- table-layout: auto;
560
- th,
561
- td {
562
- border: none;
563
- }
564
- thead {
565
- background-color: var(
566
- --_ctm-mob-dn-te-hr-bd-cr,
567
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
568
- );
569
-
570
- .thead__row__divider {
571
- height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
572
-
573
- .th__col__divider {
574
- padding: var(
575
- --_ctm-mob-lt-hr-cl-pg,
576
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
577
- );
578
-
579
- color: var(
580
- --_ctm-mob-dn-hr-tt-cr,
581
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
582
- );
583
-
584
- font-family: var(
585
- --_ctm-mob-dn-hr-tt-ft-fy,
586
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
587
- );
588
-
589
- font-size: var(
590
- --_ctm-mob-dn-hr-tt-ft-se,
591
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
592
- );
593
-
594
- font-weight: var(
595
- --_ctm-mob-dn-hr-tt-ft-wt,
596
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
597
- );
598
-
599
- text-decoration: var(
600
- --_ctm-mob-dn-hr-tt-ue,
601
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
602
- );
603
-
604
- font-style: var(
605
- --_ctm-mob-dn-hr-tt-ft-se-ic,
606
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
607
- );
608
-
609
- text-align: var(
610
- --_ctm-mob-dn-hr-tt-tt-an,
611
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
612
- );
613
-
614
- letter-spacing: var(
615
- --_ctm-mob-dn-hr-tt-lr-sg,
616
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
617
- );
618
-
619
- line-height: var(
620
- --_ctm-mob-dn-hr-tt-le-ht,
621
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
622
- );
623
- }
624
- }
625
- }
626
- tbody {
627
- .tbody__row__divider {
628
- background-color: var(
629
- --_ctm-mob-dn-te-rw-bd-cr,
630
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
631
- );
632
-
633
- height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
634
-
635
- .td__col__divider {
636
- padding: var(
637
- --_ctm-mob-lt-rw-cl-pg,
638
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
639
- );
640
-
641
- color: var(
642
- --_sf-hr-fc,
643
- var(
644
- --_ctm-mob-dn-rw-tt-cr,
645
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
646
- )
647
- );
648
-
649
- font-family: var(
650
- --_sf-hr-ff,
651
- var(
652
- --_ctm-mob-dn-rw-tt-ft-fy,
653
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
654
- )
655
- );
656
-
657
- font-size: var(
658
- --_sf-hr-fs,
659
- var(
660
- --_ctm-mob-dn-rw-tt-ft-se,
661
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
662
- )
663
- );
664
-
665
- text-decoration: var(
666
- --_ctm-mob-dn-rw-tt-ue,
667
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
668
- );
669
-
670
- font-weight: var(
671
- --_sf-hr-fw,
672
- var(
673
- --_ctm-mob-dn-rw-tt-ft-wt,
674
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
675
- )
676
- );
677
-
678
- font-style: var(
679
- --_sf-hr-ft,
680
- var(
681
- --_ctm-mob-dn-rw-tt-ft-se-ic,
682
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
683
- )
684
- );
685
-
686
- text-align: var(
687
- --_sf-hr-ta,
688
- var(
689
- --_ctm-mob-dn-rw-tt-tt-an,
690
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
691
- )
692
- );
693
-
694
- letter-spacing: var(
695
- --_sf-hr-ls,
696
- var(
697
- --_ctm-mob-dn-rw-tt-lr-sg,
698
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
699
- )
700
- );
701
-
702
- line-height: var(
703
- --_sf-hr-lh,
704
- var(
705
- --_ctm-mob-dn-rw-tt-le-ht,
706
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
707
- )
708
- );
709
- }
710
- }
711
- }
712
- }
713
-
714
- .pagination {
715
- display: var(--_d-flex);
716
- align-items: var(--_align-center);
717
- justify-content: var(
718
- --_ctm-mob-lt-pn-at,
719
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
720
- );
721
- margin-top: 10px;
722
- background-color: var(
723
- --_sf-bd-cr,
724
- var(
725
- --_ctm-mob-dn-pn-dt-se-bd-cr,
726
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
727
- )
728
- );
729
- &.pagination__center {
730
- justify-content: var(justify-center);
731
- }
732
-
733
- button {
734
- svg {
735
- width: var(--_width-18);
736
- height: var(--_height-18);
737
- path {
738
- stroke: var(--_gray-500);
739
- // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
740
- }
741
- }
742
- }
743
- span {
744
- float: left;
745
- padding: var(--_pd-8) var(--_pd-16);
746
- text-decoration: none;
747
- span {
748
- // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
749
- // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
750
- // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
751
-
752
- // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
753
- // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
754
- // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
755
- // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
756
- // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
757
- }
758
- &.active:hover {
759
- &hover {
760
- --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
761
- --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
762
- --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
763
- --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
764
- --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
765
- --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
766
- --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
767
- --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
768
- }
769
- }
770
- &.active {
771
- color: var(
772
- --_sf-hr-fc,
773
- var(
774
- --_ctm-mob-dn-pn-dt-se-cr,
775
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
776
- )
777
- );
778
-
779
- font-family: var(
780
- --_sf-hr-ff,
781
- var(
782
- --_ctm-mob-dn-pn-dt-se-ft-fy,
783
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
784
- )
785
- );
786
-
787
- font-size: var(
788
- --_sf-hr-fs,
789
- var(
790
- --_ctm-mob-dn-pn-dt-se-ft-se,
791
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
792
- )
793
- );
794
-
795
- text-decoration: var(
796
- --_sf-hr-td,
797
- var(
798
- --_ctm-mob-dn-pn-dt-se-ue,
799
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
800
- )
801
- );
802
-
803
- font-weight: var(
804
- --_sf-hr-fw,
805
- var(
806
- --_ctm-mob-dn-pn-dt-se-ft-wt,
807
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
808
- )
809
- );
810
-
811
- font-style: var(
812
- --_sf-hr-ft,
813
- var(
814
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
815
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
816
- )
817
- );
818
-
819
- text-align: var(
820
- --_sf-hr-ta,
821
- var(
822
- --_ctm-mob-dn-pn-dt-se-tt-an,
823
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
824
- )
825
- );
826
-
827
- letter-spacing: var(
828
- --_sf-hr-ls,
829
- var(
830
- --_ctm-mob-dn-pn-dt-se-lr-sg,
831
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
832
- )
833
- );
834
-
835
- line-height: var(
836
- --_sf-hr-lh,
837
- var(
838
- --_ctm-mob-dn-pn-dt-se-le-ht,
839
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
840
- )
841
- );
842
- }
843
- }
844
- .pagination__arrows {
845
- color: var(
846
- --_sf-hr-fc,
847
- var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
848
- );
849
-
850
- font-size: var(
851
- --_sf-hr-fs,
852
- var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
853
- );
854
- }
855
- }
856
- }
857
- }
858
-
859
- .no__data__found {
860
- color: var(--_gray-600);
861
- font-size: 14px;
862
- font-weight: 600;
863
- line-height: 20px;
864
- padding: 16px 24px;
865
- text-align: center;
866
- }
867
-
868
- .note_wrapper {
869
- display: flex;
870
- width: 100%;
871
- padding: 0px 16px;
872
- flex-direction: column;
873
- justify-content: center;
874
- align-items: center;
875
- gap: 8px;
876
-
877
- min-height: 76px;
878
-
879
- .note {
880
- color: var(--_gray-600);
881
- font-weight: 400;
882
- line-height: 24px;
883
- }
884
-
885
- .redeem_now_wrapper {
886
- display: flex;
887
- justify-content: center;
888
- align-items: center;
889
- gap: 24px;
890
-
891
- .redeem_now_btn {
892
- display: flex;
893
- justify-content: center;
894
- align-items: center;
895
- gap: 8px;
896
- color: var(--_primary-400);
897
- font-size: 14px;
898
- font-weight: 600;
899
- line-height: 20px;
900
-
901
- &[data-has-link="true"] {
902
- cursor: pointer;
903
- }
904
-
905
- &:hover {
906
- color: #53389e;
907
- }
908
-
909
- &:focus {
910
- color: #162578;
911
- }
912
-
913
- &:disabled {
914
- color: #d0d5dd;
915
- }
916
- }
917
- }
918
- }
919
- .btn__with__text[data-btn-name="loadMore"] {
920
- &[data-show-shadow="false"] {
921
- --_show-shadow: none;
922
- }
923
- &[data-icon-position="left"] {
924
- --_sf-fd-bn: row;
925
- }
926
- &[data-icon-position="right"] {
927
- --_sf-fd-bn: row-reverse;
928
- }
929
- &[data-icon-position="center"] {
930
- --_sf-fd-bn: row;
931
- }
932
-
933
- &:hover {
934
- --_sf-hr-bd-cr: var(
935
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
936
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
937
- );
938
- --_sf-hr-br-cr: var(
939
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
940
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
941
- );
942
- --_sf-hr-br-se: var(
943
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
944
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
945
- );
946
- --_sf-hr-br-wh: var(
947
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
948
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
949
- );
950
- --_sf-hr-br-rs: var(
951
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
952
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
953
- );
954
- --_sf-hr-at: var(
955
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
956
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
957
- );
958
- --_sf-hr-gp: var(
959
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
960
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
961
- );
962
-
963
- // for shadow
964
- --_sf-hr-sw-ae: var(
965
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
966
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
967
- );
968
- --_sf-hr-sw-br: var(
969
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
970
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
971
- );
972
- --_sf-hr-sw-hr: var(
973
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
974
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
975
- );
976
- --_sf-hr-sw-cr: var(
977
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
978
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
979
- );
980
-
981
- // for font
982
-
983
- --_sf-hr-cr: var(
984
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
985
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
986
- );
987
- --_sf-hr-ft-fy: var(
988
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
989
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
990
- );
991
- --_sf-hr-ft-se: var(
992
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
993
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
994
- );
995
- --_sf-hr-ft-wt: var(
996
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
997
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
998
- );
999
- --_sf-hr-ft-se-ic: var(
1000
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1001
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1002
- );
1003
- --_sf-hr-tt-an: var(
1004
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1005
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1006
- );
1007
- --_sf-hr-lr-sg: var(
1008
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1009
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1010
- );
1011
- --_sf-hr-le-ht: var(
1012
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1013
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1014
- );
1015
-
1016
- --_sf-hr-in-se: var(
1017
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1018
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1019
- );
1020
- --_sf-hr-in-se: var(
1021
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1022
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1023
- );
1024
- --_sf-hr-in-c1: var(
1025
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1026
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1027
- );
1028
- --_sf-hr-ue: var(
1029
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1030
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1031
- );
1032
-
1033
- // for pading and width
1034
- --_sf-hr-pg: var(
1035
- --_ctm-mob-dn-ld-me-bn-hr-pg,
1036
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1037
- );
1038
- --_sf-hr-wh: var(
1039
- --_ctm-mob-dn-ld-me-bn-hr-wh,
1040
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1041
- );
1042
-
1043
- &[data-hover-show-shadow="false"] {
1044
- --_hover-show-shadow: none;
1045
- }
1046
- &[data-hover-show-icon="false"] {
1047
- --_hover-show-icon: none;
1048
- }
1049
- }
1050
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1051
-
1052
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
1053
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
1054
- display: flex;
1055
- flex-direction: var(--_sf-fd-bn);
1056
- align-items: center;
1057
-
1058
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
1059
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));
1060
-
1061
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1062
-
1063
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1064
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1065
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1066
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1067
-
1068
- &[data-show-border="true"] {
1069
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
1070
-
1071
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
1072
-
1073
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
1074
- }
1075
-
1076
- .txt {
1077
- display: flex;
1078
-
1079
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
1080
-
1081
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
1082
-
1083
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
1084
-
1085
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1086
-
1087
- font-style: var(
1088
- --_sf-hr-ft-se-ic,
1089
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1090
- );
1091
-
1092
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1093
-
1094
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
1095
-
1096
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
1097
-
1098
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1099
- }
1100
-
1101
- .icon {
1102
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1103
- svg {
1104
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1105
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1106
-
1107
- path {
1108
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
1109
- }
1110
- }
1111
- }
1112
- [data-element-style="Text"] {
1113
- display: inline-block;
1114
- width: 100%;
1115
- }
1116
-
1117
- .icon--hover {
1118
- // position: absolute;
1119
- // inset: 0;
1120
- // opacity: 0;
1121
- display: none;
1122
- transition: opacity 0.2s ease;
1123
- }
1124
-
1125
- &:hover .icon--hover {
1126
- // opacity: 1;
1127
- display: flex;
1128
- }
1129
-
1130
- &:hover .icon--default {
1131
- // opacity: 0;
1132
- display: none;
1133
- }
1134
- }
1135
- }
1136
-
1137
- .slider_wrapper {
1138
- display: flex;
1139
- height: 60px;
1140
- align-items: flex-start;
1141
- gap: 0px;
1142
- white-space: nowrap;
1143
- width: 100%;
1144
- flex-direction: column;
1145
- height: auto;
1146
- .slider_header_wrapper {
1147
- display: flex;
1148
- align-items: center;
1149
- gap: 12px;
1150
- justify-content: space-between;
1151
- width: 100%;
1152
- .slider_header_wrapper_left {
1153
- display: flex;
1154
- align-items: center;
1155
- gap: 12px;
1156
- .slider_heading {
1157
- height: auto;
1158
- }
1159
-
1160
- .slider_heading {
1161
- color: #475467;
1162
- text-align: center;
1163
- font-size: 14px;
1164
- height: 60px;
1165
- font-weight: 600;
1166
- line-height: 20px;
1167
- align-items: center;
1168
- display: flex;
1169
- }
1170
- }
1171
- .redeem_now_wrapper {
1172
- .redeem_now_btn {
1173
- display: flex;
1174
- justify-content: center;
1175
- align-items: center;
1176
- gap: 8px;
1177
- color: var(--_primary-400);
1178
- font-size: 14px;
1179
- font-weight: 600;
1180
- line-height: 20px;
1181
-
1182
- &:hover {
1183
- color: #53389e;
1184
- }
1185
-
1186
- &:focus {
1187
- color: #162578;
1188
- }
1189
-
1190
- &:disabled {
1191
- color: #d0d5dd;
1192
- }
1193
- }
1194
- }
1195
- }
1196
-
1197
- .allocations_slider_slide_wrapper {
1198
- display: flex;
1199
- align-items: center;
1200
- gap: 12px;
1201
- height: 60px;
1202
- width: fit-content;
1203
- margin-right: var(--_ctm-lt-sg-bn-is);
1204
-
1205
- .allocations_left_info_wrapper {
1206
- display: flex;
1207
- flex-direction: column;
1208
- align-items: flex-start;
1209
-
1210
- .product_name {
1211
- color: #101828;
1212
- white-space: nowrap;
1213
- font-size: 14px;
1214
- font-weight: 700;
1215
- line-height: 20px;
1216
- }
1217
-
1218
- .expiry_date {
1219
- color: #70707b;
1220
- font-size: 11px;
1221
- font-weight: 400;
1222
- line-height: 18px;
1223
- white-space: nowrap;
1224
- }
1225
- }
1226
-
1227
- .allocations_right_info_wrapper {
1228
- display: flex;
1229
- width: 48px;
1230
- height: 36px;
1231
- justify-content: center;
1232
- align-items: center;
1233
- gap: 10px;
1234
-
1235
- .product_quantity {
1236
- color: #475467;
1237
- white-space: nowrap;
1238
- font-size: 20px;
1239
- font-weight: 600;
1240
- line-height: 30px;
1241
- }
1242
- }
1243
- }
1244
- }
1245
- .est__dropdown__main {
1246
- position: relative;
1247
- min-width: 150px;
1248
-
1249
- label {
1250
- font-size: 14px;
1251
- color: var(--_gray-700);
1252
- margin-bottom: 8px;
1253
- display: block;
1254
- }
1255
-
1256
- .est__dropdown {
1257
- position: relative;
1258
- .est__dropdown__button {
1259
- display: flex;
1260
- align-items: center;
1261
- width: 100%;
1262
- border: 1px solid var(--_gray-200);
1263
- border-radius: 6px;
1264
-
1265
- .value__selected {
1266
- width: 100%;
1267
- border: none;
1268
- background-color: transparent;
1269
- }
1270
- }
1271
-
1272
- &.open .list {
1273
- display: flex;
1274
- padding: 4px;
1275
- }
1276
-
1277
- .list {
1278
- display: none;
1279
- flex-direction: column;
1280
- border: 1px solid var(--_gray-200);
1281
- border-radius: 6px;
1282
- position: absolute;
1283
- top: 100%;
1284
- left: 0;
1285
- width: 100%;
1286
- background-color: #fff;
1287
- border-radius: 4px;
1288
- z-index: var(--_higher-zIndex);
1289
- max-height: 200px;
1290
- overflow-y: auto;
1291
-
1292
- &.top {
1293
- bottom: 100%;
1294
- top: auto;
1295
- }
1296
-
1297
- .list__option {
1298
- padding: 12px;
1299
- cursor: pointer;
1300
- text-align: left;
1301
- &.selected {
1302
- background-color: var(--_primary-25);
1303
- color: var(--_primary-400);
1304
- }
1305
- &:hover {
1306
- background-color: var(--_primary-25);
1307
- color: var(--_primary-400);
1308
- }
1309
- }
1310
- }
1311
- }
1312
- }
1313
- .embla {
1314
- width: 100%;
1315
- height: 100%;
1316
- position: relative;
1317
- display: flex;
1318
- flex-direction: column;
1319
-
1320
- // overflow: hidden;
1321
-
1322
- .embla__viewport {
1323
- width: 100%;
1324
- height: 100%;
1325
- position: relative;
1326
- display: flex;
1327
- flex-direction: column;
1328
-
1329
- overflow: hidden;
1330
-
1331
- .embla__container {
1332
- width: 100%;
1333
- height: 100%;
1334
- display: flex;
1335
- grid-template-rows: 100%;
1336
- // grid-template-columns: 100%;
1337
- // grid-template-columns: repeat(
1338
- // var(--_ctm-lt-is-pr-se),
1339
- // calc(100% / var(--_ctm-lt-is-pr-se))
1340
- // );
1341
- // grid-auto-flow: column;
1342
- gap: var(--_ctm-lt-sh-im-sg);
1343
-
1344
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1345
- height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1346
- }
1347
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1348
- height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1349
- }
1350
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
1351
- height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1352
- }
1353
-
1354
- .embla__slide {
1355
- // width: 100%;
1356
- height: 100%;
1357
- }
1358
- }
1359
- }
1360
-
1361
- .arrow-navigation {
1362
- display: flex;
1363
- position: absolute;
1364
- top: 50%;
1365
- left: 50%;
1366
- width: 100%;
1367
- justify-content: space-between;
1368
- transform: translate(-50%, -50%);
1369
- // padding-left: 20px;
1370
- &[data-control-type="Side"] {
1371
- .left-button,
1372
- .right-button {
1373
- background-color: transparent;
1374
- }
1375
- }
1376
- &[data-background-shape="Round"] {
1377
- .left-button,
1378
- .right-button {
1379
- background-color: #f2f5f5;
1380
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1381
- }
1382
- }
1383
- &[data-control-type="Bottom-Overflow"] {
1384
- transform: translateX(-50%);
1385
- width: 100%;
1386
- justify-content: center;
1387
- gap: 12px;
1388
- top: unset;
1389
- bottom: 6px;
1390
- }
1391
- &[data-control-type="Bottom"] {
1392
- transform: unset;
1393
- position: static;
1394
- width: 100%;
1395
- justify-content: center;
1396
- gap: 12px;
1397
- margin-top: 10px;
1398
- }
1399
- .left-button {
1400
- padding: 10px;
1401
- border-radius: 50%;
1402
- border: none;
1403
- width: var(--_ctm-dn-pn-as-aw-se);
1404
- height: var(--_ctm-dn-pn-as-aw-se);
1405
- display: flex;
1406
- align-items: center;
1407
- justify-content: center;
1408
- cursor: pointer;
1409
- outline: none;
1410
- margin-left: 12px;
1411
- &:disabled {
1412
- & svg {
1413
- path {
1414
- stroke: rgb(192, 192, 192);
1415
- }
1416
- }
1417
- }
1418
- }
1419
- .right-button {
1420
- border-radius: 50%;
1421
- border: none;
1422
- width: var(--_ctm-dn-pn-as-aw-se);
1423
- height: var(--_ctm-dn-pn-as-aw-se);
1424
- display: flex;
1425
- align-items: center;
1426
- justify-content: center;
1427
- cursor: pointer;
1428
- outline: none;
1429
- margin-right: 12px;
1430
- padding: 10px;
1431
-
1432
- &:disabled {
1433
- & svg {
1434
- path {
1435
- stroke: rgb(192, 192, 192);
1436
- }
1437
- }
1438
- }
1439
- }
1440
- .icon {
1441
- display: flex;
1442
- svg {
1443
- width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1444
- height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1445
- path {
1446
- stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1447
- }
1448
- }
1449
- }
1450
- }
1451
-
1452
- &[data-thumbnail-placement="top"] {
1453
- flex-direction: column-reverse;
1454
- }
1455
- &[data-thumbnail-placement="bottom"] {
1456
- flex-direction: column;
1457
- }
1458
- &[data-thumbnail-placement="left"] {
1459
- flex-direction: row-reverse;
1460
-
1461
- .embla__thumbs {
1462
- width: var(--_ctm-lt-tl-se);
1463
- height: 100%;
1464
-
1465
- & .embla__thumbs__container {
1466
- flex-direction: column;
1467
- height: 100%;
1468
- }
1469
- }
1470
- }
1471
- &[data-thumbnail-placement="right"] {
1472
- flex-direction: row;
1473
- .embla__thumbs {
1474
- width: var(--_ctm-lt-tl-se);
1475
- height: 100%;
1476
-
1477
- & .embla__thumbs__container {
1478
- flex-direction: column;
1479
- height: 100%;
1480
- }
1481
- }
1482
- }
1483
- &[data-control-type="Side"] {
1484
- display: flex;
1485
- align-self: center;
1486
- gap: 16px;
1487
- flex-direction: row;
1488
- .left-button:disabled,
1489
- .right-button:disabled {
1490
- display: none;
1491
- }
1492
- }
1493
- .embla__dots {
1494
- display: flex;
1495
- flex-wrap: wrap;
1496
- justify-content: center;
1497
- align-items: center;
1498
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1499
- gap: 6px;
1500
- margin-top: 16px;
1501
-
1502
- &[data-control-type="Bottom-Overflow"] {
1503
- position: absolute;
1504
- bottom: 10px;
1505
- left: 50%;
1506
- transform: translateX(-50%);
1507
- width: 75%;
1508
- }
1509
- .embla__dot {
1510
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1511
- -webkit-appearance: none;
1512
- appearance: none;
1513
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
1514
- touch-action: manipulation;
1515
- display: inline-flex;
1516
- text-decoration: none;
1517
- cursor: pointer;
1518
- border: 0;
1519
- padding: 0;
1520
- margin: 0;
1521
- // width: 0.6rem;
1522
- // height: 0.6rem;
1523
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1524
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1525
- display: flex;
1526
- align-items: center;
1527
- justify-content: center;
1528
- border-radius: 50%;
1529
- }
1530
- .embla__dot:after {
1531
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1532
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1533
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1534
- border-radius: 50%;
1535
- display: flex;
1536
- align-items: center;
1537
- content: "";
1538
- }
1539
- .embla__dot--selected:after {
1540
- box-shadow: inset 0 0 0 1px var(--text-body);
1541
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1542
- }
1543
- &[data-slider-control="Pagination Line"] {
1544
- .embla__dot {
1545
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1546
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1547
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
1548
-
1549
- border-radius: 6px;
1550
- }
1551
- .embla__dot--selected:after {
1552
- box-shadow: inset 0 0 0 1px var(--text-body);
1553
- border-radius: 6px;
1554
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1555
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1556
- // background-color: #fff;
1557
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
1558
- }
1559
- }
1560
- }
1561
-
1562
- .embla__thumbs {
1563
- width: 100%;
1564
- height: var(--_ctm-lt-tl-se);
1565
- position: relative;
1566
- display: grid;
1567
- grid-template-columns: 1fr;
1568
- overflow: hidden;
1569
- // margin: 10px;
1570
- padding: 10px;
1571
-
1572
- .embla__thumbs__viewport {
1573
- width: 100%;
1574
- height: 100%;
1575
- position: relative;
1576
- display: flex;
1577
- flex-direction: column;
1578
-
1579
- overflow: hidden;
1580
- }
1581
- .embla__thumbs__container {
1582
- display: flex;
1583
- flex-direction: row;
1584
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
1585
- gap: var(--_ctm-lt-tl-sg);
1586
- width: 100%;
1587
- // justify-content: center;
1588
- // height: 200px;
1589
-
1590
- .embla__thumbs__slide {
1591
- min-width: var(--_ctm-lt-tl-se);
1592
- max-width: var(--_ctm-lt-tl-se);
1593
- height: var(--_ctm-lt-tl-se);
1594
- & img {
1595
- width: 100%;
1596
- height: 100%;
1597
- }
1598
- }
1599
- }
1600
- }
1601
- }
1602
- }
1603
- }
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="allocations"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ // min-width: 400px;
25
+ // max-width: 700px;
26
+ width: 100%;
27
+ height: prepareMediaVariable(--_ctm-lt-ht);
28
+ }
29
+ }
30
+
31
+ .loading__container {
32
+ width: 100%;
33
+ height: 25vh;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ .allocations__element {
40
+ background-color: var(
41
+ --_ctm-mob-dn-wt-se-bd-cr,
42
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
+ );
44
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
+ display: flex;
46
+ flex-direction: column;
47
+ --_sf-gp: var(
48
+ --_ctm-mob-lt-im-sg,
49
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
50
+ );
51
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
+ row-gap: var(--_sf-gp);
53
+ width: 100%;
54
+ // height: 100%;
55
+ border-color: var(
56
+ --_ctm-mob-dn-wt-se-br-cr,
57
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
58
+ );
59
+ border-style: var(
60
+ --_ctm-mob-dn-wt-se-br-se,
61
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
62
+ );
63
+ border-width: var(
64
+ --_ctm-mob-dn-wt-se-br-wh,
65
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
66
+ );
67
+ border-radius: var(
68
+ --_ctm-mob-dn-wt-se-br-rs,
69
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
70
+ );
71
+ box-shadow: var(
72
+ --_show-shadow,
73
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
+ );
78
+
79
+ &[data-divider-show="true"] {
80
+ --_sf-dvdr: var(
81
+ --_ctm-mob-dn-dr-dr-wh,
82
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
83
+ )
84
+ var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
85
+ var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
+ --_sf-dvdr-gap: var(--_sf-gp);
87
+ }
88
+ &[data-icon-position="Left"] {
89
+ --_sf-fd: row-reverse;
90
+ --_sf-jc: flex-end;
91
+ }
92
+ &[data-show-icon="false"] {
93
+ --_sf-show-icon-ff: none;
94
+ }
95
+ &[data-divider-show="true"] {
96
+ // .accordion-item:not(:last-child) {
97
+ // border-bottom: var(
98
+ // --_ctm-mob-dn-dr-dr-wh,
99
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
100
+ // )
101
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
102
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
103
+ // }
104
+ }
105
+
106
+ .load__more__button__container {
107
+ display: flex;
108
+ width: 100%;
109
+ margin-top: 10px;
110
+ &:hover {
111
+ --_sf-hr-bn-at: var(
112
+ --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
113
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
114
+ );
115
+ }
116
+
117
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
118
+ }
119
+
120
+ .btn__with__text[data-btn-name="redeemButton"] {
121
+ &[data-show-shadow="false"] {
122
+ --_show-shadow: none;
123
+ }
124
+ &[data-icon-position="left"] {
125
+ --_sf-fd-bn: row;
126
+ }
127
+ &[data-icon-position="right"] {
128
+ --_sf-fd-bn: row-reverse;
129
+ }
130
+ &[data-icon-position="center"] {
131
+ --_sf-fd-bn: row;
132
+ }
133
+
134
+ &:hover {
135
+ --_sf-hr-bd-cr: var(
136
+ --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
137
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
138
+ );
139
+ --_sf-hr-br-cr: var(
140
+ --_ctm-mob-dn-rm-bn-hr-se-br-cr,
141
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
142
+ );
143
+ --_sf-hr-br-se: var(
144
+ --_ctm-mob-dn-rm-bn-hr-se-br-se,
145
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
146
+ );
147
+ --_sf-hr-br-wh: var(
148
+ --_ctm-mob-dn-rm-bn-hr-se-br-wh,
149
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
150
+ );
151
+ --_sf-hr-br-rs: var(
152
+ --_ctm-mob-dn-rm-bn-hr-se-br-rs,
153
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
154
+ );
155
+ --_sf-hr-at: var(
156
+ --_ctm-mob-dn-rm-bn-hr-se-at,
157
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
158
+ );
159
+ --_sf-hr-gp: var(
160
+ --_ctm-mob-dn-rm-bn-hr-se-gp,
161
+ var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
162
+ );
163
+
164
+ // for shadow
165
+ --_sf-hr-sw-ae: var(
166
+ --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
167
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
168
+ );
169
+ --_sf-hr-sw-br: var(
170
+ --_ctm-mob-dn-rm-bn-hr-se-sw-br,
171
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
172
+ );
173
+ --_sf-hr-sw-hr: var(
174
+ --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
175
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
176
+ );
177
+ --_sf-hr-sw-cr: var(
178
+ --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
179
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
180
+ );
181
+
182
+ // for font
183
+
184
+ --_sf-hr-cr: var(
185
+ --_ctm-mob-dn-rm-bn-hr-se-cr,
186
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
187
+ );
188
+ --_sf-hr-ft-fy: var(
189
+ --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
190
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
191
+ );
192
+ --_sf-hr-ft-se: var(
193
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se,
194
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
195
+ );
196
+ --_sf-hr-ft-wt: var(
197
+ --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
198
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
199
+ );
200
+ --_sf-hr-ft-se-ic: var(
201
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
202
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
203
+ );
204
+ --_sf-hr-tt-an: var(
205
+ --_ctm-mob-dn-rm-bn-hr-se-tt-an,
206
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
207
+ );
208
+ --_sf-hr-lr-sg: var(
209
+ --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
210
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
211
+ );
212
+ --_sf-hr-le-ht: var(
213
+ --_ctm-mob-dn-rm-bn-hr-se-le-ht,
214
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
215
+ );
216
+
217
+ --_sf-hr-in-se: var(
218
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
219
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
220
+ );
221
+ --_sf-hr-in-se: var(
222
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
223
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
224
+ );
225
+ --_sf-hr-in-c1: var(
226
+ --_ctm-mob-dn-rm-bn-hr-se-in-c1,
227
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
228
+ );
229
+ --_sf-hr-ue: var(
230
+ --_ctm-mob-dn-rm-bn-hr-se-ue,
231
+ var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
232
+ );
233
+
234
+ // for pading and width
235
+ --_sf-hr-pg: var(
236
+ --_ctm-mob-dn-rm-bn-hr-pg,
237
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
238
+ );
239
+ --_sf-hr-wh: var(
240
+ --_ctm-mob-dn-rm-bn-hr-wh,
241
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
242
+ );
243
+
244
+ &[data-hover-show-shadow="false"] {
245
+ --_hover-show-shadow: none;
246
+ }
247
+ &[data-hover-show-icon="false"] {
248
+ --_hover-show-icon: none;
249
+ }
250
+ }
251
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
252
+
253
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
254
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
255
+ display: flex;
256
+ flex-direction: var(--_sf-fd-bn);
257
+ align-items: center;
258
+
259
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
260
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));
261
+
262
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
263
+
264
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
265
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
266
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
267
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
268
+
269
+ &[data-show-border="true"] {
270
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
271
+
272
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se));
273
+
274
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh));
275
+ }
276
+
277
+ .txt {
278
+ display: flex;
279
+
280
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
281
+
282
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
283
+
284
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se));
285
+
286
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt));
287
+
288
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic));
289
+
290
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an));
291
+
292
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg));
293
+
294
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht));
295
+
296
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
297
+ }
298
+
299
+ .icon {
300
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
301
+ svg {
302
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
303
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
304
+
305
+ path {
306
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
307
+ }
308
+ }
309
+ }
310
+ [data-element-style="Text"] {
311
+ display: inline-block;
312
+ width: 100%;
313
+ }
314
+
315
+ .icon--hover {
316
+ // position: absolute;
317
+ // inset: 0;
318
+ // opacity: 0;
319
+ display: none;
320
+ transition: opacity 0.2s ease;
321
+ }
322
+
323
+ &:hover .icon--hover {
324
+ // opacity: 1;
325
+ display: flex;
326
+ }
327
+
328
+ &:hover .icon--default {
329
+ // opacity: 0;
330
+ display: none;
331
+ }
332
+ }
333
+ }
334
+
335
+ .allocations_table_wrapper {
336
+ display: flex;
337
+ flex-direction: column;
338
+ align-self: stretch;
339
+ align-items: center;
340
+ width: 100%;
341
+ .table__wrapper,
342
+ .table__container {
343
+ overflow: visible !important;
344
+ }
345
+ thead th {
346
+ overflow: visible;
347
+ position: relative;
348
+ }
349
+ .est__dropdown__main {
350
+ z-index: var(--_higher-zIndex, 10);
351
+ }
352
+ .table__common_parent {
353
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
354
+ width: 100%;
355
+
356
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
357
+ // --_aspect-ratio: calc(
358
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
359
+ // );
360
+
361
+ .pagination:hover {
362
+ --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
363
+ }
364
+
365
+ .pagination .active:hover {
366
+ cursor: pointer;
367
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
368
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
369
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
370
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
371
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
372
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
373
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
374
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
375
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
376
+ }
377
+ &[data-widget-shadow="false"] {
378
+ .table__wrapper {
379
+ --_show-shadow: none;
380
+ }
381
+ }
382
+ &[data-widget-border="true"] {
383
+ .table__wrapper {
384
+ border-color: var(
385
+ --_ctm-mob-dn-te-wt-br-cr,
386
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
387
+ );
388
+ border-style: var(
389
+ --_ctm-mob-dn-te-wt-br-se,
390
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
391
+ );
392
+ border-width: var(
393
+ --_ctm-mob-dn-te-wt-br-wh,
394
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
395
+ );
396
+ }
397
+ }
398
+ &[data-table-shadow="false"] {
399
+ .table__container {
400
+ --_show-table-shadow: none;
401
+ }
402
+ }
403
+ &[data-table-border="true"] {
404
+ .table__container {
405
+ border-color: var(
406
+ --_ctm-mob-dn-te-br-cr,
407
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
408
+ );
409
+ border-style: var(
410
+ --_ctm-mob-dn-te-br-se,
411
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
412
+ );
413
+ border-width: var(
414
+ --_ctm-mob-dn-te-br-wh,
415
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
416
+ );
417
+ }
418
+ }
419
+
420
+ &[data-header-divider="true"] {
421
+ thead tr th {
422
+ border-bottom: 1px solid
423
+ var(
424
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
425
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
426
+ );
427
+ }
428
+ }
429
+ &[data-row-divider="true"] {
430
+ tbody tr {
431
+ border-bottom: 1px solid
432
+ var(
433
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
434
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
435
+ );
436
+ }
437
+ }
438
+ &[data-column-divider="true"] {
439
+ tbody tr td,
440
+ thead tr th {
441
+ border-right: 1px solid
442
+ var(
443
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
444
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
445
+ );
446
+ }
447
+
448
+ tbody tr td:last-child,
449
+ thead tr th:last-child {
450
+ border-right: none;
451
+ }
452
+ }
453
+ &[data-show-more-rows="onScroll"] {
454
+ .table__container {
455
+ overflow-y: scroll;
456
+ height: var(
457
+ --_ctm-mob-lt-te-ht,
458
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
459
+ ) !important;
460
+
461
+ &::-webkit-scrollbar {
462
+ width: var(
463
+ --_ctm-mob-dn-sl-br-sl-br-wh,
464
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
465
+ );
466
+ }
467
+
468
+ &::-webkit-scrollbar-track {
469
+ background-color: var(--_base-white);
470
+ }
471
+
472
+ &::-webkit-scrollbar-thumb {
473
+ background-color: var(
474
+ --_ctm-mob-dn-sl-br-sl-br-cr,
475
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
476
+ );
477
+ }
478
+
479
+ // // Scrollbar thumb when hovered
480
+ // &::-webkit-scrollbar-thumb:hover {
481
+ // background-color: #555; // Darker color when hovering over the thumb
482
+ // }
483
+
484
+ // // For Firefox, using scrollbar-width and scrollbar-color
485
+ // scrollbar-width: thin; // Thin scrollbar
486
+ // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
487
+ }
488
+ }
489
+
490
+ &[data-alternative-row-colors="true"] {
491
+ tbody .tbody__row__divider:nth-child(odd) {
492
+ background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
493
+ }
494
+ }
495
+ .table__wrapper {
496
+ flex: 1 1 auto;
497
+ min-width: 0;
498
+ overflow-x: auto;
499
+ padding: var(
500
+ --_ctm-mob-lt-pg,
501
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
502
+ );
503
+
504
+ background-color: var(
505
+ --_ctm-mob-dn-te-wt-bd-cr,
506
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
507
+ );
508
+
509
+ border-radius: var(
510
+ --_ctm-mob-dn-te-wt-br-rs,
511
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
512
+ );
513
+
514
+ box-shadow: var(
515
+ --_show-shadow,
516
+ var(
517
+ --_ctm-mob-dn-te-wt-sw-ae,
518
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
519
+ )
520
+ var(
521
+ --_ctm-mob-dn-te-wt-sw-br,
522
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
523
+ )
524
+ var(
525
+ --_ctm-mob-dn-te-wt-sw-sd,
526
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
527
+ )
528
+ var(
529
+ --_ctm-mob-dn-te-wt-sw-cr,
530
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
531
+ )
532
+ );
533
+
534
+ width: 100%;
535
+
536
+ .table__container {
537
+ background-color: var(
538
+ --_ctm-mob-dn-te-bd-cr,
539
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
540
+ );
541
+
542
+ border-radius: var(
543
+ --_ctm-mob-dn-te-br-rs,
544
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
545
+ );
546
+
547
+ box-shadow: var(
548
+ --_show-table-shadow,
549
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
550
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
551
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
552
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
553
+ );
554
+ }
555
+
556
+ h3 {
557
+ text-align: center;
558
+ width: 100%;
559
+ margin-bottom: 10px;
560
+ }
561
+ table {
562
+ border-collapse: collapse;
563
+ // border: none;
564
+ width: 100%;
565
+ // height: 100%;
566
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
567
+ width: max-content;
568
+ min-width: 100%;
569
+ table-layout: auto;
570
+ th,
571
+ td {
572
+ border: none;
573
+ }
574
+ thead {
575
+ background-color: var(
576
+ --_ctm-mob-dn-te-hr-bd-cr,
577
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
578
+ );
579
+
580
+ .thead__row__divider {
581
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
582
+
583
+ .th__col__divider {
584
+ padding: var(
585
+ --_ctm-mob-lt-hr-cl-pg,
586
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
587
+ );
588
+
589
+ color: var(
590
+ --_ctm-mob-dn-hr-tt-cr,
591
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
592
+ );
593
+
594
+ font-family: var(
595
+ --_ctm-mob-dn-hr-tt-ft-fy,
596
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
597
+ );
598
+
599
+ font-size: var(
600
+ --_ctm-mob-dn-hr-tt-ft-se,
601
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
602
+ );
603
+
604
+ font-weight: var(
605
+ --_ctm-mob-dn-hr-tt-ft-wt,
606
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
607
+ );
608
+
609
+ text-decoration: var(
610
+ --_ctm-mob-dn-hr-tt-ue,
611
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
612
+ );
613
+
614
+ font-style: var(
615
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
616
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
617
+ );
618
+
619
+ text-align: var(
620
+ --_ctm-mob-dn-hr-tt-tt-an,
621
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
622
+ );
623
+
624
+ letter-spacing: var(
625
+ --_ctm-mob-dn-hr-tt-lr-sg,
626
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
627
+ );
628
+
629
+ line-height: var(
630
+ --_ctm-mob-dn-hr-tt-le-ht,
631
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
632
+ );
633
+ }
634
+ }
635
+ }
636
+ tbody {
637
+ .tbody__row__divider {
638
+ background-color: var(
639
+ --_ctm-mob-dn-te-rw-bd-cr,
640
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
641
+ );
642
+
643
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
644
+
645
+ .td__col__divider {
646
+ padding: var(
647
+ --_ctm-mob-lt-rw-cl-pg,
648
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
649
+ );
650
+
651
+ color: var(
652
+ --_sf-hr-fc,
653
+ var(
654
+ --_ctm-mob-dn-rw-tt-cr,
655
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
656
+ )
657
+ );
658
+
659
+ font-family: var(
660
+ --_sf-hr-ff,
661
+ var(
662
+ --_ctm-mob-dn-rw-tt-ft-fy,
663
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
664
+ )
665
+ );
666
+
667
+ font-size: var(
668
+ --_sf-hr-fs,
669
+ var(
670
+ --_ctm-mob-dn-rw-tt-ft-se,
671
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
672
+ )
673
+ );
674
+
675
+ text-decoration: var(
676
+ --_ctm-mob-dn-rw-tt-ue,
677
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
678
+ );
679
+
680
+ font-weight: var(
681
+ --_sf-hr-fw,
682
+ var(
683
+ --_ctm-mob-dn-rw-tt-ft-wt,
684
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
685
+ )
686
+ );
687
+
688
+ font-style: var(
689
+ --_sf-hr-ft,
690
+ var(
691
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
692
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
693
+ )
694
+ );
695
+
696
+ text-align: var(
697
+ --_sf-hr-ta,
698
+ var(
699
+ --_ctm-mob-dn-rw-tt-tt-an,
700
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
701
+ )
702
+ );
703
+
704
+ letter-spacing: var(
705
+ --_sf-hr-ls,
706
+ var(
707
+ --_ctm-mob-dn-rw-tt-lr-sg,
708
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
709
+ )
710
+ );
711
+
712
+ line-height: var(
713
+ --_sf-hr-lh,
714
+ var(
715
+ --_ctm-mob-dn-rw-tt-le-ht,
716
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
717
+ )
718
+ );
719
+ }
720
+ }
721
+ }
722
+ }
723
+
724
+ .pagination {
725
+ display: var(--_d-flex);
726
+ align-items: var(--_align-center);
727
+ justify-content: var(
728
+ --_ctm-mob-lt-pn-at,
729
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
730
+ );
731
+ margin-top: 10px;
732
+ background-color: var(
733
+ --_sf-bd-cr,
734
+ var(
735
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
736
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
737
+ )
738
+ );
739
+ &.pagination__center {
740
+ justify-content: var(justify-center);
741
+ }
742
+
743
+ button {
744
+ svg {
745
+ width: var(--_width-18);
746
+ height: var(--_height-18);
747
+ path {
748
+ stroke: var(--_gray-500);
749
+ // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
750
+ }
751
+ }
752
+ }
753
+ span {
754
+ float: left;
755
+ padding: var(--_pd-8) var(--_pd-16);
756
+ text-decoration: none;
757
+ span {
758
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
759
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
760
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
761
+
762
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
763
+ // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
764
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
765
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
766
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
767
+ }
768
+ &.active:hover {
769
+ &hover {
770
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
771
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
772
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
773
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
774
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
775
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
776
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
777
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
778
+ }
779
+ }
780
+ &.active {
781
+ color: var(
782
+ --_sf-hr-fc,
783
+ var(
784
+ --_ctm-mob-dn-pn-dt-se-cr,
785
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
786
+ )
787
+ );
788
+
789
+ font-family: var(
790
+ --_sf-hr-ff,
791
+ var(
792
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
793
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
794
+ )
795
+ );
796
+
797
+ font-size: var(
798
+ --_sf-hr-fs,
799
+ var(
800
+ --_ctm-mob-dn-pn-dt-se-ft-se,
801
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
802
+ )
803
+ );
804
+
805
+ text-decoration: var(
806
+ --_sf-hr-td,
807
+ var(
808
+ --_ctm-mob-dn-pn-dt-se-ue,
809
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
810
+ )
811
+ );
812
+
813
+ font-weight: var(
814
+ --_sf-hr-fw,
815
+ var(
816
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
817
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
818
+ )
819
+ );
820
+
821
+ font-style: var(
822
+ --_sf-hr-ft,
823
+ var(
824
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
825
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
826
+ )
827
+ );
828
+
829
+ text-align: var(
830
+ --_sf-hr-ta,
831
+ var(
832
+ --_ctm-mob-dn-pn-dt-se-tt-an,
833
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
834
+ )
835
+ );
836
+
837
+ letter-spacing: var(
838
+ --_sf-hr-ls,
839
+ var(
840
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
841
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
842
+ )
843
+ );
844
+
845
+ line-height: var(
846
+ --_sf-hr-lh,
847
+ var(
848
+ --_ctm-mob-dn-pn-dt-se-le-ht,
849
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
850
+ )
851
+ );
852
+ }
853
+ }
854
+ .pagination__arrows {
855
+ color: var(
856
+ --_sf-hr-fc,
857
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
858
+ );
859
+
860
+ font-size: var(
861
+ --_sf-hr-fs,
862
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
863
+ );
864
+ }
865
+ }
866
+ }
867
+ }
868
+
869
+ .no__data__found {
870
+ color: var(--_gray-600);
871
+ font-size: 14px;
872
+ font-weight: 600;
873
+ line-height: 20px;
874
+ padding: 16px 24px;
875
+ text-align: center;
876
+ }
877
+
878
+ .note_wrapper {
879
+ display: flex;
880
+ width: 100%;
881
+ padding: 0px 16px;
882
+ flex-direction: column;
883
+ justify-content: center;
884
+ align-items: center;
885
+ gap: 8px;
886
+
887
+ min-height: 76px;
888
+
889
+ .note {
890
+ color: var(--_gray-600);
891
+ font-weight: 400;
892
+ line-height: 24px;
893
+ }
894
+
895
+ .redeem_now_wrapper {
896
+ display: flex;
897
+ justify-content: center;
898
+ align-items: center;
899
+ gap: 24px;
900
+
901
+ .redeem_now_btn {
902
+ display: flex;
903
+ justify-content: center;
904
+ align-items: center;
905
+ gap: 8px;
906
+ color: var(--_primary-400);
907
+ font-size: 14px;
908
+ font-weight: 600;
909
+ line-height: 20px;
910
+
911
+ &[data-has-link="true"] {
912
+ cursor: pointer;
913
+ }
914
+
915
+ &:hover {
916
+ color: #53389e;
917
+ }
918
+
919
+ &:focus {
920
+ color: #162578;
921
+ }
922
+
923
+ &:disabled {
924
+ color: #d0d5dd;
925
+ }
926
+ }
927
+ }
928
+ }
929
+ .btn__with__text[data-btn-name="loadMore"] {
930
+ &[data-show-shadow="false"] {
931
+ --_show-shadow: none;
932
+ }
933
+ &[data-icon-position="left"] {
934
+ --_sf-fd-bn: row;
935
+ }
936
+ &[data-icon-position="right"] {
937
+ --_sf-fd-bn: row-reverse;
938
+ }
939
+ &[data-icon-position="center"] {
940
+ --_sf-fd-bn: row;
941
+ }
942
+
943
+ &:hover {
944
+ --_sf-hr-bd-cr: var(
945
+ --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
946
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
947
+ );
948
+ --_sf-hr-br-cr: var(
949
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
950
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
951
+ );
952
+ --_sf-hr-br-se: var(
953
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
954
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
955
+ );
956
+ --_sf-hr-br-wh: var(
957
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
958
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
959
+ );
960
+ --_sf-hr-br-rs: var(
961
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
962
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
963
+ );
964
+ --_sf-hr-at: var(
965
+ --_ctm-mob-dn-ld-me-bn-hr-se-at,
966
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
967
+ );
968
+ --_sf-hr-gp: var(
969
+ --_ctm-mob-dn-ld-me-bn-hr-se-gp,
970
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
971
+ );
972
+
973
+ // for shadow
974
+ --_sf-hr-sw-ae: var(
975
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
976
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
977
+ );
978
+ --_sf-hr-sw-br: var(
979
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
980
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
981
+ );
982
+ --_sf-hr-sw-hr: var(
983
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
984
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
985
+ );
986
+ --_sf-hr-sw-cr: var(
987
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
988
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
989
+ );
990
+
991
+ // for font
992
+
993
+ --_sf-hr-cr: var(
994
+ --_ctm-mob-dn-ld-me-bn-hr-se-cr,
995
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
996
+ );
997
+ --_sf-hr-ft-fy: var(
998
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
999
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
1000
+ );
1001
+ --_sf-hr-ft-se: var(
1002
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
1003
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
1004
+ );
1005
+ --_sf-hr-ft-wt: var(
1006
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
1007
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
1008
+ );
1009
+ --_sf-hr-ft-se-ic: var(
1010
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1011
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1012
+ );
1013
+ --_sf-hr-tt-an: var(
1014
+ --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1015
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1016
+ );
1017
+ --_sf-hr-lr-sg: var(
1018
+ --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1019
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1020
+ );
1021
+ --_sf-hr-le-ht: var(
1022
+ --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1023
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1024
+ );
1025
+
1026
+ --_sf-hr-in-se: var(
1027
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1028
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1029
+ );
1030
+ --_sf-hr-in-se: var(
1031
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1032
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1033
+ );
1034
+ --_sf-hr-in-c1: var(
1035
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1036
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1037
+ );
1038
+ --_sf-hr-ue: var(
1039
+ --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1040
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1041
+ );
1042
+
1043
+ // for pading and width
1044
+ --_sf-hr-pg: var(
1045
+ --_ctm-mob-dn-ld-me-bn-hr-pg,
1046
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1047
+ );
1048
+ --_sf-hr-wh: var(
1049
+ --_ctm-mob-dn-ld-me-bn-hr-wh,
1050
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1051
+ );
1052
+
1053
+ &[data-hover-show-shadow="false"] {
1054
+ --_hover-show-shadow: none;
1055
+ }
1056
+ &[data-hover-show-icon="false"] {
1057
+ --_hover-show-icon: none;
1058
+ }
1059
+ }
1060
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1061
+
1062
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
1063
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
1064
+ display: flex;
1065
+ flex-direction: var(--_sf-fd-bn);
1066
+ align-items: center;
1067
+
1068
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
1069
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));
1070
+
1071
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1072
+
1073
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1074
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1075
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1076
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1077
+
1078
+ &[data-show-border="true"] {
1079
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
1080
+
1081
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
1082
+
1083
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
1084
+ }
1085
+
1086
+ .txt {
1087
+ display: flex;
1088
+
1089
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
1090
+
1091
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
1092
+
1093
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
1094
+
1095
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1096
+
1097
+ font-style: var(
1098
+ --_sf-hr-ft-se-ic,
1099
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1100
+ );
1101
+
1102
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1103
+
1104
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
1105
+
1106
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
1107
+
1108
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1109
+ }
1110
+
1111
+ .icon {
1112
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1113
+ svg {
1114
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1115
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1116
+
1117
+ path {
1118
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
1119
+ }
1120
+ }
1121
+ }
1122
+ [data-element-style="Text"] {
1123
+ display: inline-block;
1124
+ width: 100%;
1125
+ }
1126
+
1127
+ .icon--hover {
1128
+ // position: absolute;
1129
+ // inset: 0;
1130
+ // opacity: 0;
1131
+ display: none;
1132
+ transition: opacity 0.2s ease;
1133
+ }
1134
+
1135
+ &:hover .icon--hover {
1136
+ // opacity: 1;
1137
+ display: flex;
1138
+ }
1139
+
1140
+ &:hover .icon--default {
1141
+ // opacity: 0;
1142
+ display: none;
1143
+ }
1144
+ }
1145
+ }
1146
+
1147
+ .slider_wrapper {
1148
+ display: flex;
1149
+ height: 60px;
1150
+ align-items: flex-start;
1151
+ gap: 0px;
1152
+ white-space: nowrap;
1153
+ width: 100%;
1154
+ flex-direction: column;
1155
+ height: auto;
1156
+ .slider_header_wrapper {
1157
+ display: flex;
1158
+ align-items: center;
1159
+ gap: 12px;
1160
+ justify-content: space-between;
1161
+ width: 100%;
1162
+ .slider_header_wrapper_left {
1163
+ display: flex;
1164
+ align-items: center;
1165
+ gap: 12px;
1166
+ .slider_heading {
1167
+ height: auto;
1168
+ }
1169
+
1170
+ .slider_heading {
1171
+ color: #475467;
1172
+ text-align: center;
1173
+ font-size: 14px;
1174
+ height: 60px;
1175
+ font-weight: 600;
1176
+ line-height: 20px;
1177
+ align-items: center;
1178
+ display: flex;
1179
+ }
1180
+ }
1181
+ .redeem_now_wrapper {
1182
+ .redeem_now_btn {
1183
+ display: flex;
1184
+ justify-content: center;
1185
+ align-items: center;
1186
+ gap: 8px;
1187
+ color: var(--_primary-400);
1188
+ font-size: 14px;
1189
+ font-weight: 600;
1190
+ line-height: 20px;
1191
+
1192
+ &:hover {
1193
+ color: #53389e;
1194
+ }
1195
+
1196
+ &:focus {
1197
+ color: #162578;
1198
+ }
1199
+
1200
+ &:disabled {
1201
+ color: #d0d5dd;
1202
+ }
1203
+ }
1204
+ }
1205
+ }
1206
+
1207
+ .allocations_slider_slide_wrapper {
1208
+ display: flex;
1209
+ align-items: center;
1210
+ gap: 12px;
1211
+ height: 60px;
1212
+ width: fit-content;
1213
+ margin-right: var(--_ctm-lt-sg-bn-is);
1214
+
1215
+ .allocations_left_info_wrapper {
1216
+ display: flex;
1217
+ flex-direction: column;
1218
+ align-items: flex-start;
1219
+
1220
+ .product_name {
1221
+ color: #101828;
1222
+ white-space: nowrap;
1223
+ font-size: 14px;
1224
+ font-weight: 700;
1225
+ line-height: 20px;
1226
+ }
1227
+
1228
+ .expiry_date {
1229
+ color: #70707b;
1230
+ font-size: 11px;
1231
+ font-weight: 400;
1232
+ line-height: 18px;
1233
+ white-space: nowrap;
1234
+ }
1235
+ }
1236
+
1237
+ .allocations_right_info_wrapper {
1238
+ display: flex;
1239
+ width: 48px;
1240
+ height: 36px;
1241
+ justify-content: center;
1242
+ align-items: center;
1243
+ gap: 10px;
1244
+
1245
+ .product_quantity {
1246
+ color: #475467;
1247
+ white-space: nowrap;
1248
+ font-size: 20px;
1249
+ font-weight: 600;
1250
+ line-height: 30px;
1251
+ }
1252
+ }
1253
+ }
1254
+ }
1255
+ .est__dropdown__main {
1256
+ position: relative;
1257
+ min-width: 150px;
1258
+
1259
+ label {
1260
+ font-size: 14px;
1261
+ color: var(--_gray-700);
1262
+ margin-bottom: 8px;
1263
+ display: block;
1264
+ }
1265
+
1266
+ .est__dropdown {
1267
+ position: relative;
1268
+ .est__dropdown__button {
1269
+ display: flex;
1270
+ align-items: center;
1271
+ width: 100%;
1272
+ border: 1px solid var(--_gray-200);
1273
+ border-radius: 6px;
1274
+
1275
+ .value__selected {
1276
+ width: 100%;
1277
+ border: none;
1278
+ background-color: transparent;
1279
+ }
1280
+ }
1281
+
1282
+ &.open .list {
1283
+ display: flex;
1284
+ padding: 4px;
1285
+ }
1286
+
1287
+ .list {
1288
+ display: none;
1289
+ flex-direction: column;
1290
+ border: 1px solid var(--_gray-200);
1291
+ border-radius: 6px;
1292
+ position: absolute;
1293
+ top: 100%;
1294
+ left: 0;
1295
+ width: 100%;
1296
+ background-color: #fff;
1297
+ border-radius: 4px;
1298
+ z-index: var(--_higher-zIndex);
1299
+ max-height: 200px;
1300
+ overflow-y: auto;
1301
+
1302
+ &.top {
1303
+ bottom: 100%;
1304
+ top: auto;
1305
+ }
1306
+
1307
+ .list__option {
1308
+ padding: 12px;
1309
+ cursor: pointer;
1310
+ text-align: left;
1311
+ &.selected {
1312
+ background-color: var(--_primary-25);
1313
+ color: var(--_primary-400);
1314
+ }
1315
+ &:hover {
1316
+ background-color: var(--_primary-25);
1317
+ color: var(--_primary-400);
1318
+ }
1319
+ }
1320
+ }
1321
+ }
1322
+ }
1323
+ .embla {
1324
+ width: 100%;
1325
+ height: 100%;
1326
+ position: relative;
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+
1330
+ // overflow: hidden;
1331
+
1332
+ .embla__viewport {
1333
+ width: 100%;
1334
+ height: 100%;
1335
+ position: relative;
1336
+ display: flex;
1337
+ flex-direction: column;
1338
+
1339
+ overflow: hidden;
1340
+
1341
+ .embla__container {
1342
+ width: 100%;
1343
+ height: 100%;
1344
+ display: flex;
1345
+ grid-template-rows: 100%;
1346
+ // grid-template-columns: 100%;
1347
+ // grid-template-columns: repeat(
1348
+ // var(--_ctm-lt-is-pr-se),
1349
+ // calc(100% / var(--_ctm-lt-is-pr-se))
1350
+ // );
1351
+ // grid-auto-flow: column;
1352
+ gap: var(--_ctm-lt-sh-im-sg);
1353
+
1354
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1355
+ height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1356
+ }
1357
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1358
+ height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1359
+ }
1360
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
1361
+ height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1362
+ }
1363
+
1364
+ .embla__slide {
1365
+ // width: 100%;
1366
+ height: 100%;
1367
+ }
1368
+ }
1369
+ }
1370
+
1371
+ .arrow-navigation {
1372
+ display: flex;
1373
+ position: absolute;
1374
+ top: 50%;
1375
+ left: 50%;
1376
+ width: 100%;
1377
+ justify-content: space-between;
1378
+ transform: translate(-50%, -50%);
1379
+ // padding-left: 20px;
1380
+ &[data-control-type="Side"] {
1381
+ .left-button,
1382
+ .right-button {
1383
+ background-color: transparent;
1384
+ }
1385
+ }
1386
+ &[data-background-shape="Round"] {
1387
+ .left-button,
1388
+ .right-button {
1389
+ background-color: #f2f5f5;
1390
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1391
+ }
1392
+ }
1393
+ &[data-control-type="Bottom-Overflow"] {
1394
+ transform: translateX(-50%);
1395
+ width: 100%;
1396
+ justify-content: center;
1397
+ gap: 12px;
1398
+ top: unset;
1399
+ bottom: 6px;
1400
+ }
1401
+ &[data-control-type="Bottom"] {
1402
+ transform: unset;
1403
+ position: static;
1404
+ width: 100%;
1405
+ justify-content: center;
1406
+ gap: 12px;
1407
+ margin-top: 10px;
1408
+ }
1409
+ .left-button {
1410
+ padding: 10px;
1411
+ border-radius: 50%;
1412
+ border: none;
1413
+ width: var(--_ctm-dn-pn-as-aw-se);
1414
+ height: var(--_ctm-dn-pn-as-aw-se);
1415
+ display: flex;
1416
+ align-items: center;
1417
+ justify-content: center;
1418
+ cursor: pointer;
1419
+ outline: none;
1420
+ margin-left: 12px;
1421
+ &:disabled {
1422
+ & svg {
1423
+ path {
1424
+ stroke: rgb(192, 192, 192);
1425
+ }
1426
+ }
1427
+ }
1428
+ }
1429
+ .right-button {
1430
+ border-radius: 50%;
1431
+ border: none;
1432
+ width: var(--_ctm-dn-pn-as-aw-se);
1433
+ height: var(--_ctm-dn-pn-as-aw-se);
1434
+ display: flex;
1435
+ align-items: center;
1436
+ justify-content: center;
1437
+ cursor: pointer;
1438
+ outline: none;
1439
+ margin-right: 12px;
1440
+ padding: 10px;
1441
+
1442
+ &:disabled {
1443
+ & svg {
1444
+ path {
1445
+ stroke: rgb(192, 192, 192);
1446
+ }
1447
+ }
1448
+ }
1449
+ }
1450
+ .icon {
1451
+ display: flex;
1452
+ svg {
1453
+ width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1454
+ height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1455
+ path {
1456
+ stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1457
+ }
1458
+ }
1459
+ }
1460
+ }
1461
+
1462
+ &[data-thumbnail-placement="top"] {
1463
+ flex-direction: column-reverse;
1464
+ }
1465
+ &[data-thumbnail-placement="bottom"] {
1466
+ flex-direction: column;
1467
+ }
1468
+ &[data-thumbnail-placement="left"] {
1469
+ flex-direction: row-reverse;
1470
+
1471
+ .embla__thumbs {
1472
+ width: var(--_ctm-lt-tl-se);
1473
+ height: 100%;
1474
+
1475
+ & .embla__thumbs__container {
1476
+ flex-direction: column;
1477
+ height: 100%;
1478
+ }
1479
+ }
1480
+ }
1481
+ &[data-thumbnail-placement="right"] {
1482
+ flex-direction: row;
1483
+ .embla__thumbs {
1484
+ width: var(--_ctm-lt-tl-se);
1485
+ height: 100%;
1486
+
1487
+ & .embla__thumbs__container {
1488
+ flex-direction: column;
1489
+ height: 100%;
1490
+ }
1491
+ }
1492
+ }
1493
+ &[data-control-type="Side"] {
1494
+ display: flex;
1495
+ align-self: center;
1496
+ gap: 16px;
1497
+ flex-direction: row;
1498
+ .left-button:disabled,
1499
+ .right-button:disabled {
1500
+ display: none;
1501
+ }
1502
+ }
1503
+ .embla__dots {
1504
+ display: flex;
1505
+ flex-wrap: wrap;
1506
+ justify-content: center;
1507
+ align-items: center;
1508
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1509
+ gap: 6px;
1510
+ margin-top: 16px;
1511
+
1512
+ &[data-control-type="Bottom-Overflow"] {
1513
+ position: absolute;
1514
+ bottom: 10px;
1515
+ left: 50%;
1516
+ transform: translateX(-50%);
1517
+ width: 75%;
1518
+ }
1519
+ .embla__dot {
1520
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1521
+ -webkit-appearance: none;
1522
+ appearance: none;
1523
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
1524
+ touch-action: manipulation;
1525
+ display: inline-flex;
1526
+ text-decoration: none;
1527
+ cursor: pointer;
1528
+ border: 0;
1529
+ padding: 0;
1530
+ margin: 0;
1531
+ // width: 0.6rem;
1532
+ // height: 0.6rem;
1533
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1534
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1535
+ display: flex;
1536
+ align-items: center;
1537
+ justify-content: center;
1538
+ border-radius: 50%;
1539
+ }
1540
+ .embla__dot:after {
1541
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1542
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1543
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
1544
+ border-radius: 50%;
1545
+ display: flex;
1546
+ align-items: center;
1547
+ content: "";
1548
+ }
1549
+ .embla__dot--selected:after {
1550
+ box-shadow: inset 0 0 0 1px var(--text-body);
1551
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
1552
+ }
1553
+ &[data-slider-control="Pagination Line"] {
1554
+ .embla__dot {
1555
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1556
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1557
+ background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
1558
+
1559
+ border-radius: 6px;
1560
+ }
1561
+ .embla__dot--selected:after {
1562
+ box-shadow: inset 0 0 0 1px var(--text-body);
1563
+ border-radius: 6px;
1564
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
1565
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
1566
+ // background-color: #fff;
1567
+ background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
1568
+ }
1569
+ }
1570
+ }
1571
+
1572
+ .embla__thumbs {
1573
+ width: 100%;
1574
+ height: var(--_ctm-lt-tl-se);
1575
+ position: relative;
1576
+ display: grid;
1577
+ grid-template-columns: 1fr;
1578
+ overflow: hidden;
1579
+ // margin: 10px;
1580
+ padding: 10px;
1581
+
1582
+ .embla__thumbs__viewport {
1583
+ width: 100%;
1584
+ height: 100%;
1585
+ position: relative;
1586
+ display: flex;
1587
+ flex-direction: column;
1588
+
1589
+ overflow: hidden;
1590
+ }
1591
+ .embla__thumbs__container {
1592
+ display: flex;
1593
+ flex-direction: row;
1594
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
1595
+ gap: var(--_ctm-lt-tl-sg);
1596
+ width: 100%;
1597
+ // justify-content: center;
1598
+ // height: 200px;
1599
+
1600
+ .embla__thumbs__slide {
1601
+ min-width: var(--_ctm-lt-tl-se);
1602
+ max-width: var(--_ctm-lt-tl-se);
1603
+ height: var(--_ctm-lt-tl-se);
1604
+ & img {
1605
+ width: 100%;
1606
+ height: 100%;
1607
+ }
1608
+ }
1609
+ }
1610
+ }
1611
+ }
1612
+ }
1613
+ }