@kimafinance/kima-transaction-widget 1.5.28 → 1.5.30

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 CHANGED
@@ -27,1385 +27,1204 @@
27
27
  font-style: normal;
28
28
  font-display: swap;
29
29
  }
30
- .kima-card {
31
- position: relative;
32
- overflow: visible;
33
- }
34
- .kima-card .toast-history {
35
- position: relative;
36
- display: flex;
37
- align-items: center;
38
- margin-right: 8px;
39
- z-index: 10;
30
+ @keyframes pulse {
31
+ 0% {
32
+ opacity: 1;
33
+ }
34
+ 50% {
35
+ opacity: 0.4;
36
+ }
37
+ 100% {
38
+ opacity: 1;
39
+ }
40
40
  }
41
- .kima-card .toast-history .toast-history-button {
42
- width: 32px;
43
- height: 32px;
44
- border-radius: 50%;
45
- background: transparent;
46
- cursor: pointer;
47
- display: inline-flex;
48
- align-items: center;
49
- justify-content: center;
41
+ .kima-card {
42
+ --kima-surface: #f7f8f9;
43
+ --kima-surface-alt: #e3e3e3;
44
+ --kima-surface-elevated: #ffffff;
45
+ --kima-text: #000000;
46
+ --kima-text-muted: #778da3;
47
+ --kima-border-subtle: rgba(119, 141, 163, 0.3019607843);
48
+ --kima-border-strong: #86b8ce;
49
+ --kima-overlay: rgba(119, 141, 163, 0.85);
50
+ --kima-icon-button-border: rgba(119, 141, 163, 0.3019607843);
51
+ --kima-wallet-action-gap: 8px;
50
52
  }
51
- .kima-card .toast-history .toast-history-panel {
52
- position: absolute;
53
- top: calc(100% + 8px);
54
- right: 0;
55
- z-index: 9999;
56
- width: 260px;
57
- max-height: 220px;
58
- overflow: auto;
59
- border-radius: 14px;
60
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
61
- padding: 10px 12px;
62
- box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
53
+ .kima-card.light {
54
+ --kima-surface: #f7f8f9;
55
+ --kima-surface-alt: #e3e3e3;
56
+ --kima-surface-elevated: #ffffff;
57
+ --kima-text: #000000;
58
+ --kima-text-muted: #778da3;
63
59
  }
64
- .kima-card .toast-history .toast-history-panel.light {
65
- background: #f7f8f9;
66
- color: black;
60
+ .kima-card.dark {
61
+ --kima-surface: #2c303e;
62
+ --kima-surface-alt: #4f5156;
63
+ --kima-surface-elevated: #0c0f17;
64
+ --kima-text: #ffffff;
65
+ --kima-text-muted: #86b8ce;
67
66
  }
68
- .kima-card .toast-history .toast-history-panel.dark {
69
- background: #242732;
70
- color: white;
67
+
68
+ @keyframes pulse {
69
+ 0% {
70
+ opacity: 1;
71
+ }
72
+ 50% {
73
+ opacity: 0.4;
74
+ }
75
+ 100% {
76
+ opacity: 1;
77
+ }
71
78
  }
72
- .kima-card .toast-history .toast-history-header {
73
- font-size: 13px;
74
- font-weight: 600;
75
- margin-bottom: 8px;
79
+ .kima-card {
80
+ border: 2px solid var(--kima-border-subtle);
81
+ background: var(--kima-surface);
82
+ color: var(--kima-text);
76
83
  }
77
- .kima-card .toast-history .toast-history-list {
84
+ .kima-card .wallet-modal-actions {
78
85
  display: flex;
79
- flex-direction: column;
80
- gap: 8px;
86
+ gap: var(--kima-wallet-action-gap);
81
87
  }
82
- .kima-card .toast-history .toast-history-item {
83
- display: flex;
84
- align-items: baseline;
85
- justify-content: space-between;
86
- gap: 10px;
87
- font-size: 12px;
88
+
89
+ .kima-card {
90
+ font-family: "Manrope";
91
+ /* Pulse for the button overlay */
92
+ /* Three-dot loader */
88
93
  }
89
- .kima-card .toast-history .toast-history-message {
90
- flex: 1;
91
- line-height: 1.3;
94
+ .kima-card .kima-card-content {
95
+ font-family: "Manrope";
96
+ /* Adds the inner dot and perfectly centers it */
97
+ /* Prevents text from pushing the radio button */
92
98
  }
93
- .kima-card .toast-history .toast-history-time {
94
- opacity: 0.7;
95
- white-space: nowrap;
99
+ .kima-card .kima-card-content .error-message {
100
+ color: red;
101
+ font-weight: bold;
96
102
  }
97
- .kima-card .invalid-option-banner {
98
- font-size: 14px;
99
- background-color: red;
100
- color: #edf2f5;
101
- padding: 10px 25px;
103
+ .kima-card .kima-card-content .subtitle {
102
104
  margin: 0;
103
- border-radius: 40px 40px 0 0;
104
- text-align: justify;
105
+ font-weight: bolder;
105
106
  }
106
- .kima-card .kima-card-header {
107
- display: flex;
108
- flex-direction: column;
107
+ .kima-card .kima-card-content .kima-progressbar {
108
+ height: 7px;
109
+ width: 95%;
110
+ max-width: 930px;
109
111
  position: relative;
110
- z-index: 5;
111
- }
112
- .kima-card .kima-card-header .topbar {
113
- display: flex;
114
- align-items: center;
115
- justify-content: space-between;
112
+ border-radius: 16px;
113
+ margin-bottom: 64px;
114
+ margin-left: 16px;
116
115
  }
117
- @media (max-width: 768px) {
118
- .kima-card .kima-card-header .topbar {
119
- flex-direction: column-reverse;
120
- align-items: flex-start;
116
+ @media (max-width: 500px) {
117
+ .kima-card .kima-card-content .kima-progressbar {
118
+ width: 7px;
119
+ height: 320px;
120
+ max-height: 560px;
121
121
  }
122
122
  }
123
- .kima-card .kima-card-header .topbar .title {
124
- display: flex;
125
- align-items: center;
126
- font-family: "Sohne";
127
- font-weight: 400;
128
- letter-spacing: 1px;
129
- font-size: 26px;
123
+ .kima-card .kima-card-content .kima-progressbar .value {
124
+ position: absolute;
125
+ z-index: 10;
126
+ height: 7px;
127
+ border-radius: 16px;
128
+ background: linear-gradient(90deg, #adf4a6, #80d7f5, #9990d5);
129
+ transition: width 0.8s ease-in-out;
130
130
  }
131
- @media (max-width: 768px) {
132
- .kima-card .kima-card-header .topbar .title {
133
- font-size: 24px;
134
- }
131
+ .kima-card .kima-card-content .kima-progressbar .value.step-25 {
132
+ width: calc(25% + 0.5em);
135
133
  }
136
- .kima-card .kima-card-header .topbar .title.skeleton {
137
- background: #778da3;
138
- border-radius: 50px;
139
- height: 25px;
140
- width: 60%;
141
- animation: pulse 1.5s ease-in-out infinite;
142
- margin-bottom: 20px;
134
+ .kima-card .kima-card-content .kima-progressbar .value.step-50 {
135
+ width: calc(50% + 0.5em);
143
136
  }
144
- .kima-card .kima-card-header .topbar .title .transaction-title {
145
- margin-right: 10px;
146
- font-size: 26px;
147
- text-align: start;
137
+ .kima-card .kima-card-content .kima-progressbar .value.step-75 {
138
+ width: calc(75% + 0.5em);
148
139
  }
149
- @media (max-width: 768px) {
150
- .kima-card .kima-card-header .topbar .title .transaction-title {
151
- font-size: 24px;
152
- }
140
+ .kima-card .kima-card-content .kima-progressbar .value.step-100 {
141
+ width: 100%;
153
142
  }
154
- .kima-card .kima-card-header .topbar .title span {
155
- color: #5aa0db;
156
- font-weight: bold;
157
- margin: 0 0 0 1em;
143
+ @media (max-width: 500px) {
144
+ .kima-card .kima-card-content .kima-progressbar .value {
145
+ background: linear-gradient(180deg, #adf4a6, #80d7f5, #9990d5);
146
+ width: 7px !important;
147
+ transition: height 0.8s ease-in-out;
148
+ }
149
+ .kima-card .kima-card-content .kima-progressbar .value.step-25 {
150
+ height: calc(25% + 0.5em);
151
+ }
152
+ .kima-card .kima-card-content .kima-progressbar .value.step-50 {
153
+ height: calc(50% + 0.5em);
154
+ }
155
+ .kima-card .kima-card-content .kima-progressbar .value.step-75 {
156
+ height: calc(75% + 0.5em);
157
+ }
158
+ .kima-card .kima-card-content .kima-progressbar .value.step-100 {
159
+ height: 100%;
160
+ }
158
161
  }
159
- .kima-card .kima-card-header .topbar .title .title-icon {
160
- display: inline-block;
161
- vertical-align: middle;
162
+ .kima-card .kima-card-content .kima-progressbar .step-indicators {
163
+ position: relative;
164
+ z-index: 20;
165
+ display: flex;
166
+ flex-direction: row;
167
+ justify-content: space-between;
168
+ margin: 0 -3.2px;
169
+ padding-bottom: 64px;
162
170
  }
163
- .kima-card .kima-card-header .topbar .title .percent {
164
- margin-left: 0.5em;
165
- font-weight: bold;
171
+ @media (max-width: 500px) {
172
+ .kima-card .kima-card-content .kima-progressbar .step-indicators {
173
+ flex-direction: column;
174
+ gap: 40px;
175
+ }
166
176
  }
167
- .kima-card .kima-card-header .topbar .control-buttons {
168
- display: flex;
169
- align-items: center;
170
- gap: 8px;
177
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
178
+ width: 48px;
179
+ height: 48px;
180
+ margin-top: -21px;
171
181
  position: relative;
172
- z-index: 5;
173
- overflow: visible;
174
- }
175
- .kima-card .kima-card-header .topbar .control-buttons.complete {
176
- width: 100%;
182
+ border-radius: 40px;
183
+ filter: drop-shadow(0px 0px 22.105px rgba(134, 184, 206, 0.5));
177
184
  }
178
185
  @media (max-width: 768px) {
179
- .kima-card .kima-card-header .topbar .control-buttons {
180
- margin-left: auto;
186
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
187
+ width: 32px;
188
+ height: 32px;
189
+ margin-top: -12px;
181
190
  }
182
191
  }
183
- .kima-card .kima-card-header .topbar .control-buttons .icon-button {
184
- background: transparent;
185
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
186
- border-radius: 40px;
187
- cursor: pointer;
188
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
189
- }
190
- .kima-card .kima-card-header .topbar .control-buttons .icon-button.minimize {
191
- border: none;
192
+ @media (max-width: 500px) {
193
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
194
+ width: 48px;
195
+ height: 48px;
196
+ margin-top: -10px;
197
+ margin-left: -17px;
198
+ }
192
199
  }
193
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:nth-of-type(2) {
194
- margin-left: 13px;
195
- padding: 4px 6px;
200
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step svg {
201
+ position: absolute;
196
202
  }
197
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
198
- opacity: 0.6;
203
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active {
204
+ border: 1px solid #86b8ce;
199
205
  }
200
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
201
- cursor: default;
202
- }
203
- .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
204
- width: 30px;
205
- height: 22px;
206
- padding: 5px;
206
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
207
+ top: -53px;
208
+ left: 67px;
209
+ width: 41px;
210
+ height: 41px;
207
211
  }
208
212
  @media (max-width: 768px) {
209
- .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
210
- width: 25px;
213
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
214
+ width: 32px;
215
+ height: 32px;
216
+ top: -45px;
217
+ left: 40px;
211
218
  }
212
219
  }
213
- .kima-card .kima-card-header .topbar .control-buttons .toast-history-button {
214
- margin-left: 0;
215
- padding: 0;
216
- }
217
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button {
218
- display: flex;
219
- justify-content: center;
220
- align-items: center;
221
- padding: 4px;
222
- width: 50px;
223
- height: 50px;
224
- border-radius: 9999px;
225
- background: transparent;
226
- cursor: pointer;
227
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
220
+ @media (max-width: 500px) {
221
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
222
+ width: 41px;
223
+ height: 41px;
224
+ top: -42px;
225
+ left: 43px;
226
+ }
228
227
  }
229
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
230
- width: 20px;
231
- height: 25px;
228
+ .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 {
229
+ left: -41px;
232
230
  }
233
231
  @media (max-width: 768px) {
234
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
235
- width: 20px;
236
- height: 20px;
232
+ .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 {
233
+ left: 13px;
237
234
  }
238
235
  }
239
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
240
- opacity: 0.6;
236
+ @media (max-width: 500px) {
237
+ .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 {
238
+ left: 16px;
239
+ }
241
240
  }
242
- .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
243
- cursor: default;
241
+ .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 {
242
+ right: 20px;
244
243
  }
245
- .kima-card .kima-card-header .topbar .control-buttons a {
246
- margin-left: auto;
247
- color: #778da3;
248
- text-decoration: none;
249
- cursor: pointer;
244
+ @media (max-width: 768px) {
245
+ .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 {
246
+ right: -5px;
247
+ }
250
248
  }
251
- .kima-card .kima-card-header .topbar .control-buttons .menu-button {
252
- font-family: "Manrope";
253
- font-size: 14px;
254
- font-weight: 500;
255
- padding: 4px 10px 4px 10px;
256
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
257
- border-radius: 50px;
249
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
250
+ top: -48px;
251
+ left: 72px;
252
+ width: 32px;
253
+ height: 32px;
258
254
  }
259
- .kima-card .kima-card-header .topbar .control-buttons .menu-button:hover {
260
- background-color: #d6e4ea;
255
+ @media (max-width: 768px) {
256
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
257
+ top: -40px;
258
+ left: 46px;
259
+ width: 20px;
260
+ height: 20px;
261
+ }
261
262
  }
262
263
  @media (max-width: 500px) {
263
- .kima-card .kima-card-header .topbar .control-buttons .menu-button {
264
- font-size: 12px;
264
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
265
+ width: 32px;
266
+ height: 32px;
267
+ left: 48px;
268
+ top: -38px;
265
269
  }
266
270
  }
267
- .kima-card .kima-card-header .topbar .control-buttons .reset-button {
268
- font-family: "Manrope";
269
- font-size: 14px;
270
- font-weight: 500;
271
- padding: 4px 16px;
272
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
273
- border-radius: 50px;
274
- background-color: #d6e4ea;
275
- color: #778da3;
276
- cursor: pointer;
271
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
272
+ left: 40px;
277
273
  }
278
- .kima-card .kima-card-header .topbar .control-buttons .reset-button:hover {
279
- opacity: 75%;
274
+ @media (max-width: 768px) {
275
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
276
+ left: 19px;
277
+ }
280
278
  }
281
279
  @media (max-width: 500px) {
282
- .kima-card .kima-card-header .topbar .control-buttons .reset-button {
283
- font-size: 12px;
280
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
281
+ left: 21px;
284
282
  }
285
283
  }
286
- .kima-card .kima-card-header .topbar .control-buttons .maximize {
287
- color: #86b8ce;
288
- cursor: pointer;
289
- }
290
- .kima-card .kima-card-header .header-network-labels {
291
- display: flex;
292
- flex-direction: row;
293
- align-items: center;
294
- gap: 12px;
295
- margin-top: 20px;
296
- margin-bottom: 10px;
297
- }
298
- .kima-card .kima-card-header .header-network-labels p {
299
- padding: 0;
284
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
285
+ right: 24px;
300
286
  }
301
- .kima-card .kima-card-header .header-network-labels .arrow {
302
- transform: rotate(-90deg);
287
+ @media (max-width: 768px) {
288
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
289
+ right: 3px;
290
+ }
303
291
  }
304
- .kima-card .kima-card-header .kima-card-network-label {
305
- display: flex;
306
- padding: 10px 14px;
307
- font-weight: 600;
308
- border-radius: 50px;
292
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error {
293
+ border: 1px solid #86b8ce;
309
294
  }
310
- .kima-card .kima-card-header .kima-card-network-label h3 {
311
- font-size: 12px;
295
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
296
+ top: -45px;
297
+ left: 75px;
298
+ width: 24px;
299
+ height: 24px;
312
300
  }
313
- .kima-card .kima-card-header .kima-card-network-label .icon {
314
- border-radius: 9999px;
315
- background-color: white;
316
- padding: 4px;
317
- display: flex;
318
- justify-content: center;
301
+ @media (max-width: 768px) {
302
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
303
+ top: -38px;
304
+ left: 47px;
305
+ width: 16px;
306
+ height: 16px;
307
+ }
319
308
  }
320
309
  @media (max-width: 500px) {
321
- .kima-card .kima-card-header .kima-card-network-label {
322
- font-size: 14px;
310
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
311
+ top: -35px;
312
+ left: 52px;
313
+ width: 24px;
314
+ height: 24px;
323
315
  }
324
316
  }
325
- .kima-card .kima-card-header .kima-card-network-label.light {
326
- background-color: #d6e4ea;
327
- color: black;
317
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
318
+ left: -32px;
328
319
  }
329
- .kima-card .kima-card-header .kima-card-network-label.dark {
330
- background-color: #4a5068;
331
- color: white;
320
+ @media (max-width: 768px) {
321
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
322
+ left: 20px;
323
+ }
332
324
  }
333
- .kima-card .kima-card-header p {
334
- margin: 0;
335
- border-radius: 50px;
336
- padding: 1em 1.5em;
325
+ @media (max-width: 500px) {
326
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
327
+ left: 25px;
328
+ }
337
329
  }
338
- .kima-card .kima-card-header p.light {
339
- background-color: #edf2f5;
340
- color: black;
330
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
331
+ right: 60px;
341
332
  }
342
- .kima-card .kima-card-header p.dark {
343
- background-color: #778da3;
344
- color: white;
333
+ @media (max-width: 768px) {
334
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
335
+ right: 3px;
336
+ }
345
337
  }
346
- .kima-card .kima-card-content {
347
- position: relative;
348
- z-index: 1;
338
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.light {
339
+ background-color: white;
349
340
  }
350
- .kima-card .kima-card-footer {
341
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.dark {
342
+ background-color: #4a5068;
343
+ }
344
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
345
+ position: absolute;
346
+ width: 160px;
347
+ left: -64px;
348
+ top: 56px;
351
349
  display: flex;
350
+ justify-content: center;
352
351
  align-items: center;
353
352
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
354
- max-height: 50px;
355
- margin-top: 20px;
356
- opacity: 1;
357
- box-sizing: content-box;
358
- font-family: "Manrope";
353
+ font-weight: 300;
354
+ }
355
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
356
+ text-align: center;
357
+ margin-left: 24px;
359
358
  font-size: 14px;
360
- font-weight: 700;
359
+ font-family: "Manrope";
361
360
  }
362
- @media (min-width: 768px) {
363
- .kima-card .kima-card-footer {
364
- margin-bottom: 20px;
361
+ @media (max-width: 500px) {
362
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
363
+ position: absolute;
364
+ top: -30px;
365
365
  }
366
366
  }
367
367
  @media (max-width: 768px) {
368
- .kima-card .kima-card-footer {
369
- padding-top: 20px;
368
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
369
+ width: 110px;
370
+ left: -35px;
371
+ flex-direction: column;
372
+ position: relative;
373
+ margin-left: -5px;
374
+ top: 45px;
370
375
  }
371
- .kima-card .kima-card-footer p {
372
- display: none;
376
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
377
+ margin-left: 0;
378
+ width: 100%;
373
379
  }
374
- .kima-card .kima-card-footer.confirm {
375
- margin-top: 50px;
376
- }
377
- }
378
- @media (max-width: 768px) and (max-width: 500px) {
379
- .kima-card .kima-card-footer.confirm {
380
- margin-top: 0;
380
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
381
+ align-items: center;
381
382
  }
382
- }
383
- @media (max-width: 500px) {
384
- .kima-card .kima-card-footer {
385
- padding: 0;
386
- width: 100%;
383
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
384
+ overflow: visible !important;
385
+ text-overflow: inherit !important;
386
+ white-space: inherit !important;
387
+ display: flex;
388
+ justify-content: center;
387
389
  }
388
390
  }
389
- .kima-card .kima-card-footer .button-group {
390
- display: flex;
391
- align-items: center;
392
- box-sizing: content-box;
393
- margin-left: auto;
394
- flex-direction: row;
395
- gap: 20px;
396
- margin-bottom: 30px;
397
- }
398
- .kima-card .kima-card-footer .button-group.skeleton {
399
- align-items: flex-end;
400
- }
401
- .kima-card .kima-card-footer .button-group .skeleton {
402
- background: #778da3;
403
- border-radius: 50px;
404
- height: 30px;
405
- width: 100px;
406
- animation: pulse 1.5s ease-in-out infinite;
391
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
392
+ left: 45px;
393
+ justify-content: flex-start;
407
394
  }
408
- @media (max-width: 500px) {
409
- .kima-card .kima-card-footer .button-group {
410
- margin-top: 0px;
411
- flex-direction: column;
412
- width: 100%;
395
+ @media (max-width: 768px) {
396
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
397
+ left: -8px;
413
398
  }
414
399
  }
415
- .kima-card .kima-card-footer .button-group button {
416
- width: 120px;
417
- padding: 5px 10px;
400
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info > span {
401
+ margin-left: -45px;
402
+ left: 91px;
418
403
  }
419
404
  @media (max-width: 500px) {
420
- .kima-card .kima-card-footer .button-group button {
421
- width: 100%;
422
- }
423
- }
424
- @media (min-width: 565px) {
425
- .kima-card .kima-card-footer .button-group button {
426
- width: 140px;
405
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(even) .step-info > span {
406
+ left: 100px;
427
407
  }
428
408
  }
429
- .kima-card .kima-card-footer p {
430
- font-size: 0.8em;
431
- margin: 0 0 0 1em;
432
- }
433
409
  @media (max-width: 500px) {
434
- .kima-card .kima-card-footer {
435
- flex-direction: column;
436
- max-height: unset;
437
- }
438
- .kima-card .kima-card-footer.bridge {
439
- margin-top: 0;
440
- }
441
- .kima-card .kima-card-footer .button-group {
442
- margin-left: unset;
410
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(3) .step-info > span {
411
+ left: 83px;
443
412
  }
444
413
  }
445
- .kima-card .floating-footer {
446
- color: black;
447
- position: absolute;
448
- width: 100%;
449
- display: flex;
450
- align-items: center;
451
- justify-content: center;
452
- pointer-events: none;
453
- font-family: "Sohne";
454
- right: 0;
455
- margin-top: 10px;
456
- height: 35px;
457
- }
458
- @media (max-width: 768px) {
459
- .kima-card .floating-footer.complete {
460
- margin-top: 10px;
461
- }
414
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
415
+ justify-content: flex-end;
462
416
  }
463
417
  @media (max-width: 768px) {
464
- .kima-card .floating-footer {
465
- margin-top: 35px;
418
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
419
+ right: 77px;
466
420
  }
467
- .kima-card .floating-footer.status {
468
- margin-top: 30px;
421
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
422
+ margin: 0 !important;
423
+ left: 75px;
469
424
  }
470
425
  }
471
- @media (max-width: 500px) {
472
- .kima-card .floating-footer {
473
- margin-top: 30px;
474
- }
426
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
427
+ margin-right: 45px;
475
428
  }
476
- .kima-card .floating-footer .items {
429
+ .kima-card .kima-card-content .kima-tooltip {
430
+ padding-top: 2em;
431
+ width: 100%;
432
+ position: relative;
433
+ }
434
+ .kima-card .kima-card-content .kima-tooltip > div {
435
+ position: relative;
436
+ height: fit-content;
437
+ width: 50%;
477
438
  display: flex;
478
- flex-direction: row;
479
439
  justify-content: center;
480
- align-items: center;
481
- text-decoration: none;
482
- padding: 4px 15px;
483
- border-radius: 20px;
484
- font-size: 12px;
485
- gap: 8px;
486
- height: 35px;
440
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
487
441
  }
488
- .kima-card .floating-footer .items.light {
489
- background-color: #d6e4ea;
442
+ .kima-card .kima-card-content .kima-tooltip > div.position-first {
443
+ left: -1em !important;
444
+ justify-content: flex-start;
490
445
  }
491
- .kima-card .floating-footer .items.dark {
492
- background-color: #778da3;
446
+ .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
447
+ left: 1em;
493
448
  }
494
- .kima-card .floating-footer .items span.network {
495
- font-weight: 800;
449
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
450
+ left: calc(50% + 1em) !important;
451
+ justify-content: flex-end;
496
452
  }
497
-
498
- .kima-card {
499
- font-family: "Manrope";
500
- /* Pulse for the button overlay */
501
- /* Three-dot loader */
453
+ .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
454
+ left: calc(100% - 3em) !important;
502
455
  }
503
- .kima-card .kima-card-content {
504
- font-family: "Manrope";
505
- /* Adds the inner dot and perfectly centers it */
506
- /* Prevents text from pushing the radio button */
456
+ @media (max-width: 768px) {
457
+ .kima-card .kima-card-content .kima-tooltip > div {
458
+ width: 100%;
459
+ left: 0 !important;
460
+ }
461
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
462
+ left: 1em !important;
463
+ }
507
464
  }
508
- .kima-card .kima-card-content .error-message {
509
- color: red;
510
- font-weight: bold;
465
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
466
+ width: 22em;
467
+ border: 1px solid #66aae5;
468
+ border-radius: 1em;
469
+ padding: 1.5em;
470
+ position: relative;
511
471
  }
512
- .kima-card .kima-card-content .subtitle {
513
- margin: 0;
514
- font-weight: bolder;
472
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
473
+ position: absolute;
474
+ content: "";
475
+ width: 2em;
476
+ height: 1.5em;
477
+ left: calc(50% - 1em);
478
+ top: -1.5em;
479
+ background: #66aae5;
480
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
481
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
515
482
  }
516
- .kima-card .kima-card-content .kima-progressbar {
517
- height: 7px;
518
- width: 95%;
519
- max-width: 930px;
483
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
520
484
  position: relative;
521
- border-radius: 16px;
522
- margin-bottom: 64px;
523
- margin-left: 16px;
524
485
  }
525
- @media (max-width: 500px) {
526
- .kima-card .kima-card-content .kima-progressbar {
527
- width: 7px;
528
- height: 320px;
529
- max-height: 560px;
530
- }
486
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item .info-icon {
487
+ background: white;
488
+ padding: 4px;
531
489
  }
532
- .kima-card .kima-card-content .kima-progressbar .value {
533
- position: absolute;
534
- z-index: 10;
535
- height: 7px;
536
- border-radius: 16px;
537
- background: linear-gradient(90deg, #adf4a6, #80d7f5, #9990d5);
538
- transition: width 0.8s ease-in-out;
490
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
491
+ margin-top: 0.8em;
539
492
  }
540
- .kima-card .kima-card-content .kima-progressbar .value.step-25 {
541
- width: calc(25% + 0.5em);
493
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
494
+ margin-left: 1.5em;
542
495
  }
543
- .kima-card .kima-card-content .kima-progressbar .value.step-50 {
544
- width: calc(50% + 0.5em);
496
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p a {
497
+ margin-left: 0.5em;
545
498
  }
546
- .kima-card .kima-card-content .kima-progressbar .value.step-75 {
547
- width: calc(75% + 0.5em);
499
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
500
+ display: inline;
501
+ cursor: pointer;
502
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
548
503
  }
549
- .kima-card .kima-card-content .kima-progressbar .value.step-100 {
550
- width: 100%;
504
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
505
+ opacity: 0.7;
551
506
  }
552
- @media (max-width: 500px) {
553
- .kima-card .kima-card-content .kima-progressbar .value {
554
- background: linear-gradient(180deg, #adf4a6, #80d7f5, #9990d5);
555
- width: 7px !important;
556
- transition: height 0.8s ease-in-out;
557
- }
558
- .kima-card .kima-card-content .kima-progressbar .value.step-25 {
559
- height: calc(25% + 0.5em);
507
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn svg {
508
+ width: 1em;
509
+ height: 1em;
510
+ margin-left: 0.5em;
511
+ }
512
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
513
+ position: absolute;
514
+ margin-top: 0.3em;
515
+ width: 1em;
516
+ height: 1em;
517
+ }
518
+ @media (max-width: 768px) {
519
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
520
+ width: 100%;
560
521
  }
561
- .kima-card .kima-card-content .kima-progressbar .value.step-50 {
562
- height: calc(50% + 0.5em);
522
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
523
+ opacity: 0;
563
524
  }
564
- .kima-card .kima-card-content .kima-progressbar .value.step-75 {
565
- height: calc(75% + 0.5em);
566
- }
567
- .kima-card .kima-card-content .kima-progressbar .value.step-100 {
568
- height: 100%;
525
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
526
+ position: absolute;
527
+ position: absolute;
528
+ content: "";
529
+ width: 2em;
530
+ height: 1.5em;
531
+ top: -1.5em;
532
+ background: #66aae5;
533
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
534
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
569
535
  }
570
536
  }
571
- .kima-card .kima-card-content .kima-progressbar .step-indicators {
572
- position: relative;
573
- z-index: 20;
574
- display: flex;
575
- flex-direction: row;
576
- justify-content: space-between;
577
- margin: 0 -3.2px;
578
- padding-bottom: 64px;
579
- }
580
- @media (max-width: 500px) {
581
- .kima-card .kima-card-content .kima-progressbar .step-indicators {
582
- flex-direction: column;
583
- gap: 40px;
584
- }
537
+ .kima-card .kima-card-content .dropdown-icon {
538
+ margin-left: auto;
539
+ box-sizing: content-box;
540
+ position: absolute;
541
+ width: 10px;
542
+ height: 10px;
543
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
585
544
  }
586
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
587
- width: 48px;
588
- height: 48px;
589
- margin-top: -21px;
590
- position: relative;
591
- border-radius: 40px;
592
- filter: drop-shadow(0px 0px 22.105px rgba(134, 184, 206, 0.5));
545
+ .kima-card .kima-card-content .dropdown-icon.collapsed {
546
+ right: 10px;
547
+ top: 24px;
548
+ transform: rotate(-180deg);
593
549
  }
594
- @media (max-width: 768px) {
595
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
596
- width: 32px;
597
- height: 32px;
598
- margin-top: -12px;
599
- }
550
+ .kima-card .kima-card-content .dropdown-icon.toggled {
551
+ box-sizing: content-box;
552
+ position: absolute;
553
+ right: 20px;
554
+ top: 14px;
555
+ transform: rotate(0deg);
600
556
  }
601
- @media (max-width: 500px) {
602
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
603
- width: 48px;
604
- height: 48px;
605
- margin-top: -10px;
606
- margin-left: -17px;
607
- }
557
+ .kima-card .kima-card-content .network-select {
558
+ position: relative;
608
559
  }
609
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step svg {
610
- position: absolute;
560
+ .kima-card .kima-card-content .network-select p {
561
+ font-size: 1.2em;
562
+ font-weight: 500;
563
+ text-align: center;
611
564
  }
612
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active {
613
- border: 1px solid #86b8ce;
565
+ .kima-card .kima-card-content .network-select .network-container {
566
+ display: flex;
567
+ column-gap: 1em;
568
+ align-items: center;
569
+ justify-content: center;
570
+ margin-top: 2em;
571
+ width: max-content;
572
+ margin: 0 auto;
614
573
  }
615
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
616
- top: -53px;
617
- left: 67px;
618
- width: 41px;
619
- height: 41px;
574
+ .kima-card .kima-card-content .single-form {
575
+ font-family: "Manrope";
576
+ font-size: 16px;
577
+ font-weight: 500;
578
+ letter-spacing: 0.5px;
579
+ margin-top: 20px;
620
580
  }
621
581
  @media (max-width: 768px) {
622
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
623
- width: 32px;
624
- height: 32px;
625
- top: -45px;
626
- left: 40px;
582
+ .kima-card .kima-card-content .single-form {
583
+ padding-left: 0;
627
584
  }
628
585
  }
629
586
  @media (max-width: 500px) {
630
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
631
- width: 41px;
632
- height: 41px;
633
- top: -42px;
634
- left: 43px;
587
+ .kima-card .kima-card-content .single-form {
588
+ font-size: 12px;
635
589
  }
636
590
  }
637
- .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 {
638
- left: -41px;
591
+ .kima-card .kima-card-content .single-form .bank-input {
592
+ margin-top: 2em;
639
593
  }
640
- @media (max-width: 768px) {
641
- .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 {
642
- left: 13px;
643
- }
594
+ .kima-card .kima-card-content .single-form .form-item {
595
+ display: flex;
596
+ align-items: center;
644
597
  }
645
598
  @media (max-width: 500px) {
646
- .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 {
647
- left: 16px;
599
+ .kima-card .kima-card-content .single-form .form-item {
600
+ flex-direction: column;
601
+ justify-content: center;
602
+ width: 100%;
603
+ padding-bottom: 20px;
648
604
  }
649
605
  }
650
- .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 {
651
- right: 20px;
606
+ .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
607
+ margin-top: 16px;
652
608
  }
653
- @media (max-width: 768px) {
654
- .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 {
655
- right: -5px;
656
- }
609
+ .kima-card .kima-card-content .single-form .form-item:last-of-type {
610
+ border-bottom: none;
657
611
  }
658
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
659
- top: -48px;
660
- left: 72px;
661
- width: 32px;
662
- height: 32px;
612
+ .kima-card .kima-card-content .single-form .form-item > span {
613
+ width: 140px;
614
+ margin-right: 100px;
663
615
  }
664
616
  @media (max-width: 768px) {
665
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
666
- top: -40px;
667
- left: 46px;
668
- width: 20px;
669
- height: 20px;
617
+ .kima-card .kima-card-content .single-form .form-item > span {
618
+ margin-right: 20px;
670
619
  }
671
620
  }
672
621
  @media (max-width: 500px) {
673
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked svg {
674
- width: 32px;
675
- height: 32px;
676
- left: 48px;
677
- top: -38px;
622
+ .kima-card .kima-card-content .single-form .form-item > span {
623
+ width: 100%;
624
+ margin-bottom: 10px;
625
+ margin-right: 0;
626
+ text-align: start;
627
+ font-weight: bolder;
678
628
  }
679
629
  }
680
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
681
- left: 40px;
682
- }
683
- @media (max-width: 768px) {
684
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
685
- left: 19px;
686
- }
630
+ .kima-card .kima-card-content .single-form .form-item .items {
631
+ display: flex;
632
+ flex-direction: row;
633
+ justify-content: start;
634
+ gap: 10px;
635
+ flex-grow: 1;
636
+ align-items: center;
687
637
  }
688
638
  @media (max-width: 500px) {
689
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:first-of-type svg {
690
- left: 21px;
639
+ .kima-card .kima-card-content .single-form .form-item .items {
640
+ flex-direction: column;
641
+ justify-content: center;
642
+ width: 100%;
691
643
  }
692
644
  }
693
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
694
- right: 24px;
645
+ .kima-card .kima-card-content .single-form .form-item .network-item {
646
+ display: flex;
647
+ align-items: center;
648
+ width: 9em;
649
+ height: 3.5em;
650
+ border-radius: 0.8em;
651
+ padding: 0 0.8em;
652
+ cursor: pointer;
653
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
695
654
  }
696
- @media (max-width: 768px) {
697
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.locked:last-of-type svg {
698
- right: 3px;
699
- }
655
+ .kima-card .kima-card-content .single-form .form-item .network-item svg {
656
+ width: 2em;
657
+ height: 2em;
658
+ border-radius: 100%;
700
659
  }
701
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error {
702
- border: 1px solid #86b8ce;
660
+ .kima-card .kima-card-content .single-form .form-item .network-item p {
661
+ width: 100%;
662
+ text-align: center;
663
+ font-weight: bold;
703
664
  }
704
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
705
- top: -45px;
706
- left: 75px;
707
- width: 24px;
708
- height: 24px;
665
+ .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
666
+ margin-left: 0.5em;
709
667
  }
710
- @media (max-width: 768px) {
711
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
712
- top: -38px;
713
- left: 47px;
714
- width: 16px;
715
- height: 16px;
716
- }
668
+ .kima-card .kima-card-content .single-form .form-item .network-item.light {
669
+ background: #e3e3e3;
717
670
  }
718
- @media (max-width: 500px) {
719
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error svg {
720
- top: -35px;
721
- left: 52px;
722
- width: 24px;
723
- height: 24px;
724
- }
671
+ .kima-card .kima-card-content .single-form .form-item .network-item.dark {
672
+ background: #4f5156;
725
673
  }
726
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
727
- left: -32px;
674
+ .kima-card .kima-card-content .single-form .form-item .network-item.active {
675
+ background: #66aae5;
728
676
  }
729
- @media (max-width: 768px) {
730
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
731
- left: 20px;
732
- }
677
+ .kima-card .kima-card-content .single-form .form-item .network-item.active p {
678
+ color: white;
733
679
  }
734
- @media (max-width: 500px) {
735
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:first-of-type svg {
736
- left: 25px;
737
- }
680
+ .kima-card .kima-card-content .single-form .form-item .network-item:hover {
681
+ opacity: 0.7;
738
682
  }
739
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
740
- right: 60px;
683
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
684
+ display: flex;
685
+ flex-direction: row;
686
+ align-items: center;
687
+ gap: 5px;
688
+ }
689
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer p {
690
+ margin: 0;
691
+ padding: 0;
692
+ font-size: 12px;
741
693
  }
742
694
  @media (max-width: 768px) {
743
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.error:last-of-type svg {
744
- right: 3px;
695
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
696
+ flex-direction: column;
697
+ align-items: start;
745
698
  }
746
699
  }
747
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.light {
748
- background-color: white;
749
- }
750
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step.dark {
751
- background-color: #4a5068;
752
- }
753
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
754
- position: absolute;
755
- width: 160px;
756
- left: -64px;
757
- top: 56px;
700
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount {
701
+ margin: 0;
702
+ padding: 0;
703
+ font-size: 12px;
758
704
  display: flex;
759
- justify-content: center;
760
705
  align-items: center;
761
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
762
- font-weight: 300;
763
- }
764
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
765
- text-align: center;
766
- margin-left: 24px;
767
- font-size: 14px;
768
- font-family: "Manrope";
769
706
  }
770
- @media (max-width: 500px) {
771
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
772
- position: absolute;
773
- top: -30px;
774
- }
707
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount .fee-value.fee-error {
708
+ color: #b90000;
709
+ font-weight: 600;
775
710
  }
776
- @media (max-width: 768px) {
777
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
778
- width: 110px;
779
- left: -35px;
780
- flex-direction: column;
781
- position: relative;
782
- margin-left: -5px;
783
- top: 45px;
784
- }
785
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
786
- margin-left: 0;
787
- width: 100%;
788
- }
789
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
790
- align-items: center;
791
- }
792
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
793
- overflow: visible !important;
794
- text-overflow: inherit !important;
795
- white-space: inherit !important;
796
- display: flex;
797
- justify-content: center;
798
- }
711
+ .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount .loading {
712
+ animation: pulse 1.5s ease-in-out infinite;
713
+ margin-top: auto;
714
+ margin-bottom: auto;
715
+ display: inline-block;
716
+ width: 80px;
717
+ height: 15px;
718
+ background-color: rgba(119, 141, 163, 0.3019607843);
719
+ border-radius: 4px;
720
+ color: transparent;
721
+ pointer-events: none;
722
+ user-select: none;
799
723
  }
800
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
801
- left: 45px;
802
- justify-content: flex-start;
724
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container {
725
+ display: flex;
803
726
  }
804
- @media (max-width: 768px) {
805
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
806
- left: -8px;
727
+ @media (max-width: 500px) {
728
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container {
729
+ flex-direction: row;
807
730
  }
808
731
  }
809
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info > span {
810
- margin-left: -45px;
811
- left: 91px;
732
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
733
+ font-family: "Manrope";
734
+ font-size: 14px;
735
+ font-weight: 500;
736
+ padding: 4px 16px;
737
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
738
+ border-radius: 50px;
739
+ background-color: #d6e4ea;
740
+ color: #778da3;
741
+ cursor: pointer;
812
742
  }
813
- @media (max-width: 500px) {
814
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(even) .step-info > span {
815
- left: 100px;
816
- }
743
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button:hover {
744
+ opacity: 75%;
817
745
  }
818
746
  @media (max-width: 500px) {
819
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:nth-of-type(3) .step-info > span {
820
- left: 83px;
747
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
748
+ font-size: 12px;
821
749
  }
822
750
  }
823
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
824
- justify-content: flex-end;
751
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
752
+ display: flex;
753
+ align-items: center;
754
+ border: 0.5px solid;
755
+ border-radius: 50px;
756
+ height: 50px;
757
+ padding: 0 14px;
758
+ width: 155px;
825
759
  }
826
- @media (max-width: 768px) {
827
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
828
- right: 77px;
829
- }
830
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
831
- margin: 0 !important;
832
- left: 75px;
760
+ @media (max-width: 639px) {
761
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
762
+ width: fit-content;
833
763
  }
834
764
  }
835
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info > span {
836
- margin-right: 45px;
837
- }
838
- .kima-card .kima-card-content .kima-tooltip {
839
- padding-top: 2em;
840
- width: 100%;
841
- position: relative;
842
- }
843
- .kima-card .kima-card-content .kima-tooltip > div {
844
- position: relative;
845
- height: fit-content;
846
- width: 50%;
765
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper .icon-wrapper {
847
766
  display: flex;
848
767
  justify-content: center;
849
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
850
- }
851
- .kima-card .kima-card-content .kima-tooltip > div.position-first {
852
- left: -1em !important;
853
- justify-content: flex-start;
854
- }
855
- .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
856
- left: 1em;
857
- }
858
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
859
- left: calc(50% + 1em) !important;
860
- justify-content: flex-end;
768
+ padding: 8px;
769
+ background-color: white;
770
+ margin-right: 6px;
771
+ border-radius: 9999px;
861
772
  }
862
- .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
863
- left: calc(100% - 3em) !important;
773
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.light {
774
+ background-color: #edf2f5;
775
+ border-color: #86b8ce;
776
+ color: black;
864
777
  }
865
- @media (max-width: 768px) {
866
- .kima-card .kima-card-content .kima-tooltip > div {
867
- width: 100%;
868
- left: 0 !important;
869
- }
870
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
871
- left: 1em !important;
872
- }
778
+ .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.dark {
779
+ background-color: #4a5068;
780
+ border-color: #778da3;
781
+ color: white;
873
782
  }
874
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
875
- width: 22em;
876
- border: 1px solid #66aae5;
783
+ .kima-card .kima-card-content .single-form .form-item .amount-label {
784
+ display: flex;
785
+ align-items: center;
786
+ background-color: #e3e3e3;
787
+ padding: 1em;
877
788
  border-radius: 1em;
878
- padding: 1.5em;
879
- position: relative;
880
789
  }
881
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
882
- position: absolute;
883
- content: "";
884
- width: 2em;
885
- height: 1.5em;
886
- left: calc(50% - 1em);
887
- top: -1.5em;
888
- background: #66aae5;
889
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
890
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
790
+ .kima-card .kima-card-content .single-form .form-item .amount-label.dark {
791
+ background-color: #4f5156;
891
792
  }
892
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
893
- position: relative;
793
+ .kima-card .kima-card-content .single-form .form-item .amount-label span {
794
+ font-size: 1.1em;
795
+ font-weight: 500;
894
796
  }
895
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item .info-icon {
797
+ .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper {
798
+ display: flex;
799
+ align-items: center;
800
+ border-radius: 1em;
801
+ font-weight: 500;
802
+ padding: 0.2em;
803
+ padding-right: 0.5em;
896
804
  background: white;
897
- padding: 4px;
805
+ color: black;
806
+ margin-left: 1em;
898
807
  }
899
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
900
- margin-top: 0.8em;
808
+ .kima-card .kima-card-content .single-form .form-item.transaction-search {
809
+ display: flex;
810
+ flex-direction: column;
811
+ align-items: center;
812
+ justify-content: space-between;
813
+ gap: 10px;
814
+ margin-bottom: 20px;
815
+ width: 100%;
901
816
  }
902
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
903
- margin-left: 1.5em;
817
+ .kima-card .kima-card-content .single-form .form-item.transaction-search span {
818
+ margin-right: 85px;
904
819
  }
905
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p a {
906
- margin-left: 0.5em;
820
+ @media (max-width: 500px) {
821
+ .kima-card .kima-card-content .single-form .form-item.transaction-search span {
822
+ text-align: start;
823
+ margin-right: auto;
824
+ margin-bottom: 10px;
825
+ font-weight: bolder;
826
+ }
907
827
  }
908
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
909
- display: inline;
910
- cursor: pointer;
911
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
828
+ .kima-card .kima-card-content .single-form .form-item.transaction-search button {
829
+ margin-left: auto;
830
+ margin-top: 20px;
912
831
  }
913
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
914
- opacity: 0.7;
832
+ @media (min-width: 565px) {
833
+ .kima-card .kima-card-content .single-form .form-item.transaction-search button {
834
+ width: 140px;
835
+ }
915
836
  }
916
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn svg {
917
- width: 1em;
918
- height: 1em;
919
- margin-left: 0.5em;
920
- }
921
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
922
- position: absolute;
923
- margin-top: 0.3em;
924
- width: 1em;
925
- height: 1em;
837
+ @media (max-width: 500px) {
838
+ .kima-card .kima-card-content .single-form .form-item.transaction-search button {
839
+ width: 100%;
840
+ }
926
841
  }
927
842
  @media (max-width: 768px) {
928
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
843
+ .kima-card .kima-card-content .single-form .form-item.transaction-search {
844
+ flex-direction: column;
845
+ align-items: start;
846
+ }
847
+ }
848
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
849
+ display: flex;
850
+ flex-direction: row;
851
+ width: 100%;
852
+ align-items: center;
853
+ }
854
+ @media (max-width: 500px) {
855
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
929
856
  width: 100%;
857
+ flex-direction: column;
930
858
  }
931
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
932
- opacity: 0;
859
+ }
860
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
861
+ width: 390px;
862
+ }
863
+ @media (max-width: 500px) {
864
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
865
+ width: 100%;
933
866
  }
934
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
935
- position: absolute;
936
- position: absolute;
937
- content: "";
938
- width: 2em;
939
- height: 1.5em;
940
- top: -1.5em;
941
- background: #66aae5;
942
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
943
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
867
+ }
868
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle {
869
+ display: flex;
870
+ align-items: center;
871
+ width: 100%;
872
+ gap: 12px;
873
+ }
874
+ @media (max-width: 500px) {
875
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle {
876
+ flex-direction: column;
877
+ align-items: flex-start;
944
878
  }
945
879
  }
946
- .kima-card .kima-card-content .dropdown-icon {
947
- margin-left: auto;
948
- box-sizing: content-box;
949
- position: absolute;
950
- width: 10px;
951
- height: 10px;
952
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
880
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-buttons {
881
+ display: flex;
882
+ gap: 8px;
883
+ flex-wrap: wrap;
953
884
  }
954
- .kima-card .kima-card-content .dropdown-icon.collapsed {
955
- right: 10px;
956
- top: 24px;
957
- transform: rotate(-180deg);
885
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button {
886
+ border-radius: 999px;
887
+ padding: 8px 14px;
888
+ font-size: 0.95em;
889
+ border: 1px solid transparent;
890
+ cursor: pointer;
958
891
  }
959
- .kima-card .kima-card-content .dropdown-icon.toggled {
892
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.light {
893
+ background: #edf2f5;
894
+ color: #4a5068;
895
+ border-color: #86b8ce;
896
+ }
897
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.dark {
898
+ background: #4a5068;
899
+ color: #edf2f5;
900
+ border-color: #778da3;
901
+ }
902
+ .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.active {
903
+ background: #778da3;
904
+ color: white;
905
+ border-color: #778da3;
906
+ }
907
+ .kima-card .kima-card-content .single-form .form-item input {
908
+ border-radius: 50px;
909
+ background: transparent;
910
+ outline: none;
911
+ font: unset;
912
+ width: 100px;
913
+ padding: 15px 20px;
960
914
  box-sizing: content-box;
961
- position: absolute;
962
- right: 20px;
963
- top: 14px;
964
- transform: rotate(0deg);
915
+ font-size: 14px;
965
916
  }
966
- .kima-card .kima-card-content .network-select {
967
- position: relative;
917
+ @media (max-width: 500px) {
918
+ .kima-card .kima-card-content .single-form .form-item input {
919
+ padding: 15px 10px;
920
+ width: 100%;
921
+ }
968
922
  }
969
- .kima-card .kima-card-content .network-select p {
970
- font-size: 1.2em;
971
- font-weight: 500;
972
- text-align: center;
923
+ .kima-card .kima-card-content .single-form .form-item input ::placeholder {
924
+ color: #778da3;
973
925
  }
974
- .kima-card .kima-card-content .network-select .network-container {
975
- display: flex;
976
- column-gap: 1em;
977
- align-items: center;
978
- justify-content: center;
979
- margin-top: 2em;
980
- width: max-content;
981
- margin: 0 auto;
926
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
927
+ width: 325px;
982
928
  }
983
- .kima-card .kima-card-content .single-form {
984
- font-family: "Manrope";
985
- font-size: 16px;
986
- font-weight: 500;
987
- letter-spacing: 0.5px;
988
- margin-top: 20px;
929
+ @media (min-width: 640px) {
930
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
931
+ padding: 15px;
932
+ width: 390px;
933
+ }
989
934
  }
990
- @media (max-width: 768px) {
991
- .kima-card .kima-card-content .single-form {
992
- padding-left: 0;
935
+ @media (max-width: 585px) {
936
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
937
+ width: 280px;
993
938
  }
994
939
  }
995
940
  @media (max-width: 500px) {
996
- .kima-card .kima-card-content .single-form {
941
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
942
+ width: 100%;
997
943
  font-size: 12px;
998
944
  }
999
945
  }
1000
- .kima-card .kima-card-content .single-form .bank-input {
1001
- margin-top: 2em;
946
+ .kima-card .kima-card-content .single-form .form-item input.light {
947
+ border: 1px solid #86b8ce;
948
+ color: black;
949
+ background-color: white;
1002
950
  }
1003
- .kima-card .kima-card-content .single-form .form-item {
1004
- display: flex;
1005
- align-items: center;
951
+ .kima-card .kima-card-content .single-form .form-item input.dark {
952
+ border: 1px solid #778da3;
953
+ color: white;
954
+ background-color: #4a5068;
955
+ }
956
+ .kima-card .kima-card-content .single-form .form-item .error {
957
+ color: red;
958
+ font-size: 0.8em;
959
+ margin-left: 1em;
960
+ }
961
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
962
+ align-items: flex-start;
1006
963
  }
1007
964
  @media (max-width: 500px) {
1008
- .kima-card .kima-card-content .single-form .form-item {
1009
- flex-direction: column;
1010
- justify-content: center;
965
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
1011
966
  width: 100%;
1012
- padding-bottom: 20px;
1013
967
  }
1014
968
  }
1015
- .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
1016
- margin-top: 16px;
1017
- }
1018
- .kima-card .kima-card-content .single-form .form-item:last-of-type {
1019
- border-bottom: none;
969
+ @media (min-width: 585xp) {
970
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
971
+ width: 220px;
972
+ }
1020
973
  }
1021
- .kima-card .kima-card-content .single-form .form-item > span {
1022
- width: 140px;
1023
- margin-right: 100px;
974
+ @media (min-width: 640px) {
975
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
976
+ width: 425px;
977
+ }
1024
978
  }
1025
- @media (max-width: 768px) {
1026
- .kima-card .kima-card-content .single-form .form-item > span {
1027
- margin-right: 20px;
979
+ @media (max-width: 585px) {
980
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
981
+ width: 265px;
1028
982
  }
1029
983
  }
1030
984
  @media (max-width: 500px) {
1031
- .kima-card .kima-card-content .single-form .form-item > span {
985
+ .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1032
986
  width: 100%;
1033
- margin-bottom: 10px;
1034
- margin-right: 0;
1035
- text-align: start;
1036
- font-weight: bolder;
1037
987
  }
1038
988
  }
1039
- .kima-card .kima-card-content .single-form .form-item .items {
1040
- display: flex;
1041
- flex-direction: row;
1042
- justify-content: start;
1043
- gap: 10px;
1044
- flex-grow: 1;
1045
- align-items: center;
1046
- }
1047
989
  @media (max-width: 500px) {
1048
- .kima-card .kima-card-content .single-form .form-item .items {
1049
- flex-direction: column;
1050
- justify-content: center;
1051
- width: 100%;
990
+ .kima-card .kima-card-content .single-form .form-item {
991
+ justify-content: space-between;
1052
992
  }
1053
993
  }
1054
- .kima-card .kima-card-content .single-form .form-item .network-item {
994
+ .kima-card .kima-card-content .single-form .coin-dropdown {
995
+ position: relative;
996
+ width: 125px;
997
+ border-radius: 50px;
998
+ border: 0.5px solid #86b8ce;
999
+ padding-left: 4px;
1000
+ padding-right: 24px;
1001
+ height: 50px;
1055
1002
  display: flex;
1056
1003
  align-items: center;
1057
- width: 9em;
1058
- height: 3.5em;
1059
- border-radius: 0.8em;
1060
- padding: 0 0.8em;
1061
1004
  cursor: pointer;
1005
+ box-sizing: content-box;
1062
1006
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1063
1007
  }
1064
- .kima-card .kima-card-content .single-form .form-item .network-item svg {
1065
- width: 2em;
1066
- height: 2em;
1067
- border-radius: 100%;
1068
- }
1069
- .kima-card .kima-card-content .single-form .form-item .network-item p {
1070
- width: 100%;
1071
- text-align: center;
1072
- font-weight: bold;
1008
+ @media (max-width: 639px) {
1009
+ .kima-card .kima-card-content .single-form .coin-dropdown {
1010
+ width: 105px;
1011
+ }
1073
1012
  }
1074
- .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
1075
- margin-left: 0.5em;
1013
+ @media (max-width: 500px) {
1014
+ .kima-card .kima-card-content .single-form .coin-dropdown {
1015
+ width: 100%;
1016
+ }
1076
1017
  }
1077
- .kima-card .kima-card-content .single-form .form-item .network-item.light {
1078
- background: #e3e3e3;
1018
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
1019
+ display: flex;
1020
+ align-items: center;
1021
+ border-radius: 12px;
1022
+ padding: 2.5px;
1023
+ padding-right: 6px;
1079
1024
  }
1080
- .kima-card .kima-card-content .single-form .form-item .network-item.dark {
1081
- background: #4f5156;
1025
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper .placeholder {
1026
+ margin-left: 10px;
1082
1027
  }
1083
- .kima-card .kima-card-content .single-form .form-item .network-item.active {
1084
- background: #66aae5;
1028
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper .icon-wrapper {
1029
+ display: flex;
1030
+ justify-content: center;
1031
+ padding: 8px;
1032
+ background-color: white;
1033
+ margin-right: 6px;
1034
+ border-radius: 9999px;
1085
1035
  }
1086
- .kima-card .kima-card-content .single-form .form-item .network-item.active p {
1087
- color: white;
1036
+ .kima-card .kima-card-content .single-form .coin-dropdown.light {
1037
+ color: black;
1038
+ background: #edf2f5;
1088
1039
  }
1089
- .kima-card .kima-card-content .single-form .form-item .network-item:hover {
1090
- opacity: 0.7;
1040
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1041
+ color: white;
1042
+ background: #4a5068 !important;
1091
1043
  }
1092
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
1093
- display: flex;
1094
- flex-direction: row;
1095
- align-items: center;
1096
- gap: 5px;
1044
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
1045
+ color: white;
1097
1046
  }
1098
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer p {
1099
- margin: 0;
1100
- padding: 0;
1101
- font-size: 12px;
1047
+ .kima-card .kima-card-content .single-form .coin-dropdown:before {
1048
+ box-sizing: content-box;
1049
+ position: absolute;
1050
+ width: 0.8em;
1051
+ height: 0.8em;
1052
+ right: 1.1em;
1053
+ top: 1.7em;
1054
+ border-top: 2px solid;
1055
+ border-right: 2px solid;
1056
+ border-color: white;
1057
+ transform: rotate(-45deg);
1058
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1102
1059
  }
1103
- @media (max-width: 768px) {
1104
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer {
1105
- flex-direction: column;
1106
- align-items: start;
1107
- }
1060
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
1061
+ border: 0.5px solid #86b8ce;
1062
+ border-top: none;
1063
+ border-radius: 0 0 30px 30px;
1064
+ position: absolute;
1065
+ z-index: 100;
1066
+ max-height: 10em;
1067
+ width: 100.5%;
1068
+ top: 100%;
1069
+ left: -0.5px;
1070
+ overflow: hidden;
1071
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1072
+ padding: 0.5em 0;
1108
1073
  }
1109
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount {
1110
- margin: 0;
1111
- padding: 0;
1112
- font-size: 12px;
1074
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
1075
+ margin: 2.5px 12px;
1076
+ padding: 2.5px 12px;
1077
+ border-radius: 20px;
1078
+ max-width: 240px;
1079
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1113
1080
  display: flex;
1081
+ justify-content: start;
1082
+ flex-direction: row;
1114
1083
  align-items: center;
1115
1084
  }
1116
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount .fee-value.fee-error {
1117
- color: #b90000;
1118
- font-weight: 600;
1085
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
1086
+ width: 100%;
1087
+ text-align: center;
1088
+ margin: 0;
1119
1089
  }
1120
- .kima-card .kima-card-content .single-form .form-item .max-disclaimer .fee-amount .loading {
1121
- animation: pulse 1.5s ease-in-out infinite;
1122
- margin-top: auto;
1123
- margin-bottom: auto;
1124
- display: inline-block;
1125
- width: 80px;
1126
- height: 15px;
1127
- background-color: rgba(119, 141, 163, 0.3019607843);
1128
- border-radius: 4px;
1129
- color: transparent;
1130
- pointer-events: none;
1131
- user-select: none;
1090
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.light:hover {
1091
+ background: #d6e4ea;
1132
1092
  }
1133
- .kima-card .kima-card-content .single-form .form-item .amount-label-container {
1134
- display: flex;
1093
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.dark:hover {
1094
+ background: #2c303e;
1135
1095
  }
1136
- @media (max-width: 500px) {
1137
- .kima-card .kima-card-content .single-form .form-item .amount-label-container {
1138
- flex-direction: row;
1139
- }
1096
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
1097
+ color: black;
1098
+ background: #edf2f5;
1140
1099
  }
1141
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
1142
- font-family: "Manrope";
1143
- font-size: 14px;
1144
- font-weight: 500;
1145
- padding: 4px 16px;
1146
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
1147
- border-radius: 50px;
1148
- background-color: #d6e4ea;
1149
- color: #778da3;
1150
- cursor: pointer;
1100
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
1101
+ color: white;
1102
+ background: #4a5068;
1151
1103
  }
1152
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button:hover {
1153
- opacity: 75%;
1104
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.toggled {
1105
+ overflow-y: auto;
1106
+ overflow-x: hidden;
1107
+ -webkit-overflow-scrolling: touch;
1108
+ opacity: 1;
1154
1109
  }
1155
- @media (max-width: 500px) {
1156
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .max-button {
1157
- font-size: 12px;
1158
- }
1110
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
1111
+ max-height: 0;
1112
+ opacity: 0;
1113
+ overflow: hidden;
1114
+ pointer-events: none;
1159
1115
  }
1160
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
1161
- display: flex;
1162
- align-items: center;
1163
- border: 0.5px solid;
1164
- border-radius: 50px;
1165
- height: 50px;
1166
- padding: 0 14px;
1167
- width: 155px;
1116
+ .kima-card .kima-card-content .single-form .coin-dropdown.light {
1117
+ background: #edf2f5 !important;
1168
1118
  }
1169
- @media (max-width: 639px) {
1170
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper {
1171
- width: fit-content;
1172
- }
1119
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1120
+ background: #4a5068 !important;
1173
1121
  }
1174
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper .icon-wrapper {
1175
- display: flex;
1176
- justify-content: center;
1177
- padding: 8px;
1178
- background-color: white;
1179
- margin-right: 6px;
1180
- border-radius: 9999px;
1122
+ .kima-card .kima-card-content .single-form .coin-dropdown.toggled {
1123
+ border-bottom: none;
1124
+ border-radius: 30px 30px 0 0;
1181
1125
  }
1182
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.light {
1183
- background-color: #edf2f5;
1184
- border-color: #86b8ce;
1185
- color: black;
1126
+ .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
1127
+ transform: rotate(135deg);
1128
+ top: 1.2em;
1186
1129
  }
1187
- .kima-card .kima-card-content .single-form .form-item .amount-label-container .coin-wrapper.dark {
1188
- background-color: #4a5068;
1189
- border-color: #778da3;
1190
- color: white;
1130
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1131
+ background: #4f5156;
1191
1132
  }
1192
- .kima-card .kima-card-content .single-form .form-item .amount-label {
1133
+ .kima-card .kima-card-content .single-form .expire-time-dropdown {
1134
+ position: relative;
1135
+ border-radius: 1em;
1136
+ padding: 0.5em;
1137
+ padding-right: 3em;
1138
+ height: 2.8em;
1193
1139
  display: flex;
1194
1140
  align-items: center;
1195
- background-color: #e3e3e3;
1196
- padding: 1em;
1197
- border-radius: 1em;
1198
- }
1199
- .kima-card .kima-card-content .single-form .form-item .amount-label.dark {
1200
- background-color: #4f5156;
1201
- }
1202
- .kima-card .kima-card-content .single-form .form-item .amount-label span {
1203
- font-size: 1.1em;
1204
- font-weight: 500;
1141
+ cursor: pointer;
1142
+ box-sizing: content-box;
1205
1143
  }
1206
- .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper {
1144
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-wrapper {
1207
1145
  display: flex;
1208
1146
  align-items: center;
1209
1147
  border-radius: 1em;
1148
+ font-size: 1em;
1210
1149
  font-weight: 500;
1211
1150
  padding: 0.2em;
1212
1151
  padding-right: 0.5em;
1213
- background: white;
1152
+ padding-left: 0.5em;
1214
1153
  color: black;
1215
- margin-left: 1em;
1216
1154
  }
1217
- .kima-card .kima-card-content .single-form .form-item.transaction-search {
1155
+ .kima-card .kima-card-content .single-form .expire-time-dropdown.dark .coin-wrapper {
1156
+ color: white;
1157
+ }
1158
+ .kima-card .kima-card-content .single-form .expire-time-dropdown:before {
1159
+ position: absolute;
1160
+ content: "";
1161
+ width: 0.8em;
1162
+ height: 0.8em;
1163
+ right: 1.1em;
1164
+ top: 1.7em;
1165
+ border-top: 2px solid;
1166
+ border-right: 2px solid;
1167
+ border-color: white;
1168
+ transform: rotate(-45deg);
1169
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1170
+ }
1171
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu {
1172
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
1173
+ position: absolute;
1174
+ z-index: 100;
1175
+ max-height: 10em;
1176
+ width: 100%;
1177
+ top: calc(100% - 0.5em);
1178
+ left: 0;
1179
+ overflow: hidden;
1180
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1181
+ }
1182
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item {
1183
+ padding: 0.5em 1em;
1184
+ margin: 0;
1185
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1218
1186
  display: flex;
1219
- flex-direction: column;
1220
1187
  align-items: center;
1221
- justify-content: space-between;
1222
- gap: 10px;
1223
- margin-bottom: 20px;
1188
+ }
1189
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item p {
1224
1190
  width: 100%;
1191
+ text-align: center;
1192
+ margin: 0;
1225
1193
  }
1226
- .kima-card .kima-card-content .single-form .form-item.transaction-search span {
1227
- margin-right: 85px;
1194
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item:hover {
1195
+ background: #d6e4ea;
1228
1196
  }
1229
- @media (max-width: 500px) {
1230
- .kima-card .kima-card-content .single-form .form-item.transaction-search span {
1231
- text-align: start;
1232
- margin-right: auto;
1233
- margin-bottom: 10px;
1234
- font-weight: bolder;
1235
- }
1197
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.light {
1198
+ background: white;
1236
1199
  }
1237
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1238
- margin-left: auto;
1239
- margin-top: 20px;
1240
- }
1241
- @media (min-width: 565px) {
1242
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1243
- width: 140px;
1244
- }
1245
- }
1246
- @media (max-width: 500px) {
1247
- .kima-card .kima-card-content .single-form .form-item.transaction-search button {
1248
- width: 100%;
1249
- }
1250
- }
1251
- @media (max-width: 768px) {
1252
- .kima-card .kima-card-content .single-form .form-item.transaction-search {
1253
- flex-direction: column;
1254
- align-items: start;
1255
- }
1256
- }
1257
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
1258
- display: flex;
1259
- flex-direction: row;
1260
- width: 100%;
1261
- align-items: center;
1262
- }
1263
- @media (max-width: 500px) {
1264
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input {
1265
- width: 100%;
1266
- flex-direction: column;
1267
- }
1268
- }
1269
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
1270
- width: 390px;
1271
- }
1272
- @media (max-width: 500px) {
1273
- .kima-card .kima-card-content .single-form .form-item.transaction-search .transaction-input input {
1274
- width: 100%;
1275
- }
1276
- }
1277
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle {
1278
- display: flex;
1279
- align-items: center;
1280
- width: 100%;
1281
- gap: 12px;
1282
- }
1283
- @media (max-width: 500px) {
1284
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle {
1285
- flex-direction: column;
1286
- align-items: flex-start;
1287
- }
1288
- }
1289
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-buttons {
1290
- display: flex;
1291
- gap: 8px;
1292
- flex-wrap: wrap;
1293
- }
1294
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button {
1295
- border-radius: 999px;
1296
- padding: 8px 14px;
1297
- font-size: 0.95em;
1298
- border: 1px solid transparent;
1299
- cursor: pointer;
1300
- }
1301
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.light {
1302
- background: #edf2f5;
1303
- color: #4a5068;
1304
- border-color: #86b8ce;
1305
- }
1306
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.dark {
1307
- background: #4a5068;
1308
- color: #edf2f5;
1309
- border-color: #778da3;
1310
- }
1311
- .kima-card .kima-card-content .single-form .form-item.transaction-search .tx-type-toggle .toggle-button.active {
1312
- background: #778da3;
1313
- color: white;
1314
- border-color: #778da3;
1315
- }
1316
- .kima-card .kima-card-content .single-form .form-item input {
1317
- border-radius: 50px;
1318
- background: transparent;
1319
- outline: none;
1320
- font: unset;
1321
- width: 100px;
1322
- padding: 15px 20px;
1323
- box-sizing: content-box;
1324
- font-size: 14px;
1325
- }
1326
- @media (max-width: 500px) {
1327
- .kima-card .kima-card-content .single-form .form-item input {
1328
- padding: 15px 10px;
1329
- width: 100%;
1330
- }
1331
- }
1332
- .kima-card .kima-card-content .single-form .form-item input ::placeholder {
1333
- color: #778da3;
1334
- }
1335
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1336
- width: 325px;
1337
- }
1338
- @media (min-width: 640px) {
1339
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1340
- padding: 15px;
1341
- width: 390px;
1342
- }
1343
- }
1344
- @media (max-width: 585px) {
1345
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1346
- width: 280px;
1347
- }
1348
- }
1349
- @media (max-width: 500px) {
1350
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
1351
- width: 100%;
1352
- font-size: 12px;
1353
- }
1354
- }
1355
- .kima-card .kima-card-content .single-form .form-item input.light {
1356
- border: 1px solid #86b8ce;
1357
- color: black;
1358
- background-color: white;
1359
- }
1360
- .kima-card .kima-card-content .single-form .form-item input.dark {
1361
- border: 1px solid #778da3;
1362
- color: white;
1363
- background-color: #4a5068;
1364
- }
1365
- .kima-card .kima-card-content .single-form .form-item .error {
1366
- color: red;
1367
- font-size: 0.8em;
1368
- margin-left: 1em;
1369
- }
1370
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
1371
- align-items: flex-start;
1372
- }
1373
- @media (max-width: 500px) {
1374
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected {
1375
- width: 100%;
1376
- }
1200
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.dark {
1201
+ background: #4f5156;
1377
1202
  }
1378
- @media (min-width: 585xp) {
1379
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1380
- width: 220px;
1381
- }
1203
+ .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.collapsed {
1204
+ max-height: 0;
1205
+ opacity: 0;
1382
1206
  }
1383
- @media (min-width: 640px) {
1384
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1385
- width: 425px;
1386
- }
1207
+ .kima-card .kima-card-content .single-form .expire-time-dropdown.light {
1208
+ background: #e3e3e3;
1387
1209
  }
1388
- @media (max-width: 585px) {
1389
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1390
- width: 265px;
1391
- }
1210
+ .kima-card .kima-card-content .single-form .expire-time-dropdown.light:before {
1211
+ border-color: black;
1392
1212
  }
1393
- @media (max-width: 500px) {
1394
- .kima-card .kima-card-content .single-form .form-item.wallet-button-item.connected button {
1395
- width: 100%;
1396
- }
1213
+ .kima-card .kima-card-content .single-form .expire-time-dropdown.collapsed:before {
1214
+ transform: rotate(135deg);
1215
+ top: 1.2em;
1397
1216
  }
1398
- @media (max-width: 500px) {
1399
- .kima-card .kima-card-content .single-form .form-item {
1400
- justify-content: space-between;
1401
- }
1217
+ .kima-card .kima-card-content .single-form .expire-time-dropdown.dark {
1218
+ background: #4f5156;
1402
1219
  }
1403
- .kima-card .kima-card-content .single-form .coin-dropdown {
1220
+ .kima-card .kima-card-content .single-form .network-dropdown {
1404
1221
  position: relative;
1405
- width: 125px;
1222
+ width: 230px;
1223
+ min-width: 150px;
1224
+ max-width: 300px;
1406
1225
  border-radius: 50px;
1407
1226
  border: 0.5px solid #86b8ce;
1408
- padding-left: 4px;
1227
+ padding-left: 15px;
1409
1228
  padding-right: 24px;
1410
1229
  height: 50px;
1411
1230
  display: flex;
@@ -1414,46 +1233,42 @@
1414
1233
  box-sizing: content-box;
1415
1234
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1416
1235
  }
1417
- @media (max-width: 639px) {
1418
- .kima-card .kima-card-content .single-form .coin-dropdown {
1419
- width: 105px;
1236
+ @media (max-width: 586px) {
1237
+ .kima-card .kima-card-content .single-form .network-dropdown {
1238
+ width: 185px;
1420
1239
  }
1421
1240
  }
1422
1241
  @media (max-width: 500px) {
1423
- .kima-card .kima-card-content .single-form .coin-dropdown {
1242
+ .kima-card .kima-card-content .single-form .network-dropdown {
1424
1243
  width: 100%;
1244
+ max-width: none;
1425
1245
  }
1426
1246
  }
1427
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
1247
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper {
1428
1248
  display: flex;
1249
+ justify-content: start;
1429
1250
  align-items: center;
1430
- border-radius: 12px;
1431
- padding: 2.5px;
1432
- padding-right: 6px;
1433
- }
1434
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper .placeholder {
1435
- margin-left: 10px;
1251
+ border-radius: 15px;
1252
+ padding: 3px;
1253
+ padding-right: 7px;
1254
+ color: black;
1255
+ z-index: inherit;
1436
1256
  }
1437
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper .icon-wrapper {
1257
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper .icon {
1438
1258
  display: flex;
1439
1259
  justify-content: center;
1440
- padding: 8px;
1260
+ padding: 4px 4px;
1261
+ border-radius: 40px;
1441
1262
  background-color: white;
1442
- margin-right: 6px;
1443
- border-radius: 9999px;
1444
- }
1445
- .kima-card .kima-card-content .single-form .coin-dropdown.light {
1446
- color: black;
1447
- background: #edf2f5;
1263
+ margin-right: 5px;
1448
1264
  }
1449
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1450
- color: white;
1451
- background: #4a5068 !important;
1265
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper span {
1266
+ text-align: center;
1452
1267
  }
1453
- .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
1268
+ .kima-card .kima-card-content .single-form .network-dropdown.dark .network-wrapper {
1454
1269
  color: white;
1455
1270
  }
1456
- .kima-card .kima-card-content .single-form .coin-dropdown:before {
1271
+ .kima-card .kima-card-content .single-form .network-dropdown:before {
1457
1272
  box-sizing: content-box;
1458
1273
  position: absolute;
1459
1274
  width: 0.8em;
@@ -1466,261 +1281,37 @@
1466
1281
  transform: rotate(-45deg);
1467
1282
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1468
1283
  }
1469
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
1284
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
1470
1285
  border: 0.5px solid #86b8ce;
1471
1286
  border-top: none;
1472
1287
  border-radius: 0 0 30px 30px;
1473
1288
  position: absolute;
1474
- z-index: 100;
1475
- max-height: 10em;
1476
- width: 100.5%;
1289
+ z-index: 1000;
1290
+ max-height: 200px;
1291
+ width: 100%;
1477
1292
  top: 100%;
1478
1293
  left: -0.5px;
1479
- overflow: hidden;
1294
+ overflow-x: clip;
1295
+ overflow-y: scroll;
1480
1296
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1481
- padding: 0.5em 0;
1482
1297
  }
1483
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
1484
- margin: 2.5px 12px;
1485
- padding: 2.5px 12px;
1298
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
1299
+ margin: 7px 14px;
1300
+ padding: 11px 7px;
1486
1301
  border-radius: 20px;
1487
- max-width: 240px;
1302
+ width: 220px;
1488
1303
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1489
1304
  display: flex;
1490
1305
  justify-content: start;
1491
1306
  flex-direction: row;
1492
1307
  align-items: center;
1493
1308
  }
1494
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
1495
- width: 100%;
1496
- text-align: center;
1497
- margin: 0;
1309
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.disabled {
1310
+ color: rgba(119, 141, 163, 0.3019607843);
1311
+ cursor: default;
1498
1312
  }
1499
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.light:hover {
1500
- background: #d6e4ea;
1501
- }
1502
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item.dark:hover {
1503
- background: #2c303e;
1504
- }
1505
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
1506
- color: black;
1507
- background: #edf2f5;
1508
- }
1509
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
1510
- color: white;
1511
- background: #4a5068;
1512
- }
1513
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.toggled {
1514
- overflow-y: auto;
1515
- overflow-x: hidden;
1516
- -webkit-overflow-scrolling: touch;
1517
- opacity: 1;
1518
- }
1519
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
1520
- max-height: 0;
1521
- opacity: 0;
1522
- overflow: hidden;
1523
- pointer-events: none;
1524
- }
1525
- .kima-card .kima-card-content .single-form .coin-dropdown.light {
1526
- background: #edf2f5 !important;
1527
- }
1528
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1529
- background: #4a5068 !important;
1530
- }
1531
- .kima-card .kima-card-content .single-form .coin-dropdown.toggled {
1532
- border-bottom: none;
1533
- border-radius: 30px 30px 0 0;
1534
- }
1535
- .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
1536
- transform: rotate(135deg);
1537
- top: 1.2em;
1538
- }
1539
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
1540
- background: #4f5156;
1541
- }
1542
- .kima-card .kima-card-content .single-form .expire-time-dropdown {
1543
- position: relative;
1544
- border-radius: 1em;
1545
- padding: 0.5em;
1546
- padding-right: 3em;
1547
- height: 2.8em;
1548
- display: flex;
1549
- align-items: center;
1550
- cursor: pointer;
1551
- box-sizing: content-box;
1552
- }
1553
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-wrapper {
1554
- display: flex;
1555
- align-items: center;
1556
- border-radius: 1em;
1557
- font-size: 1em;
1558
- font-weight: 500;
1559
- padding: 0.2em;
1560
- padding-right: 0.5em;
1561
- padding-left: 0.5em;
1562
- color: black;
1563
- }
1564
- .kima-card .kima-card-content .single-form .expire-time-dropdown.dark .coin-wrapper {
1565
- color: white;
1566
- }
1567
- .kima-card .kima-card-content .single-form .expire-time-dropdown:before {
1568
- position: absolute;
1569
- content: "";
1570
- width: 0.8em;
1571
- height: 0.8em;
1572
- right: 1.1em;
1573
- top: 1.7em;
1574
- border-top: 2px solid;
1575
- border-right: 2px solid;
1576
- border-color: white;
1577
- transform: rotate(-45deg);
1578
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1579
- }
1580
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu {
1581
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
1582
- position: absolute;
1583
- z-index: 100;
1584
- max-height: 10em;
1585
- width: 100%;
1586
- top: calc(100% - 0.5em);
1587
- left: 0;
1588
- overflow: hidden;
1589
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1590
- }
1591
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item {
1592
- padding: 0.5em 1em;
1593
- margin: 0;
1594
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1595
- display: flex;
1596
- align-items: center;
1597
- }
1598
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item p {
1599
- width: 100%;
1600
- text-align: center;
1601
- margin: 0;
1602
- }
1603
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item:hover {
1604
- background: #d6e4ea;
1605
- }
1606
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.light {
1607
- background: white;
1608
- }
1609
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.dark {
1610
- background: #4f5156;
1611
- }
1612
- .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu.collapsed {
1613
- max-height: 0;
1614
- opacity: 0;
1615
- }
1616
- .kima-card .kima-card-content .single-form .expire-time-dropdown.light {
1617
- background: #e3e3e3;
1618
- }
1619
- .kima-card .kima-card-content .single-form .expire-time-dropdown.light:before {
1620
- border-color: black;
1621
- }
1622
- .kima-card .kima-card-content .single-form .expire-time-dropdown.collapsed:before {
1623
- transform: rotate(135deg);
1624
- top: 1.2em;
1625
- }
1626
- .kima-card .kima-card-content .single-form .expire-time-dropdown.dark {
1627
- background: #4f5156;
1628
- }
1629
- .kima-card .kima-card-content .single-form .network-dropdown {
1630
- position: relative;
1631
- width: 230px;
1632
- min-width: 150px;
1633
- max-width: 300px;
1634
- border-radius: 50px;
1635
- border: 0.5px solid #86b8ce;
1636
- padding-left: 15px;
1637
- padding-right: 24px;
1638
- height: 50px;
1639
- display: flex;
1640
- align-items: center;
1641
- cursor: pointer;
1642
- box-sizing: content-box;
1643
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1644
- }
1645
- @media (max-width: 586px) {
1646
- .kima-card .kima-card-content .single-form .network-dropdown {
1647
- width: 185px;
1648
- }
1649
- }
1650
- @media (max-width: 500px) {
1651
- .kima-card .kima-card-content .single-form .network-dropdown {
1652
- width: 100%;
1653
- max-width: none;
1654
- }
1655
- }
1656
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper {
1657
- display: flex;
1658
- justify-content: start;
1659
- align-items: center;
1660
- border-radius: 15px;
1661
- padding: 3px;
1662
- padding-right: 7px;
1663
- color: black;
1664
- z-index: inherit;
1665
- }
1666
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper .icon {
1667
- display: flex;
1668
- justify-content: center;
1669
- padding: 4px 4px;
1670
- border-radius: 40px;
1671
- background-color: white;
1672
- margin-right: 5px;
1673
- }
1674
- .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper span {
1675
- text-align: center;
1676
- }
1677
- .kima-card .kima-card-content .single-form .network-dropdown.dark .network-wrapper {
1678
- color: white;
1679
- }
1680
- .kima-card .kima-card-content .single-form .network-dropdown:before {
1681
- box-sizing: content-box;
1682
- position: absolute;
1683
- width: 0.8em;
1684
- height: 0.8em;
1685
- right: 1.1em;
1686
- top: 1.7em;
1687
- border-top: 2px solid;
1688
- border-right: 2px solid;
1689
- border-color: white;
1690
- transform: rotate(-45deg);
1691
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1692
- }
1693
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
1694
- border: 0.5px solid #86b8ce;
1695
- border-top: none;
1696
- border-radius: 0 0 30px 30px;
1697
- position: absolute;
1698
- z-index: 1000;
1699
- max-height: 200px;
1700
- width: 100%;
1701
- top: 100%;
1702
- left: -0.5px;
1703
- overflow-x: clip;
1704
- overflow-y: scroll;
1705
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1706
- }
1707
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
1708
- margin: 7px 14px;
1709
- padding: 11px 7px;
1710
- border-radius: 20px;
1711
- width: 220px;
1712
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
1713
- display: flex;
1714
- justify-content: start;
1715
- flex-direction: row;
1716
- align-items: center;
1717
- }
1718
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.disabled {
1719
- color: rgba(119, 141, 163, 0.3019607843);
1720
- cursor: default;
1721
- }
1722
- .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip {
1723
- position: relative;
1313
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip {
1314
+ position: relative;
1724
1315
  }
1725
1316
  .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item.has-tooltip .tooltip {
1726
1317
  visibility: hidden;
@@ -2653,346 +2244,934 @@
2653
2244
  border-top: 1px solid #e3e3e3;
2654
2245
  padding: 16px 20px;
2655
2246
  }
2656
- .kima-card .kima-card-content .fee-deduction-radio-container.dark {
2657
- color: white;
2247
+ .kima-card .kima-card-content .fee-deduction-radio-container.dark {
2248
+ color: white;
2249
+ }
2250
+ @media (max-width: 768px) {
2251
+ .kima-card .kima-card-content .fee-deduction-radio-container {
2252
+ padding: 16px 0;
2253
+ margin-bottom: 20px;
2254
+ }
2255
+ }
2256
+ .kima-card .kima-card-content .fee-instruction {
2257
+ font-weight: bold;
2258
+ margin-bottom: 8px;
2259
+ }
2260
+ .kima-card .kima-card-content .fee-options {
2261
+ display: flex;
2262
+ flex-direction: column;
2263
+ gap: 12px;
2264
+ }
2265
+ .kima-card .kima-card-content .fee-option {
2266
+ display: flex;
2267
+ align-items: center; /* Ensures both text and radio button align */
2268
+ gap: 10px;
2269
+ cursor: pointer;
2270
+ }
2271
+ .kima-card .kima-card-content .fee-option.disabled {
2272
+ opacity: 0.5;
2273
+ }
2274
+ .kima-card .kima-card-content .fee-option input[type=radio] {
2275
+ appearance: none;
2276
+ width: 18px;
2277
+ height: 18px;
2278
+ border: 1px solid #86b8ce;
2279
+ border-radius: 50%;
2280
+ outline: none;
2281
+ cursor: pointer;
2282
+ margin: 0;
2283
+ display: flex;
2284
+ justify-content: center;
2285
+ align-items: center;
2286
+ flex-shrink: 0;
2287
+ aspect-ratio: 1;
2288
+ position: relative;
2289
+ }
2290
+ .kima-card .kima-card-content .fee-option input[type=radio]:checked::before {
2291
+ content: "";
2292
+ width: 10px;
2293
+ height: 10px;
2294
+ background-color: #86b8ce;
2295
+ border-radius: 50%;
2296
+ display: block;
2297
+ position: absolute;
2298
+ top: 50%;
2299
+ left: 50%;
2300
+ transform: translate(-50%, -50%);
2301
+ }
2302
+ .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2303
+ border-color: rgba(119, 141, 163, 0.3019607843);
2304
+ background-color: transparent;
2305
+ cursor: not-allowed;
2306
+ }
2307
+ .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2308
+ background-color: rgba(119, 141, 163, 0.3019607843);
2309
+ }
2310
+ .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2311
+ color: rgba(119, 141, 163, 0.3019607843);
2312
+ cursor: not-allowed;
2313
+ }
2314
+ .kima-card .kima-card-content .radio-label {
2315
+ line-height: 1.2;
2316
+ font-size: 14px;
2317
+ color: #333;
2318
+ flex-grow: 1;
2319
+ word-break: break-word;
2320
+ }
2321
+ .kima-card .kima-card-content .radio-label.dark {
2322
+ color: white;
2323
+ }
2324
+ .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2325
+ border-color: rgba(119, 141, 163, 0.3019607843);
2326
+ background-color: transparent;
2327
+ cursor: not-allowed;
2328
+ }
2329
+ .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2330
+ background-color: rgba(119, 141, 163, 0.3019607843);
2331
+ }
2332
+ .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2333
+ color: rgba(119, 141, 163, 0.3019607843);
2334
+ cursor: not-allowed;
2335
+ }
2336
+ .kima-card .kima-card-content .transaction-status-message {
2337
+ display: flex;
2338
+ flex-direction: column;
2339
+ margin-top: 20px;
2340
+ font-family: "Manrope";
2341
+ font-size: 14px;
2342
+ text-align: justify;
2343
+ }
2344
+ .kima-card .kima-card-content .transaction-status-message h2 {
2345
+ font-size: 14px;
2346
+ }
2347
+ .kima-card .kima-card-content .transaction-status-message .transaction-copy {
2348
+ display: flex;
2349
+ flex-direction: row;
2350
+ justify-content: center;
2351
+ font-size: 24px;
2352
+ margin-top: 10px;
2353
+ align-items: center;
2354
+ gap: 10px;
2355
+ }
2356
+ .kima-card .kima-card-content .transaction-status-message .transaction-copy h3 {
2357
+ margin: 0;
2358
+ }
2359
+ .kima-card .card-item {
2360
+ width: 100%;
2361
+ height: 80px;
2362
+ border-radius: 24px;
2363
+ display: flex;
2364
+ align-items: center;
2365
+ cursor: pointer;
2366
+ text-decoration: none;
2367
+ color: inherit;
2368
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2369
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2370
+ }
2371
+ .kima-card .card-item .wallet-item {
2372
+ padding: 0 25px;
2373
+ gap: 20px;
2374
+ display: flex;
2375
+ flex-direction: row;
2376
+ align-items: center;
2377
+ }
2378
+ .kima-card .card-item img,
2379
+ .kima-card .card-item svg {
2380
+ width: 60px;
2381
+ height: 60px;
2382
+ }
2383
+ @media (max-width: 500px) {
2384
+ .kima-card .card-item img,
2385
+ .kima-card .card-item svg {
2386
+ width: 40px;
2387
+ height: 40px;
2388
+ }
2389
+ }
2390
+ .kima-card .card-item.light {
2391
+ background: #edf2f5;
2392
+ }
2393
+ .kima-card .card-item.dark {
2394
+ background: #242732;
2395
+ }
2396
+ .kima-card .card-item.selected {
2397
+ border-color: #86b8ce;
2398
+ }
2399
+ .kima-card .kima-card-network-label {
2400
+ display: flex;
2401
+ align-items: center;
2402
+ gap: 10px;
2403
+ }
2404
+ .kima-card .kima-card-network-label .label {
2405
+ display: flex;
2406
+ border-radius: 1em;
2407
+ font-size: 1em;
2408
+ column-gap: 0.3em;
2409
+ align-items: center;
2410
+ padding: 0.2em 0.4em;
2411
+ }
2412
+ .kima-card .kima-card-network-label .label .icon-wrapper {
2413
+ display: flex;
2414
+ justify-content: center;
2415
+ align-items: center;
2416
+ width: 1.2em;
2417
+ height: 1.2em;
2418
+ }
2419
+ .kima-card .kima-card-network-label .label .icon-wrapper svg {
2420
+ width: 100%;
2421
+ height: 100%;
2422
+ }
2423
+ .kima-card .kima-card-network-label .warning-container {
2424
+ margin-left: 1em;
2425
+ display: flex;
2426
+ align-items: center;
2427
+ column-gap: 0.5em;
2428
+ cursor: pointer;
2429
+ }
2430
+ .kima-card .primary-button-wrapper {
2431
+ background: linear-gradient(to right, #8d77cc, #7bd5fb, #b2f79c);
2432
+ padding: 2px;
2433
+ border-radius: 30px;
2434
+ max-height: 48px;
2435
+ position: relative;
2436
+ display: inline-flex;
2437
+ align-items: center;
2438
+ }
2439
+ @media (max-width: 500px) {
2440
+ .kima-card .primary-button-wrapper {
2441
+ width: 100%;
2442
+ }
2443
+ }
2444
+ .kima-card .primary-button {
2445
+ background: black;
2446
+ border-radius: 30px;
2447
+ width: fit-content;
2448
+ height: 45px;
2449
+ padding: 13px 27px;
2450
+ cursor: pointer;
2451
+ color: white;
2452
+ font-weight: bold;
2453
+ font-family: inherit;
2454
+ border: none;
2455
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2456
+ display: flex;
2457
+ align-items: center;
2458
+ justify-content: center;
2459
+ letter-spacing: 0;
2460
+ font-size: 16px;
2461
+ }
2462
+ .kima-card .primary-button.has-info {
2463
+ padding-right: 48px;
2464
+ }
2465
+ .kima-card .primary-button.light {
2466
+ background-color: black;
2467
+ }
2468
+ .kima-card .primary-button:hover, .kima-card .primary-button:disabled {
2469
+ opacity: 0.7;
2470
+ }
2471
+ .kima-card .primary-button:disabled {
2472
+ cursor: default;
2473
+ }
2474
+ .kima-card .primary-button .loading-indicator {
2475
+ margin-right: 7px;
2476
+ }
2477
+ .kima-card .primary-button .loading-indicator svg {
2478
+ width: 20px;
2479
+ height: 20px;
2480
+ margin-top: 4px;
2481
+ fill: white !important;
2482
+ }
2483
+ @media (max-width: 500px) {
2484
+ .kima-card .primary-button:hover {
2485
+ opacity: 1;
2486
+ }
2487
+ .kima-card .primary-button:hover:focus:active {
2488
+ opacity: 0.7;
2489
+ }
2490
+ }
2491
+ .kima-card .permit2-button-info {
2492
+ position: absolute;
2493
+ top: 50%;
2494
+ right: 14px;
2495
+ transform: translateY(-50%);
2496
+ z-index: 20;
2497
+ display: flex;
2498
+ align-items: center;
2499
+ }
2500
+ .kima-card .permit2-button-info:hover .permit2-tooltip, .kima-card .permit2-button-info:focus-within .permit2-tooltip {
2501
+ opacity: 1;
2502
+ visibility: visible;
2503
+ transform: translateY(0);
2504
+ }
2505
+ .kima-card .permit2-button-info .permit2-info-icon {
2506
+ appearance: none;
2507
+ width: 18px;
2508
+ min-width: 18px;
2509
+ max-width: 18px;
2510
+ flex: 0 0 18px;
2511
+ height: 18px;
2512
+ min-height: 18px;
2513
+ max-height: 18px;
2514
+ display: flex;
2515
+ align-items: center;
2516
+ justify-content: center;
2517
+ border-radius: 999px;
2518
+ border: 1px solid rgba(255, 255, 255, 0.45);
2519
+ background: rgba(255, 255, 255, 0.12);
2520
+ color: white;
2521
+ font-size: 11px;
2522
+ font-weight: 800;
2523
+ line-height: 1;
2524
+ cursor: help;
2525
+ user-select: none;
2526
+ padding: 0;
2527
+ margin: 0;
2528
+ outline: none;
2529
+ }
2530
+ .kima-card .permit2-tooltip {
2531
+ position: absolute;
2532
+ right: -2px;
2533
+ bottom: calc(100% + 12px);
2534
+ width: 260px;
2535
+ padding: 12px 14px;
2536
+ border-radius: 14px;
2537
+ border: 1px solid rgba(148, 163, 184, 0.28);
2538
+ box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24);
2539
+ opacity: 0;
2540
+ visibility: hidden;
2541
+ transform: translateY(6px);
2542
+ transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
2543
+ pointer-events: auto;
2544
+ white-space: normal;
2545
+ z-index: 30;
2546
+ }
2547
+ .kima-card .permit2-tooltip.open {
2548
+ opacity: 1;
2549
+ visibility: visible;
2550
+ transform: translateY(0);
2551
+ }
2552
+ .kima-card .permit2-tooltip::after {
2553
+ content: "";
2554
+ position: absolute;
2555
+ top: calc(100% - 1px);
2556
+ right: 8px;
2557
+ border-width: 8px 8px 0 8px;
2558
+ border-style: solid;
2559
+ border-color: inherit transparent transparent transparent;
2560
+ }
2561
+ .kima-card .permit2-tooltip.light {
2562
+ background: #ffffff;
2563
+ color: #111827;
2564
+ border-color: rgba(148, 163, 184, 0.4);
2565
+ }
2566
+ .kima-card .permit2-tooltip.dark {
2567
+ background: #111827;
2568
+ color: #f8fafc;
2569
+ border-color: rgba(148, 163, 184, 0.28);
2570
+ }
2571
+ .kima-card .permit2-tooltip p {
2572
+ margin: 0 0 8px 0;
2573
+ display: block;
2574
+ font-size: 12px;
2575
+ line-height: 1.45;
2576
+ }
2577
+ @media (max-width: 500px) {
2578
+ .kima-card .permit2-tooltip {
2579
+ width: min(280px, 100vw - 32px);
2580
+ right: -12px;
2581
+ }
2582
+ }
2583
+ .kima-card .permit2-tooltip-link {
2584
+ color: inherit;
2585
+ font-size: 12px;
2586
+ font-weight: 700;
2587
+ text-decoration: underline;
2588
+ }
2589
+ .kima-card .secondary-button {
2590
+ border-radius: 30px;
2591
+ width: fit-content;
2592
+ padding: 7px 27px;
2593
+ height: 50px;
2594
+ background-color: transparent;
2595
+ cursor: pointer;
2596
+ font-weight: bold;
2597
+ font-family: inherit;
2598
+ border-radius: 30px;
2599
+ border: 1px solid;
2600
+ letter-spacing: 0;
2601
+ font-size: 16px;
2602
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2603
+ display: flex;
2604
+ align-items: center;
2605
+ justify-content: center;
2606
+ gap: 10px;
2607
+ }
2608
+ .kima-card .secondary-button.dark {
2609
+ color: white;
2610
+ border-color: white;
2611
+ }
2612
+ .kima-card .secondary-button.light {
2613
+ color: black;
2614
+ border-color: black;
2615
+ }
2616
+ .kima-card .secondary-button:hover, .kima-card .secondary-button:disabled {
2617
+ opacity: 0.7;
2618
+ }
2619
+ .kima-card .secondary-button:disabled {
2620
+ cursor: default;
2621
+ }
2622
+ @media (max-width: 500px) {
2623
+ .kima-card .secondary-button {
2624
+ width: 8em;
2625
+ }
2626
+ .kima-card .secondary-button:hover {
2627
+ opacity: 1;
2628
+ }
2629
+ .kima-card .secondary-button:hover:focus:active {
2630
+ opacity: 0.7;
2631
+ }
2632
+ }
2633
+ .kima-card .tx-button {
2634
+ margin-right: 1em;
2635
+ column-gap: 0.5em;
2636
+ width: 5em;
2637
+ display: flex;
2638
+ justify-content: center;
2639
+ align-items: center;
2640
+ }
2641
+ .kima-card .dropdown-menu {
2642
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
2643
+ position: absolute;
2644
+ z-index: 100;
2645
+ padding: 0.5em 0;
2646
+ max-height: 10em;
2647
+ width: max-content;
2648
+ overflow: hidden;
2649
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2650
+ }
2651
+ .kima-card .dropdown-menu .menu-item {
2652
+ padding: 0.5em 1em;
2653
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2654
+ }
2655
+ .kima-card .dropdown-menu .menu-item:hover {
2656
+ background: #d6e4ea;
2657
+ }
2658
+ .kima-card .dropdown-menu.light {
2659
+ background: white;
2660
+ }
2661
+ .kima-card .dropdown-menu.dark {
2662
+ background: #1b1e25;
2663
+ }
2664
+ .kima-card .dropdown-menu.closed {
2665
+ max-height: 0;
2666
+ opacity: 0;
2667
+ pointer-events: none;
2668
+ }
2669
+ .kima-card .error-tooltip.dark,
2670
+ .kima-card .popup-tooltip.dark {
2671
+ color: black;
2672
+ background-color: white;
2673
+ }
2674
+ @keyframes kima-pulse {
2675
+ 0%, 100% {
2676
+ transform: scale(1);
2677
+ }
2678
+ 50% {
2679
+ transform: scale(1.02);
2680
+ }
2681
+ }
2682
+ @keyframes kima-dot {
2683
+ 0%, 100% {
2684
+ transform: translateY(0);
2685
+ opacity: 0.4;
2686
+ }
2687
+ 50% {
2688
+ transform: translateY(-2px);
2689
+ opacity: 1;
2690
+ }
2691
+ }
2692
+
2693
+ @font-face {
2694
+ font-family: "Manrope";
2695
+ src: url("./fonts/Manrope-ExtraLight.eot");
2696
+ src: url("./fonts/Manrope-ExtraLight.eot?#iefix") format("embedded-opentype"), url("./fonts/Manrope-ExtraLight.woff2") format("woff2"), url("./fonts/Manrope-ExtraLight.woff") format("woff");
2697
+ font-weight: 200;
2698
+ font-style: normal;
2699
+ font-display: swap;
2700
+ }
2701
+ @font-face {
2702
+ font-family: "Sohne";
2703
+ src: url("./fonts/SohneBreit-Buch.eot");
2704
+ src: url("./fonts/SohneBreit-Buch.eot?#iefix") format("embedded-opentype"), url("./fonts/SohneBreit-Buch.woff2") format("woff2"), url("./fonts/SohneBreit-Buch.woff") format("woff");
2705
+ font-weight: normal;
2706
+ font-style: normal;
2707
+ font-display: swap;
2708
+ }
2709
+ .kima-card {
2710
+ position: relative;
2711
+ overflow: visible;
2712
+ }
2713
+ .kima-card .toast-history {
2714
+ position: relative;
2715
+ display: flex;
2716
+ align-items: center;
2717
+ margin-right: 8px;
2718
+ z-index: 10;
2719
+ }
2720
+ .kima-card .toast-history .toast-history-button {
2721
+ width: 32px;
2722
+ height: 32px;
2723
+ border-radius: 50%;
2724
+ background: transparent;
2725
+ cursor: pointer;
2726
+ display: inline-flex;
2727
+ align-items: center;
2728
+ justify-content: center;
2729
+ }
2730
+ .kima-card .toast-history .toast-history-panel {
2731
+ position: absolute;
2732
+ top: calc(100% + 8px);
2733
+ right: 0;
2734
+ z-index: 9999;
2735
+ width: 260px;
2736
+ max-height: 220px;
2737
+ overflow: auto;
2738
+ border-radius: 14px;
2739
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2740
+ padding: 10px 12px;
2741
+ box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
2742
+ }
2743
+ .kima-card .toast-history .toast-history-panel.light {
2744
+ background: #f7f8f9;
2745
+ color: black;
2746
+ }
2747
+ .kima-card .toast-history .toast-history-panel.dark {
2748
+ background: #242732;
2749
+ color: white;
2750
+ }
2751
+ .kima-card .toast-history .toast-history-header {
2752
+ font-size: 13px;
2753
+ font-weight: 600;
2754
+ margin-bottom: 8px;
2755
+ }
2756
+ .kima-card .toast-history .toast-history-list {
2757
+ display: flex;
2758
+ flex-direction: column;
2759
+ gap: 8px;
2760
+ }
2761
+ .kima-card .toast-history .toast-history-item {
2762
+ display: flex;
2763
+ align-items: baseline;
2764
+ justify-content: space-between;
2765
+ gap: 10px;
2766
+ font-size: 12px;
2767
+ }
2768
+ .kima-card .toast-history .toast-history-message {
2769
+ flex: 1;
2770
+ line-height: 1.3;
2771
+ }
2772
+ .kima-card .toast-history .toast-history-time {
2773
+ opacity: 0.7;
2774
+ white-space: nowrap;
2775
+ }
2776
+ .kima-card .invalid-option-banner {
2777
+ font-size: 14px;
2778
+ background-color: red;
2779
+ color: #edf2f5;
2780
+ padding: 10px 25px;
2781
+ margin: 0;
2782
+ border-radius: 40px 40px 0 0;
2783
+ text-align: justify;
2784
+ }
2785
+ .kima-card .kima-card-header {
2786
+ display: flex;
2787
+ flex-direction: column;
2788
+ position: relative;
2789
+ z-index: 5;
2790
+ }
2791
+ .kima-card .kima-card-header .topbar {
2792
+ display: flex;
2793
+ align-items: center;
2794
+ justify-content: space-between;
2795
+ }
2796
+ @media (max-width: 768px) {
2797
+ .kima-card .kima-card-header .topbar {
2798
+ flex-direction: column-reverse;
2799
+ align-items: flex-start;
2800
+ }
2801
+ }
2802
+ .kima-card .kima-card-header .topbar .title {
2803
+ display: flex;
2804
+ align-items: center;
2805
+ font-family: "Sohne";
2806
+ font-weight: 400;
2807
+ letter-spacing: 1px;
2808
+ font-size: 26px;
2809
+ }
2810
+ @media (max-width: 768px) {
2811
+ .kima-card .kima-card-header .topbar .title {
2812
+ font-size: 24px;
2813
+ }
2814
+ }
2815
+ .kima-card .kima-card-header .topbar .title.skeleton {
2816
+ background: #778da3;
2817
+ border-radius: 50px;
2818
+ height: 25px;
2819
+ width: 60%;
2820
+ animation: pulse 1.5s ease-in-out infinite;
2821
+ margin-bottom: 20px;
2822
+ }
2823
+ .kima-card .kima-card-header .topbar .title .transaction-title {
2824
+ margin-right: 10px;
2825
+ font-size: 26px;
2826
+ text-align: start;
2827
+ }
2828
+ @media (max-width: 768px) {
2829
+ .kima-card .kima-card-header .topbar .title .transaction-title {
2830
+ font-size: 24px;
2831
+ }
2832
+ }
2833
+ .kima-card .kima-card-header .topbar .title span {
2834
+ color: #5aa0db;
2835
+ font-weight: bold;
2836
+ margin: 0 0 0 1em;
2837
+ }
2838
+ .kima-card .kima-card-header .topbar .title .title-icon {
2839
+ display: inline-block;
2840
+ vertical-align: middle;
2841
+ }
2842
+ .kima-card .kima-card-header .topbar .title .percent {
2843
+ margin-left: 0.5em;
2844
+ font-weight: bold;
2845
+ }
2846
+ .kima-card .kima-card-header .topbar .control-buttons {
2847
+ display: flex;
2848
+ align-items: center;
2849
+ gap: 8px;
2850
+ position: relative;
2851
+ z-index: 5;
2852
+ overflow: visible;
2853
+ }
2854
+ .kima-card .kima-card-header .topbar .control-buttons.complete {
2855
+ width: 100%;
2856
+ }
2857
+ @media (max-width: 768px) {
2858
+ .kima-card .kima-card-header .topbar .control-buttons {
2859
+ margin-left: auto;
2860
+ }
2861
+ }
2862
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button {
2863
+ background: transparent;
2864
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2865
+ border-radius: 40px;
2866
+ cursor: pointer;
2867
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2868
+ }
2869
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button.minimize {
2870
+ border: none;
2871
+ }
2872
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:nth-of-type(2) {
2873
+ margin-left: 13px;
2874
+ padding: 4px 6px;
2875
+ }
2876
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
2877
+ opacity: 0.6;
2878
+ }
2879
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
2880
+ cursor: default;
2881
+ }
2882
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
2883
+ width: 30px;
2884
+ height: 22px;
2885
+ padding: 5px;
2658
2886
  }
2659
2887
  @media (max-width: 768px) {
2660
- .kima-card .kima-card-content .fee-deduction-radio-container {
2661
- padding: 16px 0;
2662
- margin-bottom: 20px;
2888
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
2889
+ width: 25px;
2663
2890
  }
2664
2891
  }
2665
- .kima-card .kima-card-content .fee-instruction {
2666
- font-weight: bold;
2667
- margin-bottom: 8px;
2668
- }
2669
- .kima-card .kima-card-content .fee-options {
2670
- display: flex;
2671
- flex-direction: column;
2672
- gap: 12px;
2673
- }
2674
- .kima-card .kima-card-content .fee-option {
2675
- display: flex;
2676
- align-items: center; /* Ensures both text and radio button align */
2677
- gap: 10px;
2678
- cursor: pointer;
2679
- }
2680
- .kima-card .kima-card-content .fee-option.disabled {
2681
- opacity: 0.5;
2892
+ .kima-card .kima-card-header .topbar .control-buttons .toast-history-button {
2893
+ margin-left: 0;
2894
+ padding: 0;
2682
2895
  }
2683
- .kima-card .kima-card-content .fee-option input[type=radio] {
2684
- appearance: none;
2685
- width: 18px;
2686
- height: 18px;
2687
- border: 1px solid #86b8ce;
2688
- border-radius: 50%;
2689
- outline: none;
2690
- cursor: pointer;
2691
- margin: 0;
2896
+ .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button {
2692
2897
  display: flex;
2693
2898
  justify-content: center;
2694
2899
  align-items: center;
2695
- flex-shrink: 0;
2696
- aspect-ratio: 1;
2697
- position: relative;
2698
- }
2699
- .kima-card .kima-card-content .fee-option input[type=radio]:checked::before {
2700
- content: "";
2701
- width: 10px;
2702
- height: 10px;
2703
- background-color: #86b8ce;
2704
- border-radius: 50%;
2705
- display: block;
2706
- position: absolute;
2707
- top: 50%;
2708
- left: 50%;
2709
- transform: translate(-50%, -50%);
2900
+ padding: 4px;
2901
+ width: 50px;
2902
+ height: 50px;
2903
+ border-radius: 9999px;
2904
+ background: transparent;
2905
+ cursor: pointer;
2906
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2710
2907
  }
2711
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2712
- border-color: rgba(119, 141, 163, 0.3019607843);
2713
- background-color: transparent;
2714
- cursor: not-allowed;
2908
+ .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
2909
+ width: 20px;
2910
+ height: 25px;
2715
2911
  }
2716
- .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2717
- background-color: rgba(119, 141, 163, 0.3019607843);
2912
+ @media (max-width: 768px) {
2913
+ .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
2914
+ width: 20px;
2915
+ height: 20px;
2916
+ }
2718
2917
  }
2719
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2720
- color: rgba(119, 141, 163, 0.3019607843);
2721
- cursor: not-allowed;
2918
+ .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
2919
+ opacity: 0.6;
2722
2920
  }
2723
- .kima-card .kima-card-content .radio-label {
2724
- line-height: 1.2;
2725
- font-size: 14px;
2726
- color: #333;
2727
- flex-grow: 1;
2728
- word-break: break-word;
2921
+ .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
2922
+ cursor: default;
2729
2923
  }
2730
- .kima-card .kima-card-content .radio-label.dark {
2731
- color: white;
2924
+ .kima-card .kima-card-header .topbar .control-buttons a {
2925
+ margin-left: auto;
2926
+ color: #778da3;
2927
+ text-decoration: none;
2928
+ cursor: pointer;
2732
2929
  }
2733
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled {
2734
- border-color: rgba(119, 141, 163, 0.3019607843);
2735
- background-color: transparent;
2736
- cursor: not-allowed;
2930
+ .kima-card .kima-card-header .topbar .control-buttons .menu-button {
2931
+ font-family: "Manrope";
2932
+ font-size: 14px;
2933
+ font-weight: 500;
2934
+ padding: 4px 10px 4px 10px;
2935
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2936
+ border-radius: 50px;
2737
2937
  }
2738
- .kima-card .kima-card-content .fee-option input[type=radio]:checked:disabled::before {
2739
- background-color: rgba(119, 141, 163, 0.3019607843);
2938
+ .kima-card .kima-card-header .topbar .control-buttons .menu-button:hover {
2939
+ background-color: #d6e4ea;
2740
2940
  }
2741
- .kima-card .kima-card-content .fee-option input[type=radio]:disabled + .radio-label {
2742
- color: rgba(119, 141, 163, 0.3019607843);
2743
- cursor: not-allowed;
2941
+ @media (max-width: 500px) {
2942
+ .kima-card .kima-card-header .topbar .control-buttons .menu-button {
2943
+ font-size: 12px;
2944
+ }
2744
2945
  }
2745
- .kima-card .kima-card-content .transaction-status-message {
2746
- display: flex;
2747
- flex-direction: column;
2748
- margin-top: 20px;
2946
+ .kima-card .kima-card-header .topbar .control-buttons .reset-button {
2749
2947
  font-family: "Manrope";
2750
2948
  font-size: 14px;
2751
- text-align: justify;
2949
+ font-weight: 500;
2950
+ padding: 4px 16px;
2951
+ border: 1px solid rgba(119, 141, 163, 0.3019607843);
2952
+ border-radius: 50px;
2953
+ background-color: #d6e4ea;
2954
+ color: #778da3;
2955
+ cursor: pointer;
2752
2956
  }
2753
- .kima-card .kima-card-content .transaction-status-message h2 {
2754
- font-size: 14px;
2957
+ .kima-card .kima-card-header .topbar .control-buttons .reset-button:hover {
2958
+ opacity: 75%;
2755
2959
  }
2756
- .kima-card .kima-card-content .transaction-status-message .transaction-copy {
2960
+ @media (max-width: 500px) {
2961
+ .kima-card .kima-card-header .topbar .control-buttons .reset-button {
2962
+ font-size: 12px;
2963
+ }
2964
+ }
2965
+ .kima-card .kima-card-header .topbar .control-buttons .maximize {
2966
+ color: #86b8ce;
2967
+ cursor: pointer;
2968
+ }
2969
+ .kima-card .kima-card-header .header-network-labels {
2757
2970
  display: flex;
2758
2971
  flex-direction: row;
2759
- justify-content: center;
2760
- font-size: 24px;
2761
- margin-top: 10px;
2762
2972
  align-items: center;
2763
- gap: 10px;
2973
+ gap: 12px;
2974
+ margin-top: 20px;
2975
+ margin-bottom: 10px;
2764
2976
  }
2765
- .kima-card .kima-card-content .transaction-status-message .transaction-copy h3 {
2766
- margin: 0;
2977
+ .kima-card .kima-card-header .header-network-labels p {
2978
+ padding: 0;
2767
2979
  }
2768
- .kima-card .card-item {
2769
- width: 100%;
2770
- height: 80px;
2771
- border-radius: 24px;
2772
- display: flex;
2773
- align-items: center;
2774
- cursor: pointer;
2775
- text-decoration: none;
2776
- color: inherit;
2777
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2778
- border: 1px solid rgba(119, 141, 163, 0.3019607843);
2980
+ .kima-card .kima-card-header .header-network-labels .arrow {
2981
+ transform: rotate(-90deg);
2779
2982
  }
2780
- .kima-card .card-item .wallet-item {
2781
- padding: 0 25px;
2782
- gap: 20px;
2983
+ .kima-card .kima-card-header .kima-card-network-label {
2783
2984
  display: flex;
2784
- flex-direction: row;
2785
- align-items: center;
2985
+ padding: 10px 14px;
2986
+ font-weight: 600;
2987
+ border-radius: 50px;
2786
2988
  }
2787
- .kima-card .card-item img,
2788
- .kima-card .card-item svg {
2789
- width: 60px;
2790
- height: 60px;
2989
+ .kima-card .kima-card-header .kima-card-network-label h3 {
2990
+ font-size: 12px;
2991
+ }
2992
+ .kima-card .kima-card-header .kima-card-network-label .icon {
2993
+ border-radius: 9999px;
2994
+ background-color: white;
2995
+ padding: 4px;
2996
+ display: flex;
2997
+ justify-content: center;
2791
2998
  }
2792
2999
  @media (max-width: 500px) {
2793
- .kima-card .card-item img,
2794
- .kima-card .card-item svg {
2795
- width: 40px;
2796
- height: 40px;
3000
+ .kima-card .kima-card-header .kima-card-network-label {
3001
+ font-size: 14px;
2797
3002
  }
2798
3003
  }
2799
- .kima-card .card-item.light {
2800
- background: #edf2f5;
3004
+ .kima-card .kima-card-header .kima-card-network-label.light {
3005
+ background-color: #d6e4ea;
3006
+ color: black;
2801
3007
  }
2802
- .kima-card .card-item.dark {
2803
- background: #242732;
3008
+ .kima-card .kima-card-header .kima-card-network-label.dark {
3009
+ background-color: #4a5068;
3010
+ color: white;
2804
3011
  }
2805
- .kima-card .card-item.selected {
2806
- border-color: #86b8ce;
3012
+ .kima-card .kima-card-header p {
3013
+ margin: 0;
3014
+ border-radius: 50px;
3015
+ padding: 1em 1.5em;
2807
3016
  }
2808
- .kima-card .kima-card-network-label {
2809
- display: flex;
2810
- align-items: center;
2811
- gap: 10px;
3017
+ .kima-card .kima-card-header p.light {
3018
+ background-color: #edf2f5;
3019
+ color: black;
2812
3020
  }
2813
- .kima-card .kima-card-network-label .label {
2814
- display: flex;
2815
- border-radius: 1em;
2816
- font-size: 1em;
2817
- column-gap: 0.3em;
2818
- align-items: center;
2819
- padding: 0.2em 0.4em;
3021
+ .kima-card .kima-card-header p.dark {
3022
+ background-color: #778da3;
3023
+ color: white;
2820
3024
  }
2821
- .kima-card .kima-card-network-label .label .icon-wrapper {
3025
+ .kima-card .kima-card-content {
3026
+ position: relative;
3027
+ z-index: 1;
3028
+ }
3029
+ .kima-card .kima-card-footer {
2822
3030
  display: flex;
2823
- justify-content: center;
2824
3031
  align-items: center;
2825
- width: 1.2em;
2826
- height: 1.2em;
3032
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
3033
+ max-height: 50px;
3034
+ margin-top: 20px;
3035
+ opacity: 1;
3036
+ box-sizing: content-box;
3037
+ font-family: "Manrope";
3038
+ font-size: 14px;
3039
+ font-weight: 700;
2827
3040
  }
2828
- .kima-card .kima-card-network-label .label .icon-wrapper svg {
2829
- width: 100%;
2830
- height: 100%;
3041
+ @media (min-width: 768px) {
3042
+ .kima-card .kima-card-footer {
3043
+ margin-bottom: 20px;
3044
+ }
2831
3045
  }
2832
- .kima-card .kima-card-network-label .warning-container {
2833
- margin-left: 1em;
2834
- display: flex;
2835
- align-items: center;
2836
- column-gap: 0.5em;
2837
- cursor: pointer;
3046
+ @media (max-width: 768px) {
3047
+ .kima-card .kima-card-footer {
3048
+ padding-top: 20px;
3049
+ }
3050
+ .kima-card .kima-card-footer p {
3051
+ display: none;
3052
+ }
3053
+ .kima-card .kima-card-footer.confirm {
3054
+ margin-top: 50px;
3055
+ }
2838
3056
  }
2839
- .kima-card .primary-button-wrapper {
2840
- background: linear-gradient(to right, #8d77cc, #7bd5fb, #b2f79c);
2841
- padding: 2px;
2842
- border-radius: 30px;
2843
- max-height: 48px;
3057
+ @media (max-width: 768px) and (max-width: 500px) {
3058
+ .kima-card .kima-card-footer.confirm {
3059
+ margin-top: 0;
3060
+ }
2844
3061
  }
2845
3062
  @media (max-width: 500px) {
2846
- .kima-card .primary-button-wrapper {
3063
+ .kima-card .kima-card-footer {
3064
+ padding: 0;
2847
3065
  width: 100%;
2848
3066
  }
2849
3067
  }
2850
- .kima-card .primary-button {
2851
- background: black;
2852
- border-radius: 30px;
2853
- width: fit-content;
2854
- height: 45px;
2855
- padding: 13px 27px;
2856
- cursor: pointer;
2857
- color: white;
2858
- font-weight: bold;
2859
- font-family: inherit;
2860
- border: none;
2861
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
3068
+ .kima-card .kima-card-footer .button-group {
2862
3069
  display: flex;
2863
3070
  align-items: center;
2864
- justify-content: center;
2865
- letter-spacing: 0;
2866
- font-size: 16px;
3071
+ box-sizing: content-box;
3072
+ margin-left: auto;
3073
+ flex-direction: row;
3074
+ gap: 20px;
3075
+ margin-bottom: 30px;
2867
3076
  }
2868
- .kima-card .primary-button.light {
2869
- background-color: black;
3077
+ .kima-card .kima-card-footer .button-group.skeleton {
3078
+ align-items: flex-end;
2870
3079
  }
2871
- .kima-card .primary-button:hover, .kima-card .primary-button:disabled {
2872
- opacity: 0.7;
3080
+ .kima-card .kima-card-footer .button-group .skeleton {
3081
+ background: #778da3;
3082
+ border-radius: 50px;
3083
+ height: 30px;
3084
+ width: 100px;
3085
+ animation: pulse 1.5s ease-in-out infinite;
2873
3086
  }
2874
- .kima-card .primary-button:disabled {
2875
- cursor: default;
3087
+ @media (max-width: 500px) {
3088
+ .kima-card .kima-card-footer .button-group {
3089
+ margin-top: 0px;
3090
+ flex-direction: column;
3091
+ width: 100%;
3092
+ }
2876
3093
  }
2877
- .kima-card .primary-button .loading-indicator {
2878
- margin-right: 7px;
3094
+ .kima-card .kima-card-footer .button-group button {
3095
+ width: 120px;
3096
+ padding: 5px 10px;
2879
3097
  }
2880
- .kima-card .primary-button .loading-indicator svg {
2881
- width: 20px;
2882
- height: 20px;
2883
- margin-top: 4px;
2884
- fill: white !important;
3098
+ @media (max-width: 500px) {
3099
+ .kima-card .kima-card-footer .button-group button {
3100
+ width: 100%;
3101
+ }
3102
+ }
3103
+ @media (min-width: 565px) {
3104
+ .kima-card .kima-card-footer .button-group button {
3105
+ width: 140px;
3106
+ }
3107
+ }
3108
+ .kima-card .kima-card-footer p {
3109
+ font-size: 0.8em;
3110
+ margin: 0 0 0 1em;
2885
3111
  }
2886
3112
  @media (max-width: 500px) {
2887
- .kima-card .primary-button:hover {
2888
- opacity: 1;
3113
+ .kima-card .kima-card-footer {
3114
+ flex-direction: column;
3115
+ max-height: unset;
2889
3116
  }
2890
- .kima-card .primary-button:hover:focus:active {
2891
- opacity: 0.7;
3117
+ .kima-card .kima-card-footer.bridge {
3118
+ margin-top: 0;
3119
+ }
3120
+ .kima-card .kima-card-footer .button-group {
3121
+ margin-left: unset;
2892
3122
  }
2893
3123
  }
2894
- .kima-card .secondary-button {
2895
- border-radius: 30px;
2896
- width: fit-content;
2897
- padding: 7px 27px;
2898
- height: 50px;
2899
- background-color: transparent;
2900
- cursor: pointer;
2901
- font-weight: bold;
2902
- font-family: inherit;
2903
- border-radius: 30px;
2904
- border: 1px solid;
2905
- letter-spacing: 0;
2906
- font-size: 16px;
2907
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
3124
+ .kima-card .floating-footer {
3125
+ color: black;
3126
+ position: absolute;
3127
+ width: 100%;
2908
3128
  display: flex;
2909
3129
  align-items: center;
2910
3130
  justify-content: center;
2911
- gap: 10px;
2912
- }
2913
- .kima-card .secondary-button.dark {
2914
- color: white;
2915
- border-color: white;
2916
- }
2917
- .kima-card .secondary-button.light {
2918
- color: black;
2919
- border-color: black;
2920
- }
2921
- .kima-card .secondary-button:hover, .kima-card .secondary-button:disabled {
2922
- opacity: 0.7;
3131
+ pointer-events: none;
3132
+ font-family: "Sohne";
3133
+ right: 0;
3134
+ margin-top: 10px;
3135
+ height: 35px;
2923
3136
  }
2924
- .kima-card .secondary-button:disabled {
2925
- cursor: default;
3137
+ @media (max-width: 768px) {
3138
+ .kima-card .floating-footer.complete {
3139
+ margin-top: 10px;
3140
+ }
2926
3141
  }
2927
- @media (max-width: 500px) {
2928
- .kima-card .secondary-button {
2929
- width: 8em;
3142
+ @media (max-width: 768px) {
3143
+ .kima-card .floating-footer {
3144
+ margin-top: 35px;
2930
3145
  }
2931
- .kima-card .secondary-button:hover {
2932
- opacity: 1;
3146
+ .kima-card .floating-footer.status {
3147
+ margin-top: 30px;
2933
3148
  }
2934
- .kima-card .secondary-button:hover:focus:active {
2935
- opacity: 0.7;
3149
+ }
3150
+ @media (max-width: 500px) {
3151
+ .kima-card .floating-footer {
3152
+ margin-top: 30px;
2936
3153
  }
2937
3154
  }
2938
- .kima-card .tx-button {
2939
- margin-right: 1em;
2940
- column-gap: 0.5em;
2941
- width: 5em;
3155
+ .kima-card .floating-footer .items {
2942
3156
  display: flex;
3157
+ flex-direction: row;
2943
3158
  justify-content: center;
2944
3159
  align-items: center;
3160
+ text-decoration: none;
3161
+ padding: 4px 15px;
3162
+ border-radius: 20px;
3163
+ font-size: 12px;
3164
+ gap: 8px;
3165
+ height: 35px;
2945
3166
  }
2946
- .kima-card .dropdown-menu {
2947
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
2948
- position: absolute;
2949
- z-index: 100;
2950
- padding: 0.5em 0;
2951
- max-height: 10em;
2952
- width: max-content;
2953
- overflow: hidden;
2954
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2955
- }
2956
- .kima-card .dropdown-menu .menu-item {
2957
- padding: 0.5em 1em;
2958
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
2959
- }
2960
- .kima-card .dropdown-menu .menu-item:hover {
2961
- background: #d6e4ea;
2962
- }
2963
- .kima-card .dropdown-menu.light {
2964
- background: white;
2965
- }
2966
- .kima-card .dropdown-menu.dark {
2967
- background: #1b1e25;
2968
- }
2969
- .kima-card .dropdown-menu.closed {
2970
- max-height: 0;
2971
- opacity: 0;
2972
- pointer-events: none;
2973
- }
2974
- .kima-card .error-tooltip.dark,
2975
- .kima-card .popup-tooltip.dark {
2976
- color: black;
2977
- background-color: white;
3167
+ .kima-card .floating-footer .items.light {
3168
+ background-color: #d6e4ea;
2978
3169
  }
2979
- @keyframes kima-pulse {
2980
- 0%, 100% {
2981
- transform: scale(1);
2982
- }
2983
- 50% {
2984
- transform: scale(1.02);
2985
- }
3170
+ .kima-card .floating-footer .items.dark {
3171
+ background-color: #778da3;
2986
3172
  }
2987
- @keyframes kima-dot {
2988
- 0%, 100% {
2989
- transform: translateY(0);
2990
- opacity: 0.4;
2991
- }
2992
- 50% {
2993
- transform: translateY(-2px);
2994
- opacity: 1;
2995
- }
3173
+ .kima-card .floating-footer .items span.network {
3174
+ font-weight: 800;
2996
3175
  }
2997
3176
 
2998
3177
  .kima-modal {
@@ -3323,24 +3502,7 @@
3323
3502
  width: 16em;
3324
3503
  }
3325
3504
 
3326
- @font-face {
3327
- font-family: "Manrope";
3328
- src: url("./fonts/Manrope-ExtraLight.eot");
3329
- src: url("./fonts/Manrope-ExtraLight.eot?#iefix") format("embedded-opentype"), url("./fonts/Manrope-ExtraLight.woff2") format("woff2"), url("./fonts/Manrope-ExtraLight.woff") format("woff");
3330
- font-weight: 200;
3331
- font-style: normal;
3332
- font-display: swap;
3333
- }
3334
- @font-face {
3335
- font-family: "Sohne";
3336
- src: url("./fonts/SohneBreit-Buch.eot");
3337
- src: url("./fonts/SohneBreit-Buch.eot?#iefix") format("embedded-opentype"), url("./fonts/SohneBreit-Buch.woff2") format("woff2"), url("./fonts/SohneBreit-Buch.woff") format("woff");
3338
- font-weight: normal;
3339
- font-style: normal;
3340
- font-display: swap;
3341
- }
3342
3505
  .kima-card {
3343
- border: 2px solid rgba(119, 141, 163, 0.3019607843);
3344
3506
  border-radius: 42px;
3345
3507
  width: 100%;
3346
3508
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
@@ -3378,31 +3540,23 @@
3378
3540
  min-width: 300px;
3379
3541
  }
3380
3542
  }
3381
- .kima-card.light {
3382
- background: #f7f8f9;
3383
- color: black;
3384
- }
3385
3543
  .kima-card.light .kima-card-header .kima-card-network-label .label {
3386
- background: #e3e3e3;
3544
+ background: var(--kima-surface-alt);
3387
3545
  }
3388
3546
  .kima-card.light .kima-card-content .kima-progressbar {
3389
- background: #e3e3e3;
3547
+ background: var(--kima-surface-alt);
3390
3548
  }
3391
3549
  .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
3392
- background: white;
3393
- }
3394
- .kima-card.dark {
3395
- background: #2c303e;
3396
- color: white;
3550
+ background: var(--kima-surface-elevated);
3397
3551
  }
3398
3552
  .kima-card.dark .kima-card-header .kima-card-network-label .label {
3399
- background: #4f5156;
3553
+ background: var(--kima-surface-alt);
3400
3554
  }
3401
3555
  .kima-card.dark .kima-card-content .kima-progressbar {
3402
- background: #4f5156;
3556
+ background: var(--kima-surface-alt);
3403
3557
  }
3404
3558
  .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
3405
- background: #0c0f17;
3559
+ background: var(--kima-surface-elevated);
3406
3560
  }
3407
3561
  @media (max-width: 768px) {
3408
3562
  .kima-card {