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

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