main {
  margin-bottom: 3rem;
}
main .content_area > h1 {
  font-family: "Rubik", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  color: #4c504d;
}
body.mobile main .content_area > h1 {
  color: #f3fbf4;
}
main .content_area .top_cards_area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2rem;
  margin-top: 3rem;
}
main .content_area .top_card {
  height: 207px;

  border-radius: 10px;
  background-color: #fff;
  padding: 1.5rem;
}
body.mobile main .content_area .top_card {
  background: #1d2124;
}

main .content_area .top_card .state {
  display: flex;
  align-items: center;
  background: linear-gradient(
    138.78deg,
    rgba(7, 191, 80, 0.1) 23.35%,
    rgba(4, 158, 187, 0.1) 82.49%
  );

  height: 21px;
  width: 79px;

  border-radius: 30px;
  margin-top: 1rem;
  padding: 2px 6px 2px 6px;
}
main .content_area .top_card > span {
  display: block;
  margin-top: 1rem;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
  color: #4d504e;
}
body.mobile main .content_area .top_card > span,
body.mobile main .content_area .top_card .bottom_text {
  color: #fff !important;
}
main .content_area .top_card > span .color {
  color: #00ce1cf5;
}
main .content_area .top_card .state p {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
  color: #00ce1cf5;
}
main .content_area .top_card .value {
  font-family: "Rubik", sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: left;
  color: #09100b;
  margin-top: 10px;
  margin-bottom: 20px;
}
body.mobile main .content_area .top_card .value {
  color: #f3fbf4;
}
main .content_area .top_card .bottom_text {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
  color: #4c504d;
}

/* long_cards_wrapper */

.long_cards_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  margin-top: 2rem;
}
.long_card,
.transaction_history {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 10px;
}
body.mobile .long_card,
body.mobile .transaction_history {
  background-color: #1d2124;
}
.long_card .head,
.transaction_history .head {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  color: #09100b;
}

body.mobile .transaction_history .head {
  color: #f3fbf4;
}

