.comments {
  .comments-wrapper {
    .comment-username {
      color: #2d84b8;
    }
    .comment-user {
      margin-bottom: 30px;
      .comment-user--img {
        width: 32px;
        height: 32px;
        @extend .img-circle !optional;
        @extend .pull-left !optional;
      }
      .comment-user--name {
        font-size: 14px;
        font-weight: normal;
        position: relative;
        top: 10px;
        left: 10px;
      }
    }
    .comment-title {
      clear: both;
      font-size: 22px;
      margin-bottom: 22px;
      color: #333;
    }
    .comment-paragraph {
      
      font-size: 18px;
      line-height: 28px;
      margin: 10px 0;
      color: #333;
      pre {
        white-space: inherit;
        font-family: inherit;
      }
    }
    .btn-comment-wrapper {
      margin-top: 30px;
    }
    .box-new-comment {
    
      background: lighten(#777, 3%);
      padding: 20px 0;
      .comment-placeholder {
        margin-left: 46px;
      }
      .btn-default {
        background: transparent;
      }
      .box-new-comment--textarea {
        
        .comment-textarea {
          textarea {
            background: #fff;
            border: none;
          }
        }
      }
    }
    .comments-wrapper {
      background: #FBFBFB;
      padding-top: 22px;
    }
    .comments {
      
      .btn-group {
        .btn-primary,
        .btn-default {
          @extend .pull-right !optional;
          margin-left: 10px;
        }
      }
      .comment-left {
        float: left;
        margin-top: 25px;
        .creator-avatar {
          img {
            border-radius: 50%;
            width: 30px !important;
            height: 30px !important;
          }
        }
      }
      .comment-right {
        margin-left: 50px;
        .comment-header {
          font-size: 14px;
          line-height: 25px;
          margin-top: 18px;
        }
      }
      .comment-body {
        margin-right: 0;
        .text {
          font-size: 16px;
          line-height: 25px;
        }
        .comment-textarea {
          textarea { height: 120px; }
        }
      }
      .actions {
        margin: 15px 0 20px -15px;
      }
    }
    .comment-form {
      padding: 20px 20px 20px 40px;
      margin-top: 20px;
      background: lighten(#eee, 3%);
      clear: both;
      padding-bottom: 20px;
      margin: 20px 0 -20px 0;
      border-radius: 0 0 4px 4px;
      min-height: 79px;
      .comment-right {
        margin-left: 70px;
      }
      .comment-textarea {
        textarea {
          background: #fff;
          margin-bottom: 15px;
        }
      }
      .btn-default {
        background: transparent;
      }
      .btn-group {
        .btn-primary,
        .btn-default {
          @extend .pull-right !optional;
          margin-left: 10px;
        }
      }
      .user-avatar-area {
        img {
          @extend .img-circle !optional;
        }
        margin-bottom: 10px;
      }
      .comment-placeholder {
        font-size: 13px;
        line-height: 35px;
      }
      .comment-textarea {
        textarea {
          height: 130px;
        }
      }
    }
  }
  .comment-login-message {
    padding: 0 10px 30px 30px;
    clear: both;
  }
}