.page-live-pricing {
  background: rgb(250, 231, 221);
  background: linear-gradient(180deg, rgb(221 232 250) 0%, rgb(246 248 249) 15%);
}

.page-live-pricing header#header {
  background-color: white;
}

#pricing-container {
  background-color: white;
  padding: 2rem;
  border-radius: 1rem;
}

#price-chart-navigation {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

#price-chart-navigation .price-chart-filters {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
}

#price-chart-navigation .price-chart-filters li {
  position: relative;
  display: inline-block;
  font-family: "Aeonik", sans-serif;
  font-size: 17px;
  background-color: #f7f6f9;
  padding: 1rem 2rem;
  border-radius: 1rem;
  color: #09090B;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: 0.2s background-color ease-in-out, 0.2s color ease-in-out;
}

#price-chart-navigation .price-chart-filters li:first-child {
  margin-left: 0;
}

#price-chart-navigation .price-chart-filters li:last-child {
  margin-right: 0;
}

#price-chart-navigation .price-chart-filters li:hover,
#price-chart-navigation .price-chart-filters li.active {
  background-color: var(--bira-link-color);
  color: white;
  cursor: pointer;
}

#price-chart {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#price-chart thead tr th {
  color: #52525B;
  font-family: "Aeonik", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;

  &.text-end {
    text-align: right;
  }

  &.name-icon {
    padding-left: 62px;
  }
}

/* #price-chart .table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-accent-bg: #FAFBFF;
} */

#price-chart .table>tbody>tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#price-chart .table>:not(caption)>*>* {
  border: 0;
}

#price-chart tbody tr th,
#price-chart tbody tr td {
  font-family: var(--bira-gotham);
  vertical-align: middle;
  padding: 0.5rem;
}

#price-chart tbody tr td {
  min-width: 100px;
}

#price-chart tbody tr th.th-name {
  max-width: 225px;
}

#price-chart tbody tr td.currency-price,
#price-chart tbody tr td.currency-trend,
#price-chart tbody tr td.currency-market-cap,
#price-chart tbody tr td.currency-total-volume,
#price-chart tbody tr td.currency-circulating-supply,
#price-chart tbody tr td.currency-change,
#price-chart tbody tr td.currency-buy {
  text-align: right;
}

@media (max-width: 1024px) {

  #price-chart thead tr th.th-name,
  #price-chart thead tr th.th-price,
  #price-chart thead tr th.th-trend,
  #price-chart thead tr th.th-market,
  #price-chart thead tr th.th-volume,
  #price-chart thead tr th.th-supply,
  #price-chart thead tr th.th-change,
  #price-chart tbody tr td.currency-trend,
  #price-chart tbody tr td.currency-market-cap,
  #price-chart tbody tr td.currency-total-volume,
  #price-chart tbody tr td.currency-circulating-supply,
  #price-chart tbody tr td.currency-change,
  #price-chart tbody tr td.currency-buy {
    display: none !important;
  }
}

#price-chart .currency-name .currency-data {
  display: flex;
  align-items: center;
}

#price-chart .currency-name img {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
}

#price-chart .currency-info .currency-label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.0625rem;
  letter-spacing: -0.166667px;
  color: black;
}

#price-chart .currency-info .currency-symbol {
  font-size: 0.875rem;
  font-weight: 300;
  font-weight: normal;
  line-height: 0.875rem;
  letter-spacing: -0.166667px;
  color: #515151;
}

#price-chart .currency-value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.0625rem;
  letter-spacing: -0.166667px;
  color: black;
}

#price-chart .currency-change {
  --trending-up: #31C43F;
  --trending-down: #EF5955;
}

#price-chart .currency-change.up {
  color: var(--trending-up);
}

#price-chart .currency-change.down {
  color: var(--trending-down);
}

#price-chart .currency-trend {
  --trending-up: #31C43F;
  --trending-down: #EF5955;
  font-size: 0.875rem;
}

#price-chart .currency-trend.up {
  color: var(--trending-up);
}

#price-chart .currency-trend.down {
  color: var(--trending-down);
}

