my-dashboard.scss

@import 'topcoder/tc-includes';

.my-dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .subtrack-stats {
    width: 100%;
    max-width: 1242px;
    background-color: $white;
  }

  .challenges, .srms, .programs, .tco, .ttl, .one-million, .community-updates {
    @include module-l;
    margin-top: 1px;
    width: 100%;

    header {
      .section-title {
        padding-top: 30px;
      }
    }
  }

  .ttl {
    .tc-banner-placeholder {
      background: url(../../images/team-live-bg.png) repeat;
      .image {
        img {
          width: auto;
        }
      }
    }
  }

  .one-million {
    .tc-banner-placeholder {
      background: none $tc-gray-90;

      .image {
        img {
          width: auto;
        }
      }

      .content {
        margin-top: 0px;
      }

      .social-sharing {
        margin-bottom: 20px;
        span {
          color: $white;
          @include sofia-pro-bold;
          margin-right: 10px;
        }

        img {
          height: 40px;
          padding: 0 10px 0 0px;
          vertical-align: middle;
        }
      }

      .ctas {
        // specific css override to reduce the gap between image and ctas
        // ideally we should have separate title, image and description
        // however, here we have all 3 in single image
        margin-top: 0px;
      }
    }
  }

  .challenges, .srms, .programs, .tco, .ttl, .one-million, .community-updates {
    padding-top: 0px;
  }

  .section-title {
    @include sofia-pro-medium;
    font-size: 24px;
    line-height: 29px;
    color: $gray-darkest;
    text-align: center;
    text-transform: uppercase;
  }
}