[ Avaa Bypassed ]

#comments {
   @include clearfix();
   margin-top: 15px;
   .title, .comments-title{
      font-size: 22px;
      position: relative;
      color: $black;
      @include media-breakpoint-down(md){
         font-size: 20px;
      } 
   }
   .comments-title{
      padding: 28px 0 15px;
      margin: 0 0 30px;
      -ms-word-wrap: break-word;
      word-wrap: break-word;
      &:after{
         content: '';
         @include size(50px, 2px);
         background: $theme-color;
         position: absolute;
         bottom: 0;
         left: 0;
         z-index: 1;
      }
   }
   input[type*="email"], input[type*="text"], textarea{
      padding-left: 10px;
      padding-right: 10px;
      min-height: 68px;
      background: $bg-gray;
      box-shadow: none;
      border: 0;
      &::-webkit-input-placeholder { 
        color: $body-color;
      }
      &::-moz-placeholder {
        color: $body-color;
      }
      &:-ms-input-placeholder { 
        color: $body-color;
      }
      &:-moz-placeholder { 
        color: $body-color;
      }
   }
   input[type*="email"], input[type*="text"]{
      height: 68px;
      padding: 0 20px;
      line-height: 68px;
   }
   textarea{
      padding: 20px;
   }
   .comment-rating{
      margin-bottom: 15px;
   }

   #add_review_button,
   #submit {
      font-size: 14px;
      background: $theme-color;
      color: #fff;
      font-weight: 700;
      padding: 22px 38px;
      line-height: 1.2;
      position: relative;
      z-index: 9;
      display: inline-block;
      @include transition(all 0.35s);
      text-decoration: none;
      width: auto;
      &:hover{
         opacity: 0.8;
      }
   }
   #add_review_button {
      margin-bottom: 20px;
   }
   .headline {
      height: 30px;
      text-align: left;
      margin-bottom: 10px;
      h2 {
         padding: 0;
      }
      a {
         text-transform: uppercase;
         float: right;
         margin-top: 2px;
         font-size: 12px;
      }
   }
   #reply-title {
      font-size: 28px;
      color: $theme-color;
      margin: 0;
      position: relative;
      @include clearfix();
      small {
         float: right;
         font-weight: 500;
         font-size: 14px;
         line-height: 39px;
         position: absolute;
         top: 0;
         right: 0;
         z-index: 11;
      }
   }
   .comment-notes {
      margin-bottom: 20px;
   }

   // Comment form
   .comment-form-main{
      @include clearfix;
      margin-top: 2px;
      .logged-in-as, .h-info{
         margin-bottom: 30px;
         margin-top: 0;
      }
      .row{
         margin-left: -8px;
         margin-right: -8px;
         > div{
            padding-left: 8px;
            padding-right: 8px;
         }
      }
      .form-submit{
         margin-bottom: 20px;
      }
   }
   ol.comment-list {
      list-style: none;
      width: 100%;
      float: left;
      margin: 0;
      padding: 0;
      display: block;
      float: left;
      width: 100%;
      .comment-body{
         -ms-word-wrap: break-word;
         word-wrap: break-word;
         p{
            margin-bottom: 5px;
         }
      }
      > li {
         width: 100%;
         float: left;
         position: relative;
         &:before {
            display: none; 
         }
         li {
            position: relative;
            &:last-child {
               padding-bottom: 0;
               margin-bottom: 0;
            }
         }
         &:last-child{
            padding-bottom: 0;
            > .the-comment{
               margin-bottom: 18px;
            }
         }
      }
      li{
         #respond {
            float: left;
            width: 100%;
            margin: 5px 0 38px;
            display: block !important;
            #reply-title {
               display: block;
               padding-top: 0; 
               .comments-title{
                  padding-top: 0;
               }
               #cancel-comment-reply-link{
                  font-family: $font-family-base;
               }
            }
            .logged-in-as{
               margin-bottom: 30px;
            }
         }
      }
      .the-comment{
         border-bottom: 1px solid $border-color;
         padding-bottom: 28px;
         margin-bottom: 35px;
         position: relative;
         .media-comment-left{
            min-width: 90px;
            float: left;
            @include media-breakpoint-down(md){
               min-width: 70px;
            }
            @media(max-width: 490px){
               display: block;
               .author-image{
                  margin-bottom: 8px;
               }
            }
            .author-image{
               padding-top: 6px;
               img{
                  width: 70px;
                  height: 70px;
                  overflow: hidden;
                  border-radius: 50%;
                  @include media-breakpoint-down(md){
                     width: 55px;
                     height: 55px;
                  }
               }
            }
         }
         .media-comment-body{
            padding-left: 91px;
            @include media-breakpoint-down(md){
               padding-left: 71px;
            }
            @media(max-width: 500px){
               display: block;
               width: 100%;
               padding-left: 0;
            }
         }
         .author-meta{
            line-height: 1.8;
            position: relative;
            margin-bottom: 5px;
            
            a{
               font-size: 14px;
            }
            .fn{
               font-weight: 700;
               display: block;
               width: 100%;
               font-size: 16px;
               font-style: normal;
               color: $black;
               a{
                  font-size: 16px;
               }
            }
         }
         .comment-meta {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 5px;
            color: #676767;
         }
         .comment-info{
            position: relative;
            padding-left: 22px;
            &:after{
               content: '';
               @include size(12px, 2px);
               background: $theme-color;
               position: absolute;
               top: 8px;
               left: 0;
               z-index: 1;
            }
            a{
               color: #999;
               &:hover{
                  color: $theme-color;
               }
            }
         }
         .comment-body {
            position: relative;
            margin-top: 10px;
            @media(max-width: 500px){
               display: block;
               float: left;
               width: 100%;
               margin-bottom: 5px;
            }
            img{
               margin-bottom: 5px;
            }
         }
         .awaiting_moderation {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 8px;
            padding: 2px 4px;
            font-style: normal;
         }
         .comment-action-wrap {
            position: absolute;
            top: 2px;
            right: 0;
            @media(max-width: 560px){
               position: relative;
               top: 0;
               margin-top: 10px;
            }
            a{
               color: $theme-color;
               display: inline-block;
               font-weight: 500;
               font-size: 14px;
               &.comment-edit-link{
                  color: $black;
                  margin-right: 15px;
               }
            }
         }
      }
      .children{
         display: block;
         float: left;
         width: 100%;
         padding-left: 50px;
         list-style: none;
         @include media-breakpoint-down(md){
            padding-left: 40px;
         }
         .comment-author{
            padding-left: 70px;
         }
         .children {
            padding-left: 50px;
            @include media-breakpoint-down(md){
               padding-left: 30px;
            }
           @include media-breakpoint-down(sm){
               padding-left: 20px;
            }
         }
      }
   }
}
#respond {
   clear: left;
   margin-bottom: 30px;
   input[type="text"], 
   input[type="tel"],
   input[type="password"],
   input[type="email"],
   textarea {
      width: 100%;   
   }
   .form-submit {
      margin: 16px 0 0;
   }
}

