@kimafinance/kima-transaction-widget 1.4.7 → 1.4.9

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 (15) hide show
  1. package/dist/index.cjs +1042 -511
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +906 -375
  4. package/dist/index.js.map +1 -1
  5. package/dist/metafile-cjs.json +1 -1
  6. package/dist/metafile-esm.json +1 -1
  7. package/package.json +1 -1
  8. package/dist/assets/Manrope-ExtraLight-47OLGDTA.woff +0 -0
  9. package/dist/assets/Manrope-ExtraLight-6BGXUBPE.woff2 +0 -0
  10. package/dist/assets/Manrope-ExtraLight-6KZAMPI7.eot +0 -0
  11. package/dist/assets/SohneBreit-Buch-FPHQDKKW.woff +0 -0
  12. package/dist/assets/SohneBreit-Buch-UDQP3HAK.woff2 +0 -0
  13. package/dist/assets/SohneBreit-Buch-VTQ4XGFE.eot +0 -0
  14. package/dist/index.css +0 -3519
  15. package/dist/index.css.map +0 -1
package/dist/index.css DELETED
@@ -1,3519 +0,0 @@
1
- @import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
2
- @import "react-tooltip/dist/react-tooltip.css";
3
-
4
- /* src/index.css */
5
- @keyframes pulse {
6
- 0% {
7
- opacity: 1;
8
- }
9
- 50% {
10
- opacity: 0.4;
11
- }
12
- 100% {
13
- opacity: 1;
14
- }
15
- }
16
- @font-face {
17
- font-family: "Manrope";
18
- src: url("./assets/Manrope-ExtraLight-6KZAMPI7.eot");
19
- src:
20
- url("./assets/Manrope-ExtraLight-6KZAMPI7.eot?#iefix") format("embedded-opentype"),
21
- url("./assets/Manrope-ExtraLight-6BGXUBPE.woff2") format("woff2"),
22
- url("./assets/Manrope-ExtraLight-47OLGDTA.woff") format("woff");
23
- font-weight: 200;
24
- font-style: normal;
25
- font-display: swap;
26
- }
27
- @font-face {
28
- font-family: "Sohne";
29
- src: url("./assets/SohneBreit-Buch-VTQ4XGFE.eot");
30
- src:
31
- url("./assets/SohneBreit-Buch-VTQ4XGFE.eot?#iefix") format("embedded-opentype"),
32
- url("./assets/SohneBreit-Buch-UDQP3HAK.woff2") format("woff2"),
33
- url("./assets/SohneBreit-Buch-FPHQDKKW.woff") format("woff");
34
- font-weight: normal;
35
- font-style: normal;
36
- font-display: swap;
37
- }
38
- .kima-card {
39
- position: relative;
40
- }
41
- .kima-card .invalid-option-banner {
42
- font-size: 14px;
43
- background-color: red;
44
- color: #edf2f5;
45
- padding: 10px 25px;
46
- margin: 0;
47
- border-radius: 40px 40px 0 0;
48
- text-align: justify;
49
- }
50
- .kima-card .kima-card-header {
51
- display: flex;
52
- flex-direction: column;
53
- }
54
- .kima-card .kima-card-header .topbar {
55
- display: flex;
56
- align-items: center;
57
- justify-content: space-between;
58
- }
59
- @media (max-width: 768px) {
60
- .kima-card .kima-card-header .topbar {
61
- flex-direction: column-reverse;
62
- align-items: flex-start;
63
- }
64
- }
65
- .kima-card .kima-card-header .topbar .title {
66
- display: flex;
67
- align-items: center;
68
- font-family: "Sohne";
69
- font-weight: 400;
70
- letter-spacing: 1px;
71
- font-size: 26px;
72
- }
73
- @media (max-width: 768px) {
74
- .kima-card .kima-card-header .topbar .title {
75
- font-size: 24px;
76
- }
77
- }
78
- .kima-card .kima-card-header .topbar .title.skeleton {
79
- background: #778da3;
80
- border-radius: 50px;
81
- height: 25px;
82
- width: 60%;
83
- animation: pulse 1.5s ease-in-out infinite;
84
- }
85
- .kima-card .kima-card-header .topbar .title .transaction-title {
86
- margin-right: 10px;
87
- font-size: 26px;
88
- text-align: start;
89
- }
90
- @media (max-width: 768px) {
91
- .kima-card .kima-card-header .topbar .title .transaction-title {
92
- font-size: 24px;
93
- }
94
- }
95
- .kima-card .kima-card-header .topbar .title span {
96
- color: #5aa0db;
97
- font-weight: bold;
98
- margin: 0 0 0 1em;
99
- }
100
- .kima-card .kima-card-header .topbar .title .title-icon {
101
- display: inline-block;
102
- vertical-align: middle;
103
- }
104
- .kima-card .kima-card-header .topbar .title .percent {
105
- margin-left: 0.5em;
106
- font-weight: bold;
107
- }
108
- .kima-card .kima-card-header .topbar .control-buttons {
109
- display: flex;
110
- align-items: center;
111
- }
112
- @media (max-width: 768px) {
113
- .kima-card .kima-card-header .topbar .control-buttons {
114
- margin-left: auto;
115
- }
116
- }
117
- .kima-card .kima-card-header .topbar .control-buttons .icon-button {
118
- background: transparent;
119
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
120
- border-radius: 40px;
121
- padding: 2px 8px;
122
- cursor: pointer;
123
- transition:
124
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
125
- color 0ms,
126
- background-color 0ms,
127
- border-color 0ms;
128
- }
129
- .kima-card .kima-card-header .topbar .control-buttons .icon-button.minimize {
130
- border: none;
131
- }
132
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:nth-of-type(2) {
133
- margin-left: 13px;
134
- padding: 4px 6px;
135
- }
136
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover,
137
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
138
- opacity: 0.6;
139
- }
140
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
141
- cursor: default;
142
- }
143
- .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
144
- width: 30px;
145
- height: 22px;
146
- padding: 5px;
147
- }
148
- @media (max-width: 768px) {
149
- .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
150
- width: 25px;
151
- }
152
- }
153
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:first-of-type svg {
154
- margin-top: 7px;
155
- }
156
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button {
157
- display: flex;
158
- justify-content: center;
159
- align-items: center;
160
- padding: 4px;
161
- width: 60px;
162
- height: 60px;
163
- border-radius: 9999px;
164
- background: transparent;
165
- cursor: pointer;
166
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
167
- }
168
- @media (max-width: 768px) {
169
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button {
170
- width: 50px;
171
- height: 50px;
172
- }
173
- }
174
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
175
- width: 24px;
176
- height: 24px;
177
- }
178
- @media (max-width: 768px) {
179
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
180
- width: 20px;
181
- height: 20px;
182
- }
183
- }
184
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:hover,
185
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
186
- opacity: 0.6;
187
- }
188
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
189
- cursor: default;
190
- }
191
- .kima-card .kima-card-header .topbar .control-buttons a {
192
- margin-left: auto;
193
- color: #778da3;
194
- text-decoration: none;
195
- cursor: pointer;
196
- margin-right: 1em;
197
- }
198
- .kima-card .kima-card-header .topbar .control-buttons .menu-button {
199
- font-family: "Manrope";
200
- font-size: 14px;
201
- font-weight: 500;
202
- padding: 4px 10px 4px 10px;
203
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
204
- border-radius: 50px;
205
- }
206
- .kima-card .kima-card-header .topbar .control-buttons .menu-button:hover {
207
- background-color: #d6e4ea;
208
- }
209
- @media (max-width: 500px) {
210
- .kima-card .kima-card-header .topbar .control-buttons .menu-button {
211
- font-size: 12px;
212
- }
213
- }
214
- .kima-card .kima-card-header .topbar .control-buttons .reset-button {
215
- font-family: "Manrope";
216
- font-size: 14px;
217
- font-weight: 500;
218
- padding: 4px 16px;
219
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
220
- border-radius: 50px;
221
- background-color: #d6e4ea;
222
- color: #778da3;
223
- cursor: pointer;
224
- }
225
- .kima-card .kima-card-header .topbar .control-buttons .reset-button:hover {
226
- opacity: 75%;
227
- }
228
- @media (max-width: 500px) {
229
- .kima-card .kima-card-header .topbar .control-buttons .reset-button {
230
- font-size: 12px;
231
- }
232
- }
233
- .kima-card .kima-card-header .topbar .control-buttons .maximize {
234
- color: #86b8ce;
235
- cursor: pointer;
236
- }
237
- .kima-card .kima-card-header .header-network-labels {
238
- display: flex;
239
- flex-direction: row;
240
- align-items: center;
241
- gap: 16px;
242
- margin-top: 20px;
243
- }
244
- .kima-card .kima-card-header .header-network-labels p {
245
- padding: 0;
246
- }
247
- @media (max-width: 390px) {
248
- .kima-card .kima-card-header .header-network-labels p {
249
- display: none;
250
- }
251
- .kima-card .kima-card-header .header-network-labels .arrow {
252
- transform: rotate(-180deg);
253
- }
254
- }
255
- .kima-card .kima-card-header .header-network-labels .arrow {
256
- transform: rotate(-90deg);
257
- }
258
- .kima-card .kima-card-header h4 {
259
- font-weight: 300;
260
- font-size: 14px;
261
- margin-top: 20px;
262
- margin-bottom: 30px;
263
- }
264
- .kima-card .kima-card-header .kima-card-network-label {
265
- display: flex;
266
- padding: 13px 18px;
267
- border-radius: 50px;
268
- margin-right: 12px;
269
- }
270
- .kima-card .kima-card-header .kima-card-network-label .icon {
271
- border-radius: 9999px;
272
- background-color: white;
273
- padding: 4px;
274
- display: flex;
275
- justify-content: center;
276
- }
277
- @media (max-width: 500px) {
278
- .kima-card .kima-card-header .kima-card-network-label {
279
- font-size: 14px;
280
- }
281
- }
282
- .kima-card .kima-card-header .kima-card-network-label.light {
283
- background-color: #d6e4ea;
284
- color: black;
285
- }
286
- .kima-card .kima-card-header .kima-card-network-label.dark {
287
- background-color: #4a5068;
288
- color: white;
289
- }
290
- .kima-card .kima-card-header p {
291
- margin: 0;
292
- border-radius: 50px;
293
- padding: 1em 1.5em;
294
- }
295
- .kima-card .kima-card-header p.light {
296
- background-color: #edf2f5;
297
- color: black;
298
- }
299
- .kima-card .kima-card-header p.dark {
300
- background-color: #778da3;
301
- color: white;
302
- }
303
- .kima-card .kima-card-footer {
304
- display: flex;
305
- align-items: center;
306
- transition:
307
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
308
- color 0ms,
309
- background-color 0ms,
310
- border-color 0ms;
311
- max-height: 50px;
312
- margin-top: 20px;
313
- opacity: 1;
314
- box-sizing: content-box;
315
- font-family: "Manrope";
316
- font-size: 14px;
317
- font-weight: 700;
318
- }
319
- @media (min-width: 768px) {
320
- .kima-card .kima-card-footer {
321
- margin-bottom: 20px;
322
- }
323
- }
324
- @media (max-width: 768px) {
325
- .kima-card .kima-card-footer {
326
- padding-top: 20px;
327
- }
328
- .kima-card .kima-card-footer p {
329
- display: none;
330
- }
331
- .kima-card .kima-card-footer.confirm {
332
- margin-top: 50px;
333
- }
334
- }
335
- @media (max-width: 768px) and (max-width: 500px) {
336
- .kima-card .kima-card-footer.confirm {
337
- margin-top: 0;
338
- }
339
- }
340
- @media (max-width: 500px) {
341
- .kima-card .kima-card-footer {
342
- padding: 0;
343
- width: 100%;
344
- }
345
- }
346
- .kima-card .kima-card-footer .button-group {
347
- display: flex;
348
- align-items: center;
349
- box-sizing: content-box;
350
- margin-left: auto;
351
- flex-direction: row;
352
- gap: 20px;
353
- margin-bottom: 30px;
354
- }
355
- .kima-card .kima-card-footer .button-group.skeleton {
356
- align-items: flex-end;
357
- }
358
- .kima-card .kima-card-footer .button-group .skeleton {
359
- background: #778da3;
360
- border-radius: 50px;
361
- height: 30px;
362
- width: 100px;
363
- animation: pulse 1.5s ease-in-out infinite;
364
- }
365
- @media (max-width: 500px) {
366
- .kima-card .kima-card-footer .button-group {
367
- margin-top: 0px;
368
- flex-direction: column;
369
- width: 100%;
370
- }
371
- }
372
- .kima-card .kima-card-footer .button-group button {
373
- width: 120px;
374
- padding: 5px 10px;
375
- }
376
- @media (max-width: 500px) {
377
- .kima-card .kima-card-footer .button-group button {
378
- width: 100%;
379
- }
380
- }
381
- @media (min-width: 565px) {
382
- .kima-card .kima-card-footer .button-group button {
383
- width: 140px;
384
- }
385
- }
386
- .kima-card .kima-card-footer p {
387
- font-size: 0.8em;
388
- margin: 0 0 0 1em;
389
- }
390
- @media (max-width: 500px) {
391
- .kima-card .kima-card-footer {
392
- flex-direction: column;
393
- max-height: unset;
394
- }
395
- .kima-card .kima-card-footer.bridge {
396
- margin-top: 0;
397
- }
398
- .kima-card .kima-card-footer .button-group {
399
- margin-left: unset;
400
- }
401
- }
402
- .kima-card .floating-footer {
403
- color: black;
404
- position: absolute;
405
- width: 100%;
406
- display: flex;
407
- align-items: center;
408
- justify-content: center;
409
- pointer-events: none;
410
- font-family: "Sohne";
411
- right: 0;
412
- margin-top: 10px;
413
- height: 35px;
414
- }
415
- @media (max-width: 768px) {
416
- .kima-card .floating-footer {
417
- margin-top: 35px;
418
- }
419
- .kima-card .floating-footer.status {
420
- margin-top: 30px;
421
- }
422
- }
423
- @media (max-width: 500px) {
424
- .kima-card .floating-footer {
425
- margin-top: 30px;
426
- }
427
- }
428
- .kima-card .floating-footer .items {
429
- display: flex;
430
- flex-direction: row;
431
- justify-content: center;
432
- align-items: center;
433
- text-decoration: none;
434
- padding: 4px 15px;
435
- border-radius: 20px;
436
- font-size: 12px;
437
- gap: 8px;
438
- height: 35px;
439
- }
440
- .kima-card .floating-footer .items.light {
441
- background-color: #d6e4ea;
442
- }
443
- .kima-card .floating-footer .items.dark {
444
- background-color: #778da3;
445
- }
446
- .kima-card .floating-footer .items span.network {
447
- font-weight: 800;
448
- }
449
- .kima-card {
450
- font-family: "Manrope";
451
- }
452
- .kima-card .kima-card-content {
453
- font-family: "Manrope";
454
- }
455
- .kima-card .kima-card-content .error-message {
456
- color: red;
457
- font-weight: bold;
458
- }
459
- .kima-card .kima-card-content .subtitle {
460
- margin: 0;
461
- font-weight: bolder;
462
- }
463
- .kima-card .kima-card-content .kima-progressbar {
464
- height: 7px;
465
- width: 95%;
466
- max-width: 930px;
467
- position: relative;
468
- border-radius: 16px;
469
- margin-bottom: 64px;
470
- margin-left: 16px;
471
- }
472
- @media (max-width: 500px) {
473
- .kima-card .kima-card-content .kima-progressbar {
474
- width: 7px;
475
- height: 320px;
476
- max-height: 560px;
477
- }
478
- }
479
- .kima-card .kima-card-content .kima-progressbar .value {
480
- position: absolute;
481
- z-index: 10;
482
- height: 7px;
483
- border-radius: 16px;
484
- background:
485
- linear-gradient(
486
- 90deg,
487
- #adf4a6,
488
- #80d7f5,
489
- #9990d5);
490
- transition: width 0.8s ease-in-out;
491
- }
492
- .kima-card .kima-card-content .kima-progressbar .value.step-25 {
493
- width: calc(25% + 0.5em);
494
- }
495
- .kima-card .kima-card-content .kima-progressbar .value.step-50 {
496
- width: calc(50% + 0.5em);
497
- }
498
- .kima-card .kima-card-content .kima-progressbar .value.step-75 {
499
- width: calc(75% + 0.5em);
500
- }
501
- .kima-card .kima-card-content .kima-progressbar .value.step-100 {
502
- width: 100%;
503
- }
504
- @media (max-width: 500px) {
505
- .kima-card .kima-card-content .kima-progressbar .value {
506
- background:
507
- linear-gradient(
508
- 180deg,
509
- #adf4a6,
510
- #80d7f5,
511
- #9990d5);
512
- width: 7px !important;
513
- transition: height 0.8s ease-in-out;
514
- }
515
- .kima-card .kima-card-content .kima-progressbar .value.step-25 {
516
- height: calc(25% + 0.5em);
517
- }
518
- .kima-card .kima-card-content .kima-progressbar .value.step-50 {
519
- height: calc(50% + 0.5em);
520
- }
521
- .kima-card .kima-card-content .kima-progressbar .value.step-75 {
522
- height: calc(75% + 0.5em);
523
- }
524
- .kima-card .kima-card-content .kima-progressbar .value.step-100 {
525
- height: 100%;
526
- }
527
- }
528
- .kima-card .kima-card-content .kima-progressbar .step-indicators {
529
- position: relative;
530
- z-index: 20;
531
- display: flex;
532
- flex-direction: row;
533
- justify-content: space-between;
534
- margin: 0 -3.2px;
535
- padding-bottom: 64px;
536
- }
537
- @media (max-width: 500px) {
538
- .kima-card .kima-card-content .kima-progressbar .step-indicators {
539
- flex-direction: column;
540
- gap: 40px;
541
- }
542
- }
543
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
544
- width: 48px;
545
- height: 48px;
546
- margin-top: -21px;
547
- position: relative;
548
- border-radius: 40px;
549
- }
550
- @media (max-width: 768px) {
551
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
552
- width: 32px;
553
- height: 32px;
554
- margin-top: -12px;
555
- }
556
- }
557
- @media (max-width: 500px) {
558
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
559
- width: 48px;
560
- height: 48px;
561
- margin-top: -10px;
562
- margin-left: -17px;
563
- }
564
- }
565
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step svg {
566
- position: absolute;
567
- }
568
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed,
569
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active {
570
- border: 1px solid #86b8ce;
571
- }
572
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
573
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
574
- top: -53px;
575
- left: 67px;
576
- width: 41px;
577
- height: 41px;
578
- }
579
- @media (max-width: 768px) {
580
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
581
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
582
- width: 32px;
583
- height: 32px;
584
- top: -45px;
585
- left: 40px;
586
- }
587
- }
588
- @media (max-width: 500px) {
589
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
590
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
591
- width: 41px;
592
- height: 41px;
593
- top: -42px;
594
- left: 43px;
595
- }
596
- }
597
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed:first-of-type svg,
598
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:first-of-type svg {
599
- left: -41px;
600
- }
601
- @media (max-width: 768px) {
602
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed:first-of-type svg,
603
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:first-of-type svg {
604
- left: 13px;
605
- }
606
- }
607
- @media (max-width: 500px) {
608
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed:first-of-type svg,
609
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:first-of-type svg {
610
- left: 16px;
611
- }
612
- }
613
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed:last-of-type svg,
614
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:last-of-type svg {
615
- right: 20px;
616
- }
617
- @media (max-width: 768px) {
618
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed:last-of-type svg,
619
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:last-of-type svg {
620
- right: -5px;
621
- }
622
- }
623
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
624
- top: -48px;
625
- left: 72px;
626
- width: 32px;
627
- height: 32px;
628
- }
629
- @media (max-width: 768px) {
630
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
631
- top: -40px;
632
- left: 46px;
633
- width: 20px;
634
- height: 20px;
635
- }
636
- }
637
- @media (max-width: 500px) {
638
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
639
- width: 32px;
640
- height: 32px;
641
- left: 48px;
642
- top: -38px;
643
- }
644
- }
645
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
646
- left: 40px;
647
- }
648
- @media (max-width: 768px) {
649
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
650
- left: 19px;
651
- }
652
- }
653
- @media (max-width: 500px) {
654
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
655
- left: 21px;
656
- }
657
- }
658
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
659
- right: 24px;
660
- }
661
- @media (max-width: 768px) {
662
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
663
- right: 3px;
664
- }
665
- }
666
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error {
667
- border: 1px solid #86b8ce;
668
- }
669
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
670
- top: -45px;
671
- left: 75px;
672
- width: 24px;
673
- height: 24px;
674
- }
675
- @media (max-width: 768px) {
676
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
677
- top: -38px;
678
- left: 47px;
679
- width: 16px;
680
- height: 16px;
681
- }
682
- }
683
- @media (max-width: 500px) {
684
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
685
- top: -35px;
686
- left: 52px;
687
- width: 24px;
688
- height: 24px;
689
- }
690
- }
691
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
692
- left: -32px;
693
- }
694
- @media (max-width: 768px) {
695
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
696
- left: 20px;
697
- }
698
- }
699
- @media (max-width: 500px) {
700
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
701
- left: 25px;
702
- }
703
- }
704
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
705
- right: 60px;
706
- }
707
- @media (max-width: 768px) {
708
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
709
- right: 3px;
710
- }
711
- }
712
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.light {
713
- background-color: white;
714
- }
715
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.dark {
716
- background-color: #4a5068;
717
- }
718
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
719
- position: absolute;
720
- width: 160px;
721
- left: -64px;
722
- top: 56px;
723
- display: flex;
724
- justify-content: center;
725
- align-items: center;
726
- transition:
727
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
728
- color 0ms,
729
- background-color 0ms,
730
- border-color 0ms;
731
- font-weight: 300;
732
- }
733
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
734
- text-align: center;
735
- margin-left: 24px;
736
- font-size: 14px;
737
- font-family: "Manrope";
738
- }
739
- @media (max-width: 500px) {
740
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
741
- position: absolute;
742
- top: -30px;
743
- }
744
- }
745
- @media (max-width: 768px) {
746
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
747
- width: 110px;
748
- left: -35px;
749
- flex-direction: column;
750
- position: relative;
751
- margin-left: -5px;
752
- top: 45px;
753
- }
754
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
755
- margin-left: 0;
756
- width: 100%;
757
- }
758
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
759
- align-items: center;
760
- }
761
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
762
- overflow: visible !important;
763
- text-overflow: inherit !important;
764
- white-space: inherit !important;
765
- display: flex;
766
- justify-content: center;
767
- }
768
- }
769
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
770
- left: 45px;
771
- justify-content: flex-start;
772
- }
773
- @media (max-width: 768px) {
774
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
775
- left: -8px;
776
- }
777
- }
778
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info > span {
779
- margin-left: -45px;
780
- left: 91px;
781
- }
782
- @media (max-width: 500px) {
783
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(even) .step-info > span {
784
- left: 100px;
785
- }
786
- }
787
- @media (max-width: 500px) {
788
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(3) .step-info > span {
789
- left: 83px;
790
- }
791
- }
792
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
793
- justify-content: flex-end;
794
- }
795
- @media (max-width: 768px) {
796
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
797
- right: 77px;
798
- }
799
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
800
- margin: 0 !important;
801
- left: 75px;
802
- }
803
- }
804
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
805
- margin-right: 45px;
806
- }
807
- .kima-card .kima-card-content .kima-tooltip {
808
- padding-top: 2em;
809
- width: 100%;
810
- position: relative;
811
- }
812
- .kima-card .kima-card-content .kima-tooltip > div {
813
- position: relative;
814
- height: fit-content;
815
- width: 50%;
816
- display: flex;
817
- justify-content: center;
818
- transition:
819
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
820
- color 0ms,
821
- background-color 0ms,
822
- border-color 0ms;
823
- }
824
- .kima-card .kima-card-content .kima-tooltip > div.position-first {
825
- left: -1em !important;
826
- justify-content: flex-start;
827
- }
828
- .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
829
- left: 1em;
830
- }
831
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
832
- left: calc(50% + 1em) !important;
833
- justify-content: flex-end;
834
- }
835
- .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
836
- left: calc(100% - 3em) !important;
837
- }
838
- @media (max-width: 768px) {
839
- .kima-card .kima-card-content .kima-tooltip > div {
840
- width: 100%;
841
- left: 0 !important;
842
- }
843
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
844
- left: 1em !important;
845
- }
846
- }
847
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
848
- width: 22em;
849
- border: 1px solid #66aae5;
850
- border-radius: 1em;
851
- padding: 1.5em;
852
- position: relative;
853
- }
854
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
855
- position: absolute;
856
- content: "";
857
- width: 2em;
858
- height: 1.5em;
859
- left: calc(50% - 1em);
860
- top: -1.5em;
861
- background: #66aae5;
862
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
863
- transition:
864
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
865
- color 0ms,
866
- background-color 0ms,
867
- border-color 0ms;
868
- }
869
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
870
- position: relative;
871
- }
872
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
873
- margin-top: 0.8em;
874
- }
875
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
876
- margin-left: 1.5em;
877
- }
878
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p a {
879
- margin-left: 0.5em;
880
- }
881
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
882
- display: inline;
883
- cursor: pointer;
884
- transition:
885
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
886
- color 0ms,
887
- background-color 0ms,
888
- border-color 0ms;
889
- }
890
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
891
- opacity: 0.7;
892
- }
893
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn svg {
894
- width: 1em;
895
- height: 1em;
896
- margin-left: 0.5em;
897
- }
898
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
899
- position: absolute;
900
- margin-top: 0.3em;
901
- width: 1em;
902
- height: 1em;
903
- }
904
- @media (max-width: 768px) {
905
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
906
- width: 100%;
907
- }
908
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
909
- opacity: 0;
910
- }
911
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
912
- position: absolute;
913
- position: absolute;
914
- content: "";
915
- width: 2em;
916
- height: 1.5em;
917
- top: -1.5em;
918
- background: #66aae5;
919
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
920
- transition:
921
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
922
- color 0ms,
923
- background-color 0ms,
924
- border-color 0ms;
925
- }
926
- }
927
- .kima-card .kima-card-content .dropdown-icon {
928
- margin-left: auto;
929
- box-sizing: content-box;
930
- position: absolute;
931
- width: 10px;
932
- height: 10px;
933
- transition:
934
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
935
- color 0ms,
936
- background-color 0ms,
937
- border-color 0ms;
938
- }
939
- .kima-card .kima-card-content .dropdown-icon.collapsed {
940
- right: 10px;
941
- top: 24px;
942
- transform: rotate(-180deg);
943
- }
944
- .kima-card .kima-card-content .dropdown-icon.toggled {
945
- box-sizing: content-box;
946
- position: absolute;
947
- right: 20px;
948
- top: 14px;
949
- transform: rotate(0deg);
950
- }
951
- .kima-card .kima-card-content .network-select {
952
- position: relative;
953
- }
954
- .kima-card .kima-card-content .network-select p {
955
- font-size: 1.2em;
956
- font-weight: 500;
957
- text-align: center;
958
- }
959
- .kima-card .kima-card-content .network-select .network-container {
960
- display: flex;
961
- column-gap: 1em;
962
- align-items: center;
963
- justify-content: center;
964
- margin-top: 2em;
965
- width: max-content;
966
- margin: 0 auto;
967
- }
968
- .kima-card .kima-card-content .single-form {
969
- font-family: "Manrope";
970
- font-size: 16px;
971
- font-weight: 500;
972
- letter-spacing: 0.5px;
973
- margin-top: 20px;
974
- }
975
- @media (max-width: 768px) {
976
- .kima-card .kima-card-content .single-form {
977
- padding-left: 0;
978
- }
979
- }
980
- @media (max-width: 500px) {
981
- .kima-card .kima-card-content .single-form {
982
- font-size: 12px;
983
- }
984
- }
985
- .kima-card .kima-card-content .single-form .bank-input {
986
- margin-top: 2em;
987
- }
988
- .kima-card .kima-card-content .single-form .form-item {
989
- display: flex;
990
- align-items: center;
991
- }
992
- @media (max-width: 500px) {
993
- .kima-card .kima-card-content .single-form .form-item {
994
- flex-direction: column;
995
- justify-content: center;
996
- width: 100%;
997
- padding-bottom: 20px;
998
- }
999
- }
1000
- .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
1001
- margin-top: 16px;
1002
- }
1003
- .kima-card .kima-card-content .single-form .form-item:last-of-type {
1004
- border-bottom: none;
1005
- }
1006
- .kima-card .kima-card-content .single-form .form-item > span {
1007
- width: 140px;
1008
- margin-right: 100px;
1009
- }
1010
- @media (max-width: 768px) {
1011
- .kima-card .kima-card-content .single-form .form-item > span {
1012
- margin-right: 20px;
1013
- }
1014
- }
1015
- @media (max-width: 500px) {
1016
- .kima-card .kima-card-content .single-form .form-item > span {
1017
- width: 100%;
1018
- margin-bottom: 10px;
1019
- margin-right: 0;
1020
- text-align: start;
1021
- font-weight: bolder;
1022
- }
1023
- }
1024
- .kima-card .kima-card-content .single-form .form-item .items {
1025
- display: flex;
1026
- flex-direction: row;
1027
- justify-content: start;
1028
- gap: 10px;
1029
- flex-grow: 1;
1030
- align-items: center;
1031
- }
1032
- @media (max-width: 500px) {
1033
- .kima-card .kima-card-content .single-form .form-item .items {
1034
- flex-direction: column;
1035
- justify-content: center;
1036
- width: 100%;
1037
- }
1038
- }
1039
- .kima-card .kima-card-content .single-form .form-item .network-item {
1040
- display: flex;
1041
- align-items: center;
1042
- width: 9em;
1043
- height: 3.5em;
1044
- border-radius: 0.8em;
1045
- padding: 0 0.8em;
1046
- cursor: pointer;
1047
- transition:
1048
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1049
- color 0ms,
1050
- background-color 0ms,
1051
- border-color 0ms;
1052
- }
1053
- .kima-card .kima-card-content .single-form .form-item .network-item svg {
1054
- width: 2em;
1055
- height: 2em;
1056
- border-radius: 100%;
1057
- }
1058
- .kima-card .kima-card-content .single-form .form-item .network-item p {
1059
- width: 100%;
1060
- text-align: center;
1061
- font-weight: bold;
1062
- }
1063
- .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
1064
- margin-left: 0.5em;
1065
- }
1066
- .kima-card .kima-card-content .single-form .form-item .network-item.light {
1067
- background: #e3e3e3;
1068
- }
1069
- .kima-card .kima-card-content .single-form .form-item .network-item.dark {
1070
- background: #4f5156;
1071
- }
1072
- .kima-card .kima-card-content .single-form .form-item .network-item.active {
1073
- background: #66aae5;
1074
- }
1075
- .kima-card .kima-card-content .single-form .form-item .network-item.active p {
1076
- color: white;
1077
- }
1078
- .kima-card .kima-card-content .single-form .form-item .network-item:hover {
1079
- opacity: 0.7;
1080
- }
1081
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
1082
- display: flex;
1083
- flex-direction: row;
1084
- align-items: center;
1085
- gap: 5px;
1086
- }
1087
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer p {
1088
- margin: 0;
1089
- padding: 0;
1090
- font-size: 12px;
1091
- }
1092
- @media (max-width: 768px) {
1093
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
1094
- flex-direction: column;
1095
- align-items: start;
1096
- }
1097
- }
1098
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount {
1099
- margin: 0;
1100
- padding: 0;
1101
- font-size: 12px;
1102
- display: flex;
1103
- align-items: center;
1104
- }
1105
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount .loading {
1106
- animation: pulse 1.5s ease-in-out infinite;
1107
- margin-top: auto;
1108
- margin-bottom: auto;
1109
- display: inline-block;
1110
- width: 80px;
1111
- height: 15px;
1112
- background-color: rgba(119, 141, 163, 0.3019607843);
1113
- border-radius: 4px;
1114
- color: transparent;
1115
- pointer-events: none;
1116
- user-select: none;
1117
- }
1118
- .kima-card .kima-card-content .single-form .form-item .amount-label-container {
1119
- display: flex;
1120
- }
1121
- @media (max-width: 500px) {
1122
- .kima-card .kima-card-content .single-form .form-item .amount-label-container {
1123
- flex-direction: row;
1124
- }
1125
- }
1126
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
1127
- font-family: "Manrope";
1128
- font-size: 14px;
1129
- font-weight: 500;
1130
- padding: 4px 16px;
1131
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
1132
- border-radius: 50px;
1133
- background-color: #d6e4ea;
1134
- color: #778da3;
1135
- cursor: pointer;
1136
- }
1137
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button:hover {
1138
- opacity: 75%;
1139
- }
1140
- @media (max-width: 500px) {
1141
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
1142
- font-size: 12px;
1143
- }
1144
- }
1145
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
1146
- display: flex;
1147
- align-items: center;
1148
- border: 0.5px solid;
1149
- border-radius: 50px;
1150
- height: 50px;
1151
- padding: 0 14px;
1152
- width: 155px;
1153
- }
1154
- @media (max-width: 639px) {
1155
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
1156
- width: fit-content;
1157
- }
1158
- }
1159
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper .icon-wrapper {
1160
- display: flex;
1161
- justify-content: center;
1162
- padding: 8px;
1163
- background-color: white;
1164
- margin-right: 6px;
1165
- border-radius: 9999px;
1166
- }
1167
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.light {
1168
- background-color: #edf2f5;
1169
- border-color: #86b8ce;
1170
- color: black;
1171
- }
1172
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.dark {
1173
- background-color: #4a5068;
1174
- border-color: #778da3;
1175
- color: white;
1176
- }
1177
- .kima-card .kima-card-content .single-form .form-item .amount-label {
1178
- display: flex;
1179
- align-items: center;
1180
- background-color: #e3e3e3;
1181
- padding: 1em;
1182
- border-radius: 1em;
1183
- }
1184
- .kima-card .kima-card-content .single-form .form-item .amount-label.dark {
1185
- background-color: #4f5156;
1186
- }
1187
- .kima-card .kima-card-content .single-form .form-item .amount-label span {
1188
- font-size: 1.1em;
1189
- font-weight: 500;
1190
- }
1191
- .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper {
1192
- display: flex;
1193
- align-items: center;
1194
- border-radius: 1em;
1195
- font-weight: 500;
1196
- padding: 0.2em;
1197
- padding-right: 0.5em;
1198
- background: white;
1199
- color: black;
1200
- margin-left: 1em;
1201
- }
1202
- .kima-card .kima-card-content .single-form .form-item.transaction-search {
1203
- display: flex;
1204
- flex-direction: column;
1205
- align-items: center;
1206
- justify-content: space-between;
1207
- gap: 10px;
1208
- margin-bottom: 20px;
1209
- width: 100%;
1210
- }
1211
- .kima-card .kima-card-content .single-form .form-item.transaction-search span {
1212
- margin-right: 85px;
1213
- }
1214
- @media (max-width: 500px) {
1215
- .kima-card .kima-card-content .single-form .form-item.transaction-search span {
1216
- text-align: start;
1217
- margin-right: auto;
1218
- margin-bottom: 10px;
1219
- font-weight: bolder;
1220
- }
1221
- }
1222
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1223
- margin-left: auto;
1224
- margin-top: 20px;
1225
- }
1226
- @media (min-width: 565px) {
1227
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1228
- width: 140px;
1229
- }
1230
- }
1231
- @media (max-width: 500px) {
1232
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1233
- width: 100%;
1234
- }
1235
- }
1236
- @media (max-width: 768px) {
1237
- .kima-card .kima-card-content .single-form .form-item.transaction-search {
1238
- flex-direction: column;
1239
- align-items: start;
1240
- }
1241
- }
1242
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
1243
- display: flex;
1244
- flex-direction: row;
1245
- width: 100%;
1246
- align-items: center;
1247
- }
1248
- @media (max-width: 500px) {
1249
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
1250
- width: 100%;
1251
- flex-direction: column;
1252
- }
1253
- }
1254
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
1255
- width: 390px;
1256
- }
1257
- @media (max-width: 500px) {
1258
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
1259
- width: 100%;
1260
- }
1261
- }
1262
- .kima-card .kima-card-content .single-form .form-item input {
1263
- border-radius: 50px;
1264
- background: transparent;
1265
- outline: none;
1266
- font: unset;
1267
- width: 100px;
1268
- padding: 15px 20px;
1269
- box-sizing: content-box;
1270
- font-size: 14px;
1271
- }
1272
- @media (max-width: 500px) {
1273
- .kima-card .kima-card-content .single-form .form-item input {
1274
- padding: 15px 10px;
1275
- width: 100%;
1276
- }
1277
- }
1278
- .kima-card .kima-card-content .single-form .form-item input ::placeholder {
1279
- color: #778da3;
1280
- }
1281
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1282
- width: 325px;
1283
- }
1284
- @media (min-width: 640px) {
1285
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1286
- padding: 15px;
1287
- width: 390px;
1288
- }
1289
- }
1290
- @media (max-width: 585px) {
1291
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1292
- width: 280px;
1293
- }
1294
- }
1295
- @media (max-width: 500px) {
1296
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1297
- width: 100%;
1298
- font-size: 12px;
1299
- }
1300
- }
1301
- .kima-card .kima-card-content .single-form .form-item input.light {
1302
- border: 1px solid #86b8ce;
1303
- color: black;
1304
- background-color: white;
1305
- }
1306
- .kima-card .kima-card-content .single-form .form-item input.dark {
1307
- border: 1px solid #778da3;
1308
- color: white;
1309
- background-color: #4a5068;
1310
- }
1311
- .kima-card .kima-card-content .single-form .form-item .error {
1312
- color: red;
1313
- font-size: 0.8em;
1314
- margin-left: 1em;
1315
- }
1316
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
1317
- align-items: flex-start;
1318
- }
1319
- @media (max-width: 500px) {
1320
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
1321
- width: 100%;
1322
- }
1323
- }
1324
- @media (min-width: 585xp) {
1325
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1326
- width: 220px;
1327
- }
1328
- }
1329
- @media (min-width: 640px) {
1330
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1331
- width: 425px;
1332
- }
1333
- }
1334
- @media (max-width: 585px) {
1335
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1336
- width: 265px;
1337
- }
1338
- }
1339
- @media (max-width: 500px) {
1340
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1341
- width: 100%;
1342
- }
1343
- }
1344
- @media (max-width: 500px) {
1345
- .kima-card .kima-card-content .single-form .form-item {
1346
- justify-content: space-between;
1347
- }
1348
- }
1349
- .kima-card .kima-card-content .single-form .coin-dropdown {
1350
- position: relative;
1351
- width: 125px;
1352
- border-radius: 50px;
1353
- border: 0.5px solid #86b8ce;
1354
- padding-left: 4px;
1355
- padding-right: 24px;
1356
- height: 50px;
1357
- display: flex;
1358
- align-items: center;
1359
- cursor: pointer;
1360
- box-sizing: content-box;
1361
- transition:
1362
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1363
- color 0ms,
1364
- background-color 0ms,
1365
- border-color 0ms;
1366
- }
1367
- @media (max-width: 639px) {
1368
- .kima-card .kima-card-content .single-form .coin-dropdown {
1369
- width: 105px;
1370
- }
1371
- }
1372
- @media (max-width: 500px) {
1373
- .kima-card .kima-card-content .single-form .coin-dropdown {
1374
- width: 100%;
1375
- }
1376
- }
1377
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
1378
- display: flex;
1379
- align-items: center;
1380
- border-radius: 12px;
1381
- padding: 2.5px;
1382
- padding-right: 6px;
1383
- }
1384
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper .icon-wrapper {
1385
- display: flex;
1386
- justify-content: center;
1387
- padding: 8px;
1388
- background-color: white;
1389
- margin-right: 6px;
1390
- border-radius: 9999px;
1391
- }
1392
- .kima-card .kima-card-content .single-form .coin-dropdown.light {
1393
- color: black;
1394
- background: #edf2f5;
1395
- }
1396
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1397
- color: white;
1398
- background: #4a5068 !important;
1399
- }
1400
- .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
1401
- color: white;
1402
- }
1403
- .kima-card .kima-card-content .single-form .coin-dropdown:before {
1404
- box-sizing: content-box;
1405
- position: absolute;
1406
- width: 0.8em;
1407
- height: 0.8em;
1408
- right: 1.1em;
1409
- top: 1.7em;
1410
- border-top: 2px solid;
1411
- border-right: 2px solid;
1412
- border-color: white;
1413
- transform: rotate(-45deg);
1414
- transition:
1415
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1416
- color 0ms,
1417
- background-color 0ms,
1418
- border-color 0ms;
1419
- }
1420
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
1421
- border: 0.5px solid #86b8ce;
1422
- border-top: none;
1423
- border-radius: 0 0 30px 30px;
1424
- position: absolute;
1425
- z-index: 100;
1426
- max-height: 10em;
1427
- width: 100.5%;
1428
- top: 100%;
1429
- left: -0.5px;
1430
- overflow: hidden;
1431
- transition:
1432
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1433
- color 0ms,
1434
- background-color 0ms,
1435
- border-color 0ms;
1436
- padding: 0.5em 0;
1437
- }
1438
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
1439
- margin: 2.5px 12px;
1440
- padding: 2.5px 12px;
1441
- border-radius: 20px;
1442
- max-width: 240px;
1443
- transition:
1444
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1445
- color 0ms,
1446
- background-color 0ms,
1447
- border-color 0ms;
1448
- display: flex;
1449
- justify-content: start;
1450
- flex-direction: row;
1451
- align-items: center;
1452
- }
1453
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
1454
- width: 100%;
1455
- text-align: center;
1456
- margin: 0;
1457
- }
1458
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.light:hover {
1459
- background: #d6e4ea;
1460
- }
1461
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.dark:hover {
1462
- background: #2c303e;
1463
- }
1464
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
1465
- color: black;
1466
- background: #edf2f5;
1467
- }
1468
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
1469
- color: white;
1470
- background: #4a5068;
1471
- }
1472
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
1473
- max-height: 0;
1474
- opacity: 0;
1475
- }
1476
- .kima-card .kima-card-content .single-form .coin-dropdown.light {
1477
- background: #edf2f5 !important;
1478
- }
1479
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1480
- background: #4a5068 !important;
1481
- }
1482
- .kima-card .kima-card-content .single-form .coin-dropdown.toggled {
1483
- border-bottom: none;
1484
- border-radius: 30px 30px 0 0;
1485
- }
1486
- .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
1487
- transform: rotate(135deg);
1488
- top: 1.2em;
1489
- }
1490
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1491
- background: #4f5156;
1492
- }
1493
- .kima-card .kima-card-content .single-form .expire-time-dropdown {
1494
- position: relative;
1495
- border-radius: 1em;
1496
- padding: 0.5em;
1497
- padding-right: 3em;
1498
- height: 2.8em;
1499
- display: flex;
1500
- align-items: center;
1501
- cursor: pointer;
1502
- box-sizing: content-box;
1503
- }
1504
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-wrapper {
1505
- display: flex;
1506
- align-items: center;
1507
- border-radius: 1em;
1508
- font-size: 1em;
1509
- font-weight: 500;
1510
- padding: 0.2em;
1511
- padding-right: 0.5em;
1512
- padding-left: 0.5em;
1513
- color: black;
1514
- }
1515
- .kima-card .kima-card-content .single-form .expire-time-dropdown.dark .coin-wrapper {
1516
- color: white;
1517
- }
1518
- .kima-card .kima-card-content .single-form .expire-time-dropdown:before {
1519
- position: absolute;
1520
- content: "";
1521
- width: 0.8em;
1522
- height: 0.8em;
1523
- right: 1.1em;
1524
- top: 1.7em;
1525
- border-top: 2px solid;
1526
- border-right: 2px solid;
1527
- border-color: white;
1528
- transform: rotate(-45deg);
1529
- transition:
1530
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1531
- color 0ms,
1532
- background-color 0ms,
1533
- border-color 0ms;
1534
- }
1535
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu {
1536
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
1537
- position: absolute;
1538
- z-index: 100;
1539
- max-height: 10em;
1540
- width: 100%;
1541
- top: calc(100% - 0.5em);
1542
- left: 0;
1543
- overflow: hidden;
1544
- transition:
1545
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1546
- color 0ms,
1547
- background-color 0ms,
1548
- border-color 0ms;
1549
- }
1550
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item {
1551
- padding: 0.5em 1em;
1552
- margin: 0;
1553
- transition:
1554
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1555
- color 0ms,
1556
- background-color 0ms,
1557
- border-color 0ms;
1558
- display: flex;
1559
- align-items: center;
1560
- }
1561
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item p {
1562
- width: 100%;
1563
- text-align: center;
1564
- margin: 0;
1565
- }
1566
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item:hover {
1567
- background: #d6e4ea;
1568
- }
1569
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.light {
1570
- background: white;
1571
- }
1572
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.dark {
1573
- background: #4f5156;
1574
- }
1575
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.collapsed {
1576
- max-height: 0;
1577
- opacity: 0;
1578
- }
1579
- .kima-card .kima-card-content .single-form .expire-time-dropdown.light {
1580
- background: #e3e3e3;
1581
- }
1582
- .kima-card .kima-card-content .single-form .expire-time-dropdown.light:before {
1583
- border-color: black;
1584
- }
1585
- .kima-card .kima-card-content .single-form .expire-time-dropdown.collapsed:before {
1586
- transform: rotate(135deg);
1587
- top: 1.2em;
1588
- }
1589
- .kima-card .kima-card-content .single-form .expire-time-dropdown.dark {
1590
- background: #4f5156;
1591
- }
1592
- .kima-card .kima-card-content .single-form .network-dropdown {
1593
- position: relative;
1594
- width: 230px;
1595
- min-width: 150px;
1596
- max-width: 300px;
1597
- border-radius: 50px;
1598
- border: 0.5px solid #86b8ce;
1599
- padding-left: 15px;
1600
- padding-right: 24px;
1601
- height: 50px;
1602
- display: flex;
1603
- align-items: center;
1604
- cursor: pointer;
1605
- box-sizing: content-box;
1606
- transition:
1607
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1608
- color 0ms,
1609
- background-color 0ms,
1610
- border-color 0ms;
1611
- }
1612
- @media (max-width: 586px) {
1613
- .kima-card .kima-card-content .single-form .network-dropdown {
1614
- width: 185px;
1615
- }
1616
- }
1617
- @media (max-width: 500px) {
1618
- .kima-card .kima-card-content .single-form .network-dropdown {
1619
- width: 100%;
1620
- max-width: none;
1621
- }
1622
- }
1623
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper {
1624
- display: flex;
1625
- justify-content: start;
1626
- align-items: center;
1627
- border-radius: 15px;
1628
- padding: 3px;
1629
- padding-right: 7px;
1630
- color: black;
1631
- z-index: inherit;
1632
- }
1633
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper .icon {
1634
- display: flex;
1635
- justify-content: center;
1636
- padding: 4px 4px;
1637
- border-radius: 40px;
1638
- background-color: white;
1639
- margin-right: 5px;
1640
- }
1641
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper span {
1642
- text-align: center;
1643
- }
1644
- .kima-card .kima-card-content .single-form .network-dropdown.dark .network-wrapper {
1645
- color: white;
1646
- }
1647
- .kima-card .kima-card-content .single-form .network-dropdown:before {
1648
- box-sizing: content-box;
1649
- position: absolute;
1650
- width: 0.8em;
1651
- height: 0.8em;
1652
- right: 1.1em;
1653
- top: 1.7em;
1654
- border-top: 2px solid;
1655
- border-right: 2px solid;
1656
- border-color: white;
1657
- transform: rotate(-45deg);
1658
- transition:
1659
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1660
- color 0ms,
1661
- background-color 0ms,
1662
- border-color 0ms;
1663
- }
1664
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
1665
- border: 0.5px solid #86b8ce;
1666
- border-top: none;
1667
- border-radius: 0 0 30px 30px;
1668
- position: absolute;
1669
- z-index: 1000;
1670
- max-height: 200px;
1671
- width: 100%;
1672
- top: 100%;
1673
- left: -0.5px;
1674
- overflow-x: clip;
1675
- overflow-y: scroll;
1676
- transition:
1677
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1678
- color 0ms,
1679
- background-color 0ms,
1680
- border-color 0ms;
1681
- }
1682
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
1683
- margin: 7px 14px;
1684
- padding: 11px 7px;
1685
- border-radius: 20px;
1686
- width: 220px;
1687
- transition:
1688
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1689
- color 0ms,
1690
- background-color 0ms,
1691
- border-color 0ms;
1692
- display: flex;
1693
- justify-content: start;
1694
- flex-direction: row;
1695
- align-items: center;
1696
- }
1697
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.disabled {
1698
- color: rgba(119, 141, 163, 0.3019607843);
1699
- cursor: default;
1700
- }
1701
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip {
1702
- position: relative;
1703
- }
1704
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip .tooltip {
1705
- visibility: hidden;
1706
- background-color: #86b8ce;
1707
- font-family: "Manrope";
1708
- color: #fff;
1709
- text-align: center;
1710
- font-size: 12px;
1711
- padding: 6px 8px;
1712
- border-radius: 4px;
1713
- position: absolute;
1714
- z-index: 10;
1715
- bottom: 120%;
1716
- left: 50%;
1717
- transform: translateX(-50%);
1718
- white-space: nowrap;
1719
- opacity: 0;
1720
- transition: opacity 0.3s ease, transform 0.3s ease;
1721
- pointer-events: none;
1722
- }
1723
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip:hover .tooltip {
1724
- visibility: visible;
1725
- opacity: 1;
1726
- transform: translateX(-50%) translateY(20px);
1727
- }
1728
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item .icon {
1729
- display: flex;
1730
- justify-content: center;
1731
- padding: 4px 4px;
1732
- border-radius: 40px;
1733
- background-color: white;
1734
- }
1735
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item p {
1736
- margin-left: 20px;
1737
- margin-top: 0;
1738
- margin-bottom: 0;
1739
- }
1740
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.enabled.light:hover {
1741
- background: #d6e4ea;
1742
- }
1743
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.enabled.dark:hover {
1744
- background: #2c303e;
1745
- }
1746
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu.collapsed {
1747
- max-height: 0;
1748
- opacity: 0;
1749
- }
1750
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu.light {
1751
- background-color: #edf2f5;
1752
- }
1753
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu.dark {
1754
- background: #4a5068;
1755
- }
1756
- .kima-card .kima-card-content .single-form .network-dropdown.light {
1757
- background: #edf2f5 !important;
1758
- }
1759
- .kima-card .kima-card-content .single-form .network-dropdown.dark {
1760
- background: #4a5068 !important;
1761
- }
1762
- .kima-card .kima-card-content .single-form .network-dropdown.toggled {
1763
- border-bottom: none;
1764
- border-radius: 30px 30px 0 0;
1765
- }
1766
- .kima-card .kima-card-content .single-form .network-dropdown.collapsed:before {
1767
- transform: rotate(135deg);
1768
- top: 1.2em;
1769
- }
1770
- .kima-card .kima-card-content .single-form .network-dropdown.dark {
1771
- background: #4f5156;
1772
- }
1773
- .kima-card .kima-card-content .single-form .dynamic-area {
1774
- display: flex;
1775
- flex-direction: column;
1776
- transition:
1777
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
1778
- color 0ms,
1779
- background-color 0ms,
1780
- border-color 0ms;
1781
- }
1782
- @media (max-width: 500px) {
1783
- .kima-card .kima-card-content .single-form .dynamic-area {
1784
- padding-bottom: 10px;
1785
- width: 100%;
1786
- }
1787
- }
1788
- .kima-card .kima-card-content .single-form .dynamic-area.reverse {
1789
- flex-direction: column-reverse;
1790
- }
1791
- .kima-card .kima-card-content .single-form .dynamic-area .form-item {
1792
- margin-top: 16px;
1793
- }
1794
- .kima-card .kima-card-content .wallet-button {
1795
- display: flex;
1796
- flex-direction: column;
1797
- }
1798
- @media (max-width: 768px) {
1799
- .kima-card .kima-card-content .wallet-button {
1800
- width: 430px;
1801
- align-items: flex-start;
1802
- flex-direction: column;
1803
- }
1804
- .kima-card .kima-card-content .wallet-button .balance-info {
1805
- margin-left: auto;
1806
- }
1807
- }
1808
- @media (max-width: 500px) {
1809
- .kima-card .kima-card-content .wallet-button {
1810
- width: 100%;
1811
- }
1812
- }
1813
- .kima-card .kima-card-content .wallet-button .info-wrapper {
1814
- display: flex;
1815
- align-items: center;
1816
- gap: 10px;
1817
- }
1818
- @media (max-width: 639px) {
1819
- .kima-card .kima-card-content .wallet-button .info-wrapper {
1820
- flex-direction: row-reverse;
1821
- gap: 3px;
1822
- }
1823
- }
1824
- @media (max-width: 500px) {
1825
- .kima-card .kima-card-content .wallet-button .info-wrapper {
1826
- gap: 5px;
1827
- width: 100%;
1828
- }
1829
- }
1830
- .kima-card .kima-card-content .wallet-button .info-wrapper svg {
1831
- width: 20px;
1832
- height: 20px;
1833
- }
1834
- .kima-card .kima-card-content .wallet-button .info-wrapper .check-icon {
1835
- width: 30px;
1836
- height: 30px;
1837
- }
1838
- .kima-card .kima-card-content .wallet-button button {
1839
- cursor: pointer;
1840
- display: flex;
1841
- justify-content: center;
1842
- width: 270px;
1843
- align-items: center;
1844
- height: 50px;
1845
- border: none;
1846
- border-radius: 50px;
1847
- padding: 0 15px;
1848
- color: white;
1849
- background-color: #778da3;
1850
- font-size: 14px;
1851
- }
1852
- @media (max-width: 586px) {
1853
- .kima-card .kima-card-content .wallet-button button {
1854
- width: 220px;
1855
- }
1856
- }
1857
- @media (max-width: 500px) {
1858
- .kima-card .kima-card-content .wallet-button button {
1859
- font-size: 12px;
1860
- width: 100%;
1861
- }
1862
- }
1863
- .kima-card .kima-card-content .wallet-button button.shortened {
1864
- justify-content: center;
1865
- font-size: 14px;
1866
- }
1867
- @media (max-width: 500px) {
1868
- .kima-card .kima-card-content .wallet-button button.shortened {
1869
- font-size: 12px;
1870
- }
1871
- }
1872
- .kima-card .kima-card-content .wallet-button p {
1873
- margin: 0;
1874
- }
1875
- .kima-card .kima-card-content .wallet-button svg {
1876
- margin-right: 1em;
1877
- }
1878
- .kima-card .kima-card-content .wallet-button .provider-error {
1879
- color: red;
1880
- font-size: 0.8em;
1881
- margin-left: 1em;
1882
- }
1883
- .kima-card .kima-card-content .wallet-button .connected.light {
1884
- color: black;
1885
- background-color: #d6e4ea;
1886
- }
1887
- .kima-card .kima-card-content .wallet-button .connected.dark {
1888
- color: #f7f8f9;
1889
- background-color: #4a5068;
1890
- }
1891
- .kima-card .kima-card-content .wallet-button.error-below {
1892
- flex-direction: column;
1893
- }
1894
- .kima-card .kima-card-content .wallet-button.error-below .provider-error {
1895
- margin-left: 0;
1896
- margin-top: 1em;
1897
- }
1898
- .kima-card .kima-card-content .wallet-button .balance-info {
1899
- color: #778da3;
1900
- }
1901
- .kima-card .kima-card-content .account-dropdown {
1902
- display: flex;
1903
- align-items: center;
1904
- }
1905
- .kima-card .kima-card-content .account-dropdown .balance-info {
1906
- margin-left: 1em;
1907
- }
1908
- @media (max-width: 768px) {
1909
- .kima-card .kima-card-content .account-dropdown {
1910
- flex-direction: column;
1911
- align-items: flex-start;
1912
- }
1913
- .kima-card .kima-card-content .account-dropdown .balance-info {
1914
- margin-left: 0;
1915
- }
1916
- }
1917
- .kima-card .kima-card-content .connect-wallet-step {
1918
- display: flex;
1919
- flex-direction: column;
1920
- align-items: center;
1921
- justify-content: center;
1922
- }
1923
- .kima-card .kima-card-content .connect-wallet-step p {
1924
- font-size: 1.2em;
1925
- font-weight: 500;
1926
- margin-bottom: 2em;
1927
- }
1928
- .kima-card .kima-card-content .coin-select p {
1929
- font-size: 1.2em;
1930
- font-weight: 500;
1931
- text-align: center;
1932
- }
1933
- .kima-card .kima-card-content .coin-select .coin-list-container {
1934
- display: flex;
1935
- column-gap: 1em;
1936
- align-items: center;
1937
- justify-content: center;
1938
- margin-top: 2em;
1939
- }
1940
- .kima-card .kima-card-content .coin-select .amount-input,
1941
- .kima-card .kima-card-content .coin-select .address-input {
1942
- display: flex;
1943
- align-items: center;
1944
- justify-content: center;
1945
- margin-top: 2em;
1946
- }
1947
- .kima-card .kima-card-content .coin-select .amount-input > span,
1948
- .kima-card .kima-card-content .coin-select .address-input > span {
1949
- margin-right: 1.5em;
1950
- font-size: 1.2em;
1951
- }
1952
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper,
1953
- .kima-card .kima-card-content .coin-select .address-input .input-wrapper {
1954
- position: relative;
1955
- }
1956
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper input,
1957
- .kima-card .kima-card-content .coin-select .address-input .input-wrapper input {
1958
- border: 1px solid #979797;
1959
- border-radius: 0.8em;
1960
- height: 3em;
1961
- background: transparent;
1962
- color: white;
1963
- outline: none;
1964
- font: unset;
1965
- width: 12em;
1966
- padding: 0.3em 0.5em 0.3em 1em;
1967
- box-sizing: content-box;
1968
- }
1969
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label,
1970
- .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label {
1971
- position: absolute;
1972
- display: flex;
1973
- align-items: center;
1974
- padding: 0.3em 0.5em 0.3em 0.3em;
1975
- border-radius: 1em;
1976
- right: 0.8em;
1977
- top: 0.8em;
1978
- }
1979
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label svg,
1980
- .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label svg {
1981
- width: 1.5em;
1982
- height: 1.5em;
1983
- }
1984
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label span,
1985
- .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label span {
1986
- margin-left: 0.5em;
1987
- }
1988
- .kima-card .kima-card-content .coin-select .amount-input > input,
1989
- .kima-card .kima-card-content .coin-select .address-input > input {
1990
- border: 1px solid #979797;
1991
- border-radius: 0.8em;
1992
- height: 3em;
1993
- background: transparent;
1994
- color: white;
1995
- outline: none;
1996
- font: unset;
1997
- width: 10em;
1998
- padding: 0.3em 0.5em 0.3em 1em;
1999
- box-sizing: content-box;
2000
- }
2001
- .kima-card .kima-card-content .coin-select .amount-input > input.kima-address-input,
2002
- .kima-card .kima-card-content .coin-select .address-input > input.kima-address-input {
2003
- width: 330px;
2004
- }
2005
- .kima-card .kima-card-content .coin-select .amount-input.light input,
2006
- .kima-card .kima-card-content .coin-select .address-input.light input {
2007
- color: black;
2008
- }
2009
- .kima-card .kima-card-content .coin-select .amount-input.light .coin-label,
2010
- .kima-card .kima-card-content .coin-select .address-input.light .coin-label {
2011
- background: #e3e3e3;
2012
- }
2013
- .kima-card .kima-card-content .coin-select .amount-input.dark .coin-label,
2014
- .kima-card .kima-card-content .coin-select .address-input.dark .coin-label {
2015
- background: #4f5156;
2016
- }
2017
- .kima-card .kima-card-content .confirm-details {
2018
- font-size: 16px;
2019
- font-family: "Manrope";
2020
- }
2021
- @media (max-width: 500px) {
2022
- .kima-card .kima-card-content .confirm-details {
2023
- font-size: 12px;
2024
- }
2025
- }
2026
- .kima-card .kima-card-content .confirm-details > p {
2027
- text-align: center;
2028
- font-size: 14px;
2029
- }
2030
- .kima-card .kima-card-content .confirm-details .detail-item {
2031
- padding: 16px 20px;
2032
- display: flex;
2033
- flex-direction: row;
2034
- align-items: center;
2035
- border-top: 1px solid #e3e3e3;
2036
- }
2037
- @media (max-width: 500px) {
2038
- .kima-card .kima-card-content .confirm-details .detail-item {
2039
- flex-direction: column;
2040
- width: 100%;
2041
- }
2042
- }
2043
- @media (max-width: 768px) {
2044
- .kima-card .kima-card-content .confirm-details .detail-item {
2045
- padding: 16px 0;
2046
- }
2047
- }
2048
- .kima-card .kima-card-content .confirm-details .detail-item:first-of-type {
2049
- border-top: none;
2050
- }
2051
- .kima-card .kima-card-content .confirm-details .detail-item.amount {
2052
- width: 100%;
2053
- align-items: start;
2054
- padding: 20px 14px;
2055
- }
2056
- .kima-card .kima-card-content .confirm-details .detail-item p {
2057
- margin: 0;
2058
- border-radius: 50px;
2059
- padding: 16px;
2060
- text-align: center;
2061
- flex-grow: 2;
2062
- font-size: 14px;
2063
- }
2064
- @media (max-width: 500px) {
2065
- .kima-card .kima-card-content .confirm-details .detail-item p {
2066
- font-size: 12px;
2067
- }
2068
- }
2069
- .kima-card .kima-card-content .confirm-details .detail-item p.light {
2070
- background-color: #edf2f5;
2071
- color: black;
2072
- }
2073
- .kima-card .kima-card-content .confirm-details .detail-item p.dark {
2074
- background-color: #778da3;
2075
- color: white;
2076
- }
2077
- .kima-card .kima-card-content .confirm-details .detail-item .label {
2078
- font-weight: bolder;
2079
- width: 10em;
2080
- }
2081
- @media (max-width: 500px) {
2082
- .kima-card .kima-card-content .confirm-details .detail-item .label {
2083
- width: 100%;
2084
- margin-bottom: 10px;
2085
- }
2086
- }
2087
- .kima-card .kima-card-content .confirm-details .detail-item .network-details {
2088
- display: flex;
2089
- flex-direction: row;
2090
- gap: 14px;
2091
- flex-grow: 2;
2092
- }
2093
- @media (max-width: 500px) {
2094
- .kima-card .kima-card-content .confirm-details .detail-item .network-details {
2095
- flex-direction: column;
2096
- width: 100%;
2097
- }
2098
- }
2099
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-container {
2100
- width: 210px;
2101
- }
2102
- @media (max-width: 500px) {
2103
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-container {
2104
- width: 100%;
2105
- }
2106
- }
2107
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
2108
- display: flex;
2109
- flex-direction: row;
2110
- padding: 4px 18px;
2111
- border-radius: 50px;
2112
- height: 50px;
2113
- }
2114
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label .icon {
2115
- display: flex;
2116
- justify-content: center;
2117
- border-radius: 9999px;
2118
- background-color: white;
2119
- padding: 4px;
2120
- }
2121
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label.light {
2122
- background-color: #d6e4ea;
2123
- color: black;
2124
- }
2125
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label.dark {
2126
- background-color: #4a5068;
2127
- color: white;
2128
- }
2129
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container {
2130
- width: 100%;
2131
- display: flex;
2132
- flex-direction: column;
2133
- justify-content: space-between;
2134
- width: 100%;
2135
- font-weight: bold;
2136
- }
2137
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container svg {
2138
- margin-right: 6px;
2139
- }
2140
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .coin-details {
2141
- display: flex;
2142
- flex-direction: row;
2143
- }
2144
- @media (max-width: 500px) {
2145
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .coin-details {
2146
- width: 100%;
2147
- justify-content: end;
2148
- padding-right: 6px;
2149
- font-size: 12px;
2150
- }
2151
- }
2152
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .coin-details p {
2153
- padding: 0;
2154
- margin: 0;
2155
- flex-grow: 0;
2156
- width: fit-content;
2157
- }
2158
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .fee-breakdown {
2159
- padding-left: 20px;
2160
- }
2161
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .fee-breakdown.collapsed {
2162
- display: none;
2163
- }
2164
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .fee-breakdown .amount-details {
2165
- padding: 8px 6px !important;
2166
- }
2167
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details {
2168
- display: flex;
2169
- flex-direction: row;
2170
- justify-content: space-between;
2171
- width: 100%;
2172
- padding: 8px 0;
2173
- font-size: 14px;
2174
- }
2175
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details .fee-collapse {
2176
- cursor: pointer;
2177
- display: flex;
2178
- align-items: center;
2179
- }
2180
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details:first-of-type {
2181
- border-top: none;
2182
- padding-top: 0;
2183
- }
2184
- @media (max-width: 500px) {
2185
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details {
2186
- width: 100%;
2187
- font-size: 12px;
2188
- }
2189
- }
2190
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details .service-fee {
2191
- font-weight: bold;
2192
- }
2193
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details .final-amount {
2194
- font-weight: bold;
2195
- }
2196
- .kima-card .kima-card-content .confirm-details .detail-item .amount-container .amount-details:last-of-type {
2197
- padding-top: 15px;
2198
- }
2199
- .kima-card .kima-card-content .confirm-details .detail-item .signature {
2200
- max-width: 65%;
2201
- word-wrap: break-word;
2202
- }
2203
- @media (max-width: 500px) {
2204
- .kima-card .kima-card-content .confirm-details .detail-item {
2205
- align-items: start;
2206
- }
2207
- }
2208
- @media (max-width: 768px) {
2209
- .kima-card .kima-card-content .confirm-details {
2210
- padding: 0 20px;
2211
- }
2212
- }
2213
- @media (max-width: 500px) {
2214
- .kima-card .kima-card-content .confirm-details {
2215
- padding: 0;
2216
- }
2217
- }
2218
- .kima-card .kima-card-content .kima-custom-checkbox {
2219
- margin-left: 245px;
2220
- margin-top: 16px;
2221
- display: flex;
2222
- align-items: center;
2223
- }
2224
- @media (max-width: 768px) {
2225
- .kima-card .kima-card-content .kima-custom-checkbox {
2226
- margin-left: 110px;
2227
- }
2228
- }
2229
- @media (max-width: 500px) {
2230
- .kima-card .kima-card-content .kima-custom-checkbox {
2231
- margin-left: 0;
2232
- justify-content: center;
2233
- }
2234
- }
2235
- .kima-card .kima-card-content .kima-custom-checkbox .custom-checkbox-content {
2236
- display: flex;
2237
- align-items: center;
2238
- column-gap: 0.5em;
2239
- cursor: pointer;
2240
- }
2241
- .kima-card .kima-card-content .kima-custom-checkbox .custom-checkbox-content .custom-checkbox-icon-wrapper {
2242
- border: 1px solid #ffffff;
2243
- border-radius: 0.2em;
2244
- display: flex;
2245
- justify-content: center;
2246
- align-items: center;
2247
- width: 20px;
2248
- height: 20px;
2249
- }
2250
- .kima-card .kima-card-content .kima-custom-checkbox .custom-checkbox-content .custom-checkbox-icon-wrapper.light {
2251
- border-color: #4f5156;
2252
- }
2253
- .kima-card .kima-card-content .kima-custom-checkbox .custom-checkbox-content .custom-checkbox-icon-wrapper .check-icon {
2254
- width: 20px;
2255
- height: 20px;
2256
- }
2257
- .kima-card .kima-card-content .kima-custom-checkbox > span {
2258
- margin-left: 0.5em;
2259
- }
2260
- .kima-card .kima-card-content .kima-stepbox {
2261
- display: flex;
2262
- justify-content: center;
2263
- font-family: "Manrope";
2264
- font-size: 14px;
2265
- }
2266
- .kima-card .kima-card-content .kima-stepbox .content-wrapper {
2267
- display: flex;
2268
- flex-direction: column;
2269
- border: 1px solid #86b8ce;
2270
- border-radius: 30px;
2271
- padding: 12px 24px;
2272
- }
2273
- .kima-card .kima-card-content .kima-stepbox .content-wrapper.light {
2274
- background-color: #edf2f5;
2275
- }
2276
- .kima-card .kima-card-content .kima-stepbox .content-wrapper.dark {
2277
- background-color: #4a5068;
2278
- color: white;
2279
- }
2280
- @media (min-width: 500px) {
2281
- .kima-card .kima-card-content .kima-stepbox .content-wrapper {
2282
- min-width: 420px;
2283
- }
2284
- }
2285
- @media (max-width: 500px) {
2286
- .kima-card .kima-card-content .kima-stepbox .content-wrapper {
2287
- padding: 12px 24px;
2288
- gap: 5px;
2289
- justify-content: space-between;
2290
- border: none;
2291
- background-color: transparent !important;
2292
- }
2293
- }
2294
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
2295
- display: flex;
2296
- flex-direction: row;
2297
- align-items: center;
2298
- margin: 5px 0;
2299
- justify-content: space-between;
2300
- gap: 20px;
2301
- }
2302
- @media (max-width: 500px) {
2303
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
2304
- flex-direction: column;
2305
- align-items: end;
2306
- }
2307
- }
2308
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
2309
- position: relative;
2310
- align-items: center;
2311
- }
2312
- @media (max-width: 500px) {
2313
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
2314
- width: 210px;
2315
- height: 40px;
2316
- }
2317
- }
2318
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item .icon {
2319
- border-radius: 9999px;
2320
- background-color: white;
2321
- padding: 4px;
2322
- display: flex;
2323
- justify-content: center;
2324
- }
2325
- @media (min-width: 501px) {
2326
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item .icon {
2327
- display: none;
2328
- }
2329
- }
2330
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item a {
2331
- text-decoration: underline;
2332
- }
2333
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item p {
2334
- display: flex;
2335
- align-items: center;
2336
- }
2337
- @media (max-width: 500px) {
2338
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item p.chain-name {
2339
- display: none;
2340
- }
2341
- }
2342
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
2343
- width: 155px;
2344
- }
2345
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type p {
2346
- margin: 0 0 0 21px;
2347
- }
2348
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type svg {
2349
- position: absolute;
2350
- margin-top: -4.2px;
2351
- width: 28px;
2352
- height: 28px;
2353
- left: -4.5px;
2354
- }
2355
- @media (max-width: 500px) {
2356
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type svg {
2357
- top: 0;
2358
- }
2359
- }
2360
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) {
2361
- display: flex;
2362
- flex-direction: row;
2363
- }
2364
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p {
2365
- margin: 0;
2366
- }
2367
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p a {
2368
- margin-left: 7px;
2369
- }
2370
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn {
2371
- display: inline;
2372
- cursor: pointer;
2373
- transition:
2374
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2375
- color 0ms,
2376
- background-color 0ms,
2377
- border-color 0ms;
2378
- }
2379
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn:hover {
2380
- opacity: 0.7;
2381
- }
2382
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn svg {
2383
- width: 21px;
2384
- height: 21px;
2385
- margin-left: 7px;
2386
- }
2387
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.locked svg {
2388
- margin-top: 0.5px;
2389
- width: 17px;
2390
- height: 17px;
2391
- left: 0;
2392
- }
2393
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.active svg {
2394
- margin-top: -8.5px;
2395
- width: 35px;
2396
- height: 35px;
2397
- left: -8.5px;
2398
- }
2399
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.error svg {
2400
- margin-top: -4.5px;
2401
- width: 17px;
2402
- height: 28px;
2403
- left: 0;
2404
- }
2405
- @media (max-width: 768px) {
2406
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
2407
- padding-left: 0;
2408
- }
2409
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) {
2410
- padding-left: 21px;
2411
- padding-top: 3px;
2412
- margin-top: 15px;
2413
- }
2414
- }
2415
- @media (max-width: 500px) {
2416
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
2417
- gap: 5px;
2418
- justify-content: end;
2419
- }
2420
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
2421
- display: none;
2422
- }
2423
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) {
2424
- padding: 6px 12px;
2425
- border-radius: 30px;
2426
- }
2427
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type).light {
2428
- background-color: #d6e4ea;
2429
- }
2430
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type).dark {
2431
- background-color: #4a5068;
2432
- color: white;
2433
- }
2434
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.source-chain {
2435
- margin-top: -55px;
2436
- }
2437
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.paid {
2438
- margin-top: -15px;
2439
- }
2440
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.target-chain {
2441
- margin-top: 0;
2442
- }
2443
- }
2444
- .kima-card .kima-card-content .fee-deduction-slider-container {
2445
- display: flex;
2446
- align-items: center;
2447
- justify-content: center;
2448
- width: 100%;
2449
- gap: 10px;
2450
- padding: 16px 20px;
2451
- }
2452
- .kima-card .kima-card-content .fee-label {
2453
- min-width: 50%;
2454
- font-size: 14px;
2455
- color: #aaa;
2456
- transition: color 0.3s ease;
2457
- }
2458
- .kima-card .kima-card-content .fee-label.selected {
2459
- font-weight: bolder;
2460
- color: #4a5068;
2461
- }
2462
- .kima-card .kima-card-content .slider-container {
2463
- min-width: 50px;
2464
- height: 25px;
2465
- border-radius: 50px;
2466
- background: #d6e4ea;
2467
- cursor: pointer;
2468
- position: relative;
2469
- transition: background 0.3s ease;
2470
- }
2471
- .kima-card .kima-card-content .slider {
2472
- width: 20px;
2473
- height: 20px;
2474
- border-radius: 50%;
2475
- background: #86b8ce;
2476
- position: absolute;
2477
- top: 50%;
2478
- transform: translateY(-50%);
2479
- left: 4px;
2480
- transition: left 0.3s ease;
2481
- }
2482
- .kima-card .kima-card-content .slider.active {
2483
- left: 26px;
2484
- }
2485
- .kima-card .kima-card-content .transfer-notice {
2486
- font-weight: bolder;
2487
- display: flex;
2488
- justify-content: start;
2489
- align-items: center;
2490
- width: 100%;
2491
- font-size: 14px;
2492
- text-align: justify;
2493
- }
2494
- .kima-card .kima-card-content .fee-deduction-radio-container {
2495
- display: flex;
2496
- flex-direction: column;
2497
- gap: 10px;
2498
- font-size: 14px;
2499
- border-top: 1px solid #e3e3e3;
2500
- padding: 16px 20px;
2501
- }
2502
- .kima-card .kima-card-content .fee-deduction-radio-container.dark {
2503
- color: white;
2504
- }
2505
- @media (max-width: 768px) {
2506
- .kima-card .kima-card-content .fee-deduction-radio-container {
2507
- padding: 16px 0;
2508
- margin-bottom: 20px;
2509
- }
2510
- }
2511
- .kima-card .kima-card-content .fee-instruction {
2512
- font-weight: bold;
2513
- margin-bottom: 8px;
2514
- }
2515
- .kima-card .kima-card-content .fee-options {
2516
- display: flex;
2517
- flex-direction: column;
2518
- gap: 12px;
2519
- }
2520
- .kima-card .kima-card-content .fee-option {
2521
- display: flex;
2522
- align-items: center;
2523
- gap: 10px;
2524
- cursor: pointer;
2525
- }
2526
- .kima-card .kima-card-content .fee-option.disabled {
2527
- opacity: 0.5;
2528
- }
2529
- .kima-card .kima-card-content .fee-option input[type=radio] {
2530
- appearance: none;
2531
- width: 18px;
2532
- height: 18px;
2533
- border: 1px solid #86b8ce;
2534
- border-radius: 50%;
2535
- outline: none;
2536
- cursor: pointer;
2537
- margin: 0;
2538
- display: flex;
2539
- justify-content: center;
2540
- align-items: center;
2541
- flex-shrink: 0;
2542
- aspect-ratio: 1;
2543
- position: relative;
2544
- }
2545
- .kima-card .kima-card-content .fee-option input[type=radio]:checked::before {
2546
- content: "";
2547
- width: 10px;
2548
- height: 10px;
2549
- background-color: #86b8ce;
2550
- border-radius: 50%;
2551
- display: block;
2552
- position: absolute;
2553
- top: 50%;
2554
- left: 50%;
2555
- transform: translate(-50%, -50%);
2556
- }
2557
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2558
- border-color: rgba(119, 141, 163, 0.3019607843);
2559
- background-color: transparent;
2560
- cursor: not-allowed;
2561
- }
2562
- .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2563
- background-color: rgba(119, 141, 163, 0.3019607843);
2564
- }
2565
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2566
- color: rgba(119, 141, 163, 0.3019607843);
2567
- cursor: not-allowed;
2568
- }
2569
- .kima-card .kima-card-content .radio-label {
2570
- line-height: 1.2;
2571
- font-size: 14px;
2572
- color: #333;
2573
- flex-grow: 1;
2574
- word-break: break-word;
2575
- }
2576
- .kima-card .kima-card-content .radio-label.dark {
2577
- color: white;
2578
- }
2579
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2580
- border-color: rgba(119, 141, 163, 0.3019607843);
2581
- background-color: transparent;
2582
- cursor: not-allowed;
2583
- }
2584
- .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2585
- background-color: rgba(119, 141, 163, 0.3019607843);
2586
- }
2587
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2588
- color: rgba(119, 141, 163, 0.3019607843);
2589
- cursor: not-allowed;
2590
- }
2591
- .kima-card .kima-card-content .transaction-status-message {
2592
- display: flex;
2593
- flex-direction: column;
2594
- margin-top: 20px;
2595
- font-family: "Manrope";
2596
- font-size: 14px;
2597
- text-align: justify;
2598
- }
2599
- .kima-card .kima-card-content .transaction-status-message h2 {
2600
- font-size: 14px;
2601
- }
2602
- .kima-card .kima-card-content .transaction-status-message .transaction-copy {
2603
- display: flex;
2604
- flex-direction: row;
2605
- justify-content: center;
2606
- font-size: 24px;
2607
- margin-top: 10px;
2608
- align-items: center;
2609
- gap: 10px;
2610
- }
2611
- .kima-card .kima-card-content .transaction-status-message .transaction-copy h3 {
2612
- margin: 0;
2613
- }
2614
- .kima-card .card-item {
2615
- width: 100%;
2616
- height: 80px;
2617
- border-radius: 24px;
2618
- display: flex;
2619
- align-items: center;
2620
- cursor: pointer;
2621
- text-decoration: none;
2622
- color: inherit;
2623
- transition:
2624
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2625
- color 0ms,
2626
- background-color 0ms,
2627
- border-color 0ms;
2628
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
2629
- }
2630
- .kima-card .card-item .wallet-item {
2631
- padding: 0 25px;
2632
- gap: 20px;
2633
- display: flex;
2634
- flex-direction: row;
2635
- align-items: center;
2636
- }
2637
- .kima-card .card-item img,
2638
- .kima-card .card-item svg {
2639
- width: 60px;
2640
- height: 60px;
2641
- }
2642
- @media (max-width: 500px) {
2643
- .kima-card .card-item img,
2644
- .kima-card .card-item svg {
2645
- width: 40px;
2646
- height: 40px;
2647
- }
2648
- }
2649
- .kima-card .card-item span {
2650
- font-weight: 500;
2651
- font-family: "Manrope";
2652
- text-align: center;
2653
- font-size: 18px;
2654
- }
2655
- @media (max-width: 500px) {
2656
- .kima-card .card-item span {
2657
- font-size: 14px;
2658
- }
2659
- }
2660
- .kima-card .card-item.light {
2661
- background: #edf2f5;
2662
- }
2663
- .kima-card .card-item.dark {
2664
- background: #242732;
2665
- }
2666
- .kima-card .card-item:hover {
2667
- opacity: 0.7;
2668
- }
2669
- .kima-card .kima-card-network-label {
2670
- display: flex;
2671
- align-items: center;
2672
- gap: 10px;
2673
- }
2674
- .kima-card .kima-card-network-label .label {
2675
- display: flex;
2676
- border-radius: 1em;
2677
- font-size: 1em;
2678
- column-gap: 0.3em;
2679
- align-items: center;
2680
- padding: 0.2em 0.4em;
2681
- }
2682
- .kima-card .kima-card-network-label .label .icon-wrapper {
2683
- display: flex;
2684
- justify-content: center;
2685
- align-items: center;
2686
- width: 1.2em;
2687
- height: 1.2em;
2688
- }
2689
- .kima-card .kima-card-network-label .label .icon-wrapper svg {
2690
- width: 100%;
2691
- height: 100%;
2692
- }
2693
- .kima-card .kima-card-network-label .warning-container {
2694
- margin-left: 1em;
2695
- display: flex;
2696
- align-items: center;
2697
- column-gap: 0.5em;
2698
- cursor: pointer;
2699
- }
2700
- .kima-card .primary-button-wrapper {
2701
- background:
2702
- linear-gradient(
2703
- to right,
2704
- #8d77cc,
2705
- #7bd5fb,
2706
- #b2f79c);
2707
- padding: 2px;
2708
- border-radius: 30px;
2709
- max-height: 48px;
2710
- }
2711
- @media (max-width: 500px) {
2712
- .kima-card .primary-button-wrapper {
2713
- width: 100%;
2714
- }
2715
- }
2716
- .kima-card .primary-button {
2717
- background: black;
2718
- border-radius: 30px;
2719
- width: fit-content;
2720
- height: 45px;
2721
- padding: 13px 27px;
2722
- cursor: pointer;
2723
- color: white;
2724
- font-weight: bold;
2725
- font-family: inherit;
2726
- border: none;
2727
- transition:
2728
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2729
- color 0ms,
2730
- background-color 0ms,
2731
- border-color 0ms;
2732
- display: flex;
2733
- align-items: center;
2734
- justify-content: center;
2735
- letter-spacing: 0;
2736
- font-size: 16px;
2737
- }
2738
- .kima-card .primary-button.light {
2739
- background-color: black;
2740
- }
2741
- .kima-card .primary-button:hover,
2742
- .kima-card .primary-button:disabled {
2743
- opacity: 0.7;
2744
- }
2745
- .kima-card .primary-button:disabled {
2746
- cursor: default;
2747
- }
2748
- .kima-card .primary-button .loading-indicator {
2749
- margin-right: 7px;
2750
- }
2751
- .kima-card .primary-button .loading-indicator svg {
2752
- width: 20px;
2753
- height: 20px;
2754
- margin-top: 4px;
2755
- fill: white !important;
2756
- }
2757
- @media (max-width: 500px) {
2758
- .kima-card .primary-button:hover {
2759
- opacity: 1;
2760
- }
2761
- .kima-card .primary-button:hover:focus:active {
2762
- opacity: 0.7;
2763
- }
2764
- }
2765
- .kima-card .secondary-button {
2766
- border-radius: 30px;
2767
- width: fit-content;
2768
- padding: 7px 27px;
2769
- height: 50px;
2770
- background-color: transparent;
2771
- cursor: pointer;
2772
- font-weight: bold;
2773
- font-family: inherit;
2774
- border-radius: 30px;
2775
- border: 1px solid;
2776
- letter-spacing: 0;
2777
- font-size: 16px;
2778
- transition:
2779
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2780
- color 0ms,
2781
- background-color 0ms,
2782
- border-color 0ms;
2783
- display: flex;
2784
- align-items: center;
2785
- justify-content: center;
2786
- gap: 10px;
2787
- }
2788
- .kima-card .secondary-button.dark {
2789
- color: white;
2790
- border-color: white;
2791
- }
2792
- .kima-card .secondary-button.light {
2793
- color: black;
2794
- border-color: black;
2795
- }
2796
- .kima-card .secondary-button:hover,
2797
- .kima-card .secondary-button:disabled {
2798
- opacity: 0.7;
2799
- }
2800
- .kima-card .secondary-button:disabled {
2801
- cursor: default;
2802
- }
2803
- @media (max-width: 500px) {
2804
- .kima-card .secondary-button {
2805
- width: 8em;
2806
- }
2807
- .kima-card .secondary-button:hover {
2808
- opacity: 1;
2809
- }
2810
- .kima-card .secondary-button:hover:focus:active {
2811
- opacity: 0.7;
2812
- }
2813
- }
2814
- .kima-card .tx-button {
2815
- margin-right: 1em;
2816
- column-gap: 0.5em;
2817
- width: 5em;
2818
- display: flex;
2819
- justify-content: center;
2820
- align-items: center;
2821
- }
2822
- .kima-card .dropdown-menu {
2823
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
2824
- position: absolute;
2825
- z-index: 100;
2826
- padding: 0.5em 0;
2827
- max-height: 10em;
2828
- width: max-content;
2829
- overflow: hidden;
2830
- transition:
2831
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2832
- color 0ms,
2833
- background-color 0ms,
2834
- border-color 0ms;
2835
- }
2836
- .kima-card .dropdown-menu .menu-item {
2837
- padding: 0.5em 1em;
2838
- transition:
2839
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
2840
- color 0ms,
2841
- background-color 0ms,
2842
- border-color 0ms;
2843
- }
2844
- .kima-card .dropdown-menu .menu-item:hover {
2845
- background: #d6e4ea;
2846
- }
2847
- .kima-card .dropdown-menu.light {
2848
- background: white;
2849
- }
2850
- .kima-card .dropdown-menu.dark {
2851
- background: #1b1e25;
2852
- }
2853
- .kima-card .dropdown-menu.closed {
2854
- max-height: 0;
2855
- opacity: 0;
2856
- pointer-events: none;
2857
- }
2858
- .kima-card .error-tooltip.dark,
2859
- .kima-card .popup-tooltip.dark {
2860
- color: black;
2861
- background-color: white;
2862
- }
2863
- .kima-modal {
2864
- position: fixed;
2865
- z-index: 999999;
2866
- width: 100vw;
2867
- height: 0;
2868
- opacity: 0;
2869
- left: 0;
2870
- top: 0;
2871
- overflow: hidden;
2872
- display: flex;
2873
- align-items: center;
2874
- justify-content: center;
2875
- background: rgba(119, 141, 163, 0.85);
2876
- backdrop-filter: blur(3.5px);
2877
- }
2878
- .kima-modal .cross-icon-button svg {
2879
- padding: 8px;
2880
- }
2881
- .kima-modal .modal-content-container {
2882
- position: relative;
2883
- width: 500px;
2884
- max-height: 550px;
2885
- padding: 20px;
2886
- border-radius: 42px;
2887
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
2888
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
2889
- overflow: hidden;
2890
- box-sizing: content-box;
2891
- display: flex;
2892
- flex-direction: column;
2893
- gap: 10px;
2894
- }
2895
- .kima-modal .modal-content-container .topbar {
2896
- display: flex;
2897
- flex-direction: row !important;
2898
- }
2899
- .kima-modal .modal-content-container .account-details {
2900
- align-items: center;
2901
- }
2902
- .kima-modal .modal-content-container.light {
2903
- color: black;
2904
- background-color: #f7f8f9;
2905
- }
2906
- .kima-modal .modal-content-container.dark {
2907
- color: white;
2908
- background-color: #2c303e;
2909
- }
2910
- .kima-modal .modal-content-container .title {
2911
- margin-left: auto;
2912
- font-size: 26px;
2913
- font-family: "Sohne";
2914
- font-weight: 400;
2915
- }
2916
- @media (max-width: 500px) {
2917
- .kima-modal .modal-content-container .title {
2918
- font-size: 24px;
2919
- }
2920
- }
2921
- .kima-modal .modal-content-container .control-buttons {
2922
- margin-left: auto;
2923
- }
2924
- .kima-modal .modal-content-container .control-buttons .icon-button {
2925
- display: flex;
2926
- justify-content: center;
2927
- padding: 6px !important;
2928
- }
2929
- .kima-modal .modal-content-container .control-buttons svg {
2930
- width: 40px !important;
2931
- height: 40px !important;
2932
- margin: 0 !important;
2933
- }
2934
- @media (max-width: 500px) {
2935
- .kima-modal .modal-content-container .control-buttons svg {
2936
- width: 30px;
2937
- height: 30px;
2938
- }
2939
- }
2940
- .kima-modal.open {
2941
- pointer-events: auto;
2942
- height: 100vh;
2943
- opacity: 1;
2944
- }
2945
- .kima-modal .modal-content {
2946
- width: 100%;
2947
- display: flex;
2948
- flex-direction: column;
2949
- align-items: center;
2950
- justify-content: center;
2951
- font-family: "Manrope";
2952
- }
2953
- .kima-modal .modal-content .summary {
2954
- display: flex;
2955
- flex-direction: column;
2956
- align-items: center;
2957
- margin-bottom: 20px;
2958
- }
2959
- .kima-modal .modal-content .summary h2,
2960
- .kima-modal .modal-content .summary h3 {
2961
- margin: 0;
2962
- }
2963
- .kima-modal .modal-content .summary .address {
2964
- display: flex;
2965
- flex-direction: row;
2966
- align-items: center;
2967
- gap: 10px;
2968
- margin-top: 20px;
2969
- }
2970
- .kima-modal .modal-content .summary .address svg {
2971
- width: 25px;
2972
- height: 25px;
2973
- }
2974
- .kima-modal .modal-content .secondary-button {
2975
- margin-bottom: 20px;
2976
- width: fit-content !important;
2977
- color: #86b8ce;
2978
- }
2979
- .kima-modal .modal-content .secondary-button a {
2980
- display: flex;
2981
- flex-direction: row;
2982
- align-items: center;
2983
- gap: 5px;
2984
- text-decoration: none;
2985
- }
2986
- .kima-modal .modal-content .secondary-button a p {
2987
- margin: 0;
2988
- }
2989
- .kima-modal .modal-content .wallet-select {
2990
- width: 100%;
2991
- position: relative;
2992
- }
2993
- .kima-modal .modal-content .wallet-select p {
2994
- font-size: 1.2em;
2995
- font-weight: 500;
2996
- text-align: center;
2997
- }
2998
- .kima-modal .modal-content .wallet-select .slide-area {
2999
- height: 400px;
3000
- overflow-y: scroll;
3001
- }
3002
- .kima-modal .modal-content .wallet-select .slide-area .wallet-container {
3003
- display: flex;
3004
- flex-direction: column;
3005
- gap: 10px;
3006
- align-items: center;
3007
- justify-content: center;
3008
- margin-top: 2em;
3009
- }
3010
- .kima-modal.help-popup .modal-content-container {
3011
- width: 30em;
3012
- height: 20em;
3013
- }
3014
- .kima-modal.help-popup .modal-content {
3015
- height: calc(100% - 4em);
3016
- }
3017
- .kima-modal.hash-popup .modal-content-container {
3018
- width: 20em;
3019
- height: 12em;
3020
- }
3021
- .kima-modal.hash-popup .modal-content {
3022
- height: calc(100% - 2em);
3023
- }
3024
- .kima-modal.hash-popup .modal-content .hash-container {
3025
- width: 100%;
3026
- padding: 0 2em;
3027
- }
3028
- .kima-modal.hash-popup .modal-content .hash-container .hash-item {
3029
- display: flex;
3030
- align-items: center;
3031
- column-gap: 1em;
3032
- }
3033
- .kima-modal.hash-popup .modal-content .hash-container .hash-item span {
3034
- width: 5em;
3035
- }
3036
- .kima-modal.pending-tx-popup .modal-content-container {
3037
- width: 45em;
3038
- height: 20em;
3039
- }
3040
- .kima-modal.pending-tx-popup .modal-content {
3041
- height: calc(100% - 2em);
3042
- }
3043
- .kima-modal.pending-tx-popup .modal-content .scroll-area {
3044
- height: 14em;
3045
- width: 100%;
3046
- margin-top: 1em;
3047
- padding: 1em 0;
3048
- overflow-y: scroll;
3049
- overflow-x: clip;
3050
- background: #e3e3e3;
3051
- border-radius: 0.5em;
3052
- }
3053
- .kima-modal.pending-tx-popup .modal-content .scroll-area::-webkit-scrollbar-track {
3054
- background: transparent;
3055
- border-radius: 3px;
3056
- }
3057
- .kima-modal.pending-tx-popup .modal-content .scroll-area .header-container {
3058
- display: grid;
3059
- grid-template-columns: repeat(5, 1fr);
3060
- column-gap: 1em;
3061
- margin-bottom: 0.5em;
3062
- padding: 0 1em;
3063
- }
3064
- .kima-modal.pending-tx-popup .modal-content .scroll-area .header-container span {
3065
- text-align: center;
3066
- }
3067
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container {
3068
- width: 100%;
3069
- padding: 0;
3070
- display: flex;
3071
- flex-direction: column;
3072
- row-gap: 0.5em;
3073
- }
3074
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item {
3075
- display: grid;
3076
- grid-template-columns: repeat(5, 1fr);
3077
- align-items: center;
3078
- column-gap: 1em;
3079
- padding: 0.4em 1em;
3080
- transition:
3081
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
3082
- color 0ms,
3083
- background-color 0ms,
3084
- border-color 0ms;
3085
- }
3086
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item:hover {
3087
- background-color: rgba(90, 160, 219, 0.1254901961);
3088
- }
3089
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .label {
3090
- display: flex;
3091
- justify-content: center;
3092
- text-align: center;
3093
- }
3094
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .label .icon-wrapper {
3095
- display: flex;
3096
- align-items: center;
3097
- column-gap: 0.4em;
3098
- }
3099
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .label .icon-wrapper svg {
3100
- width: 1.5em;
3101
- height: 1.5em;
3102
- }
3103
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .action-button-container {
3104
- display: flex;
3105
- flex-direction: column;
3106
- }
3107
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .action-button-container .action-button {
3108
- color: #5aa0db;
3109
- display: flex;
3110
- justify-content: center;
3111
- cursor: pointer;
3112
- transition:
3113
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
3114
- color 0ms,
3115
- background-color 0ms,
3116
- border-color 0ms;
3117
- }
3118
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .action-button-container .action-button:hover {
3119
- opacity: 0.7;
3120
- }
3121
- .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .action-button-container.disabled .action-button {
3122
- opacity: 0.4;
3123
- cursor: default;
3124
- }
3125
- .kima-modal.pending-tx-popup.dark .scroll-area {
3126
- background-color: #434343;
3127
- }
3128
- .kima-modal.bank-popup .modal-content-container {
3129
- width: 100%;
3130
- height: calc(100% - 3em);
3131
- margin: 0 1.5em;
3132
- padding: 0;
3133
- position: relative;
3134
- }
3135
- .kima-modal.bank-popup .topbar {
3136
- position: absolute;
3137
- top: 2em;
3138
- right: 2em;
3139
- width: 100%;
3140
- }
3141
- .kima-modal.bank-popup .modal-content {
3142
- height: 100%;
3143
- }
3144
- .kima-modal.bank-popup .modal-content .bank-simulation h1 {
3145
- font-size: 1.5em;
3146
- margin-bottom: 1em;
3147
- }
3148
- .kima-modal.bank-popup .modal-content .bank-simulation .content-item {
3149
- display: flex;
3150
- align-items: enter;
3151
- margin: 0.5em 0;
3152
- padding: 0 3em;
3153
- }
3154
- .kima-modal.bank-popup .modal-content .bank-simulation .content-item > span {
3155
- width: 10em;
3156
- text-align: left;
3157
- }
3158
- .kima-modal.bank-popup .modal-content .bank-simulation .content-item p {
3159
- margin: 0;
3160
- }
3161
- .kima-modal.bank-popup .modal-content .bank-simulation button {
3162
- margin: 2em auto 0;
3163
- width: 16em;
3164
- }
3165
- @font-face {
3166
- font-family: "Manrope";
3167
- src: url("./assets/Manrope-ExtraLight-6KZAMPI7.eot");
3168
- src:
3169
- url("./assets/Manrope-ExtraLight-6KZAMPI7.eot?#iefix") format("embedded-opentype"),
3170
- url("./assets/Manrope-ExtraLight-6BGXUBPE.woff2") format("woff2"),
3171
- url("./assets/Manrope-ExtraLight-47OLGDTA.woff") format("woff");
3172
- font-weight: 200;
3173
- font-style: normal;
3174
- font-display: swap;
3175
- }
3176
- @font-face {
3177
- font-family: "Sohne";
3178
- src: url("./assets/SohneBreit-Buch-VTQ4XGFE.eot");
3179
- src:
3180
- url("./assets/SohneBreit-Buch-VTQ4XGFE.eot?#iefix") format("embedded-opentype"),
3181
- url("./assets/SohneBreit-Buch-UDQP3HAK.woff2") format("woff2"),
3182
- url("./assets/SohneBreit-Buch-FPHQDKKW.woff") format("woff");
3183
- font-weight: normal;
3184
- font-style: normal;
3185
- font-display: swap;
3186
- }
3187
- .kima-card {
3188
- border: 2px solid rgba(119, 141, 163, 0.3019607843);
3189
- border-radius: 42px;
3190
- width: 100%;
3191
- transition:
3192
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
3193
- color 0ms,
3194
- background-color 0ms,
3195
- border-color 0ms;
3196
- max-width: 950px;
3197
- }
3198
- .kima-card .transfer-card {
3199
- min-width: 800px;
3200
- padding: 30px 40px;
3201
- }
3202
- @media (max-width: 900px) {
3203
- .kima-card .transfer-card {
3204
- min-width: 600px;
3205
- }
3206
- }
3207
- @media (max-width: 900px) {
3208
- .kima-card .transfer-card {
3209
- min-width: 600px;
3210
- }
3211
- }
3212
- @media (max-width: 768px) {
3213
- .kima-card .transfer-card {
3214
- padding: 30px 10px;
3215
- min-width: 300px;
3216
- }
3217
- }
3218
- .kima-card.light {
3219
- background: #f7f8f9;
3220
- color: black;
3221
- }
3222
- .kima-card.light .kima-card-header .kima-card-network-label .label {
3223
- background: #e3e3e3;
3224
- }
3225
- .kima-card.light .kima-card-content .kima-progressbar {
3226
- background: #e3e3e3;
3227
- }
3228
- .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
3229
- background: white;
3230
- }
3231
- .kima-card.dark {
3232
- background: #2c303e;
3233
- color: white;
3234
- }
3235
- .kima-card.dark .kima-card-header .kima-card-network-label .label {
3236
- background: #4f5156;
3237
- }
3238
- .kima-card.dark .kima-card-content .kima-progressbar {
3239
- background: #4f5156;
3240
- }
3241
- .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
3242
- background: #0c0f17;
3243
- }
3244
- @media (max-width: 768px) {
3245
- .kima-card {
3246
- max-width: 100vh !important;
3247
- padding: 1.5em;
3248
- }
3249
- }
3250
- @media (max-width: 500px) {
3251
- .kima-card {
3252
- padding: 20px;
3253
- }
3254
- }
3255
- .kima-card-content {
3256
- width: 100%;
3257
- opacity: 1;
3258
- position: relative;
3259
- z-index: 10;
3260
- display: flex;
3261
- flex-direction: column;
3262
- transition:
3263
- all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
3264
- color 0ms,
3265
- background-color 0ms,
3266
- border-color 0ms;
3267
- }
3268
- .kima-card-content .cc-widget {
3269
- width: 100%;
3270
- position: relative;
3271
- overflow: hidden;
3272
- height: 730px;
3273
- padding-top: 10px;
3274
- padding-bottom: 10px;
3275
- }
3276
- @media (max-width: 675px) {
3277
- .kima-card-content .cc-widget {
3278
- height: 1100px;
3279
- }
3280
- }
3281
- .kima-card-content .cc-widget-loader {
3282
- width: 100%;
3283
- height: 300px;
3284
- display: flex;
3285
- justify-content: center;
3286
- align-items: center;
3287
- }
3288
- .kima-card-content.error svg {
3289
- margin: 10px auto;
3290
- }
3291
- .kima-card-content.error h2 {
3292
- text-align: justify;
3293
- }
3294
- .kima-card-content.skeleton {
3295
- display: flex;
3296
- flex-direction: column;
3297
- gap: 20px;
3298
- }
3299
- .kima-card-content .skeleton {
3300
- background: #778da3;
3301
- border-radius: 50px;
3302
- height: 25px;
3303
- width: 100%;
3304
- animation: pulse 1.5s ease-in-out infinite;
3305
- }
3306
- .kima-card.transaction-card {
3307
- padding: 30px 40px;
3308
- }
3309
- @media (max-width: 500px) {
3310
- .kima-card.transaction-card {
3311
- padding: 30px 20px;
3312
- }
3313
- }
3314
- .kima-card.transaction-card .kima-card-content {
3315
- display: flex;
3316
- flex-direction: column;
3317
- margin: 32px 0 32px;
3318
- }
3319
- .kima-card.transaction-card .kima-card-content .transaction-content {
3320
- display: flex;
3321
- flex-direction: column;
3322
- }
3323
- @media (max-width: 500px) {
3324
- .kima-card.transaction-card .kima-card-content .transaction-content {
3325
- flex-direction: row;
3326
- height: 100%;
3327
- justify-content: space-between;
3328
- }
3329
- }
3330
- .kima-card.minimized {
3331
- max-width: 30em;
3332
- }
3333
- .kima-card.minimized .kima-card-content {
3334
- opacity: 0;
3335
- max-height: 0;
3336
- min-height: 0;
3337
- margin: 0;
3338
- pointer-events: none;
3339
- }
3340
- .kima-card.minimized .kima-card-footer {
3341
- opacity: 0;
3342
- max-height: 0;
3343
- pointer-events: none;
3344
- }
3345
- .kima-card a:link {
3346
- color: inherit;
3347
- background-color: transparent;
3348
- text-decoration: none;
3349
- }
3350
- .kima-card a:visited {
3351
- color: #86b8ce;
3352
- background-color: transparent;
3353
- text-decoration: none;
3354
- }
3355
- .kima-card a:hover {
3356
- color: #86b8ce;
3357
- background-color: transparent;
3358
- text-decoration: underline;
3359
- }
3360
- .kima-card a:active {
3361
- color: #4a5068;
3362
- background-color: transparent;
3363
- text-decoration: underline;
3364
- }
3365
- .kima-card .loader {
3366
- transform-origin: center;
3367
- animation: spin 2s linear infinite;
3368
- }
3369
- @keyframes spin {
3370
- to {
3371
- transform: rotate(360deg);
3372
- }
3373
- }
3374
- .kima-card .icon-wrapper {
3375
- display: flex;
3376
- justify-content: center;
3377
- padding: 8px;
3378
- background-color: white;
3379
- margin-right: 6px;
3380
- border-radius: 9999px;
3381
- }
3382
- .kima-card input::-webkit-outer-spin-button,
3383
- .kima-card input::-webkit-inner-spin-button {
3384
- -webkit-appearance: none;
3385
- margin: 0;
3386
- }
3387
- .kima-card input[type=number] {
3388
- -moz-appearance: textfield;
3389
- }
3390
- .kima-card .hide-scrollbar {
3391
- -ms-overflow-style: none;
3392
- scrollbar-width: none;
3393
- }
3394
- .kima-card .hide-scrollbar::-webkit-scrollbar {
3395
- display: none;
3396
- }
3397
- .kima-card .custom-scrollbar::-webkit-scrollbar {
3398
- width: 6px;
3399
- }
3400
- .kima-card .custom-scrollbar::-webkit-scrollbar-track {
3401
- border-radius: 3px;
3402
- margin-top: 0.5em;
3403
- margin-bottom: 1.5em;
3404
- }
3405
- .kima-card .custom-scrollbar::-webkit-scrollbar-button {
3406
- height: 20px;
3407
- }
3408
- .kima-card .custom-scrollbar::-webkit-scrollbar-thumb {
3409
- border-radius: 3px;
3410
- }
3411
- .kima-card .custom-scrollbar.light::-webkit-scrollbar-thumb {
3412
- background: #86b8ce;
3413
- }
3414
- .kima-card .custom-scrollbar.dark::-webkit-scrollbar-thumb {
3415
- background: #778da3;
3416
- }
3417
- .kima-card .scroll-button {
3418
- position: absolute;
3419
- width: 100%;
3420
- bottom: 8em;
3421
- }
3422
- .kima-card .scroll-button svg {
3423
- width: 2em;
3424
- height: 4em;
3425
- cursor: pointer;
3426
- position: absolute;
3427
- }
3428
- .kima-card .scroll-button svg:first-of-type {
3429
- left: 4em;
3430
- }
3431
- .kima-card .scroll-button svg:last-of-type {
3432
- right: 4em;
3433
- transform: rotate(180deg);
3434
- }
3435
- @media (max-width: 768px) {
3436
- .kima-card .scroll-button {
3437
- display: none;
3438
- }
3439
- }
3440
- .kima-card .option-divider {
3441
- display: flex;
3442
- width: 75%;
3443
- justify-content: center;
3444
- margin-left: auto;
3445
- margin-right: auto;
3446
- margin-top: 10px;
3447
- margin-bottom: 20px;
3448
- gap: 15px;
3449
- align-items: center;
3450
- }
3451
- @media (max-width: 500px) {
3452
- .kima-card .option-divider {
3453
- width: 100%;
3454
- }
3455
- }
3456
- .kima-card .option-divider .line {
3457
- height: 1px;
3458
- width: 100%;
3459
- background-color: #86b8ce;
3460
- }
3461
- .kima-card .warning-modal-overlay {
3462
- position: fixed;
3463
- top: 0;
3464
- left: 0;
3465
- width: 100%;
3466
- height: 100%;
3467
- background: rgba(0, 0, 0, 0.5);
3468
- display: flex;
3469
- align-items: center;
3470
- justify-content: center;
3471
- z-index: 99999;
3472
- padding: 20px;
3473
- }
3474
- .kima-card .warning-modal {
3475
- background: #ffffff;
3476
- color: #333;
3477
- padding: 20px;
3478
- border-radius: 30px;
3479
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
3480
- max-width: 450px;
3481
- width: 100%;
3482
- text-align: center;
3483
- }
3484
- .kima-card .warning-modal h3 {
3485
- font-size: 1.2rem;
3486
- margin-bottom: 10px;
3487
- }
3488
- .kima-card .warning-modal p {
3489
- text-align: justify;
3490
- font-size: 1rem;
3491
- margin-bottom: 15px;
3492
- color: #555;
3493
- }
3494
- .kima-card .warning-modal-buttons {
3495
- display: flex;
3496
- justify-content: flex-end;
3497
- gap: 10px;
3498
- }
3499
- @media (max-width: 500px) {
3500
- .kima-card .warning-modal {
3501
- width: 100%;
3502
- max-width: none;
3503
- position: absolute;
3504
- bottom: 0;
3505
- left: 50%;
3506
- transform: translateX(-50%);
3507
- border-radius: 30px 30px 0 0;
3508
- box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
3509
- padding: 20px;
3510
- }
3511
- .kima-card .warning-modal-buttons {
3512
- flex-direction: column;
3513
- gap: 8px;
3514
- }
3515
- .kima-card .warning-modal-buttons button {
3516
- width: 100%;
3517
- }
3518
- }
3519
- /*# sourceMappingURL=index.css.map */