@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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 (185) 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 +968 -3031
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1604
  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 -3092
  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 -2386
  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 -903
  35. package/dist/cartDropdownOverlay.scss +514 -231
  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 +98 -46
  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 +2418 -2418
  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 -558
  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 +4 -3
  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 +209 -209
  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 +198 -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 +1945 -381
  172. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  173. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  174. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  175. package/dist/uom-selector.scss +1169 -1169
  176. package/dist/user-elements copy.scss +1437 -1437
  177. package/dist/user-elements.scss +2471 -2471
  178. package/dist/variant-picker.scss +2384 -2384
  179. package/dist/video.scss +476 -476
  180. package/dist/volume-pricing copy 2.scss +1468 -1468
  181. package/dist/volume-pricing copy.scss +1077 -1077
  182. package/dist/volume-pricing.scss +1175 -1175
  183. package/dist/widget.scss +148 -148
  184. package/dist/wishlist-overlay.scss +48 -48
  185. package/package.json +1 -1
package/dist/map.scss CHANGED
@@ -1,962 +1,962 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- $tpgp: 20px;
5
- $bm: 30px;
6
- $ics: -1px;
7
-
8
- $data: (
9
- leftTop: (
10
- transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
11
- icon: (
12
- bottom: #{$bm},
13
- right: 0px,
14
- transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
15
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
16
- ),
17
- ),
18
- leftCenter: (
19
- transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
20
- icon: (
21
- top: 50%,
22
- right: 0px,
23
- transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
24
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
25
- ),
26
- ),
27
- leftBottom: (
28
- transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
29
- icon: (
30
- top: #{$bm},
31
- right: 0px,
32
- transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
33
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
34
- ),
35
- ),
36
- topLeft: (
37
- transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
38
- icon: (
39
- bottom: 0px,
40
- right: #{$bm},
41
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
42
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
43
- ),
44
- ),
45
- topCenter: (
46
- transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
47
- icon: (
48
- bottom: 0px,
49
- right: 50%,
50
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
51
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
52
- ),
53
- ),
54
- topRight: (
55
- transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
56
- icon: (
57
- bottom: 0px,
58
- left: #{$bm},
59
- transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
60
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
61
- ),
62
- ),
63
- rightTop: (
64
- transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
65
- icon: (
66
- top: 100%,
67
- left: 0px,
68
- transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
69
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
70
- ),
71
- ),
72
- rightCenter: (
73
- transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
74
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
75
- icon: (
76
- bottom: 50%,
77
- left: 0px,
78
- transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
79
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
80
- ),
81
- ),
82
- rightBottom: (
83
- transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
84
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
85
- icon: (
86
- top: 100%,
87
- left: 0,
88
- transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
89
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
90
- ),
91
- ),
92
- bottomLeft: (
93
- transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
94
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
95
- icon: (
96
- right: #{$bm},
97
- top: 0%,
98
- transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
99
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
100
- ),
101
- ),
102
- bottomCenter: (
103
- transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
104
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
105
- icon: (
106
- right: 50%,
107
- top: 0,
108
- transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
109
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
110
- ),
111
- ),
112
- bottomRight: (
113
- transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
114
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
115
- icon: (
116
- left: 30px,
117
- top: 0,
118
- transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
119
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
120
- ),
121
- ),
122
- );
123
-
124
- [data-div-type="element"] {
125
- &[data-element-type="map"] {
126
- &[data-hotspot-position] {
127
- @each $key, $value in $data {
128
- &[data-hotspot-position="#{$key}"] {
129
- .hotspot__tooltip {
130
- @each $prop, $val in $value {
131
- @if ($prop != icon) {
132
- #{$prop}: #{$val};
133
- } @else {
134
- @each $key2, $value2 in $val {
135
- &:after {
136
- #{$key2}: #{$value2};
137
- }
138
- }
139
- }
140
- }
141
- }
142
- }
143
- }
144
- }
145
- }
146
- }
147
- [data-div-type="element"] {
148
- &[data-element-type="map"] {
149
- // width: var(--_lt-wh);
150
- // height: var(--_lt-ht);
151
- // margin: var(--_lt-mn);
152
- // padding: var(--_lt-pg);
153
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
154
- width: var(
155
- --_sf-el-wh-st-mx,
156
- calc(
157
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
158
- )
159
- );
160
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
161
-
162
- --_aspect-ratio: calc(
163
- 1 *
164
- (
165
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
166
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
167
- )
168
- );
169
-
170
- & > .wrapper {
171
- width: 100%;
172
- // height: 100%;
173
- }
174
- &[data-show-shadow="false"] {
175
- --_show-shadow: none;
176
- }
177
- &[data-hotspot-position="topLeft"] {
178
- --_show-shadow: none;
179
- .hotspot__tooltip {
180
- border-style: var(--_ctm-dn-tp-dn-br-se);
181
- border-color: var(--_ctm-dn-tp-dn-br-cr);
182
- border-width: var(--_ctm-dn-tp-dn-br-wh);
183
- border-radius: var(--_ctm-dn-tp-dn-br-rs);
184
- }
185
- }
186
-
187
- &[data-hotspot-image-style-show-border="true"] {
188
- .imageHotspot-element {
189
- border-style: var(--_ctm-dn-ie-se-br-se);
190
- border-color: var(--_ctm-dn-ie-se-br-cr);
191
- border-width: var(--_ctm-dn-ie-se-br-wh);
192
- border-radius: var(--_ctm-dn-ie-se-br-rs);
193
- }
194
- }
195
- &[data-hotspot-tooltip-style-show-border="true"] {
196
- .hotspot__tooltip {
197
- border-style: var(--_ctm-dn-tp-dn-br-se);
198
- border-color: var(--_ctm-dn-tp-dn-br-cr);
199
- border-width: var(--_ctm-dn-tp-dn-br-wh);
200
- border-radius: var(--_ctm-dn-tp-dn-br-rs);
201
- }
202
- }
203
- &[data-hotspot-tooltip-style-show-shadow="true"] {
204
- .hotspot__tooltip {
205
- box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
206
- var(--_ctm-dn-tp-dn-sw-cr);
207
- }
208
- }
209
- &[data-hotspot-tooltip-image-style-show-border="true"] {
210
- .tooltip__image {
211
- border-style: var(--_ctm-dn-tp-ie-dn-br-se);
212
- border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
213
- border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
214
- border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
215
- }
216
- }
217
- &[data-hotspot-tooltip-image-style-show-shadow="true"] {
218
- .tooltip__image {
219
- box-shadow: var(
220
- --_show-shadow,
221
- var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
222
- var(--_ctm-dn-tp-ie-dn-sw-cr)
223
- );
224
- }
225
- }
226
- &[data-hotspot-style-show-shadow="true"] {
227
- .hotspot {
228
- box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
229
- var(--_ctm-dn-ht-se-sw-cr);
230
- }
231
- }
232
- &[data-hotspot-style-show-border="true"] {
233
- .hotspot {
234
- border-style: var(--_ctm-dn-ht-se-br-se);
235
- border-color: var(--_ctm-dn-ht-se-br-cr);
236
- border-width: var(--_ctm-dn-ht-se-br-wh);
237
- border-radius: var(--_ctm-dn-ht-se-br-rs);
238
- }
239
- }
240
- .map-element {
241
- --text-high-contrast-rgb-value: 49, 49, 49;
242
- --detail-medium-contrast: rgb(234, 234, 234);
243
- --text-body: rgb(54, 49, 61);
244
-
245
- position: relative;
246
- background-color: var(
247
- --_ctm-mob-dn-mp-wt-bd-cr,
248
- var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
249
- );
250
-
251
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
252
-
253
- display: flex;
254
- flex-direction: column;
255
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
256
-
257
- gap: var(
258
- --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
259
- var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
260
- );
261
- align-content: var(
262
- --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
263
- var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, center)
264
- );
265
-
266
- width: 100%;
267
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
268
-
269
- border-color: var(
270
- --_ctm-mob-dn-mp-wt-br-cr,
271
- var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
272
- );
273
-
274
- border-style: var(
275
- --_ctm-mob-dn-mp-wt-br-se,
276
- var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
277
- );
278
-
279
- border-width: var(
280
- --_ctm-mob-dn-mp-wt-br-wh,
281
- var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
282
- );
283
-
284
- border-radius: var(
285
- --_ctm-mob-dn-mp-wt-br-rs,
286
- var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
287
- );
288
-
289
- box-shadow: var(
290
- --_show-shadow,
291
- var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
292
- var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
293
- var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
294
- var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
295
- );
296
-
297
- .gallery-header {
298
- text-align: var(
299
- --_ctm-mob-dn-gy-lt-an,
300
- var(--_ctm-tab-dn-gy-lt-an, var(--_ctm-dn-gy-lt-an))
301
- );
302
-
303
- // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
304
- display: flex;
305
- flex-direction: column;
306
-
307
- gap: var(
308
- --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
309
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
310
- );
311
- padding-block: var(
312
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
313
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
314
- );
315
- padding-inline: var(
316
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
317
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
318
- );
319
- background-color: var(
320
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr,
321
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr))
322
- );
323
-
324
- width: 100%;
325
- border-color: var(
326
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
327
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
328
- );
329
- border-style: var(
330
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
331
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
332
- );
333
- border-width: var(
334
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
335
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
336
- );
337
- border-radius: var(
338
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
339
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
340
- );
341
- box-shadow: var(
342
- --_show-shadow,
343
- var(
344
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
345
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
346
- )
347
- var(
348
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
349
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
350
- )
351
- var(
352
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
353
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
354
- )
355
- var(
356
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
357
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
358
- )
359
- );
360
-
361
- & h3 {
362
- color: var(
363
- --_ctm-mob-dn-mp-wt-cr,
364
- var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
365
- );
366
- font-family: var(
367
- --_ctm-mob-dn-mp-wt-ft-fy,
368
- var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
369
- );
370
- font-size: var(
371
- --_ctm-mob-dn-mp-wt-ft-se,
372
- var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
373
- );
374
- font-weight: var(
375
- --_ctm-mob-dn-mp-wt-ft-wt,
376
- var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
377
- );
378
- font-style: var(
379
- --_ctm-mob-dn-mp-wt-ft-se-ic,
380
- var(
381
- --_ctm-tab-dn-mp-wt-ft-se-ic,
382
- var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
383
- )
384
- );
385
- text-align: var(
386
- --_ctm-mob-dn-mp-wt-tt-an,
387
- var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
388
- );
389
- letter-spacing: var(
390
- --_ctm-mob-dn-mp-wt-lr-sg,
391
- var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
392
- );
393
- line-height: var(
394
- --_ctm-mob-dn-mp-wt-le-ht,
395
- var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
396
- );
397
- text-decoration: var(
398
- --_ctm-mob-dn-mp-wt-ue,
399
- var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
400
- );
401
- }
402
-
403
- & p {
404
- color: var(
405
- --_ctm-mob-dn-mp-wt-cr-dc,
406
- var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
407
- );
408
- font-family: var(
409
- --_ctm-mob-dn-mp-wt-ft-fy-dc,
410
- var(
411
- --_ctm-tab-dn-mp-wt-ft-fy-dc,
412
- var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
413
- )
414
- );
415
- font-size: var(
416
- --_ctm-mob-dn-mp-wt-ft-se-dc,
417
- var(
418
- --_ctm-tab-dn-mp-wt-ft-se-dc,
419
- var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
420
- )
421
- );
422
- font-weight: var(
423
- --_ctm-mob-dn-mp-wt-ft-wt-dc,
424
- var(
425
- --_ctm-tab-dn-mp-wt-ft-wt-dc,
426
- var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
427
- )
428
- );
429
- font-style: var(
430
- --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
431
- var(
432
- --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
433
- var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
434
- )
435
- );
436
- text-align: var(
437
- --_ctm-mob-dn-mp-wt-tt-an-dc,
438
- var(
439
- --_ctm-tab-dn-mp-wt-tt-an-dc,
440
- var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
441
- )
442
- );
443
- letter-spacing: var(
444
- --_ctm-mob-dn-mp-wt-lr-sg-dc,
445
- var(
446
- --_ctm-tab-dn-mp-wt-lr-sg-dc,
447
- var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
448
- )
449
- );
450
- line-height: var(
451
- --_ctm-mob-dn-mp-wt-le-ht-dc,
452
- var(
453
- --_ctm-tab-dn-mp-wt-le-ht-dc,
454
- var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
455
- )
456
- );
457
- text-decoration: var(
458
- --_ctm-mob-dn-mp-wt-ue-dc,
459
- var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
460
- );
461
- }
462
-
463
- // h3 {
464
- // margin-bottom: var(--_mb-4);
465
- // }
466
- }
467
-
468
- .img__overlay {
469
- background: var(
470
- --_ctm-mob-dn-ie-se-oy-cr,
471
- var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
472
- );
473
-
474
- height: 100%;
475
- width: 100%;
476
- position: absolute;
477
- top: 0;
478
- }
479
- @keyframes scaleInOut {
480
- 0% {
481
- transform: scale(1);
482
- }
483
- 50% {
484
- transform: scale(1.5);
485
- }
486
- 100% {
487
- transform: scale(1);
488
- }
489
- }
490
- .hotspot__container {
491
- position: absolute;
492
- top: 43%;
493
- left: 12%;
494
- .hotspot__main {
495
- position: relative;
496
- .hotspot {
497
- background: var(--_ctm-dn-ht-se-bd-cr);
498
- // height: var(--_ctm-dn-tp-tt-dn-ft-se);
499
- // width: var(--_ctm-dn-tp-tt-dn-ft-se);
500
- position: absolute;
501
- cursor: pointer;
502
- width: var(--_ctm-dn-ht-se-ht-se);
503
- height: var(--_ctm-dn-ht-se-ht-se);
504
- background-color: var(--_ctm-dn-ht-se-bd-cr);
505
- display: flex;
506
- align-items: center;
507
- top: 50%;
508
- left: 50%;
509
- transform: translate(-50%, -50%);
510
- box-sizing: border-box;
511
- justify-content: center;
512
- animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
513
- &[data-hotspot-shape="circle"] {
514
- border-radius: 50%;
515
- }
516
- &[data-hotspot-shape="any"] {
517
- border-radius: var(--_ctm-dn-ht-se-br-rs);
518
- }
519
- }
520
- }
521
- }
522
- .hotspot__tooltip {
523
- --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
524
- position: absolute;
525
- background: var(--_ctm-dn-tp-dn-bd-cr);
526
- z-index: 1000;
527
- min-width: 100px;
528
- width: var(--_ctm-dn-tp-dn-tp-wh);
529
- min-height: 100px;
530
- height: var(--_ctm-dn-tp-dn-tp-ht);
531
- top: 43%;
532
- left: 12%;
533
- // top: var(--_sf-im-psn-tp, 0);
534
- // left: var(--_sf-im-psn-lt, 0);
535
-
536
- padding: 4px 8px;
537
- display: flex;
538
- justify-content: var(--_ctm-dn-tp-dn-hl-at);
539
- align-items: var(--_ctm-dn-tp-dn-vl-at);
540
-
541
- &::after {
542
- content: "";
543
- position: absolute;
544
-
545
- border-width: 5px;
546
- border-style: solid;
547
- }
548
- .text_box {
549
- overflow-y: auto;
550
- h6 {
551
- font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
552
- font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
553
- color: var(--_ctm-dn-tp-tt-dn-cr);
554
-
555
- font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
556
- font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
557
- text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
558
- letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
559
- line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
560
- text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
561
- }
562
- p {
563
- font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
564
- color: var(--_ctm-dn-tp-tt-dn-cr-dc);
565
- font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
566
- font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
567
- font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
568
- text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
569
- letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
570
- line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
571
- text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
572
- }
573
- }
574
- .tooltip__image {
575
- width: 100%;
576
- background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
577
- transition: transform 0.3s ease-in-out;
578
- display: flex;
579
- justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
580
- align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
581
- img {
582
- object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
583
- height: -webkit-fill-available;
584
- max-width: 100%;
585
- rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
586
- scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
587
-
588
- &:hover {
589
- &[data-on-img-hover="Zoom In"] {
590
- transform: scale(1.08);
591
- }
592
- &[data-on-img-hover="Zoom Out"] {
593
- transform: scale(0.92);
594
- }
595
- }
596
- }
597
- }
598
- }
599
- // .hotspot__main {
600
- // position: relative;
601
- // .hotspot {
602
- // background: var(
603
- // --_ctm-mob-dn-pn-se-bd-cr,
604
- // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
605
- // );
606
- // border-style: var(
607
- // --_ctm-mob-dn-pn-se-br-se,
608
- // var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
609
- // );
610
- // border-color: var(
611
- // --_ctm-mob-dn-pn-se-br-cr,
612
- // var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
613
- // );
614
- // border-width: var(
615
- // --_ctm-mob-dn-pn-se-br-wh,
616
- // var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
617
- // );
618
- // border-radius: var(
619
- // --_ctm-mob-dn-pn-se-br-rs,
620
- // var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
621
- // );
622
- // box-shadow: var(
623
- // --_show-shadow,
624
- // var(
625
- // --_ctm-mob-dn-pn-se-sw-ae,
626
- // var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
627
- // )
628
- // var(
629
- // --_ctm-mob-dn-pn-se-sw-br,
630
- // var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
631
- // )
632
- // var(
633
- // --_ctm-mob-dn-pn-se-sw-sd,
634
- // var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
635
- // )
636
- // var(
637
- // --_ctm-mob-dn-pn-se-sw-cr,
638
- // var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
639
- // )
640
- // );
641
-
642
- // position: absolute;
643
- // cursor: pointer;
644
- // width: var(
645
- // --_ctm-mob-dn-pn-se-ht-se,
646
- // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
647
- // );
648
- // height: var(
649
- // --_ctm-mob-dn-pn-se-ht-se,
650
- // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
651
- // );
652
- // background-color: var(
653
- // --_ctm-mob-dn-pn-se-bd-cr,
654
- // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
655
- // );
656
-
657
- // display: flex;
658
- // align-items: center;
659
- // top: 50%;
660
- // left: 50%;
661
- // transform: translate(-50%, -50%);
662
- // justify-content: center;
663
- // animation: scaleInOut
664
- // var(
665
- // --_ctm-mob-dn-pn-se-an-fy,
666
- // var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
667
- // )
668
- // infinite;
669
-
670
- // .icon {
671
- // display: var(--_sf-show-icon-ff, flex);
672
-
673
- // svg {
674
- // width: var(
675
- // --_ctm-mob-dn-pn-se-in-se,
676
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
677
- // );
678
- // height: var(
679
- // --_ctm-mob-dn-pn-se-in-se,
680
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
681
- // );
682
-
683
- // path {
684
- // stroke: var(
685
- // --_ctm-mob-dn-pn-se-in-c1,
686
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
687
- // );
688
- // fill: var(
689
- // --_ctm-mob-dn-pn-se-in-c1,
690
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
691
- // );
692
- // }
693
- // }
694
- // }
695
- // }
696
- // .hotspot__tooltip {
697
- // position: absolute;
698
- // background: var(
699
- // --_ctm-mob-dn-tp-dn-bd-cr,
700
- // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
701
- // );
702
- // border-style: var(
703
- // --_ctm-mob-dn-tp-dn-br-se,
704
- // var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
705
- // );
706
- // border-color: var(
707
- // --_ctm-mob-dn-tp-dn-br-cr,
708
- // var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
709
- // );
710
- // border-width: var(
711
- // --_ctm-mob-dn-tp-dn-br-wh,
712
- // var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
713
- // );
714
- // border-radius: var(
715
- // --_ctm-mob-dn-tp-dn-br-rs,
716
- // var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
717
- // );
718
-
719
- // box-shadow: var(
720
- // --_show-shadow,
721
- // var(
722
- // --_ctm-mob-dn-tp-dn-sw-ae,
723
- // var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
724
- // )
725
- // var(
726
- // --_ctm-mob-dn-tp-dn-sw-br,
727
- // var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
728
- // )
729
- // var(
730
- // --_ctm-mob-dn-tp-dn-sw-sd,
731
- // var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
732
- // )
733
- // var(
734
- // --_ctm-mob-dn-tp-dn-sw-cr,
735
- // var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
736
- // )
737
- // );
738
-
739
- // z-index: 1000;
740
- // min-width: 100px;
741
- // width: var(
742
- // --_ctm-mob-dn-tp-dn-tp-wh,
743
- // var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
744
- // );
745
- // min-height: 100px;
746
- // height: var(
747
- // --_ctm-mob-dn-tp-dn-tp-ht,
748
- // var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
749
- // );
750
-
751
- // // border-radius: 4px;
752
- // // transform: translate(-10%, -130%);
753
- // left: -10px;
754
- // bottom: 7px;
755
- // padding: 4px 8px;
756
- // display: flex;
757
- // justify-content: var(
758
- // --_ctm-mob-dn-tp-dn-hl-at,
759
- // var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
760
- // );
761
- // align-items: var(
762
- // --_ctm-mob-dn-tp-dn-vl-at,
763
- // var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
764
- // );
765
-
766
- // &::after {
767
- // content: "";
768
- // position: absolute;
769
- // top: 100%;
770
- // left: 20px;
771
- // margin-left: -5px;
772
- // border-width: 5px;
773
- // border-style: solid;
774
- // border-color: var(
775
- // --_ctm-mob-dn-tp-dn-bd-cr,
776
- // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
777
- // )
778
- // transparent transparent transparent;
779
- // }
780
- // span {
781
- // svg {
782
- // width: var(
783
- // --_ctm-mob-dn-pn-se-in-se,
784
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
785
- // );
786
- // height: var(
787
- // --_ctm-mob-dn-pn-se-in-se,
788
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
789
- // );
790
- // path {
791
- // stroke: var(
792
- // --_ctm-mob-dn-pn-se-in-c1,
793
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
794
- // );
795
- // }
796
- // }
797
- // }
798
-
799
- // .text_box {
800
- // h6 {
801
- // font-size: var(
802
- // --_ctm-mob-dn-tp-tt-dn-ft-se,
803
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
804
- // );
805
- // font-family: var(
806
- // --_ctm-mob-dn-tp-tt-dn-ft-fy,
807
- // var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
808
- // );
809
- // color: var(
810
- // --_ctm-mob-dn-tp-tt-dn-cr,
811
- // var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
812
- // );
813
-
814
- // font-weight: var(
815
- // --_ctm-mob-dn-tp-tt-dn-ft-wt,
816
- // var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
817
- // );
818
- // font-style: var(
819
- // --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
820
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
821
- // );
822
- // text-align: var(
823
- // --_ctm-mob-dn-tp-tt-dn-tt-an,
824
- // var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
825
- // );
826
- // letter-spacing: var(
827
- // --_ctm-mob-dn-tp-tt-dn-lr-sg,
828
- // var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
829
- // );
830
- // line-height: var(
831
- // --_ctm-mob-dn-tp-tt-dn-le-ht,
832
- // var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
833
- // );
834
- // text-decoration: var(
835
- // --_ctm-mob-dn-tp-tt-dn-ue,
836
- // var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
837
- // );
838
- // }
839
-
840
- // p {
841
- // font-size: var(
842
- // --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
843
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
844
- // );
845
- // color: var(
846
- // --_ctm-mob-dn-tp-tt-dn-cr-dc,
847
- // var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
848
- // );
849
- // font-family: var(
850
- // --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
851
- // var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
852
- // );
853
- // font-weight: var(
854
- // --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
855
- // var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
856
- // );
857
- // font-style: var(
858
- // --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
859
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
860
- // );
861
- // text-align: var(
862
- // --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
863
- // var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
864
- // );
865
- // letter-spacing: var(
866
- // --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
867
- // var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
868
- // );
869
- // line-height: var(
870
- // --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
871
- // var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
872
- // );
873
- // text-decoration: var(
874
- // --_ctm-mob-dn-tp-tt-dn-ue-dc,
875
- // var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
876
- // );
877
- // }
878
- // }
879
- // .tooltip__image {
880
- // background-color: var(
881
- // --_ctm-mob-dn-tp-ie-dn-bd-cr,
882
- // var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
883
- // );
884
- // transition: transform 0.3s ease-in-out;
885
- // border-style: var(
886
- // --_ctm-mob-dn-tp-ie-dn-br-se,
887
- // var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
888
- // );
889
- // border-color: var(
890
- // --_ctm-mob-dn-tp-ie-dn-br-cr,
891
- // var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
892
- // );
893
- // border-width: var(
894
- // --_ctm-mob-dn-tp-ie-dn-br-wh,
895
- // var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
896
- // );
897
- // border-radius: var(
898
- // --_ctm-mob-dn-tp-ie-dn-br-rs,
899
- // var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
900
- // );
901
- // box-shadow: var(
902
- // --_show-shadow,
903
- // var(
904
- // --_ctm-mob-dn-tp-ie-dn-sw-ae,
905
- // var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
906
- // )
907
- // var(
908
- // --_ctm-mob-dn-tp-ie-dn-sw-br,
909
- // var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
910
- // )
911
- // var(
912
- // --_ctm-mob-dn-tp-ie-dn-sw-sd,
913
- // var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
914
- // )
915
- // var(
916
- // --_ctm-mob-dn-tp-ie-dn-sw-cr,
917
- // var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
918
- // )
919
- // );
920
- // display: flex;
921
- // justify-content: var(
922
- // --_ctm-mob-dn-tp-ie-dn-hl-at,
923
- // var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
924
- // );
925
- // align-items: var(
926
- // --_ctm-mob-dn-tp-ie-dn-vl-at,
927
- // var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
928
- // );
929
-
930
- // img {
931
- // object-fit: var(
932
- // --_ctm-mob-dn-tp-ie-dn-ft-os,
933
- // var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
934
- // );
935
- // max-width: 100%;
936
- // rotate: calc(
937
- // var(
938
- // --_ctm-mob-dn-tp-ie-dn-ud,
939
- // var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
940
- // ) *
941
- // 1deg
942
- // );
943
- // scale: var(
944
- // --_ctm-mob-dn-tp-ie-dn-zm-ie,
945
- // var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
946
- // );
947
- // }
948
- // }
949
- // }
950
- // }
951
-
952
- .map {
953
- width: 100%;
954
- height: 100%;
955
- img {
956
- width: 100%;
957
- height: 100%;
958
- }
959
- }
960
- }
961
- }
962
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $tpgp: 20px;
5
+ $bm: 30px;
6
+ $ics: -1px;
7
+
8
+ $data: (
9
+ leftTop: (
10
+ transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
11
+ icon: (
12
+ bottom: #{$bm},
13
+ right: 0px,
14
+ transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
15
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
16
+ ),
17
+ ),
18
+ leftCenter: (
19
+ transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
20
+ icon: (
21
+ top: 50%,
22
+ right: 0px,
23
+ transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
24
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
25
+ ),
26
+ ),
27
+ leftBottom: (
28
+ transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
29
+ icon: (
30
+ top: #{$bm},
31
+ right: 0px,
32
+ transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
33
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
34
+ ),
35
+ ),
36
+ topLeft: (
37
+ transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
38
+ icon: (
39
+ bottom: 0px,
40
+ right: #{$bm},
41
+ transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
42
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
43
+ ),
44
+ ),
45
+ topCenter: (
46
+ transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
47
+ icon: (
48
+ bottom: 0px,
49
+ right: 50%,
50
+ transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
51
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
52
+ ),
53
+ ),
54
+ topRight: (
55
+ transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
56
+ icon: (
57
+ bottom: 0px,
58
+ left: #{$bm},
59
+ transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
60
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
61
+ ),
62
+ ),
63
+ rightTop: (
64
+ transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
65
+ icon: (
66
+ top: 100%,
67
+ left: 0px,
68
+ transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
69
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
70
+ ),
71
+ ),
72
+ rightCenter: (
73
+ transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
74
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
75
+ icon: (
76
+ bottom: 50%,
77
+ left: 0px,
78
+ transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
79
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
80
+ ),
81
+ ),
82
+ rightBottom: (
83
+ transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
84
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
85
+ icon: (
86
+ top: 100%,
87
+ left: 0,
88
+ transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
89
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
90
+ ),
91
+ ),
92
+ bottomLeft: (
93
+ transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
94
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
95
+ icon: (
96
+ right: #{$bm},
97
+ top: 0%,
98
+ transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
99
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
100
+ ),
101
+ ),
102
+ bottomCenter: (
103
+ transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
104
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
105
+ icon: (
106
+ right: 50%,
107
+ top: 0,
108
+ transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
109
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
110
+ ),
111
+ ),
112
+ bottomRight: (
113
+ transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
114
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
115
+ icon: (
116
+ left: 30px,
117
+ top: 0,
118
+ transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
119
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
120
+ ),
121
+ ),
122
+ );
123
+
124
+ [data-div-type="element"] {
125
+ &[data-element-type="map"] {
126
+ &[data-hotspot-position] {
127
+ @each $key, $value in $data {
128
+ &[data-hotspot-position="#{$key}"] {
129
+ .hotspot__tooltip {
130
+ @each $prop, $val in $value {
131
+ @if ($prop != icon) {
132
+ #{$prop}: #{$val};
133
+ } @else {
134
+ @each $key2, $value2 in $val {
135
+ &:after {
136
+ #{$key2}: #{$value2};
137
+ }
138
+ }
139
+ }
140
+ }
141
+ }
142
+ }
143
+ }
144
+ }
145
+ }
146
+ }
147
+ [data-div-type="element"] {
148
+ &[data-element-type="map"] {
149
+ // width: var(--_lt-wh);
150
+ // height: var(--_lt-ht);
151
+ // margin: var(--_lt-mn);
152
+ // padding: var(--_lt-pg);
153
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
154
+ width: var(
155
+ --_sf-el-wh-st-mx,
156
+ calc(
157
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
158
+ )
159
+ );
160
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
161
+
162
+ --_aspect-ratio: calc(
163
+ 1 *
164
+ (
165
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
166
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
167
+ )
168
+ );
169
+
170
+ & > .wrapper {
171
+ width: 100%;
172
+ // height: 100%;
173
+ }
174
+ &[data-show-shadow="false"] {
175
+ --_show-shadow: none;
176
+ }
177
+ &[data-hotspot-position="topLeft"] {
178
+ --_show-shadow: none;
179
+ .hotspot__tooltip {
180
+ border-style: var(--_ctm-dn-tp-dn-br-se);
181
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
182
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
183
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
184
+ }
185
+ }
186
+
187
+ &[data-hotspot-image-style-show-border="true"] {
188
+ .imageHotspot-element {
189
+ border-style: var(--_ctm-dn-ie-se-br-se);
190
+ border-color: var(--_ctm-dn-ie-se-br-cr);
191
+ border-width: var(--_ctm-dn-ie-se-br-wh);
192
+ border-radius: var(--_ctm-dn-ie-se-br-rs);
193
+ }
194
+ }
195
+ &[data-hotspot-tooltip-style-show-border="true"] {
196
+ .hotspot__tooltip {
197
+ border-style: var(--_ctm-dn-tp-dn-br-se);
198
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
199
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
200
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
201
+ }
202
+ }
203
+ &[data-hotspot-tooltip-style-show-shadow="true"] {
204
+ .hotspot__tooltip {
205
+ box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
206
+ var(--_ctm-dn-tp-dn-sw-cr);
207
+ }
208
+ }
209
+ &[data-hotspot-tooltip-image-style-show-border="true"] {
210
+ .tooltip__image {
211
+ border-style: var(--_ctm-dn-tp-ie-dn-br-se);
212
+ border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
213
+ border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
214
+ border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
215
+ }
216
+ }
217
+ &[data-hotspot-tooltip-image-style-show-shadow="true"] {
218
+ .tooltip__image {
219
+ box-shadow: var(
220
+ --_show-shadow,
221
+ var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
222
+ var(--_ctm-dn-tp-ie-dn-sw-cr)
223
+ );
224
+ }
225
+ }
226
+ &[data-hotspot-style-show-shadow="true"] {
227
+ .hotspot {
228
+ box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
229
+ var(--_ctm-dn-ht-se-sw-cr);
230
+ }
231
+ }
232
+ &[data-hotspot-style-show-border="true"] {
233
+ .hotspot {
234
+ border-style: var(--_ctm-dn-ht-se-br-se);
235
+ border-color: var(--_ctm-dn-ht-se-br-cr);
236
+ border-width: var(--_ctm-dn-ht-se-br-wh);
237
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
238
+ }
239
+ }
240
+ .map-element {
241
+ --text-high-contrast-rgb-value: 49, 49, 49;
242
+ --detail-medium-contrast: rgb(234, 234, 234);
243
+ --text-body: rgb(54, 49, 61);
244
+
245
+ position: relative;
246
+ background-color: var(
247
+ --_ctm-mob-dn-mp-wt-bd-cr,
248
+ var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
249
+ );
250
+
251
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
252
+
253
+ display: flex;
254
+ flex-direction: column;
255
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
256
+
257
+ gap: var(
258
+ --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
259
+ var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
260
+ );
261
+ align-content: var(
262
+ --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
263
+ var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, center)
264
+ );
265
+
266
+ width: 100%;
267
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
268
+
269
+ border-color: var(
270
+ --_ctm-mob-dn-mp-wt-br-cr,
271
+ var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
272
+ );
273
+
274
+ border-style: var(
275
+ --_ctm-mob-dn-mp-wt-br-se,
276
+ var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
277
+ );
278
+
279
+ border-width: var(
280
+ --_ctm-mob-dn-mp-wt-br-wh,
281
+ var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
282
+ );
283
+
284
+ border-radius: var(
285
+ --_ctm-mob-dn-mp-wt-br-rs,
286
+ var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
287
+ );
288
+
289
+ box-shadow: var(
290
+ --_show-shadow,
291
+ var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
292
+ var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
293
+ var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
294
+ var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
295
+ );
296
+
297
+ .gallery-header {
298
+ text-align: var(
299
+ --_ctm-mob-dn-gy-lt-an,
300
+ var(--_ctm-tab-dn-gy-lt-an, var(--_ctm-dn-gy-lt-an))
301
+ );
302
+
303
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
304
+ display: flex;
305
+ flex-direction: column;
306
+
307
+ gap: var(
308
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
309
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
310
+ );
311
+ padding-block: var(
312
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
313
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
314
+ );
315
+ padding-inline: var(
316
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
317
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
318
+ );
319
+ background-color: var(
320
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr,
321
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr))
322
+ );
323
+
324
+ width: 100%;
325
+ border-color: var(
326
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
327
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
328
+ );
329
+ border-style: var(
330
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
331
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
332
+ );
333
+ border-width: var(
334
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
335
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
336
+ );
337
+ border-radius: var(
338
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
339
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
340
+ );
341
+ box-shadow: var(
342
+ --_show-shadow,
343
+ var(
344
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
345
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
346
+ )
347
+ var(
348
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
349
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
350
+ )
351
+ var(
352
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
353
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
354
+ )
355
+ var(
356
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
357
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
358
+ )
359
+ );
360
+
361
+ & h3 {
362
+ color: var(
363
+ --_ctm-mob-dn-mp-wt-cr,
364
+ var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
365
+ );
366
+ font-family: var(
367
+ --_ctm-mob-dn-mp-wt-ft-fy,
368
+ var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
369
+ );
370
+ font-size: var(
371
+ --_ctm-mob-dn-mp-wt-ft-se,
372
+ var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
373
+ );
374
+ font-weight: var(
375
+ --_ctm-mob-dn-mp-wt-ft-wt,
376
+ var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
377
+ );
378
+ font-style: var(
379
+ --_ctm-mob-dn-mp-wt-ft-se-ic,
380
+ var(
381
+ --_ctm-tab-dn-mp-wt-ft-se-ic,
382
+ var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
383
+ )
384
+ );
385
+ text-align: var(
386
+ --_ctm-mob-dn-mp-wt-tt-an,
387
+ var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
388
+ );
389
+ letter-spacing: var(
390
+ --_ctm-mob-dn-mp-wt-lr-sg,
391
+ var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
392
+ );
393
+ line-height: var(
394
+ --_ctm-mob-dn-mp-wt-le-ht,
395
+ var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
396
+ );
397
+ text-decoration: var(
398
+ --_ctm-mob-dn-mp-wt-ue,
399
+ var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
400
+ );
401
+ }
402
+
403
+ & p {
404
+ color: var(
405
+ --_ctm-mob-dn-mp-wt-cr-dc,
406
+ var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
407
+ );
408
+ font-family: var(
409
+ --_ctm-mob-dn-mp-wt-ft-fy-dc,
410
+ var(
411
+ --_ctm-tab-dn-mp-wt-ft-fy-dc,
412
+ var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
413
+ )
414
+ );
415
+ font-size: var(
416
+ --_ctm-mob-dn-mp-wt-ft-se-dc,
417
+ var(
418
+ --_ctm-tab-dn-mp-wt-ft-se-dc,
419
+ var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
420
+ )
421
+ );
422
+ font-weight: var(
423
+ --_ctm-mob-dn-mp-wt-ft-wt-dc,
424
+ var(
425
+ --_ctm-tab-dn-mp-wt-ft-wt-dc,
426
+ var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
427
+ )
428
+ );
429
+ font-style: var(
430
+ --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
431
+ var(
432
+ --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
433
+ var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
434
+ )
435
+ );
436
+ text-align: var(
437
+ --_ctm-mob-dn-mp-wt-tt-an-dc,
438
+ var(
439
+ --_ctm-tab-dn-mp-wt-tt-an-dc,
440
+ var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
441
+ )
442
+ );
443
+ letter-spacing: var(
444
+ --_ctm-mob-dn-mp-wt-lr-sg-dc,
445
+ var(
446
+ --_ctm-tab-dn-mp-wt-lr-sg-dc,
447
+ var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
448
+ )
449
+ );
450
+ line-height: var(
451
+ --_ctm-mob-dn-mp-wt-le-ht-dc,
452
+ var(
453
+ --_ctm-tab-dn-mp-wt-le-ht-dc,
454
+ var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
455
+ )
456
+ );
457
+ text-decoration: var(
458
+ --_ctm-mob-dn-mp-wt-ue-dc,
459
+ var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
460
+ );
461
+ }
462
+
463
+ // h3 {
464
+ // margin-bottom: var(--_mb-4);
465
+ // }
466
+ }
467
+
468
+ .img__overlay {
469
+ background: var(
470
+ --_ctm-mob-dn-ie-se-oy-cr,
471
+ var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
472
+ );
473
+
474
+ height: 100%;
475
+ width: 100%;
476
+ position: absolute;
477
+ top: 0;
478
+ }
479
+ @keyframes scaleInOut {
480
+ 0% {
481
+ transform: scale(1);
482
+ }
483
+ 50% {
484
+ transform: scale(1.5);
485
+ }
486
+ 100% {
487
+ transform: scale(1);
488
+ }
489
+ }
490
+ .hotspot__container {
491
+ position: absolute;
492
+ top: 43%;
493
+ left: 12%;
494
+ .hotspot__main {
495
+ position: relative;
496
+ .hotspot {
497
+ background: var(--_ctm-dn-ht-se-bd-cr);
498
+ // height: var(--_ctm-dn-tp-tt-dn-ft-se);
499
+ // width: var(--_ctm-dn-tp-tt-dn-ft-se);
500
+ position: absolute;
501
+ cursor: pointer;
502
+ width: var(--_ctm-dn-ht-se-ht-se);
503
+ height: var(--_ctm-dn-ht-se-ht-se);
504
+ background-color: var(--_ctm-dn-ht-se-bd-cr);
505
+ display: flex;
506
+ align-items: center;
507
+ top: 50%;
508
+ left: 50%;
509
+ transform: translate(-50%, -50%);
510
+ box-sizing: border-box;
511
+ justify-content: center;
512
+ animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
513
+ &[data-hotspot-shape="circle"] {
514
+ border-radius: 50%;
515
+ }
516
+ &[data-hotspot-shape="any"] {
517
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
518
+ }
519
+ }
520
+ }
521
+ }
522
+ .hotspot__tooltip {
523
+ --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
524
+ position: absolute;
525
+ background: var(--_ctm-dn-tp-dn-bd-cr);
526
+ z-index: 1000;
527
+ min-width: 100px;
528
+ width: var(--_ctm-dn-tp-dn-tp-wh);
529
+ min-height: 100px;
530
+ height: var(--_ctm-dn-tp-dn-tp-ht);
531
+ top: 43%;
532
+ left: 12%;
533
+ // top: var(--_sf-im-psn-tp, 0);
534
+ // left: var(--_sf-im-psn-lt, 0);
535
+
536
+ padding: 4px 8px;
537
+ display: flex;
538
+ justify-content: var(--_ctm-dn-tp-dn-hl-at);
539
+ align-items: var(--_ctm-dn-tp-dn-vl-at);
540
+
541
+ &::after {
542
+ content: "";
543
+ position: absolute;
544
+
545
+ border-width: 5px;
546
+ border-style: solid;
547
+ }
548
+ .text_box {
549
+ overflow-y: auto;
550
+ h6 {
551
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
552
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
553
+ color: var(--_ctm-dn-tp-tt-dn-cr);
554
+
555
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
556
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
557
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
558
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
559
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
560
+ text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
561
+ }
562
+ p {
563
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
564
+ color: var(--_ctm-dn-tp-tt-dn-cr-dc);
565
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
566
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
567
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
568
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
569
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
570
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
571
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
572
+ }
573
+ }
574
+ .tooltip__image {
575
+ width: 100%;
576
+ background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
577
+ transition: transform 0.3s ease-in-out;
578
+ display: flex;
579
+ justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
580
+ align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
581
+ img {
582
+ object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
583
+ height: -webkit-fill-available;
584
+ max-width: 100%;
585
+ rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
586
+ scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
587
+
588
+ &:hover {
589
+ &[data-on-img-hover="Zoom In"] {
590
+ transform: scale(1.08);
591
+ }
592
+ &[data-on-img-hover="Zoom Out"] {
593
+ transform: scale(0.92);
594
+ }
595
+ }
596
+ }
597
+ }
598
+ }
599
+ // .hotspot__main {
600
+ // position: relative;
601
+ // .hotspot {
602
+ // background: var(
603
+ // --_ctm-mob-dn-pn-se-bd-cr,
604
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
605
+ // );
606
+ // border-style: var(
607
+ // --_ctm-mob-dn-pn-se-br-se,
608
+ // var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
609
+ // );
610
+ // border-color: var(
611
+ // --_ctm-mob-dn-pn-se-br-cr,
612
+ // var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
613
+ // );
614
+ // border-width: var(
615
+ // --_ctm-mob-dn-pn-se-br-wh,
616
+ // var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
617
+ // );
618
+ // border-radius: var(
619
+ // --_ctm-mob-dn-pn-se-br-rs,
620
+ // var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
621
+ // );
622
+ // box-shadow: var(
623
+ // --_show-shadow,
624
+ // var(
625
+ // --_ctm-mob-dn-pn-se-sw-ae,
626
+ // var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
627
+ // )
628
+ // var(
629
+ // --_ctm-mob-dn-pn-se-sw-br,
630
+ // var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
631
+ // )
632
+ // var(
633
+ // --_ctm-mob-dn-pn-se-sw-sd,
634
+ // var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
635
+ // )
636
+ // var(
637
+ // --_ctm-mob-dn-pn-se-sw-cr,
638
+ // var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
639
+ // )
640
+ // );
641
+
642
+ // position: absolute;
643
+ // cursor: pointer;
644
+ // width: var(
645
+ // --_ctm-mob-dn-pn-se-ht-se,
646
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
647
+ // );
648
+ // height: var(
649
+ // --_ctm-mob-dn-pn-se-ht-se,
650
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
651
+ // );
652
+ // background-color: var(
653
+ // --_ctm-mob-dn-pn-se-bd-cr,
654
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
655
+ // );
656
+
657
+ // display: flex;
658
+ // align-items: center;
659
+ // top: 50%;
660
+ // left: 50%;
661
+ // transform: translate(-50%, -50%);
662
+ // justify-content: center;
663
+ // animation: scaleInOut
664
+ // var(
665
+ // --_ctm-mob-dn-pn-se-an-fy,
666
+ // var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
667
+ // )
668
+ // infinite;
669
+
670
+ // .icon {
671
+ // display: var(--_sf-show-icon-ff, flex);
672
+
673
+ // svg {
674
+ // width: var(
675
+ // --_ctm-mob-dn-pn-se-in-se,
676
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
677
+ // );
678
+ // height: var(
679
+ // --_ctm-mob-dn-pn-se-in-se,
680
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
681
+ // );
682
+
683
+ // path {
684
+ // stroke: var(
685
+ // --_ctm-mob-dn-pn-se-in-c1,
686
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
687
+ // );
688
+ // fill: var(
689
+ // --_ctm-mob-dn-pn-se-in-c1,
690
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
691
+ // );
692
+ // }
693
+ // }
694
+ // }
695
+ // }
696
+ // .hotspot__tooltip {
697
+ // position: absolute;
698
+ // background: var(
699
+ // --_ctm-mob-dn-tp-dn-bd-cr,
700
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
701
+ // );
702
+ // border-style: var(
703
+ // --_ctm-mob-dn-tp-dn-br-se,
704
+ // var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
705
+ // );
706
+ // border-color: var(
707
+ // --_ctm-mob-dn-tp-dn-br-cr,
708
+ // var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
709
+ // );
710
+ // border-width: var(
711
+ // --_ctm-mob-dn-tp-dn-br-wh,
712
+ // var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
713
+ // );
714
+ // border-radius: var(
715
+ // --_ctm-mob-dn-tp-dn-br-rs,
716
+ // var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
717
+ // );
718
+
719
+ // box-shadow: var(
720
+ // --_show-shadow,
721
+ // var(
722
+ // --_ctm-mob-dn-tp-dn-sw-ae,
723
+ // var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
724
+ // )
725
+ // var(
726
+ // --_ctm-mob-dn-tp-dn-sw-br,
727
+ // var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
728
+ // )
729
+ // var(
730
+ // --_ctm-mob-dn-tp-dn-sw-sd,
731
+ // var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
732
+ // )
733
+ // var(
734
+ // --_ctm-mob-dn-tp-dn-sw-cr,
735
+ // var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
736
+ // )
737
+ // );
738
+
739
+ // z-index: 1000;
740
+ // min-width: 100px;
741
+ // width: var(
742
+ // --_ctm-mob-dn-tp-dn-tp-wh,
743
+ // var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
744
+ // );
745
+ // min-height: 100px;
746
+ // height: var(
747
+ // --_ctm-mob-dn-tp-dn-tp-ht,
748
+ // var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
749
+ // );
750
+
751
+ // // border-radius: 4px;
752
+ // // transform: translate(-10%, -130%);
753
+ // left: -10px;
754
+ // bottom: 7px;
755
+ // padding: 4px 8px;
756
+ // display: flex;
757
+ // justify-content: var(
758
+ // --_ctm-mob-dn-tp-dn-hl-at,
759
+ // var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
760
+ // );
761
+ // align-items: var(
762
+ // --_ctm-mob-dn-tp-dn-vl-at,
763
+ // var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
764
+ // );
765
+
766
+ // &::after {
767
+ // content: "";
768
+ // position: absolute;
769
+ // top: 100%;
770
+ // left: 20px;
771
+ // margin-left: -5px;
772
+ // border-width: 5px;
773
+ // border-style: solid;
774
+ // border-color: var(
775
+ // --_ctm-mob-dn-tp-dn-bd-cr,
776
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
777
+ // )
778
+ // transparent transparent transparent;
779
+ // }
780
+ // span {
781
+ // svg {
782
+ // width: var(
783
+ // --_ctm-mob-dn-pn-se-in-se,
784
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
785
+ // );
786
+ // height: var(
787
+ // --_ctm-mob-dn-pn-se-in-se,
788
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
789
+ // );
790
+ // path {
791
+ // stroke: var(
792
+ // --_ctm-mob-dn-pn-se-in-c1,
793
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
794
+ // );
795
+ // }
796
+ // }
797
+ // }
798
+
799
+ // .text_box {
800
+ // h6 {
801
+ // font-size: var(
802
+ // --_ctm-mob-dn-tp-tt-dn-ft-se,
803
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
804
+ // );
805
+ // font-family: var(
806
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy,
807
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
808
+ // );
809
+ // color: var(
810
+ // --_ctm-mob-dn-tp-tt-dn-cr,
811
+ // var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
812
+ // );
813
+
814
+ // font-weight: var(
815
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt,
816
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
817
+ // );
818
+ // font-style: var(
819
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
820
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
821
+ // );
822
+ // text-align: var(
823
+ // --_ctm-mob-dn-tp-tt-dn-tt-an,
824
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
825
+ // );
826
+ // letter-spacing: var(
827
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg,
828
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
829
+ // );
830
+ // line-height: var(
831
+ // --_ctm-mob-dn-tp-tt-dn-le-ht,
832
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
833
+ // );
834
+ // text-decoration: var(
835
+ // --_ctm-mob-dn-tp-tt-dn-ue,
836
+ // var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
837
+ // );
838
+ // }
839
+
840
+ // p {
841
+ // font-size: var(
842
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
843
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
844
+ // );
845
+ // color: var(
846
+ // --_ctm-mob-dn-tp-tt-dn-cr-dc,
847
+ // var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
848
+ // );
849
+ // font-family: var(
850
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
851
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
852
+ // );
853
+ // font-weight: var(
854
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
855
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
856
+ // );
857
+ // font-style: var(
858
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
859
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
860
+ // );
861
+ // text-align: var(
862
+ // --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
863
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
864
+ // );
865
+ // letter-spacing: var(
866
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
867
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
868
+ // );
869
+ // line-height: var(
870
+ // --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
871
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
872
+ // );
873
+ // text-decoration: var(
874
+ // --_ctm-mob-dn-tp-tt-dn-ue-dc,
875
+ // var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
876
+ // );
877
+ // }
878
+ // }
879
+ // .tooltip__image {
880
+ // background-color: var(
881
+ // --_ctm-mob-dn-tp-ie-dn-bd-cr,
882
+ // var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
883
+ // );
884
+ // transition: transform 0.3s ease-in-out;
885
+ // border-style: var(
886
+ // --_ctm-mob-dn-tp-ie-dn-br-se,
887
+ // var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
888
+ // );
889
+ // border-color: var(
890
+ // --_ctm-mob-dn-tp-ie-dn-br-cr,
891
+ // var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
892
+ // );
893
+ // border-width: var(
894
+ // --_ctm-mob-dn-tp-ie-dn-br-wh,
895
+ // var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
896
+ // );
897
+ // border-radius: var(
898
+ // --_ctm-mob-dn-tp-ie-dn-br-rs,
899
+ // var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
900
+ // );
901
+ // box-shadow: var(
902
+ // --_show-shadow,
903
+ // var(
904
+ // --_ctm-mob-dn-tp-ie-dn-sw-ae,
905
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
906
+ // )
907
+ // var(
908
+ // --_ctm-mob-dn-tp-ie-dn-sw-br,
909
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
910
+ // )
911
+ // var(
912
+ // --_ctm-mob-dn-tp-ie-dn-sw-sd,
913
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
914
+ // )
915
+ // var(
916
+ // --_ctm-mob-dn-tp-ie-dn-sw-cr,
917
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
918
+ // )
919
+ // );
920
+ // display: flex;
921
+ // justify-content: var(
922
+ // --_ctm-mob-dn-tp-ie-dn-hl-at,
923
+ // var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
924
+ // );
925
+ // align-items: var(
926
+ // --_ctm-mob-dn-tp-ie-dn-vl-at,
927
+ // var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
928
+ // );
929
+
930
+ // img {
931
+ // object-fit: var(
932
+ // --_ctm-mob-dn-tp-ie-dn-ft-os,
933
+ // var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
934
+ // );
935
+ // max-width: 100%;
936
+ // rotate: calc(
937
+ // var(
938
+ // --_ctm-mob-dn-tp-ie-dn-ud,
939
+ // var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
940
+ // ) *
941
+ // 1deg
942
+ // );
943
+ // scale: var(
944
+ // --_ctm-mob-dn-tp-ie-dn-zm-ie,
945
+ // var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
946
+ // );
947
+ // }
948
+ // }
949
+ // }
950
+ // }
951
+
952
+ .map {
953
+ width: 100%;
954
+ height: 100%;
955
+ img {
956
+ width: 100%;
957
+ height: 100%;
958
+ }
959
+ }
960
+ }
961
+ }
962
+ }