#comment_popup {
   background: #fff;
   padding: 50px;
   max-width: 50%;
   position: relative;
   margin: 0 auto;
   @include media-breakpoint-down(md){
      max-width: 100%;
   }
   @include media-breakpoint-down(md){
      padding: 30px;
   }
}

.pingbacklist{
   list-style-type: none;
   padding: 0;
   > li{
      .the-comment{
         border-bottom: 1px solid $border-color;
         padding-bottom: 20px;
         margin-bottom: 35px;
         position: relative;
         .media-comment-left{
            display: none;
         }
         .media-comment-body{
            display: block;
            width: 100%;
            padding-left: 0;
         }
         .author-meta{
            line-height: 1.8;
            position: relative;
            margin-bottom: 5px;
            font-size: 14px;
            .fn{
               font-weight: 700;
               display: block;
               width: 100%;
               font-size: 16px;
               font-style: normal;
               color: $black;
               a{
                  font-size: 16px;
               }
            }
         }
         .comment-meta {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 5px;
            color: #676767;
         }
         .comment-info{
            position: relative;
            padding-left: 22px;
            &:after{
               content: '';
               @include size(12px, 2px);
               background: $theme-color;
               position: absolute;
               top: 5px;
               left: 0;
               z-index: 1;
            }
            a{
               color: #999;
               &:hover{
                  color: $theme-color;
               }
            }
         }
         .comment-body {
            position: relative;
            margin-top: 10px;
            @media(max-width: 500px){
               display: block;
               float: left;
               width: 100%;
               margin-bottom: 5px;
            }
            img{
               margin-bottom: 5px;
            }
         }
         .awaiting_moderation {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 8px;
            padding: 2px 4px;
            font-style: normal;
         }
         .comment-action-wrap {
            position: absolute;
            top: 2px;
            right: 0;
            @media(max-width: 560px){
               position: relative;
               top: 0;
               margin-top: 10px;
            }
            a{
               color: $theme-color;
               display: inline-block;
               font-weight: 500;
               font-size: 14px;
               &.comment-edit-link{
                  color: $black;
                  margin-right: 15px;
               }
            }
         }
      }
   }
}

.cld-like-dislike-wrap{
   position: relative;
   top: 5px;
   margin: 0;
   .cld-count-wrap{
      margin-left: 0;
   }
   .cld-like-wrap{
      color: $theme-color;
      a{
         color: $theme-color;
      }
   }
   .cld-dislike-wrap{
      color: #a0a0a0;
      a{
         color: #a0a0a0;
      }
   }
}

body.logged-in{
   .gav-comment-list{
      .the-comment{
         .author-meta{
            padding-right: 50px;
         }
      }
   }
}