.buyWithCryptoModal .infoIconPopUp {
  z-index: 9999;
}

.buyWithCryptoModal:global(.ui.tiny.modal) {
  min-height: 640px;
  display: flex !important;
  flex-direction: column;
}

.buyWithCryptoModal:global(.ui.modal > .actions) {
  margin-top: auto;
}

.buyWithCryptoModal:global(.ui.modal > .content) {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.buyWithCryptoModal .mainLoader:global(.ui.loader) {
  position: relative;
  top: 25%;
}

.buyWithCryptoModal :global(.AssetImage) {
  margin: 0;
  margin-right: 16px;
  width: 55px;
  height: 55px;
  border-radius: 6px;
  overflow: hidden;
}

.buyWithCryptoModal .assetContainer {
  display: flex;
  border-bottom: 1px solid var(--dropdown);
  padding-bottom: 24px;
}

.assetName {
  margin-right: 12px;
}

.assetDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.assetDescription {
  color: #a09ba8;
}

.buyWithCryptoModal .priceContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.buyWithCryptoModal .priceContainer :global(.ui.header.dcl.mana.inline) {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.buyWithCryptoModal .priceContainer .priceInUSD {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0px;
  color: #a09ba8;
  text-wrap: nowrap;
}

.buyWithCryptoModal .subtitle {
  font-size: 15px;
}

.buyWithCryptoModal .dropdownContainer :global(span) {
  font-size: 14px;
}

.buyWithCryptoModal .routeUnavailable,
.insufficientFunds {
  color: red;
  font-size: 14px;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown > .dropdown.icon) {
  margin-left: auto;
  align-self: center;
  margin-right: -6px;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown) {
  display: flex;
  margin-top: 2px;
}

.buyWithCryptoModal .feeCoveredFree {
  color: #36d41d;
}

.buyWithCryptoModal :global(.dcl.modal-navigation-title) {
  font-weight: bold;
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 40px;
}

.buyWithCryptoModal .durationAndExchangeContainer {
  border: 1px solid #716b7c;
  margin: 24px 0;
  padding: 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #a09ba8;
}

.buyWithCryptoModal .durationAndExchangeContainer div {
  display: flex;
  justify-content: space-between;
}

.buyWithCryptoModal .durationAndExchangeContainer :global(.icon) {
  font-size: 14px;
  margin-right: 4px;
}

.buyWithCryptoModal .durationAndExchangeContainer .exchangeIcon {
  width: 15px;
  height: 15px;
  background-image: url(../../../images/exchange.svg);
  background-size: contain;
  margin-right: 10px;
}

.buyWithCryptoModal .exchangeContainer {
  margin-top: 8px;
}

.buyWithCryptoModal .exchangeContainerLabel {
  align-items: center;
}

.buyWithCryptoModal .rememberFreeTxs {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  color: #a09ba8;
  margin-top: auto;
  padding: 20px 50px;
}

.buyWithCryptoModal .buttons {
  width: 100%;
}

.buyWithCryptoModal :global(.actions) {
  position: relative;
}

.buyWithCryptoModal :global(.actions .ui.button.disabled) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #716b7c;
}

.buyWithCryptoModal :global(.actions .ui.button.disabled .loader) {
  margin-right: 12px;
}

@keyframes wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.buyWithCryptoModal .skeleton {
  flex-shrink: 0;
  background: var(--dcl-pale-black, #43404a);
  background: linear-gradient(90deg, #43404a 25%, #63616d 50%, #43404a 75%);
  background-size: 200% 100%;
  animation: wave 1.5s infinite;
  border-radius: 4px;
}

.buyWithCryptoModal .estimatedFeeSkeleton {
  width: 180px;
  height: 26px;
}

.buyWithCryptoModal .fromAmountUSDSkeleton {
  width: 90px;
  height: 18px;
  margin-top: 2px;
}

.buyWithCryptoModal .warning {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0px;
  text-align: center;
  color: #ff8362;
  padding: 24px 48px;
  margin-top: auto;
}

.buyWithCryptoModal,
.buyWithCryptoModal :global(.Column.right) {
  display: flex;
  flex-direction: column;
}

.buyWithCryptoModal:global(.ui.modal > .actions) {
  margin-top: auto;
}

.buyWithCryptoModal:global(.ui.modal > .actions .ui.button + .ui.button) {
  margin-left: 0;
  margin-top: 16px;
}

.buyWithCryptoModal:global(.ui.modal > .content) {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 12px;
  margin-bottom: 0;
}

.buyWithCryptoModal .mainLoader:global(.ui.loader) {
  align-self: center;
  height: 220px;
}

.buyWithCryptoModal .mainLoader:global(.ui.loader::before),
.buyWithCryptoModal .mainLoader:global(.ui.loader::after) {
  top: 50%;
}

.buyWithCryptoModal .subtitle {
  font-size: 15px;
}

.buyWithCryptoModal .dropdownContainer {
  display: flex;
  color: var(--text);
  margin-top: 16px;
  padding-bottom: 24px;
}

.buyWithCryptoModal .dropdownContainer :global(span) {
  font-size: 14px;
}

.buyWithCryptoModal .dropdown {
  background: #43404a;
  color: var(--white);
  border-radius: 8px;
  padding: 15px;
  width: 190px;
}

.buyWithCryptoModal .chainDropdown {
  width: 167px;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown .menu .item) {
  display: flex;
  align-items: center;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown .menu .item) {
  display: flex;
  align-items: center;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown > .text) {
  color: var(--black);
  font-size: 13px;
  line-height: 18px;
  font-weight: bold;
}

.buyWithCryptoModal .dropdown :global(.ui.avatar.image) {
  width: 25px;
  height: 25px;
  margin-top: -3px;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown > .text > .image) {
  width: 25px;
  height: 25px;
  margin-top: -3px;
}

.buyWithCryptoModal .routeUnavailable,
.insufficientFunds {
  color: red;
  font-size: 14px;
}

.buyWithCryptoModal .dropdown:global(.ui.dropdown) {
  display: flex;
  margin-top: 8px;
}

.buyWithCryptoModal
  .tokenDropdown:global(.ui.search.dropdown.active > input.search) {
  padding-left: 40px;
  height: 100%;
}

.buyWithCryptoModal .tokenDropdown:global(.ui.search.dropdown > input.search) {
  padding-left: 40px;
  height: 100%;
}

.buyWithCryptoModal .tokenDropdown:global(.ui.dropdown.scrolling .menu) {
  width: 100% !important; /* semantic ui has auto!important; */
}

.buyWithCryptoModal .balanceSkeleton {
  flex-shrink: 0;
  background: var(--dcl-pale-black, #43404a);
  margin-right: 16px;
  background: linear-gradient(90deg, #43404a 25%, #63616d 50%, #43404a 75%);
  background-size: 200% 100%;
  animation: wave 1.5s infinite;
  border-radius: 4px;
  width: 60px;
  height: 16px;
  margin-left: 6px;
}

.buyWithCryptoModal .balance {
  margin-left: 6px;
}

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

  .buyWithCryptoModal:global(.ui.modal > .content) {
    margin: 2px;
  }
}
