@kimafinance/kima-transaction-widget 1.4.8 → 1.4.10

package/dist/index.css

@@ -1,7 +1,5 @@
-@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
-@import "react-tooltip/dist/react-tooltip.css";
-
-/* src/index.css */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import 'react-tooltip/dist/react-tooltip.css';
 @keyframes pulse {
   0% {
     opacity: 1;
@@ -15,22 +13,16 @@
 }
 @font-face {
   font-family: "Manrope";
-  src: url("./assets/Manrope-ExtraLight-6KZAMPI7.eot");
-  src:
-    url("./assets/Manrope-ExtraLight-6KZAMPI7.eot?#iefix") format("embedded-opentype"),
-    url("./assets/Manrope-ExtraLight-6BGXUBPE.woff2") format("woff2"),
-    url("./assets/Manrope-ExtraLight-47OLGDTA.woff") format("woff");
+  src: url("./fonts/Manrope-ExtraLight.eot");
+  src: url("./fonts/Manrope-ExtraLight.eot?#iefix") format("embedded-opentype"), url("./fonts/Manrope-ExtraLight.woff2") format("woff2"), url("./fonts/Manrope-ExtraLight.woff") format("woff");
   font-weight: 200;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Sohne";
-  src: url("./assets/SohneBreit-Buch-VTQ4XGFE.eot");
-  src:
-    url("./assets/SohneBreit-Buch-VTQ4XGFE.eot?#iefix") format("embedded-opentype"),
-    url("./assets/SohneBreit-Buch-UDQP3HAK.woff2") format("woff2"),
-    url("./assets/SohneBreit-Buch-FPHQDKKW.woff") format("woff");
+  src: url("./fonts/SohneBreit-Buch.eot");
+  src: url("./fonts/SohneBreit-Buch.eot?#iefix") format("embedded-opentype"), url("./fonts/SohneBreit-Buch.woff2") format("woff2"), url("./fonts/SohneBreit-Buch.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -108,6 +100,10 @@
 .kima-card .kima-card-header .topbar .control-buttons {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+.kima-card .kima-card-header .topbar .control-buttons.complete {
+  width: 100%;
 }
 @media (max-width: 768px) {
   .kima-card .kima-card-header .topbar .control-buttons {
@@ -118,13 +114,8 @@
   background: transparent;
   border: 1px solid rgba(119, 141, 163, 0.3019607843);
   border-radius: 40px;
-  padding: 2px 8px;
   cursor: pointer;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-header .topbar .control-buttons .icon-button.minimize {
   border: none;
@@ -133,8 +124,7 @@
   margin-left: 13px;
   padding: 4px 6px;
 }
-.kima-card .kima-card-header .topbar .control-buttons .icon-button:hover,
-.kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
+.kima-card .kima-card-header .topbar .control-buttons .icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
   opacity: 0.6;
 }
 .kima-card .kima-card-header .topbar .control-buttons .icon-button:disabled {
@@ -158,22 +148,16 @@
   justify-content: center;
   align-items: center;
   padding: 4px;
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border-radius: 9999px;
   background: transparent;
   cursor: pointer;
   border: 1px solid rgba(119, 141, 163, 0.3019607843);
 }
-@media (max-width: 768px) {
-  .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button {
-    width: 50px;
-    height: 50px;
-  }
-}
 .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 25px;
 }
 @media (max-width: 768px) {
   .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button svg {
@@ -181,8 +165,7 @@
     height: 20px;
   }
 }
-.kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:hover,
-.kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
+.kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:hover, .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
   opacity: 0.6;
 }
 .kima-card .kima-card-header .topbar .control-buttons .cross-icon-button:disabled {
@@ -193,7 +176,6 @@
   color: #778da3;
   text-decoration: none;
   cursor: pointer;
-  margin-right: 1em;
 }
 .kima-card .kima-card-header .topbar .control-buttons .menu-button {
   font-family: "Manrope";
@@ -238,34 +220,24 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
   margin-top: 20px;
+  margin-bottom: 10px;
 }
 .kima-card .kima-card-header .header-network-labels p {
   padding: 0;
 }
-@media (max-width: 390px) {
-  .kima-card .kima-card-header .header-network-labels p {
-    display: none;
-  }
-  .kima-card .kima-card-header .header-network-labels .arrow {
-    transform: rotate(-180deg);
-  }
-}
 .kima-card .kima-card-header .header-network-labels .arrow {
   transform: rotate(-90deg);
 }
-.kima-card .kima-card-header h4 {
-  font-weight: 300;
-  font-size: 14px;
-  margin-top: 20px;
-  margin-bottom: 30px;
-}
 .kima-card .kima-card-header .kima-card-network-label {
   display: flex;
-  padding: 13px 18px;
+  padding: 10px 14px;
+  font-weight: 600;
   border-radius: 50px;
-  margin-right: 12px;
+}
+.kima-card .kima-card-header .kima-card-network-label h3 {
+  font-size: 12px;
 }
 .kima-card .kima-card-header .kima-card-network-label .icon {
   border-radius: 9999px;
@@ -303,11 +275,7 @@
 .kima-card .kima-card-footer {
   display: flex;
   align-items: center;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   max-height: 50px;
   margin-top: 20px;
   opacity: 1;
@@ -412,6 +380,11 @@
   margin-top: 10px;
   height: 35px;
 }
+@media (max-width: 768px) {
+  .kima-card .floating-footer.complete {
+    margin-top: 10px;
+  }
+}
 @media (max-width: 768px) {
   .kima-card .floating-footer {
     margin-top: 35px;
@@ -446,11 +419,14 @@
 .kima-card .floating-footer .items span.network {
   font-weight: 800;
 }
+
 .kima-card {
   font-family: "Manrope";
 }
 .kima-card .kima-card-content {
   font-family: "Manrope";
+  /* Adds the inner dot and perfectly centers it */
+  /* Prevents text from pushing the radio button */
 }
 .kima-card .kima-card-content .error-message {
   color: red;
@@ -481,12 +457,7 @@
   z-index: 10;
   height: 7px;
   border-radius: 16px;
-  background:
-    linear-gradient(
-      90deg,
-      #adf4a6,
-      #80d7f5,
-      #9990d5);
+  background: linear-gradient(90deg, #adf4a6, #80d7f5, #9990d5);
   transition: width 0.8s ease-in-out;
 }
 .kima-card .kima-card-content .kima-progressbar .value.step-25 {
@@ -503,12 +474,7 @@
 }
 @media (max-width: 500px) {
   .kima-card .kima-card-content .kima-progressbar .value {
-    background:
-      linear-gradient(
-        180deg,
-        #adf4a6,
-        #80d7f5,
-        #9990d5);
+    background: linear-gradient(180deg, #adf4a6, #80d7f5, #9990d5);
     width: 7px !important;
     transition: height 0.8s ease-in-out;
   }
@@ -546,6 +512,7 @@
   margin-top: -21px;
   position: relative;
   border-radius: 40px;
+  filter: drop-shadow(0px 0px 22.105px rgba(134, 184, 206, 0.5));
 }
 @media (max-width: 768px) {
   .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
@@ -565,20 +532,17 @@
 .kima-card .kima-card-content .kima-progressbar .step-indicators .step svg {
   position: absolute;
 }
-.kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed,
-.kima-card .kima-card-content .kima-progressbar .step-indicators .step.active {
+.kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active {
   border: 1px solid #86b8ce;
 }
-.kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
-.kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
+.kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
   top: -53px;
   left: 67px;
   width: 41px;
   height: 41px;
 }
 @media (max-width: 768px) {
-  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
-  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
+  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
     width: 32px;
     height: 32px;
     top: -45px;
@@ -586,37 +550,31 @@
   }
 }
 @media (max-width: 500px) {
-  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg,
-  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
+  .kima-card .kima-card-content .kima-progressbar .step-indicators .step.completed svg, .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active svg {
     width: 41px;
     height: 41px;
     top: -42px;
     left: 43px;
   }
 }
-.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 {
+.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 {
   left: -41px;
 }
 @media (max-width: 768px) {
-  .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 {
+  .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 {
     left: 13px;
   }
 }
 @media (max-width: 500px) {
-  .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 {
+  .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 {
     left: 16px;
   }
 }
-.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 {
+.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 {
   right: 20px;
 }
 @media (max-width: 768px) {
-  .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 {
+  .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 {
     right: -5px;
   }
 }
@@ -723,11 +681,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   font-weight: 300;
 }
 .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
@@ -815,11 +769,7 @@
   width: 50%;
   display: flex;
   justify-content: center;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .kima-tooltip > div.position-first {
   left: -1em !important;
@@ -860,15 +810,15 @@
   top: -1.5em;
   background: #66aae5;
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
   position: relative;
 }
+.kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item .info-icon {
+  background: white;
+  padding: 4px;
+}
 .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
   margin-top: 0.8em;
 }
@@ -881,11 +831,7 @@
 .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
   display: inline;
   cursor: pointer;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
   opacity: 0.7;
@@ -917,11 +863,7 @@
     top: -1.5em;
     background: #66aae5;
     clip-path: polygon(50% 0, 100% 100%, 0 100%);
-    transition:
-      all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-      color 0ms,
-      background-color 0ms,
-      border-color 0ms;
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   }
 }
 .kima-card .kima-card-content .dropdown-icon {
@@ -930,11 +872,7 @@
   position: absolute;
   width: 10px;
   height: 10px;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .dropdown-icon.collapsed {
   right: 10px;
@@ -1044,11 +982,7 @@
   border-radius: 0.8em;
   padding: 0 0.8em;
   cursor: pointer;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .form-item .network-item svg {
   width: 2em;
@@ -1358,11 +1292,7 @@
   align-items: center;
   cursor: pointer;
   box-sizing: content-box;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 @media (max-width: 639px) {
   .kima-card .kima-card-content .single-form .coin-dropdown {
@@ -1411,11 +1341,7 @@
   border-right: 2px solid;
   border-color: white;
   transform: rotate(-45deg);
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
   border: 0.5px solid #86b8ce;
@@ -1428,11 +1354,7 @@
   top: 100%;
   left: -0.5px;
   overflow: hidden;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   padding: 0.5em 0;
 }
 .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
@@ -1440,11 +1362,7 @@
   padding: 2.5px 12px;
   border-radius: 20px;
   max-width: 240px;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   display: flex;
   justify-content: start;
   flex-direction: row;
@@ -1526,11 +1444,7 @@
   border-right: 2px solid;
   border-color: white;
   transform: rotate(-45deg);
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu {
   box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
@@ -1541,20 +1455,12 @@
   top: calc(100% - 0.5em);
   left: 0;
   overflow: hidden;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .expire-time-dropdown .expire-time-menu .expire-time-item {
   padding: 0.5em 1em;
   margin: 0;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   display: flex;
   align-items: center;
 }
@@ -1603,11 +1509,7 @@
   align-items: center;
   cursor: pointer;
   box-sizing: content-box;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 @media (max-width: 586px) {
   .kima-card .kima-card-content .single-form .network-dropdown {
@@ -1655,11 +1557,7 @@
   border-right: 2px solid;
   border-color: white;
   transform: rotate(-45deg);
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
   border: 0.5px solid #86b8ce;
@@ -1673,22 +1571,14 @@
   left: -0.5px;
   overflow-x: clip;
   overflow-y: scroll;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
   margin: 7px 14px;
   padding: 11px 7px;
   border-radius: 20px;
   width: 220px;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   display: flex;
   justify-content: start;
   flex-direction: row;
@@ -1773,11 +1663,7 @@
 .kima-card .kima-card-content .single-form .dynamic-area {
   display: flex;
   flex-direction: column;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 @media (max-width: 500px) {
   .kima-card .kima-card-content .single-form .dynamic-area {
@@ -2266,17 +2152,94 @@
 .kima-card .kima-card-content .kima-stepbox .content-wrapper {
   display: flex;
   flex-direction: column;
-  border: 1px solid #86b8ce;
+  border: 1.5px solid #86b8ce;
   border-radius: 30px;
   padding: 12px 24px;
+  gap: 5px;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete {
+  padding: 20px 60px;
+  border: 1.5px solid #86b8ce;
+}
+@media (max-width: 600px) {
+  .kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete {
+    padding: 10px 20px;
+  }
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete p {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  font-family: "Manrope";
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .header-network-labels {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .header-network-labels p {
+  padding: 0;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .header-network-labels .arrow {
+  transform: rotate(-90deg);
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .header-network-labels.light {
+  background-color: #edf2f5 !important;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .header-network-labels.dark {
+  background-color: #4a5068 !important;
+  color: white;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label {
+  display: flex;
+  padding: 10px 14px;
+  font-weight: 600;
+  border-radius: 50px;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label h3 {
+  font-size: 12px;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label .icon {
+  border-radius: 9999px;
+  background-color: white;
+  padding: 4px;
+  display: flex;
+  justify-content: center;
+}
+@media (max-width: 500px) {
+  .kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label {
+    font-size: 14px;
+  }
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label.light {
+  background-color: #d6e4ea;
+  color: black;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper.transaction-complete .kima-card-network-label.dark {
+  background-color: #4a5068;
+  color: white;
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper.light {
   background-color: #edf2f5;
 }
+@media (max-width: 500px) {
+  .kima-card .kima-card-content .kima-stepbox .content-wrapper.light:not(.transaction-complete) {
+    background-color: transparent;
+  }
+}
 .kima-card .kima-card-content .kima-stepbox .content-wrapper.dark {
   background-color: #4a5068;
   color: white;
 }
+@media (max-width: 500px) {
+  .kima-card .kima-card-content .kima-stepbox .content-wrapper.dark:not(.transaction-complete) {
+    background-color: transparent;
+  }
+}
 @media (min-width: 500px) {
   .kima-card .kima-card-content .kima-stepbox .content-wrapper {
     min-width: 420px;
@@ -2288,7 +2251,7 @@
     gap: 5px;
     justify-content: space-between;
     border: none;
-    background-color: transparent !important;
+    background-color: transparent;
   }
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
@@ -2307,12 +2270,22 @@
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
   position: relative;
-  align-items: center;
+  align-items: start;
+  display: flex;
+  gap: 10px;
+}
+.kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item .info-icon svg {
+  background: white;
+  padding: 4px;
+  border-radius: 9999px;
+  margin-right: 10px;
+  filter: drop-shadow(0px 0px 22.105px rgba(134, 184, 206, 0.5));
 }
 @media (max-width: 500px) {
   .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
     width: 210px;
     height: 40px;
+    align-items: center;
   }
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item .icon {
@@ -2370,11 +2343,7 @@
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn {
   display: inline;
   cursor: pointer;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn:hover {
   opacity: 0.7;
@@ -2385,16 +2354,16 @@
   margin-left: 7px;
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.locked svg {
-  margin-top: 0.5px;
-  width: 17px;
-  height: 17px;
-  left: 0;
+  margin-top: -2.5px;
+  width: 28px;
+  height: 28px;
+  left: -4px;
+  padding: 6px;
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.active svg {
-  margin-top: -8.5px;
-  width: 35px;
-  height: 35px;
-  left: -8.5px;
+  margin-top: -4.5px;
+  left: -4.5px;
+  padding: 2px;
 }
 .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item.error svg {
   margin-top: -4.5px;
@@ -2519,7 +2488,7 @@
 }
 .kima-card .kima-card-content .fee-option {
   display: flex;
-  align-items: center;
+  align-items: center; /* Ensures both text and radio button align */
   gap: 10px;
   cursor: pointer;
 }
@@ -2620,11 +2589,7 @@
   cursor: pointer;
   text-decoration: none;
   color: inherit;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   border: 1px solid rgba(119, 141, 163, 0.3019607843);
 }
 .kima-card .card-item .wallet-item {
@@ -2698,12 +2663,7 @@
   cursor: pointer;
 }
 .kima-card .primary-button-wrapper {
-  background:
-    linear-gradient(
-      to right,
-      #8d77cc,
-      #7bd5fb,
-      #b2f79c);
+  background: linear-gradient(to right, #8d77cc, #7bd5fb, #b2f79c);
   padding: 2px;
   border-radius: 30px;
   max-height: 48px;
@@ -2724,11 +2684,7 @@
   font-weight: bold;
   font-family: inherit;
   border: none;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2738,8 +2694,7 @@
 .kima-card .primary-button.light {
   background-color: black;
 }
-.kima-card .primary-button:hover,
-.kima-card .primary-button:disabled {
+.kima-card .primary-button:hover, .kima-card .primary-button:disabled {
   opacity: 0.7;
 }
 .kima-card .primary-button:disabled {
@@ -2775,11 +2730,7 @@
   border: 1px solid;
   letter-spacing: 0;
   font-size: 16px;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2793,8 +2744,7 @@
   color: black;
   border-color: black;
 }
-.kima-card .secondary-button:hover,
-.kima-card .secondary-button:disabled {
+.kima-card .secondary-button:hover, .kima-card .secondary-button:disabled {
   opacity: 0.7;
 }
 .kima-card .secondary-button:disabled {
@@ -2827,19 +2777,11 @@
   max-height: 10em;
   width: max-content;
   overflow: hidden;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .dropdown-menu .menu-item {
   padding: 0.5em 1em;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card .dropdown-menu .menu-item:hover {
   background: #d6e4ea;
@@ -2860,6 +2802,7 @@
   color: black;
   background-color: white;
 }
+
 .kima-modal {
   position: fixed;
   z-index: 999999;
@@ -3077,11 +3020,7 @@
   align-items: center;
   column-gap: 1em;
   padding: 0.4em 1em;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item:hover {
   background-color: rgba(90, 160, 219, 0.1254901961);
@@ -3109,11 +3048,7 @@
   display: flex;
   justify-content: center;
   cursor: pointer;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-modal.pending-tx-popup .modal-content .scroll-area .tx-container .tx-item .action-button-container .action-button:hover {
   opacity: 0.7;
@@ -3162,24 +3097,19 @@
   margin: 2em auto 0;
   width: 16em;
 }
+
 @font-face {
   font-family: "Manrope";
-  src: url("./assets/Manrope-ExtraLight-6KZAMPI7.eot");
-  src:
-    url("./assets/Manrope-ExtraLight-6KZAMPI7.eot?#iefix") format("embedded-opentype"),
-    url("./assets/Manrope-ExtraLight-6BGXUBPE.woff2") format("woff2"),
-    url("./assets/Manrope-ExtraLight-47OLGDTA.woff") format("woff");
+  src: url("./fonts/Manrope-ExtraLight.eot");
+  src: url("./fonts/Manrope-ExtraLight.eot?#iefix") format("embedded-opentype"), url("./fonts/Manrope-ExtraLight.woff2") format("woff2"), url("./fonts/Manrope-ExtraLight.woff") format("woff");
   font-weight: 200;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Sohne";
-  src: url("./assets/SohneBreit-Buch-VTQ4XGFE.eot");
-  src:
-    url("./assets/SohneBreit-Buch-VTQ4XGFE.eot?#iefix") format("embedded-opentype"),
-    url("./assets/SohneBreit-Buch-UDQP3HAK.woff2") format("woff2"),
-    url("./assets/SohneBreit-Buch-FPHQDKKW.woff") format("woff");
+  src: url("./fonts/SohneBreit-Buch.eot");
+  src: url("./fonts/SohneBreit-Buch.eot?#iefix") format("embedded-opentype"), url("./fonts/SohneBreit-Buch.woff2") format("woff2"), url("./fonts/SohneBreit-Buch.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -3188,12 +3118,20 @@
   border: 2px solid rgba(119, 141, 163, 0.3019607843);
   border-radius: 42px;
   width: 100%;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
   max-width: 950px;
+  /* Firefox */
+  /* Modal overlay */
+  /* Modal container */
+  /* Modal title */
+  /* Modal message */
+  /* Button container */
+  /* Responsive behavior for small screens (bottom sheet style) */
+}
+@media (min-width: 1000px) {
+  .kima-card {
+    min-width: 900px;
+  }
 }
 .kima-card .transfer-card {
   min-width: 800px;
@@ -3259,11 +3197,7 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
-  transition:
-    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
-    color 0ms,
-    background-color 0ms,
-    border-color 0ms;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0ms, background-color 0ms, border-color 0ms;
 }
 .kima-card-content .cc-widget {
   width: 100%;
@@ -3320,6 +3254,23 @@
   display: flex;
   flex-direction: column;
 }
+.kima-card.transaction-card .kima-card-content .transaction-content.transaction-complete {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.kima-card.transaction-card .kima-card-content .transaction-content.transaction-complete .transaction-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+.kima-card.transaction-card .kima-card-content .transaction-content.transaction-complete h2 {
+  font-family: "Sohne";
+  font-size: 26px;
+  margin: 20px 0px;
+  margin-bottom: 30px;
+  text-align: center;
+}
 @media (max-width: 500px) {
   .kima-card.transaction-card .kima-card-content .transaction-content {
     flex-direction: row;
@@ -3388,8 +3339,8 @@
   -moz-appearance: textfield;
 }
 .kima-card .hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 .kima-card .hide-scrollbar::-webkit-scrollbar {
   display: none;
@@ -3516,4 +3467,5 @@
     width: 100%;
   }
 }
-/*# sourceMappingURL=index.css.map */
+
+/*# sourceMappingURL=index.css.map */