.page {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: linear-gradient(
    0deg,
    rgba(71, 134, 255, 0.4) 0%,
    rgba(71, 134, 255, 0) 100%
  );
}
.assetSelectionDivCont {
  width: 100%;
}

.buttonCont {
  display: flex;
  flex-direction: row;
  padding: 12px 24px;
  margin-left: 50px;
  margin-right: 50px;
  position: fixed;
  width: calc(100% - 50px);
  bottom: 0;
}

.topBarDiv {
  width: 100%;
  display: flex;
  flex-direction: rows;
  align-items: center;
  justify-content: center;
}

.earthInputLabel {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;

  color: #ffffff;
  text-align: left;
  width: calc(100% - 48px);
  padding: 18px 24px 9px;
  display: flex;
  align-items: center;
}
.pagecont {
  width: 375px;
  height: 560px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.innercontainer {
  height: fit-content;
  margin-bottom: 126px;
}

.paymentDone {
  text-align: center;
  border: 1px dashed #1b8d1b;
  padding: 8px;
  border-radius: 5px;
  margin: 24px;
}

.earthlink {
  font-size: 14px;
  background: rgb(8, 1, 128);
  background: linear-gradient(
    0deg,
    rgba(126, 43, 217, 1) 0%,
    rgba(23, 23, 224, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.earthinput {
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: rgba(8, 25, 39, 0.65);
  border: 2px solid rgba(36, 150, 255, 0.5);
  padding: 16px 12px;
  border-radius: 8px;

  &:focus-visible {
    outline: none;
  }
}

.topBarDivCenterItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0.5;
  color: $subTextColor;
  font-family: $fontFamily;
  font-size: 20px;
}

.topBarDivSideItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0.25;
}

.topBarDivCancelItem {
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: $buttonBackground;
  font-family: $fontFamily;
  font-size: 12px;
  &:hover {
    color: $buttonBackgroundHover;
  }
}

.recipientAddress {
  color: $subTextColor;
  font-family: $fontFamily;
  font-size: $fontSize;
  width: -webkit-fill-available;
  margin: 0px 24px;
}

.transactionDetail {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px;
}

.assetSelectionDiv {
  width: -webkit-fill-available;
  display: flex;
  flex-direction: row;
  flex-flow: row;
  margin: 0px 24px;
  align-items: center;
  justify-content: space-between;
  height: fit-content;
}

.assetSelectionLabel {
  color: $subTextColor;
  font-family: $fontFamily;
  font-size: 16px;
  margin: 0px 34px;
}

.tokenSelectionDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.selectedNetworkDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 240px;
  border-radius: 4px;
  padding: 0 6px;
  background: #5a597e63;
  backdrop-filter: blur(7px);
  border-radius: 14px;
  height: 72px;
  width: calc(100vw - 48px);
  cursor: pointer;
}

.tokenLogo {
  height: 50px;
  width: 50px;
  margin: 0px 12px;
  border-radius: 4px;
  background-color: #ffffff09;
}

.tokenSelectionLabelDiv {
  display: flex;
  flex-direction: Column;
  flex: 1;
}

.tokenLabel {
  color: $subTextColor;
  font-family: $fontFamily;
  line-height: 1.2;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.tokenBalance {
  color: $subTextColor;
  font-family: $fontFamily;
  line-height: 1;
  font-size: 14px;
}
.tokenBalanceText {
  opacity: 0.54;
}

.cancelButton {
  background: $backButtonBackground;
  &:not(:disabled):hover {
    background: $backButtonBackgroundHover;
  }
}

.dropDownIcon {
  margin: 6px;
}

.tokenSelectionDropDown {
  background: $addAccountImageBackground;
  border-radius: 4px;
  border: 1px solid $boxBorderColor;
  box-sizing: border-box;
  box-shadow: 0 0 10px $boxShadow;
  margin-top: 0px;
  position: absolute;
  max-height: 300px;
  overflow: auto;
  z-index: 2;
  display: flex;
  flex-direction: Column;
}

.tokenSelectionDropDownItem {
  display: flex;
  flex-direction: row;
  padding: 4px;
  width: 240px;
  height: 52px;
  align-items: center;
  padding: 6px;
  &:hover {
    background-color: $buttonBackgroundHover;
    cursor: pointer;
  }
}

.tokenText {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 150%;
  text-align: right;
  color: #fafbfb;
  opacity: 0.7;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}

.tokenAmount {
  font-family: DM Mono;
  font-style: normal;
  font-weight: 500;
  font-size: 27px;
  line-height: 44px;
  text-align: right;
  color: #fafbfb;
  text-shadow: 0px 0px 11.4544px rgb(177 204 255 / 89%);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 205px;
}

.confirmPage {
  padding: 0 24px;
  width: 100vw;
  box-sizing: border-box;
}
.confirmAmountCont {
  width: 327px;

  background: rgba(90, 89, 126, 0.39);
  backdrop-filter: blur(7px);

  border-radius: 14px;
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 27px 24px 24px 24px;
}
.tokenValue {
  font-family: DM Mono;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;

  text-align: right;

  color: #fafbfb;

  opacity: 0.51;
}
.feeTitle {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;

  color: #fafbfb;

  opacity: 0.54;
  margin: 5px 0px;
}

.feeAmount {
  font-family: DM Mono;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;

  text-align: right;
  color: #fafbfb;
}

.feeValue {
  font-family: DM Mono;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  text-align: right;
  color: #fafbfb;
  opacity: 0.54;
}

.feeCont {
  width: 327px;
  background: rgba(90, 89, 126, 0.39);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 14px;
  margin-top: 5px;
}

.feeRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.119);
  &:last-child {
    border-bottom: 0px;
  }
}

