/*-------------- Profile Layout -------------- */
.profile-save-container { padding-top: 20px; }
.profile-posts, .profile-content, .profile-row {
  @include clearfix;
  @include row;
  margin-bottom: 1rem;
}
.profile-content {
  .profile-left {
    @include span-columns(3);
    word-wrap: break-word;
    .profile-avatar-container {
      @include span-columns(12);
      @include omega;
      position: relative;
      width: 100%;
      height: 200px;
      .imageContainer.loaded { background: none; }
      .imageContainer { background: url('/static/img/loading.gif') no-repeat center; display: inline;}
      img {
        @include transition(opacity 0.5s ease-in);
        width: 100%;
        opacity: 0;
        object-fit: cover;
      }
      img.loaded { opacity: 1; }
      &:hover .after { transition-delay:0s; visibility: visible; opacity: 1;}
      .after {
        @include transition(visibility 0s linear 0.1s, opacity 0.1s linear);
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: 1.5rem;
        width: 100%;
        height: 45px;
        color: #FFF;
        padding: 0.625rem;
        background: rgba(0, 0, 0, .6);
      }
    }
  }
  .profile-right {
    @include span-columns(9);
    @include omega;
    word-wrap: break-word;
    #myChart { height: 375px !important; width: 100% !important; }
    .stats {
      @include span-columns(4);
      @include omega(3n);
      text-align: center;
      .stat-text { font-size: 1.625rem; }
    }
    .signature {
      @include truncate-ellipsis;
      clear: both;
      color: $secondary-font-color;
      font-size: 13px;
      max-height: 50px;
      word-wrap: break-word;
      white-space: pre-wrap;
      a {
        color: $secondary-font-color;
        &:hover { color: $color-primary; }
      }
    }
  }
}
.profile-posts {
  .profile-row {
    .title { @include span-columns(3); font-weight: 600; }
    .pagination-wrap {
      @include span-columns(9);
      @include omega;
      float: right;
      ul.pagination { float: right; margin-bottom: 0px; }
    }
  }
}
.profile-posts table {
  table-layout: fixed;
  .truncate-title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .post-body {
    white-space: pre-wrap;
    ul { white-space: normal }
    &.closed {
      width: 100%;
      max-height: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.more-posts { margin-bottom: 2rem; }

@include media($mobile) {
  .profile-content {
    .profile-right {
      border-top: 1px solid #ddd;
      padding-top: 1rem;
      .stats .stat-text { font-size: 1rem; }
    }
    .profile-left, .profile-right { @include span-columns(8); @include omega; }
  }
  .profile-posts, & {
    .profile-row .title, .profile-row .pagination-wrap, .pagination-wrap {
      @include span-columns(8);
      @include omega;
    }
    .profile-row .pagination-wrap, .profile-row .pagination-wrap ul.pagination {
      float: none;
      text-align: center;
    }
  }
  .profile-row.profile-action { text-align: center; }
  .mobile-post-time { color: $secondary-font-color; padding-bottom: 1rem; }
  .mobile-post { padding: 1rem; }
  .mobile-post:nth-child(even) { background: $sub-header-color; }
  .mobile-post:last-child { border-bottom: 0px; }
}
