
/* WALLET BUTTON */
.custom-wallet-button .custom-button,
.custom-wallet-action-button .adapter-react-button,
button.adapter-react-button:not(.adapter-wallet-item .adapter-react-button),
.custom-wallet-button .adapter-react-button {
    height: 40px;
    color: white;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background-color 0.3s, opacity 0.3s;
    cursor: pointer;
    background-color: #6001ff;
    border: none;
    width: auto;
}
/* wallet button hover style*/
.custom-wallet-action-button .adapter-react-button:hover,
.custom-wallet-button .adapter-react-button:hover,
.custom-wallet-button .custom-button:hover,
button.adapter-react-button:not(.adapter-wallet-item .adapter-react-button):hover {
    background-color: #8825b6;
}
/* wallet button hover item - when you hover over it and it says "Change Wallet" */
.adapter-dropdown-list-item {
  background-color: #2c2d30 !important;
}
.adapter-dropdown-list {
  background-color: #2c2d30 !important;
}

/* TRANSACTION ACTION MODAL */
/* The modal after the user clicked the button to create the transaction. modal says "Wallet ownership verification"*/
.modal-transfer-ownership-bg {
  background-color: #1c1c28;
}
/* text color"*/
.modal-transfer-ownership-textcolor {
  color: white;
}
/* This is the spinning loader around the image"*/
.wallet-icon-wrapper::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background: conic-gradient(
    rgb(51, 150, 255) 0deg,
    rgb(51, 150, 255) 315deg,
    transparent 315deg,
    transparent 360deg
  );
  animation: rotate 1s linear infinite;
}


/* TRX BALANCE ALERT TOAST */
/* The alert if someone has less than 100 TRX in his wallet */
.Toastify__toast {
  background: #1c2715 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(96,1,255,0.4) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
/* Style the progress bar*/
.Toastify__progress-bar {
  background: linear-gradient(to right, #6001ff, #8b5cf6);
}
/* Style the close button */
.Toastify__close-button {
  color: #ffffff !important;
}

.Toastify__toast-body {
  font-family: your-font-here, sans-serif;
  font-size: 14px;
}


/* WALLET CHOICE MODAL */
/* modal */
.adapter-modal {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.adapter-modal-wrapper {
  background-color: #282c34 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 2rem !important;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6) !important;
  font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.adapter-modal-header .adapter-modal-title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
}
@media (max-width: 374px) {
  .adapter-modal-header .adapter-modal-title {
    font-size: 18px !important;
  }
}
.adapter-modal-header .close-button {
  background: #1a1f2e !important;
  border: none !important;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent !important;
}
.adapter-modal-header .close-button:focus-visible {
  outline: 2px solid white !important;
}
.adapter-modal-header .close-button::before,
.adapter-modal-header .close-button::after {
  background-color: #777 !important;
}
.adapter-modal-header .close-button:hover::before,
.adapter-modal-header .close-button:hover::after {
  background-color: antiquewhite !important;
}
/** WalletItem */
.adapter-wallet-item .adapter-react-button {
  background-color: transparent !important;
}
.adapter-wallet-item .status-text {
  opacity: 0.6 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
/** dropdown */
.adapter-dropdown-list {
  border-radius: 10px !important;
  font-family: DM Sans, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  background: #2c2d30 !important;
}
.adapter-dropdown-list li {
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.adapter-dropdown-list li:not([disabled]):hover {
  background-color: #373c47 !important;
}