.feeTotal {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 15px;

  color: #fafbfb;
}

.removeBtn {
  cursor: pointer;
  user-select: none;
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 150%;

  color: #ffffff;

  padding: 3px 9px;
  margin-left: 5px;
  background: rgba(255, 255, 255, 0.17);
  border-radius: 4px;
  &:hover {
    background: rgba(255, 255, 255, 0.37);
  }
}

.maxBtn {
  padding: 0 5px;
  height: 24px;
  background: rgba(255, 255, 255, 0.17);
  border-radius: 4px;
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 150%;

  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
}

.noBalanceError {
  margin: 8px 24px;
}

.warningRecp {
  margin: 12px 24px;
}

.iconcaret {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  margin-right: 18px;
  flex-basis: 16px;
  flex-shrink: 0;
  display: flex;
}

.assetOptions {
  position: absolute;
  top: 73px;
  max-height: 216px;
  background: #101010;
  border-radius: 12px;
  z-index: 200;
  border-radius: 14px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.selectedNetworkDivOption {
  border-radius: 2px;
}

.selectedNetworkDiv_noPointer {
  cursor: auto;
}

.earthLink {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 160%;
  color: #2496ff;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
}

.priceInput {
  margin: 0px 24px;
  padding: 5px 12px;
  font-family: DM Mono;
  font-style: normal;
  opacity: 0.9;
}

.amountError {
  margin: 0px 24px;
  padding: 5px 12px;
  opacity: 0.9;
}

.feeLabel {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 27px;

  color: #ffffff;
}

.feePrice {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 18px;
  color: #ffffff;
}
.feePriceUSD {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.025em;

  color: #55d171;
}

.feeSelectCont {
  display: flex;
  height: 94px;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  padding: 12px;
}
.feeSelectCont_selected {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 14px;
}
.feeSelector {
  width: calc(100vw - 48px);
  margin: 0 24px;
  display: flex;
  background: rgba(90, 89, 126, 0.39);
  backdrop-filter: blur(7px);
  /* Note: backdrop-filter has minimal browser support */

  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
}

.customizeLink {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #2496ff;

  width: calc(100vw - 48px);
  text-align: end;
  margin: 12px 24px;
  user-select: none;
  cursor: pointer;
  &:active {
    opacity: 0.7;
  }
}