.home-heading {
    padding: 48px 0 64px;

    @media (min-width: 992px) {
      display: flex;
      align-items: center;
      /* padding: 160px 0 64px; */
    }
  
    h1 {
      font-weight: 400;
      font-size: 50px;
      line-height: 1.1;
      white-space: nowrap;

      @media (min-width: 992px) {
        font-size: 64px;
      }

      @media (min-width: 1200px) {
        font-size: 84px;
      }
    }

    h2 {
      margin-top: 16px;
      font-weight: 400;
      font-size: 16px;

      @media (min-width: 992px) {
        font-size: 24px;
      }

      @media (min-width: 1200px) {
        font-size: 34px;
      }
    }

    .home-heading__text {
      position: relative;

      @media (min-width: 992px) {
        width: 50%;
        padding-right: 48px;
      }

      .text__icon {
        position: absolute;
        top: 12px;
        left: 274px;
        width: 48px;
        height: 48px;

        @media (min-width: 992px) {
          left: 350px;
          width: 64px;
          height: 64px;
        }

        @media (min-width: 1200px) {          
          left: 460px;
          width: 80px;
          height: 80px;
        }
      }

      .button {
        margin-top: 16px;

        @media (min-width: 992px) {
          padding: 12px 24px;
          font-size: 18px;
        }
      }
    }

    .home-heading__indicator {
      margin-top: 48px;

      @media (min-width: 992px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        margin-top: 0;
      }

      > div {
        aspect-ratio: auto !important;
        width: 100%;
      }

      h3 {
        margin-bottom: 16px;
        font-weight: 400;
        text-align: center;

        .append-text {
          opacity: 0.75;
        }

        .cfgi-color { 
          opacity: 1; 
          font-weight: 700;
        }
      }

      svg {
        max-width: 100%;
        max-height: 360px;
      }

      .indicator__timeframe {
        margin-top: 16px;
        text-align: center;

        .timeframe__selector {
          position: relative;
          z-index: 1000;
          display: inline-block;

          @media (min-width: 768px) {
            text-align: center;
          }

          p {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 4px 6px 4px 12px;
            font-size: 12px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            cursor: pointer;
        
            @media (min-width: 768px) {
              margin: 0 0 4px;
              padding: 0;
              font-size: 14px;
              border: 0;
              background: none;
              cursor: default;
            }
        
            &:hover {
              background: rgba(255, 255, 255, 0.1);
        
              @media (min-width: 768px) {
                background: none; 
              }
            }
        
            svg {
              transition: transform 0.2s;
        
              @media (min-width: 768px) {
                display: none;
              }
            }
        
            &.is-toggled {
              svg {
                transform: rotate(180deg);
              }
            }
          }
        
          ul {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            left: 0;
            display: none;
            align-items: center;
            flex-direction: column;
            margin: 0;
            padding: 0 1px;
            list-style: none;
            font-size: 14px;
            background: var(--color-border);
            border-radius: 6px;
            border: 1px solid var(--color-border);
        
            @media (min-width: 768px) {
              position: static;
              display: inline-flex;
              flex-direction: row;
              margin-top: 8px;
            }
        
            &.is-visible {
              display: flex;

              @media (min-width: 992px) {
                display: inline-flex;
              }
            }
        
            li {
              width: 100%;
              padding: 4px 2px;

              @media (min-width: 992px) {
                width: auto;
              }
            }
        
            a {
              display: block;
              padding: 4px 12px;
              color: var(--color-text);
              background: var(--color-border);
              border-radius: 5px;
        
              &:hover {
                color: var(--color-text);
              }
        
              &.is-active {
                color: #fff;
                background: #141414;
              }
            }
          }
        }
      }
    }
}

