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

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