/* Webpixels CSS */
/* Utility and component-centric Design System based on Bootstrap for fast, responsive UI development */
/* URL: https://github.com/webpixels/css */

@import url(https://unpkg.com/@webpixels/css@1.1.5/dist/index.css);

/* Bootstrap Icons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.0/font/bootstrap-icons.min.css");
*::focus {
  outline: none;
}

.popup {
  height: 100vh;
  width: 100vw;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0,0,0,0.6);
  z-index: 9999;
}
.popup-inner {
    height: 70vh;
    width: 70vw;
    border-radius: .5em;
    display: flex;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2em;
    overflow: scroll;
}
.card-cover {
    border: 1px solid #999;
    padding: 0 .5em;
    width: 100%;
    height: 3.5em;
    display: flex;
    margin-bottom: .5em;
    border-radius: .2em;
    flex-direction: column;overflow: hidden;
}
.card-cover input {
    width: 100%;
    display: block;
    font-size: .8em;
}
.card-cover label {
    font-size: .7em;
    height: 1em;
}
.card-grid {
    display: flex;
    gap: 1em;
    width: 100%;
    margin-bottom: .4em;
}
.card-details {
  float: right;
    width: 100%;
    text-align: right;
    line-height: 1.2em;
    font-size: .7em;
    margin-bottom: .5em;
    font-weight: bold;
}
#cardPopup {
  flex-direction: column;
}
#cardPopup::after {
  content: 'Powered by Remita';
  font-size: 1.4em;
  font-weight: bold;
  color: tomato;
  margin-top: 1em;
}
button#submitCard {
    width: 100%;
    height: 2.5em;
    color: #fff;
    background: orangered;
    border-radius: .3em;
}
#cardPopupInner.popup-inner {
    height: 70vh;
    width: 70vw;
    padding: 0 20vw;
    border-radius: .5em;
    display: flex;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2em;
}

button#confirm {
    height: 2.5em;
    padding: 0 2em;
    background: #666;
    color: #fff;
    border-radius: .3em;
}
button#confirmInvestment {
    height: 2.5em;
    padding: 0 2em;
    border-radius: .2em;
    color: #fff;
    background: #666;
}
button#confirmInvestment:hover {
  background: #555;
}
input#investmentAmount {
    margin: 1em;
    border: 1px solid #999;
    padding-inline: 1em;
    border-radius: .2em;
}
input#withdrawAmount {
    border: 1px solid #999;
    border-radius: .2em;
    display: block;
}
.wthbutton {
    color: #fff;
    background: #666;
    height: 2.4em;
    padding: 0 2em;
    border-radius: .2em;
    margin-top: 1em;
}

/* CSS for preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  
  align-items: center;
  background-color: #fff; /* Semi-transparent white background */
  z-index: 9999; /* Ensure the preloader appears above other content */
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey border */
  border-top: 8px solid #3498db; /* Blue border on top */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* Animation for spinning loader */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

canvas#transactionChart {
  height: 300px !important;
  width: auto !important;
}
.table td, .table th {
    padding: .75rem;
    /* display: flex; */
    vertical-align: baseline !important;
    border-top: 1px solid #dee2e6;
}
.table td {
  font-size: .8125rem;
    white-space: nowrap;
    width: 10em;
    margin-right: 1em;
    overflow: hidden;
}
form#kycForm {
    width: 90%;
}
form#withdrawForm {
    width: 90%;
}
input#withdrawAmount {
    border: 1px solid #999;
    border-radius: .2em;
    display: block;
    width: 100%;
}
.gift-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: scroll;
  width: 70%;
}
li {
  list-style: none;
}
.gift-card-grid img {
  width: 85%;
  border-radius: 1em;
}

@media only screen and (max-width: 767px) {
.popup-inner {
    width: 90vw;
    height: 85vh;
    padding: 0 1em;
    border-radius: 1em;
}
 .input {
    text-align: center;
}
.card-grid {
  flex-direction: column;
}
#cardPopupInner.popup-inner {
  height: 85vh;
  width: 95vw;
  padding: 0 10vw;
}
.analytics {
  display: none;
}
.popup h2 {
    padding: 1em;
    text-align: center;
}
.gift-card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  overflow: scroll;
  width: 80%;
  gap: .5em;
}
.gift-card-grid img {
  width: 95%;
  border-radius: 1em;
}
}



.user-card {
  height: 12em;
  width: 20em;
  border-radius: 1em;
  background: #101010;
  color: #fff;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.user-card-header {
  display: flex;
  justify-content: space-between;
}
.transfer-id {
  display: flex;
  border: 1px solid #666;
  padding: .5em;
  justify-content: space-between;
  border-radius: .5em;
  margin-top: 1em;
  align-items: center;
}
.account-details h3 {
  font-size: 1em;
  color: #fff;
}
.transfer-numbers {
  color: #222;
}
.transfer-id button {
  border: 1px solid #999;
  background: transparent;
  height: 100%;
  border-radius: .2em;
  cursor: pointer;
  color: #222;
}
input#transferAmount {
    border: 1px solid #666;
    padding: .5em;
    border-radius: .4em;
    display: block;
    height: 2.7em;
    width: 100%;
}
button#payButton {
    color: #fff;
    background: royalblue;
    padding: 0 2em;
    border-radius: .3em;
    margin-top: 1em;
}
input#recipientAccountID {
    border: 1px solid #666;
    padding: .5em;
    height: 2.8em;
    border-radius: .3em;
    display: block;
    width: 100%;
}
div#transferForm, div#recipientDetails {
    width: 90%;
}

button#checkAccount {
    color: #fff;
    background: royalblue;
    margin-top: 1em;
    border-radius: .3em;
    padding: 0 1em;
}