@kimafinance/kima-transaction-widget 1.0.0

package/dist/index.css

@@ -0,0 +1,809 @@
+@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");
+.kima-card {
+  position: relative; }
+  .kima-card .kima-card-header .topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; }
+    @media (max-width: 768px) {
+      .kima-card .kima-card-header .topbar {
+        flex-direction: column-reverse;
+        align-items: flex-start; } }
+    .kima-card .kima-card-header .topbar .title {
+      display: flex;
+      align-items: center;
+      font-size: 1.2em; }
+      .kima-card .kima-card-header .topbar .title h3 {
+        margin: 0; }
+      .kima-card .kima-card-header .topbar .title span {
+        color: #5aa0db;
+        font-weight: bold;
+        margin: 0 0 0 1em; }
+      @media (max-width: 768px) {
+        .kima-card .kima-card-header .topbar .title {
+          flex-direction: column;
+          align-items: flex-start; }
+          .kima-card .kima-card-header .topbar .title p {
+            margin: 0; } }
+    .kima-card .kima-card-header .topbar .control-buttons {
+      display: flex;
+      align-items: center; }
+      @media (max-width: 768px) {
+        .kima-card .kima-card-header .topbar .control-buttons {
+          margin-left: auto; } }
+      .kima-card .kima-card-header .topbar .control-buttons .icon-button {
+        background: transparent;
+        border: none;
+        font-size: 1em;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+        .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover {
+          opacity: 0.6; }
+        .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
+          width: 1em;
+          height: 1em; }
+        .kima-card .kima-card-header .topbar .control-buttons .icon-button:first-of-type svg {
+          margin-top: 0.5em; }
+      .kima-card .kima-card-header .topbar .control-buttons .maximize {
+        color: #5aa0db;
+        cursor: pointer; }
+  .kima-card .kima-card-footer {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+    max-height: 3em;
+    padding-top: 2em;
+    opacity: 1;
+    box-sizing: content-box; }
+    .kima-card .kima-card-footer svg {
+      width: 10em;
+      height: 2.5em; }
+    .kima-card .kima-card-footer p {
+      font-size: 0.8em;
+      margin: 0 0 0 1em; }
+    .kima-card .kima-card-footer a,
+    .kima-card .kima-card-footer .menu-button {
+      margin-left: auto;
+      color: #5aa0db;
+      text-decoration: none;
+      cursor: pointer; }
+    .kima-card .kima-card-footer button {
+      margin-left: 1em; }
+    @media (max-width: 768px) {
+      .kima-card .kima-card-footer p {
+        display: none; } }
+
+.kima-card .kima-card-content .kima-progressbar {
+  height: 1em;
+  width: 100%;
+  position: relative;
+  border-radius: 1em;
+  margin-bottom: 4em; }
+  @media (max-width: 768px) {
+    .kima-card .kima-card-content .kima-progressbar {
+      font-size: 1.5em; } }
+  .kima-card .kima-card-content .kima-progressbar .value {
+    position: absolute;
+    z-index: 10;
+    height: 100%;
+    width: 100%;
+    border-radius: 1em;
+    background: linear-gradient(90deg, #85d2dd 8.08%, #579dda 96.15%);
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition-duration: 1000ms; }
+  .kima-card .kima-card-content .kima-progressbar .step-indicators {
+    position: relative;
+    z-index: 20;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 -0.2em;
+    padding-bottom: 4em; }
+    .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
+      width: 1.4em;
+      height: 1.4em;
+      margin-top: -0.2em;
+      position: relative;
+      cursor: pointer; }
+      .kima-card .kima-card-content .kima-progressbar .step-indicators .step:before {
+        content: '';
+        border-radius: 100%;
+        position: absolute;
+        left: 0.3em;
+        top: 0.3em;
+        width: 0.8em;
+        height: 0.8em;
+        background: white;
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); }
+      .kima-card .kima-card-content .kima-progressbar .step-indicators .step:hover:before {
+        width: 1em;
+        height: 1em;
+        left: 0;
+        top: 0;
+        background: #5aa0db;
+        border: 0.2em solid white; }
+      .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
+        position: absolute;
+        width: 10em;
+        left: -4em;
+        top: 2em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+        .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
+          color: #5aa0db; }
+        .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
+          text-align: center;
+          margin-left: 0.5em; }
+        @media (max-width: 768px) {
+          .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
+            width: 3em;
+            left: -0.5em;
+            flex-direction: column;
+            position: relative;
+            margin-left: -0.3em; }
+            .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
+              font-size: 0.66em;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              margin-left: 0;
+              margin-top: 1em;
+              width: 100%; }
+            .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info svg {
+              position: absolute;
+              top: 0; }
+            .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
+              align-items: center; }
+              .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
+                overflow: visible !important;
+                text-overflow: inherit !important;
+                white-space: inherit !important;
+                display: flex;
+                justify-content: center; } }
+      .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
+        left: 0;
+        justify-content: flex-start; }
+      .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
+        left: unset;
+        right: 0;
+        justify-content: flex-end; }
+        @media (max-width: 768px) {
+          .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
+            right: 1em; } }
+
+.kima-card .kima-card-content .kima-tooltip {
+  padding-top: 2em;
+  width: 100%;
+  position: relative; }
+  .kima-card .kima-card-content .kima-tooltip > div {
+    position: relative;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+    .kima-card .kima-card-content .kima-tooltip > div.position-first {
+      left: -1em !important;
+      justify-content: flex-start; }
+      .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
+        left: 1em; }
+    .kima-card .kima-card-content .kima-tooltip > div.position-last {
+      left: calc(50% + 1em) !important;
+      justify-content: flex-end; }
+      .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
+        left: calc(100% - 3em) !important; }
+    @media (max-width: 768px) {
+      .kima-card .kima-card-content .kima-tooltip > div {
+        width: 100%;
+        left: 0 !important; }
+        .kima-card .kima-card-content .kima-tooltip > div.position-last {
+          left: 1em !important; } }
+    .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
+      width: 20em;
+      border: 1px solid #66aae5;
+      border-radius: 1em;
+      padding: 1.5em;
+      position: relative; }
+      .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
+        position: absolute;
+        content: '';
+        width: 2em;
+        height: 1.5em;
+        left: calc(50% - 1em);
+        top: -1.5em;
+        background: #66aae5;
+        -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
+                clip-path: polygon(50% 0, 100% 100%, 0 100%);
+        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+      .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:not(:first-of-type) {
+          margin-top: 0.8em; }
+        .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
+          margin-left: 1.5em; }
+        .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
+          position: absolute;
+          margin-top: 0.3em; }
+      @media (max-width: 768px) {
+        .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
+          width: 100%; }
+          .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
+            opacity: 0; }
+          .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
+            position: absolute;
+            position: absolute;
+            content: '';
+            width: 2em;
+            height: 1.5em;
+            top: -1.5em;
+            background: #66aae5;
+            -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
+                    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+            transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } }
+
+.kima-card .kima-card-content .network-select p {
+  font-size: 1.2em;
+  font-weight: 500;
+  text-align: center; }
+
+.kima-card .kima-card-content .network-select .network-container {
+  display: flex;
+  -moz-column-gap: 1em;
+       column-gap: 1em;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2em; }
+
+.kima-card .kima-card-content .single-form {
+  padding-left: 2em; }
+  .kima-card .kima-card-content .single-form .form-item {
+    display: flex;
+    align-items: center; }
+    .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
+      margin-top: 2em; }
+    .kima-card .kima-card-content .single-form .form-item > span {
+      font-size: 1.16em;
+      width: 10em; }
+    .kima-card .kima-card-content .single-form .form-item .network-item {
+      display: flex;
+      align-items: center;
+      width: 9em;
+      height: 3.5em;
+      border-radius: 0.8em;
+      padding: 0 0.8em;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+      .kima-card .kima-card-content .single-form .form-item .network-item svg {
+        width: 2em;
+        height: 2em;
+        border-radius: 100%; }
+      .kima-card .kima-card-content .single-form .form-item .network-item p {
+        width: 100%;
+        text-align: center;
+        font-weight: bold; }
+      .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
+        margin-left: 0.5em; }
+      .kima-card .kima-card-content .single-form .form-item .network-item.light {
+        background: #e3e3e3; }
+      .kima-card .kima-card-content .single-form .form-item .network-item.dark {
+        background: #4f5156; }
+      .kima-card .kima-card-content .single-form .form-item .network-item.active {
+        background: #66aae5; }
+        .kima-card .kima-card-content .single-form .form-item .network-item.active p {
+          color: white; }
+      .kima-card .kima-card-content .single-form .form-item .network-item:hover {
+        opacity: 0.7; }
+    .kima-card .kima-card-content .single-form .form-item input {
+      border: 1px solid #979797;
+      border-radius: 0.8em;
+      height: 3em;
+      background: transparent;
+      color: white;
+      outline: none;
+      font: unset;
+      width: 10em;
+      padding: 0.3em 0.5em 0.3em 1em;
+      box-sizing: content-box; }
+      .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
+        width: 20em; }
+    .kima-card .kima-card-content .single-form .form-item.light input {
+      color: black; }
+  .kima-card .kima-card-content .single-form .coin-dropdown {
+    position: relative;
+    border-radius: 1em;
+    padding: 0.5em;
+    padding-right: 3em;
+    height: 2.8em;
+    display: flex;
+    align-items: center;
+    margin-left: 0.5em;
+    cursor: pointer;
+    box-sizing: content-box; }
+    .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
+      display: flex;
+      align-items: center;
+      border-radius: 1em;
+      font-size: 1em;
+      font-weight: 500;
+      padding: 0.2em;
+      padding-right: 0.5em;
+      background: white;
+      color: black; }
+      .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper svg {
+        width: 1.5em;
+        height: 1.5em;
+        margin-right: 0.5em; }
+    .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
+      background: #979797;
+      color: white; }
+    .kima-card .kima-card-content .single-form .coin-dropdown:before {
+      position: absolute;
+      content: '';
+      width: 0.8em;
+      height: 0.8em;
+      right: 1.1em;
+      top: 1.7em;
+      border-top: 2px solid;
+      border-right: 2px solid;
+      border-color: white;
+      transform: rotate(-45deg);
+      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+    .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
+      box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+      position: absolute;
+      z-index: 100;
+      max-height: 10em;
+      width: 100%;
+      top: 100%;
+      left: 0;
+      overflow: hidden;
+      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+      padding: 0.5em 0; }
+      .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
+        padding: 0em 1em;
+        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+        display: flex;
+        align-items: center; }
+        .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item svg {
+          width: 2.5em;
+          height: 2.5em; }
+        .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
+          width: 100%;
+          text-align: center;
+          margin: 0; }
+        .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item:hover {
+          background: #5aa0db80; }
+      .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
+        background: white; }
+      .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
+        background: #4f5156; }
+      .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
+        max-height: 0;
+        opacity: 0; }
+    .kima-card .kima-card-content .single-form .coin-dropdown.light {
+      background: #e3e3e3; }
+      .kima-card .kima-card-content .single-form .coin-dropdown.light:before {
+        border-color: black; }
+    .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
+      transform: rotate(135deg);
+      top: 1.2em; }
+    .kima-card .kima-card-content .single-form .coin-dropdown.dark {
+      background: #4f5156; }
+
+.kima-card .kima-card-content .wallet-button {
+  font-size: 1.16em;
+  display: flex;
+  align-items: center; }
+  .kima-card .kima-card-content .wallet-button button {
+    width: 12em;
+    height: 3.5em; }
+  .kima-card .kima-card-content .wallet-button .provider-error {
+    color: red;
+    font-size: 0.8em;
+    margin-left: 1em; }
+  .kima-card .kima-card-content .wallet-button.error-below {
+    flex-direction: column; }
+    .kima-card .kima-card-content .wallet-button.error-below .provider-error {
+      margin-left: 0;
+      margin-top: 1em; }
+
+.kima-card .kima-card-content .connect-wallet-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center; }
+  .kima-card .kima-card-content .connect-wallet-step p {
+    font-size: 1.2em;
+    font-weight: 500;
+    margin-bottom: 2em; }
+
+.kima-card .kima-card-content .coin-select p {
+  font-size: 1.2em;
+  font-weight: 500;
+  text-align: center; }
+
+.kima-card .kima-card-content .coin-select .coin-list-container {
+  display: flex;
+  -moz-column-gap: 1em;
+       column-gap: 1em;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2em; }
+
+.kima-card .kima-card-content .coin-select .amount-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2em; }
+  .kima-card .kima-card-content .coin-select .amount-input > span {
+    margin-right: 1.5em;
+    font-size: 1.2em; }
+  .kima-card .kima-card-content .coin-select .amount-input .input-wrapper {
+    position: relative; }
+    .kima-card .kima-card-content .coin-select .amount-input .input-wrapper input {
+      border: 1px solid #979797;
+      border-radius: 0.8em;
+      height: 3em;
+      background: transparent;
+      color: white;
+      outline: none;
+      font: unset;
+      width: 12em;
+      padding: 0.3em 0.5em 0.3em 1em;
+      box-sizing: content-box; }
+    .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      padding: 0.3em 0.5em 0.3em 0.3em;
+      border-radius: 1em;
+      right: 0.8em;
+      top: 0.8em; }
+      .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label svg {
+        width: 1.5em;
+        height: 1.5em; }
+      .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label span {
+        margin-left: 0.5em; }
+  .kima-card .kima-card-content .coin-select .amount-input.light input {
+    color: black; }
+  .kima-card .kima-card-content .coin-select .amount-input.light .coin-label {
+    background: #e3e3e3; }
+  .kima-card .kima-card-content .coin-select .amount-input.dark .coin-label {
+    background: #4f5156; }
+
+.kima-card .kima-card-content .confirm-details {
+  padding: 0 8em;
+  font-size: 1.2em; }
+  .kima-card .kima-card-content .confirm-details > p {
+    text-align: center; }
+  .kima-card .kima-card-content .confirm-details .detail-item {
+    padding: 1em 2em;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #e3e3e3; }
+    .kima-card .kima-card-content .confirm-details .detail-item p {
+      margin: 0; }
+    .kima-card .kima-card-content .confirm-details .detail-item .label {
+      font-weight: bold;
+      width: 8em; }
+    .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
+      display: flex;
+      padding: 0.3em 0.5em 0.3em 0.5em;
+      border-radius: 1em;
+      margin-left: 1em; }
+    .kima-card .kima-card-content .confirm-details .detail-item:last-of-type {
+      border-bottom: 1px solid #e3e3e3; }
+  .kima-card .kima-card-content .confirm-details.light .kima-card-network-label {
+    background: #e3e3e3; }
+  .kima-card .kima-card-content .confirm-details.dark .kima-card-network-label {
+    background: #4f5156; }
+
+.kima-card .kima-card-content .kima-custom-checkbox {
+  margin-left: 2em;
+  display: flex;
+  align-items: center; }
+  .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper {
+    border: 1px solid #ffffff;
+    height: 1em;
+    width: 1em;
+    border-radius: 0.2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer; }
+    .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper.light {
+      border-color: #4f5156; }
+    .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper svg {
+      margin-top: 0.2em;
+      margin-left: 1px; }
+  .kima-card .kima-card-content .kima-custom-checkbox > span {
+    margin-left: 0.5em; }
+
+.kima-card .card-item {
+  width: 10em;
+  height: 9em;
+  border-radius: 1em;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+  .kima-card .card-item svg,
+  .kima-card .card-item img {
+    width: 3em;
+    height: 3em;
+    border-radius: 100%; }
+  .kima-card .card-item span {
+    font-weight: bold;
+    margin-top: 1em;
+    text-align: center; }
+  .kima-card .card-item.light {
+    background: #e3e3e3; }
+  .kima-card .card-item.dark {
+    background: #4f5156; }
+  .kima-card .card-item.active {
+    background: #66aae5; }
+    .kima-card .card-item.active span {
+      color: white; }
+  .kima-card .card-item:hover {
+    opacity: 0.7; }
+
+.kima-card .kima-card-network-label {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 0.5em;
+       column-gap: 0.5em;
+  padding-top: 1em; }
+  .kima-card .kima-card-network-label > svg {
+    width: 1em;
+    height: 1em; }
+  .kima-card .kima-card-network-label .label {
+    display: flex;
+    border-radius: 1em;
+    font-size: 1em;
+    -moz-column-gap: 0.3em;
+         column-gap: 0.3em;
+    align-items: center;
+    padding: 0.2em 0.4em; }
+    .kima-card .kima-card-network-label .label .icon-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 1.2em;
+      height: 1.2em; }
+      .kima-card .kima-card-network-label .label .icon-wrapper svg {
+        width: 100%;
+        height: 100%; }
+  .kima-card .kima-card-network-label .warning-container {
+    margin-left: 1em;
+    display: flex;
+    align-items: center;
+    -moz-column-gap: 0.5em;
+         column-gap: 0.5em; }
+
+.kima-card .primary-button {
+  background: #66aae5;
+  border-radius: 0.8em;
+  width: 10em;
+  height: 3em;
+  cursor: pointer;
+  color: white;
+  font-size: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  border: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+  .kima-card .primary-button:hover {
+    opacity: 0.7; }
+  .kima-card .primary-button .loading-indicator {
+    margin-right: 0.5em; }
+    .kima-card .primary-button .loading-indicator svg {
+      width: 1.5em;
+      height: 1.5em;
+      margin-top: 0.3em; }
+
+.kima-card .secondary-button {
+  border-radius: 0.8em;
+  width: 10em;
+  height: 3em;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  border: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+  .kima-card .secondary-button.dark {
+    color: white;
+    background: #4f5156; }
+  .kima-card .secondary-button.light {
+    color: black;
+    background: #e3e3e3; }
+  .kima-card .secondary-button:hover {
+    opacity: 0.7; }
+
+.kima-card .dropdown-menu {
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  z-index: 100;
+  max-height: 10em;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  padding: 0.5em 0; }
+  .kima-card .dropdown-menu .menu-item {
+    padding: 0.5em 1em;
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+    .kima-card .dropdown-menu .menu-item:hover {
+      background: #5aa0db80; }
+  .kima-card .dropdown-menu.light {
+    background: white; }
+  .kima-card .dropdown-menu.dark {
+    background: #1b1e25; }
+  .kima-card .dropdown-menu.closed {
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none; }
+
+.kima-card .modal {
+  position: absolute;
+  z-index: 100;
+  width: calc(100% - 8em);
+  height: 0;
+  opacity: 0;
+  padding: 2em;
+  left: 2em;
+  top: 2em;
+  border: 1px solid #66aae5;
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 1em;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  overflow: hidden; }
+  .kima-card .modal.light {
+    background: white;
+    color: black; }
+  .kima-card .modal.dark {
+    background: #1b1e25;
+    color: white; }
+  .kima-card .modal.open {
+    height: calc(100% - 8em);
+    opacity: 1; }
+  .kima-card .modal-content {
+    width: 100%;
+    height: calc(100% - 8em);
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .kima-card .modal-content .wallet-select {
+      width: 100%;
+      position: relative; }
+      .kima-card .modal-content .wallet-select .scroll-button {
+        position: absolute;
+        width: 100%;
+        bottom: 8em; }
+        .kima-card .modal-content .wallet-select .scroll-button svg {
+          width: 2em;
+          height: 4em;
+          cursor: pointer;
+          position: absolute; }
+          .kima-card .modal-content .wallet-select .scroll-button svg:first-of-type {
+            left: 4em; }
+          .kima-card .modal-content .wallet-select .scroll-button svg:last-of-type {
+            right: 4em;
+            transform: rotate(180deg); }
+      .kima-card .modal-content .wallet-select p {
+        font-size: 1.2em;
+        font-weight: 500;
+        text-align: center; }
+      .kima-card .modal-content .wallet-select .slide-area {
+        width: 40em;
+        padding: 2em;
+        margin: 0 auto;
+        overflow: hidden;
+        overflow-x: scroll;
+        -webkit-mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
+                mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
+        position: relative; }
+        .kima-card .modal-content .wallet-select .slide-area .wallet-container {
+          display: flex;
+          width: -moz-max-content;
+          width: max-content;
+          -moz-column-gap: 1em;
+               column-gap: 1em;
+          align-items: center;
+          justify-content: center;
+          margin-top: 2em; }
+
+.kima-card {
+  border-radius: 1em;
+  width: 100%;
+  padding: 2em;
+  border: 1px solid #66aae5;
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  font-family: 'Poppins', sans-serif;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-delay: 0.2s;
+  /* Firefox */ }
+  .kima-card.light {
+    background: white;
+    color: black; }
+    .kima-card.light .kima-card-header .kima-card-network-label .label {
+      background: #e3e3e3; }
+    .kima-card.light .kima-card-content .kima-progressbar {
+      background: #e3e3e3; }
+    .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
+      background: white; }
+  .kima-card.dark {
+    background: #1b1e25;
+    color: white; }
+    .kima-card.dark .kima-card-header .kima-card-network-label .label {
+      background: #4f5156; }
+    .kima-card.dark .kima-card-content .kima-progressbar {
+      background: #4f5156; }
+    .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
+      background: #0c0f17; }
+  .kima-card.font-large {
+    font-size: 20px;
+    max-width: 1200px; }
+  .kima-card.font-medium {
+    font-size: 16px;
+    max-width: 1000px; }
+  .kima-card.font-small {
+    font-size: 12px;
+    max-width: 800px; }
+  @media (max-width: 768px) {
+    .kima-card {
+      max-width: 100vh !important;
+      font-size: 14px !important;
+      padding: 1.5em;
+      border-radius: 0; } }
+  @media (max-width: 500px) {
+    .kima-card {
+      padding: 1em; } }
+  .kima-card-content {
+    width: 100%;
+    margin: 2em 0;
+    opacity: 1;
+    max-height: 40em;
+    min-height: 25em;
+    position: relative;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
+  .kima-card.transaction-card .kima-card-content {
+    display: block;
+    min-height: 15em;
+    margin: 2em 0 4em; }
+  .kima-card.minimized {
+    max-width: 30em; }
+    .kima-card.minimized .kima-card-content {
+      opacity: 0;
+      max-height: 0;
+      min-height: 0;
+      margin: 0;
+      pointer-events: none; }
+    .kima-card.minimized .kima-card-footer {
+      opacity: 0;
+      max-height: 0;
+      pointer-events: none; }
+  .kima-card input::-webkit-outer-spin-button,
+  .kima-card input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0; }
+  .kima-card input[type='number'] {
+    -moz-appearance: textfield; }
+  .kima-card .hide-scrollbar {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */ }
+    .kima-card .hide-scrollbar::-webkit-scrollbar {
+      display: none; }