.home-chart {
  position: relative;
  margin-bottom: 48px;

  .card {
    height: 300px;
    margin: 0;
    padding: 24px 16px;
  }

  .home-chart__sign-up {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;

    p {
      margin: 0 0 16px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }

  img {
    opacity: 0.5;
    filter: blur(4px);
  }

  [data-type] {
    display: none;
  }

  [data-type="full"] {
    height: 300px;
  }

  &[data-access="10"][data-timeframe="15m"],
  &[data-access="10"][data-timeframe="1h"],
  &[data-access="10"][data-timeframe="4h"] {
    [data-type="upgrade"] {
      display: block;
    }
  }

  &[data-access="10"][data-timeframe="1d"] {
    [data-type="full"] {
      display: block;
    }
  }

  &[data-access="11"][data-timeframe="15m"],
  &[data-access="11"][data-timeframe="1h"] {
    [data-type="advance"] {
      display: block;
    }
  }

  &[data-access="11"][data-timeframe="4h"],
  &[data-access="11"][data-timeframe="1d"] {
    [data-type="full"] {
      display: block;
    }
  }

  &[data-access="12"][data-timeframe="15m"] {
    [data-type="advance"] {
      display: block;
    }
  }

  &[data-access="12"][data-timeframe="1h"],
  &[data-access="12"][data-timeframe="4h"],
  &[data-access="12"][data-timeframe="1d"] {
    [data-type="full"] {
      display: block;
    }
  }

  &[data-access="13"] {
    [data-type="full"] {
      display: block;
    }
  }
}

.home-sentiment {
  margin-bottom: 48px;
  
  h3 {
    margin-bottom: 16px;
    font-weight: 400;

    @media (min-width: 992px) {
      font-size: 24px;
    }
  }

  .sentiment-block {
    .card {
      margin: 0;
      padding: 16px;
    }

    img {
      width: 100%;
      margin-top: 16px;
      object-fit: cover;
      opacity: 0.5;
      filter: blur(4px);
    }

    .sentiment-block__sign-up {
      position: absolute;
      z-index: 10;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      text-align: center;

      p {
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
      }
    }

    .sentiment-block__chart {
      height: 350px;
      margin-top: 16px;
    }

    [data-type] {
      display: none;
    }

    &[data-access="10"][data-timeframe="15m"],
    &[data-access="10"][data-timeframe="1h"],
    &[data-access="10"][data-timeframe="4h"] {
      [data-type="upgrade"] {
        display: block;
      }
    }

    &[data-access="10"][data-timeframe="1d"] {
      [data-type="full"] {
        display: block;
      }
    }

    &[data-access="11"][data-timeframe="15m"],
    &[data-access="11"][data-timeframe="1h"] {
      [data-type="advance"] {
        display: block;
      }
    }

    &[data-access="11"][data-timeframe="4h"],
    &[data-access="11"][data-timeframe="1d"] {
      [data-type="full"] {
        display: block;
      }
    }

    &[data-access="12"][data-timeframe="15m"] {
      [data-type="advance"] {
        display: block;
      }
    }

    &[data-access="12"][data-timeframe="1h"],
    &[data-access="12"][data-timeframe="4h"],
    &[data-access="12"][data-timeframe="1d"] {
      [data-type="full"] {
        display: block;
      }
    }

    &[data-access="13"] {
      [data-type="full"] {
        display: block;
      }
    }
  }

  .home-sentiment__charts {
    .swiper-wrapper,
    .swiper-slide {
      height: auto;
    }
  }
} 

.history-chart {
  .history-chart__sign-up {
    position: relative;
    display: inline-block;

    .button {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      padding: 6px 10px;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }

    img {
      opacity: 0.5;
    }
  }

  [data-type] {
    display: none;
  }

  &[data-access="10"][data-timeframe="15m"],
  &[data-access="10"][data-timeframe="1h"],
  &[data-access="10"][data-timeframe="4h"] {
    [data-type="upgrade"] {
      display: inline-block;
    }

    ~ .token-table-buttons {
      .button--primary {
        color: #fff;
        border: 1px solid var(--color-primary);
        background: rgba(23, 127, 240, 0.4);

        &:hover {
          color: #fff !important;
          background: rgba(23, 127, 240, 0.6);
        }
      }
    }
  }

  &[data-access="10"][data-timeframe="1d"] {
    [data-type="full"] {
      display: inline-block;
    }

    ~ .token-table-buttons {
      .button--primary {
        color: #fff;
        border: 1px solid var(--color-primary);
        background: rgba(23, 127, 240, 0.4);

        &:hover {
          color: #fff !important;
          background: rgba(23, 127, 240, 0.6);
        }
      }
    }
  }

  &[data-access="11"][data-timeframe="15m"],
  &[data-access="11"][data-timeframe="1h"] {
    [data-type="advance"] {
      display: inline-block;
    }

    ~ .token-table-buttons {
      .button--primary {
        color: #fff;
        border: 1px solid var(--color-primary);
        background: rgba(23, 127, 240, 0.4);

        &:hover {
          color: #fff !important;
          background: rgba(23, 127, 240, 0.6);
        }
      }
    }
  }

  &[data-access="11"][data-timeframe="4h"],
  &[data-access="11"][data-timeframe="1d"] {
    [data-type="full"] {
      display: inline-block;
    }
  }

  &[data-access="12"][data-timeframe="15m"] {
    [data-type="advance"] {
      display: inline-block;
    }

    ~ .token-table-buttons {
      .button--primary {
        color: #fff;
        border: 1px solid var(--color-primary);
        background: rgba(23, 127, 240, 0.4);

        &:hover {
          color: #fff !important;
          background: rgba(23, 127, 240, 0.6);
        }
      }
    }
  }

  &[data-access="12"][data-timeframe="1h"],
  &[data-access="12"][data-timeframe="4h"],
  &[data-access="12"][data-timeframe="1d"] {
    [data-type="full"] {
      display: inline-block;
    }
  }

  &[data-access="13"] {
    [data-type="full"] {
      display: inline-block;
    }
  }
}

/* h2:has(+ .home-why-us) {
  margin: 24px 0 16px;

  @media (min-width: 992px) {
    margin: 40px 0 24px;
  }
} */

.home-why-us {
  padding: 24px 0 24px;
  
  @media (min-width: 768px) {
    display: flex;
    padding: 40px 0 40px;
  }

  h3,
  p {
    margin: 0;
  }

  h3 {
    font-size: 18px;
  }

  .is-mobile {
    @media (min-width: 768px) {
      display: none;
    }
  }

  .is-desktop {
    display: none;

    @media (min-width: 768px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 48px;
    }
  }

  .home-why-us__title {
    padding-bottom: 24px;

    @media (min-width: 768px) {
      padding-bottom: 32px;
    }

    @media (min-width: 992px) {
      padding-bottom: 48px;
    }

    h3 {
      margin-bottom: 12px;
    }
  }

  .home-why-us__chart {
    margin-bottom: 24px;
    padding: 24px;
    background: #141414;
    border: 1px solid var(--color-border);
    border-radius: 8px;

    @media (min-width: 768px) {
      width: 50%;
      flex: 0 0 50%;
      margin-bottom: 0;
    }

    @media (min-width: 992px) {
      width: 50%;
      flex: 0 0 50%;
    }

    @media (min-width: 1200px) {
      width: 50%;
      flex: 0 0 50%;
    }

    .chart__title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      h5 {
        margin: 0 8px 0 4px;
      }
    }

    .chart__price {
      height: 200px;
      min-height: 240px;
      margin-bottom: 8px;

      @media (min-width: 768px) {
        height: 380px;
      }

      @media (min-width: 992px) {
        height: 400px;
      }

      @media (min-width: 1200px) {
        height: 340px;
      }
    }

    .chart__cfgi,
    .chart__others {
      height: 100px;
      padding-right: 21px;

      @media (min-width: 768px) {
        height: 130px;
        padding-right: 29px;
      }

      @media (min-width: 992px) {
        height: 100px;
      }
    }

    .chart__cfgi {
      margin-bottom: 8px;
    }
  }

  .home-why-us__content {
    .content__item {
      @media (min-width: 768px) {
        display: flex;
        align-items: flex-start;
      }

      .item__timeframe {
        flex-shrink: 0;
        float: left;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        background: var(--color-primary);
        border-radius: 8px;
        transform: translateY(12px);

        @media (min-width: 768px) {
          float: none;
          transform: translateY(0);
        }
      }

      .item__text {
        @media (min-width: 768px) {
          padding-left: 16px;
        }

        .text__header {
          text-align: right;

          @media (min-width: 768px) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: left;
          }

          h3 {
            margin-bottom: 8px;

            @media (min-width: 768px) {
              margin-bottom: 0;
              padding-right: 12px;
            }
          }

          .button {
            svg {
              fill: #fff;
            }
          }
        }

        p {
          margin-top: 12px;
        }
      }

      &.content__item--other {
        margin-top: 24px;

        .item__timeframe {
          background: red;
        }
      }
    }

    .content__info {
      display: flex;
      flex-direction: column;
      margin-top: 48px;

      h3 {
        margin-bottom: 12px;
      }

      .button {
        margin-top: 16px;
        align-self: flex-end;
      }
    }
  }

  .timeframe__selector {
    position: relative;
    z-index: 1000;
    display: inline-block;

    @media (min-width: 768px) {
      text-align: center;
    }
  
    ul {
      position: static;
      display: inline-flex;
      align-items: center;
      margin: 0;
      padding: 0 1px;
      list-style: none;
      font-size: 14px;
      background: var(--color-border);
      border-radius: 6px;
      border: 1px solid var(--color-border);
  
      li {
        padding: 2px 1px;

        &.is-disabled {
          opacity: 0.25;
          pointer-events: none;

          a {
            color: var(--color-text);
            background: none;
          }
        }
      }
  
      a {
        display: block;
        padding: 2px 8px;
        color: var(--color-text);
        font-size: 12px;
        background: var(--color-border);
        border-radius: 5px;

        @media (min-width: 992px) {
          padding: 3px 8px;
          font-size: 14px;
        }
  
        &:hover {
          color: var(--color-text);
        }
  
        &.is-active {
          color: #fff;
          background: #141414;
        }
      }
    }
  }
}