.long_card .body {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.long_card .body > * {
  text-align: right;
}
.long_card .body h1,
.transaction_history .right_area h1 {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: right;
  color: #4c504d;
}
body.mobile .transaction_history .right_area h1 {
  color: #f3fbf4;
}
body.mobile .transaction_history .table_area .row > p {
  color: #f3fbf4;
}
.long_card .body p,
.transaction_history .right_area p {
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: right;
  color: #4d504e;
  margin-top: 5px;
}
body.mobile .long_card .body p,
body.mobile .transaction_history .right_area p {
  color: #c3c7c3;
}
body.mobile .long_card .head,
body.mobile .long_card .body h1 {
  color: #f3fbf4;
}
.long_card .bottom {
  margin-top: 2rem;
  display: flex;
  align-items: center;
}
.long_card .bottom input {
  flex: 1;
  margin-right: 10px;
  height: 47px;
  background: #f3f4f3;
  border-radius: 5px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: left;
  font-family: "Rubik", sans-serif;
  color: #919491;
  border: none;
  outline: none;
  padding-left: 1rem;
}
body.mobile .long_card .bottom input {
  background-color: #09100b;
}
.long_card .bottom button {
  height: 47px;
  width: 142px;
  background: linear-gradient(138.78deg, #07bf50 23.35%, #049ebb 82.49%);
  border-radius: 5px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: center;
  border: none;
  outline: none;
  color: #fff;
}
.transaction_history .top_history {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.transaction_history .table_area {
  margin-top: 2rem;
}
.transaction_history .table_area .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  margin-bottom: 10px;
  height: 37px;
  padding: 0rem 1rem;
  border-radius: 4px;
  border: 1px solid #505f79;
  background-color: transparent;
}
.transaction_history .table_area .row p:nth-child(2) {
  text-align: center;
}
.transaction_history .table_area .row p:last-child {
  text-align: right;
}
.transaction_history .table_area .row p {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
  color: #4c504d;
}
.transaction_history .table_area .row.active {
  background: linear-gradient(138.78deg, #07bf50 23.35%, #049ebb 82.49%);
  border-color: transparent;
}
.transaction_history .table_area .row.active p {
  color: #fff;
}

/* charts_area */
.charts_area {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  grid-gap: 2rem;
  margin-top: 2rem;
}
.charts_area .charts_wrapper {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
}

.charts_area .charts_wrapper .top_area,
.charts_area .charts_wrapper .top_area .button_wrapper {
  display: flex;
  align-items: center;
}
.charts_area .charts_wrapper .top_area {
  justify-content: space-between;
}
.charts_area .charts_wrapper .top_area > h1 {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  color: #09100b;
}
body.mobile .charts_area .charts_wrapper .top_area > h1 {
  color: #fafbfb;
}
body.mobile .charts_area .charts_wrapper .charts_button .bottom_text {
  color: #fafbfb;
}
.charts_area .charts_wrapper .charts_button {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.charts_area .charts_wrapper .charts_button button {
  border: 1px solid #ddd;
  background-color: transparent;
  font-family: "Rubik", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  border-right: none;
  letter-spacing: 0em;
  padding: 0.4rem;
  color: #919491;
  cursor: pointer;
}
.charts_area .charts_wrapper .charts_button button.active {
  color: #09100b;
}
body.mobile .charts_area .charts_wrapper .charts_button button.active {
  color: #fff;
}
body.mobile .charts_area .charts_wrapper .charts_button button {
  border-color: #444b55;
}
.charts_area .charts_wrapper .charts_button button:last-child {
  border-right: 1px solid #ddd;
}
.charts_area .charts_wrapper .top_area .buttons_wrapper button {
  background: #f3f4f3;
  font-family: "Rubik", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0em;
  border: none;
  outline: none;
  color: #4c504d;
  height: 23px;
  width: 26px;

  border-radius: 4px;
}
body.mobile .charts_area .charts_wrapper .top_area .buttons_wrapper button {
  background: #444b55;
  color: #dce0dc;
}
.charts_area .charts_wrapper .top_area .buttons_wrapper button.active {
  background: linear-gradient(
    138.78deg,
    #07bf50 23.35%,
    #049ebb 82.49%
  ) !important;
  color: #fff !important;
}

.charts_area .chart_pure {
  width: 100%;
  position: relative;
}

.charts_area .wallet_Wrapper {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
}
.charts_area .wallet_Wrapper > h1 {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

body.mobile .charts_area .wallet_Wrapper > h1 {
  color: #fafbfb;
}
body.mobile .charts_area .charts_wrapper,
body.mobile .charts_area .wallet_Wrapper {
  background-color: #1d2124;
}

.charts_area .wallet_Wrapper .cards_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 10px;
}

.wallet_Wrapper .cards_wrapper .card {
    background: #f3f4f3;
    padding: 1.2rem;
    border-radius: 10px;
}
body.mobile .wallet_Wrapper .cards_wrapper .card {
  background: #09100b;
}
.wallet_Wrapper .cards_wrapper .card .usd {
  display: block;
  font-family: "Rubik", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0em;
  text-align: left;
  margin-top: 1.5rem;
  color: #4d504e;
}
body.mobile .wallet_Wrapper .cards_wrapper .card .usd {
  color: #c3c7c3;
}
.wallet_Wrapper .cards_wrapper .card h1 {
  font-family: "Rubik", sans-serif;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;
  color: #09100b;
}
.wallet_Wrapper .cards_wrapper .card .balance {
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: left;
  color: #4c504d;
}

body.mobile .wallet_Wrapper .cards_wrapper .card h1 {
  color: #f3fbf4;
}
body.mobile .wallet_Wrapper .cards_wrapper .card .balance {
  color: #f3fbf4;
}
.long_inner_card {
    grid-column: span 3;
    background-color: #f3f4f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    border-radius: 10px;
}
body.mobile .long_inner_card {
  background: #09100b;
}
.long_inner_card .balance {
  margin-top: 2px !important;
}
.cards_wrapper .long_inner_card .card h1 {
  font-family: "Rubik", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: 0em;
  text-align: left;
  color: #09100b;
  margin-top: 1rem;
}
.cards_wrapper .long_inner_card .card:last-child h1 {
  font-size: 18px;
  margin-top: 0px;
}
.cards_wrapper .long_inner_card .card .balance {
  margin-top: 0px !important;
}
.cards_wrapper .long_inner_card .card .usd {
}

@media screen and (max-width: 1200px) {
  main .content_area .top_cards_area {
    grid-template-columns: 1fr 1fr;
  }
  .charts_area,
  .long_cards_wrapper {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  main .content_area .top_card .value {
    /* font-size: 18px; */
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 500px) {
  .charts_area .charts_wrapper .top_area,
  .long_inner_card,
  .long_card .bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .charts_area .charts_wrapper .top_area > h1 {
    margin-bottom: 10px;
  }
  .charts_area .wallet_Wrapper .cards_wrapper {
    grid-template-columns: 1fr;
  }
  .long_inner_card {
    grid-column: span 1;
  }
  main .content_area .top_cards_area {
    grid-template-columns: 1fr;
  }
  .long_card .bottom input {
    min-height: 47px;
  }
  .long_card .bottom > *,
  .long_card .bottom button {
    width: 100%;
  }
  .long_card .bottom button {
    margin-top: 10px;
  }

  /* .transaction_history .table_area .row */
  .transaction_history .table_area .row {
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: 100%;
  }
  .transaction_history .table_area .row p:nth-child(2),
  .transaction_history .table_area .row p:last-child {
    text-align: left;
  }
}

@media screen and (max-width: 430px) {
  .long_card .body > * + * {
    margin-top: 10px;
  }
  .long_card .body {
    flex-direction: column;
    align-items: flex-start;
  }
  .long_card .body > * {
    text-align: left;
  }
  .long_card .body p,
  .transaction_history .right_area p {
    text-align: left;
  }
  .transaction_history .top_history {
    flex-direction: column;
  }
}

@media screen and (max-width: 390px) {
  #line-chart {
    width: 250px !important;
  }
}
@media screen and (max-width: 350px) {
  #line-chart {
    width: 220px !important;
    height: 250px !important;
  }
}
@media screen and (max-width: 312px) {
  #line-chart {
    width: 200px !important;
    height: 250px !important;
  }
}