.font-weight-500 {
  font-weight: 500;
}

.prices-panel {
  margin-top: 14px!important;
}

.purchased-tokens-panel {
  margin-top: 10px!important;
  margin-bottom: 14px!important;
}

.coin-swipe .coin-info {
  font-size: 12px!important;
}

#connect-wallet-btn, #buy-btn {
  cursor: pointer;
}
#connect-wallet-btn:disabled, #buy-btn:disabled {
  background-color: #943407;
}      
#tokens-to-receive {
  cursor: default;
}
.tokens-to-receive-panel {
  margin-top: 4px!important;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;        
}

.modal {
  border-radius: 24px;
  border: 6px solid var(--primary, #e74a00);
  background: #ffe2d4;
  padding: 20px 40px;
  width: 320px;
  position: relative;
  font-family: "Pure Joy";
}

.modal.modal-l {
  width: 440px;
}

@media (max-width: 767px) {
  .modal.modal-l {
    width: 100%;
  }
}

.modal h2 {
  margin-top: 0;
}

.wallet-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 0 0;
}

.wallet-option button {        
  cursor: pointer;
  font-family: "Pure Joy";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: all ease 0.5s;
  border-radius: 10px;
  border: 1px solid var(--Black, #160303);
  background: #e74a00;
  box-shadow: 3px 3px 0px 0px #160303;
  color: #fff;
  padding: 9px 10px;
}

.wallet-option .icon {
  height: 30px;
  width: 30px;
}

.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.min-spend {
  display: none;
}

#price {
  display: none;
}
.current-price {
  font-size: 12px;
  font-weight: 500;
}

#buy-btn {
  display: none;
}

#wallet-address {
  cursor: pointer;
  color: var(--Black, #000d27);
  font-family: Overlock;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%;
  display: flex;
}

#wallet-address img {
  width: 20px;
  margin-right: 5px;
}

.toast {
  visibility: hidden;
  position: fixed;
  z-index: 9999;        
  padding: 12px 20px;        
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  border-radius: 24px;
  border: 6px solid #dc3eee;
  background: #ffe9ff;        
  color: var(--Black, #000d27);
  font-family: Overlock;
}

@media (min-width: 768px) {
  .toast {
    top: 160px;
    right: 20px;
    transform: translateY(-20px);
  }
}

@media (max-width: 767px) {
  .toast {
    top: 20px;
    left: 50%;
    transform: translate(-50%, -20px);
  }
}

.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}    

.toast.info {
  border-color: #dc3eee;
  background: #ffe9ff;
  color: #000d27;
}

.toast.warn {
  border-color: #ffbb33;
  background: #fff3d1;
  color: #332600;
}

.toast.error {
  border-color: #ff4f4f;
  background: #ffe2e2;
  color: #4a0000;
}

#payment-success-modal .modal {
  text-align: center;
}
#payment-success-modal img {
  width: 40px;
  margin-bottom: 20px;
}
#payment-success-modal h2 {        
  margin-bottom: 10px;
}
#payment-success-modal a {
  display: inline-block;
  margin-top: 30px;        
  text-decoration: none;
  font-weight: bold;
}
#payment-success-modal #purchase-amount {
  color: #dc3eee;
  font-size: 20px;
}
.balance {
  display: none!important;
  font-size: 12px!important;
  margin-top: 4px;
  font-weight: 500!important;
}
.balance.show {
  display: flex !important;
}

input.no-spinners::-webkit-outer-spin-button,
input.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.no-spinners[type=number] {
  -moz-appearance: textfield;
}

.svg-spinner {
  width: 20px;
  height: 20px;
  animation: rotate 1s linear infinite;
}

.spinner-path {
  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}