.right-cards {
  position: absolute;
  right: 96%;
  max-width: 240px;
  width: 100%;
  padding: 12px;
  bottom: 50%;

  z-index: 10;
}

.right-cards--container {
  position: relative;
}

.right-card--speed-section {
  position: relative;
  padding: 20px;
  color: white;
  background: transparent;
  z-index: 1;

  border-left: 4px solid rgba(255, 255, 255, 0.3);
  border-bottom: 4px solid rgba(255, 255, 255, 0.3);

  border-bottom-left-radius: 36.67px;

  font-weight: 400;
  font-size: 13.57px;
  line-height: 140%;
  letter-spacing: 0%;
  text-align: center;
}

.person-text-container {
  position: absolute;

  display: flex;

  gap: 8px;
}

.person-text-right {
  right: 100%;
  transform: translateX(50%);
  bottom: 100%;

  flex-direction: column;
}

.person-text-container--amount {
  padding: 12px;
  background-color: rgba(36, 38, 42, 1);

  border-radius: 13.88px;

  display: flex;
  justify-content: baseline;
  align-items: end;
  min-width: max-content;

  gap: 4px;
}

.person-text-container--user {
  background-color: rgba(36, 38, 42, 1);
  border: 1.16px solid rgba(255, 255, 255, 0.1);

  padding: 4px 16px 4px 4px;

  border-radius: 40px;

  max-width: fit-content;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.person-text-container--user-image {
  max-width: min-content;
  border: 1.23px solid rgba(255, 255, 255, 1);

  border-radius: 100%;
  overflow: hidden;
  background-color: #fff;

  width: 32.65px;
  height: 32.65px;
}

.person-text-container--user-title {
  font-weight: 400;
  font-size: 8.63px;
  line-height: 100%;
  letter-spacing: 0%;

  color: rgba(255, 255, 255, 0.52);
}

.person-text-container--user-name {
  font-weight: 500;
  font-size: 13.57px;
  line-height: 100%;
  letter-spacing: 0%;

  color: rgba(255, 255, 255, 1);
}

.person-text-container--amount--direction {
  font-weight: 400;
  font-size: 12.58px;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 0.52);
}

.person-text-container--amount--value {
  font-weight: 500;
  font-size: 33.55px;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
}

.left-cards {
  position: absolute;
  left: 96%;
  max-width: 240px;
  width: 100%;
  padding: 12px;
  top: 50%;

  z-index: 10;
}

.left-cards--container {
  position: relative;
}

.left-card--speed-section {
  position: relative;
  padding: 20px;
  color: white;
  background: transparent;
  z-index: 1;

  border-right: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid rgba(255, 255, 255, 0.3);

  border-top-right-radius: 36.67px;

  font-weight: 400;
  font-size: 13.57px;
  line-height: 140%;
  letter-spacing: 0%;
  text-align: center;
}

.person-text-left {
  left: 100%;
  transform: translateX(-75%);
  top: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: end;
}

.user-image {
  width: 32.65px;
  aspect-ratio: 1/1;
}

.check {
  width: 29.93px;
  aspect-ratio: 1/1;
}

.chevron-icon {
  width: 14.36px;
  aspect-ratio: 1/1;
}

.line-graph {
  max-width: 56.87997055053711px;
  width: 100%;
}

.circle-help {
  width: 12.57px;
  aspect-ratio: 1/1;
}

.refresh-icon {
  width: 14.365900039672852px;
  aspect-ratio: 1/1;
}

.toc {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 11px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;

  color: rgba(255, 255, 255, 0.72);
  max-width: 230px;
}

@media screen and (max-width: 900px) {
  .mobile-section {
    border-radius: 22.88px 22.88px 0 0;

    padding: 24px 12px;
  }

  .right-cards {
    padding: 0;
    right: 100%;
    width: 10dvw;
  }
  .left-cards {
    width: 18dvw;
    padding: 0 5px;
  }

  .person-text-container--user-image {
    width: 18.53325843811035px;
    height: 18.53325843811035px;
  }

  .person-text-container--user-title {
    font-weight: 400;
    font-size: 4.9px;
    line-height: 100%;
    letter-spacing: 0%;
  }
  .person-text-container--user-name {
    font-weight: 500;
    font-size: 7.7px;
    line-height: 100%;
    letter-spacing: 0%;
  }

  .person-text-container--amount--direction {
    font-weight: 400;
    font-size: 7.14px;
    line-height: 110.00000000000001%;
    letter-spacing: 0%;
  }

  .person-text-container--amount--value {
    font-weight: 500;
    font-size: 19.04px;
    line-height: 100%;
    letter-spacing: 0%;
  }

  .card--speed-content {
    display: none;
  }

  .person-text-container--amount {
    padding: 6px;
  }

  .sncl-card--to-section {
    font-weight: 400;
    font-size: 6.11px;
    line-height: 170%;
    letter-spacing: 0%;
  }

  .sncl-card--send-amount {
    font-weight: 500;
    font-size: 17.96px;
    line-height: 120%;
    letter-spacing: 0%;
  }

  .sncl-card--estimated-received {
    font-weight: 400;
    font-size: 6.11px;
    line-height: 150%;
    letter-spacing: -2%;
  }

  .sncl-card--background {
    min-height: auto;
    gap: 8px;
  }

  .sncl-card--increase-ex {
    font-weight: 400;
    font-size: 6.11px;
    line-height: 170%;
    letter-spacing: 0%;
    vertical-align: bottom;
    justify-content: end;
  }

  .sncl-card--action--expire-text {
    font-weight: 400;
    font-size: 6.11px;
    line-height: 170%;
    letter-spacing: 0%;
  }

  .sncl-card--action--expire-duration {
    font-weight: 500;
    font-size: 6.11px;
    line-height: 170%;
    letter-spacing: 0%;
  }

  .sncl-card--action--button {
    font-weight: 500;
    font-size: 6.11px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;

    padding: 4px;
  }

  .user-image {
    width: 18.53px;
  }

  .check {
    width: 16.98px;
  }

  .chevron-icon {
    width: 8.15px;
  }

  .line-graph {
    max-width: 32.27px;
  }

  .circle-help {
    width: 7.133492946624756px;
  }

  .refresh-icon {
    width: 8.15px;
  }
  .toc {
    font-weight: 400;
    font-size: 9px;
    line-height: 130%;
    letter-spacing: 0%;

    max-width: 180px;
  }
}