@kimafinance/kima-transaction-widget 1.4.9 → 1.4.10

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