.joe {
  &_friend_add {
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: pointer;
    font-size: 16px;
    color: var(--main);

    &:hover {
      color: var(--theme);
    }

    i {
      font-size: 20px;
    }
  }

  &_friends__list {
    padding: 10px 0 20px;

    &.hidden {
      visibility: hidden;
    }
  }

  &_friend {
    &__item {
      position: relative;
      padding: 0 0 30px 40px;

      &:before {
        position: absolute;
        left: 12px;
        top: 0;
        z-index: 0;
        content: "";
        width: 0;
        height: 150%;
        border-left: 1px dashed var(--classG);
      }

      &:hover {
        .joe_friend_block {
          box-shadow: 3px 8px 15px 0 var(--box-shadow-friend);
        }
      }
    }

    &_info {
      display: flex;
      justify-content: left;
      background: var(--background);
      color: var(--routine);
      font-size: 14px;
      height: 34px;
      left: -36px;
      line-height: 34px;
      position: relative;
      z-index: 1;
    
      &_logo {
        height: 35px ;
        width: 35px ;
        border-radius: 50%;
        background: var(--classC);
        border: 1px solid var(--classA);
        padding: 3px;
        margin: 0 10px 0 -10px;
      }
    
      &_author {
        color: var(--theme);
        font-weight: 500;
      }
    
      &_pubDate {
        margin: 0 10px;
      }
    }
    
    &_block {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      padding: 10px;
      margin-top: 10px;
      word-break: break-word;
      color: var(--main);
      background: var(--background-friend);
      border-bottom: 1px solid var(--classC);
      border-radius: 0 18px 18px 18px;
      border: 1px solid var(--classC);
      box-shadow: 1px 1px 5px 0 var(--box-shadow-friend);
      transition: box-shadow 0.2s;
    }

    &_body {
      position: relative;
      box-sizing: content-box;
      overflow: hidden;
      padding: 10px 12px;
      background: var(--background-friend-block);
      border-radius: 0 6px 6px 6px;
      transition: height 0.2s;
    }

    &_content {
      &_title {
        margin-bottom: 8px;
        text-align: center;
        
        a {
          color: var(--theme);
        }  
      }

      &_description {
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        text-indent: 2em;
        text-align: justify;
      }
    }
  }
}

.joe_pagination {
  padding: 0 0 20px 0;
}

.page-friends {
  .joe_detail {
    position: relative;
    overflow-y: hidden;
  }
}