#price-chart .currency-buy .btn {
  font-size: 0.875rem;
  padding: 0.35rem 1.5rem;
}

#price-chart .price-change-graph {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  max-width: 90px;
}

#price-chart .price-change-graph-label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
  Sekeleton Table
*/
@keyframes skeleton-loading {
  0% {
    background-color: hsl(228, 100%, 95%);
  }

  100% {
    background-color: hsl(228, 100%, 99%);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

#price-chart .skeleton {
  margin-bottom: 2rem;
}

#price-chart .skeleton .skeleton-col {
  position: relative;
  background-color: hsl(228, 100%, 95%);
  padding: 0;
  height: 83px;
  width: 100%;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  overflow: hidden !important;
}

#price-chart .skeleton .skeleton-col::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 50%) 60%, rgb(255 255 255 / 0));
  animation-name: shimmer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#price-chart .skeleton .skeleton-col:nth-child(1)::after {
  animation-delay: 0.25s;
}

#price-chart .skeleton .skeleton-col:nth-child(2)::after {
  animation-delay: 0.5s;
}

#price-chart .skeleton .skeleton-col:nth-child(3)::after {
  animation-delay: 0.75s;
}

#price-chart .skeleton .skeleton-col:nth-child(4)::after {
  animation-delay: 1s;
}

#price-chart .skeleton .skeleton-col:nth-child(5)::after {
  animation-delay: 1.25s;
}

.load-more-container {
  text-align: center;
  padding-top: 2rem;
  margin-bottom: -2rem;
}

.load-more-container button {
  padding-left: 4rem;
  padding-right: 4rem;
}

#live-pricing {
  .row-item {
    color: white;
    font-family: "Aeonik", sans-serif;
    margin-bottom: 1.5rem;

    .crypto-item-name {
      display: flex;
      align-items: center;
      gap: 1rem;

      .crypto-item-coin {
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: 0.1px;

        @media (min-width: 1024px) {
          font-size: 20px;
        }

        @media (max-width: 1024px) {
          font-size: 16px;
        }
      }

      img {
        width: 48px;
        height: 48px;
      }
    }

    .crypto-item-data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;

      .crypto-item-price {
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: 0.1px;

        @media (min-width: 1024px) {
          font-size: 20px;
        }

        @media (max-width: 1024px) {
          font-size: 16px;
        }
      }
    }

    &.up {
      .crypto-item-trend {
        color: #4ADE80;
      }
    }

    &.down {
      .crypto-item-trend {
        color: #F87171;
      }
    }
  }
}

@media (max-width: 1140px) {

  #live-pricing #lp-zec,
  #live-pricing #lp-ada,
  #live-pricing #lp-bch,
  #live-pricing #lp-xlm,
  #live-pricing #lp-link {
    display: none;
  }
}

#crypto-carousel {
  .swiper-slide {
    font-family: "Aeonik", sans-serif;
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    background: white;
    padding: 2rem;
    border-radius: 1rem;

    &.up {
      .crypto-change {
        .crypto-trend {
          color: #4ADE80;
        }
      }
    }

    &.down {
      .crypto-change {
        .crypto-trend {
          color: #F87171;
        }
      }
    }

    .price-change-graph {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      max-width: 90px;
    }

    .price-change-graph-label {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
  }

  .crypto-header {
    display: flex;
    justify-content: space-between;

    .crypto-icon {
      img {
        width: 40px;
        height: 40px;
      }
    }

    .crypto-chart {}
  }

  .crypto-identity {
    display: flex;
    gap: 0.5rem;

    .crypto-name {
      color: #09090B;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: 32px;
      letter-spacing: 0.1px;
    }

    .crypto-symbol {
      color: #3F3F46;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0.1px;
    }
  }

  .crypto-data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .crypto-label {
      color: #52525B;
      font-size: 11px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .crypto-price {
      .crypto-amount {
        color: #09090B;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.1px;
      }
    }

    .crypto-change {
      .crypto-trend {
        text-align: right;
        font-size: 17px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.1px;
      }
    }
  }
}