.button--disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
}

.tab-fear-greed {
  .tab-fear-greed__info {
      padding-top: 44px;

      @media (min-width: 992px) {
          padding-top: 0;
      }

      .card-with-tabs-nav__content .content__close {
          top: -30px;
      }
  }
}

.card-with-tabs-nav {
  display: flex;
  flex-direction: row;
  overflow: hidden;

  .card-with-tabs-nav__title {
      position: absolute;
      top: 0;
      left: 0;
      padding: 24px 0 0 24px;
      color: #fff;
      font-weight: 700;

      @media (min-width: 992px) {
          display: none;
      }
  }

  .card-with-tabs-nav__nav {
      flex: 0 0 100%;
      margin: 0;
      padding: 12px 0;
      list-style: none;

      @media (min-width: 992px) {
          flex: 0 0 auto;
          min-width: 160px;
          border-right: 1px solid var(--color-border);
      }

      a {
          display: block;
          padding: 8px 24px;
          color: var(--color-text);
          text-decoration: none;
          transition: box-shadow 0.2s;

          &:hover {
              box-shadow: 2px 0 0 inset rgba(255, 255, 255, 0.2);
          }
      }

      li {
          &.is-active {
              a {
                  color: var(--color-primary);
                  box-shadow: 2px 0 0 inset var(--color-primary);
              }
          }
      }
  }

  .card-with-tabs-nav__content {
      position: relative;
      z-index: 10;
      padding-top: 12px;
      flex: 0 0 100%;
      background: #141414;
      transition: transform 0.2s ease-in-out;

      @media (min-width: 992px) {
          flex: 0 1 auto;
          padding-top: 0;
      }

      .content__close {
          position: absolute;
          z-index: 10;
          top: 16px;
          right: 16px;
          padding: 8px;
          cursor: pointer;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;

          @media (min-width: 992px) {
              display: none;
          }

          svg {
              fill: #fff;
          }
      }

      .content__item {
          padding: 24px;
          display: none;

          &.is-visible {
              display: block;
          }

          [class^="tabs-content-"] {
              margin-top: 24px;
          }
      }

      &.is-visible {
          transform: translateX(-100%);

          @media (min-width: 992px) {
              transform: translateX(0);
          }
      }
  }

  .card-tabs {
      margin-top: 12px;

      li {
          padding: 4px 8px;
      }
  }

  .progress-percent .badge {
      white-space: normal !important;
  }
}

.mobile-view {
  display: block;
}

.desktop-view {
  display: none;
}

.trading-view {
  margin: 80px auto;
  padding: 24px;
  text-align: center;
  background: #141414;
  border-radius: 8px;

  @media (min-width: 768px) {
      max-width: 80vw;
  }

  @media (min-width: 992px) {
      max-width: 50vw;
      margin: 24px auto;
  }

  p {
      margin: 16px auto 0;
  }
}