.main-button-comment{
  background: url("../icon/comment/chat.svg") center no-repeat #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 12%);
  border-radius: 50px;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.main-button-comment.active {
  background: url("../icon/comment/chat-active.svg") center no-repeat #B7BDCE;
}
body.edit-mode .main-button-comment{
  display: none;
}
.attachment .main-button-comment {
  box-shadow: none;
  background: url("../icon/comment/chat_media.svg") center no-repeat #fff;
}
.attachment .main-button-comment:hover {
  background: url("../icon/comment/chat_media-hov.svg") center no-repeat #fff;
}
.container-person .main-button-comment {
  margin: 0 auto;
  background: url("../icon/comment/chat_person.svg") center no-repeat transparent;
}
.container-person .main-button-comment:hover {
  background: url("../icon/comment/chat_person-hov.svg") center no-repeat transparent;
}
.comments-area {
    width: 459px;
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #FFF;
    border: 1px solid #F0F4F7;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px 15px 0 15px;
    z-index: 901; }
    @media only screen and (max-width: 650px) {
      .comments-area {
        width: 100%;
        height: calc(100% - 60px);
        border-radius: 15px 15px 0 0; } }
    .comments-area__header {
      position: relative;
      padding: 27px 24px 23px;
      background: #FAFAFA;
      border-radius: 15px 0 0 0; }
    .comments-area__close {
      position: absolute;
      right: 20px;
      top: 31px;
      background-image: url("../icon/comment/close.svg");
      background-size: 16px;
      background-color: transparent;
      width: 16px;
      height: 16px;
      cursor: pointer; }
    .comments-area__title {
      font-family: "Source Serif Pro";
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 25px;
      display: flex;
      align-items: center;
      color: #444; }
    .comments-area__no-comment {
      padding: 10px 22px 0 14px;
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #B7BDCE; }
    .comments-area__comments-list {
      padding: 15px 14px 80px 10px;
      height: calc(100% - 80px);
      overflow: auto; }
      @media only screen and (max-width: 650px) {
        .comments-area__comments-list {
          padding: 15px 14px 155px 10px;
          height: 100%; } }
      .comments-area__comments-list.reply-active {
        padding: 15px 14px 127px 10px; }
      .comments-area__comments-list.edit-active {
        padding: 15px 14px 176px 10px; }
        .comments-area__comments-list.edit-active #comment-form__textarea {
          height: 94px; }
      .comments-area__comments-list .comment {
        margin-bottom: 8px;
        position: relative;
        border-radius: 8px; }
        .comments-area__comments-list .comment.deleted .comments-area__comment-header {
          opacity: 0.3; }
        .comments-area__comments-list .comment.depth-2 {
          margin-left: 40px; }
          .comments-area__comments-list .comment.depth-2 .comments-area__comment-reply {
            display: none; }
        .comments-area__comments-list .comment.unread {
          background: rgba(141, 190, 175, 0.15); }
    .comments-area__comment-body {
      padding: 12px 20px 12px 14px; }
    .comments-area__comment-header {
      display: flex;
      margin-bottom: 8px;
      flex-direction: row;
      align-items: first baseline; }
    .comments-area__comment-author {
      margin-right: 10px;
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 19px; }
    .comments-area__comment-meta span {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
      color: #B7BDCE; }
    .comments-area__action-button {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 6px;
      top: 10px;
      cursor: pointer;
      text-align: center; }
      @media only screen and (max-width: 650px) {
        .comments-area__action-button {
          top: 19px; } }
      .comments-area__action-button svg {
        height: 24px; }
    .comments-area__action {
      display: none;
      flex-direction: column;
      padding: 20px;
      width: 188px;
      position: absolute;
      right: -10px;
      background: #FFFFFF;
      box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
      border-radius: 25px;
      z-index: 11; }
      .comments-area__action a {
        padding-left: 34px;
        font-family: "Proxima Nova";
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-decoration: none;
        color: #444;
        display: block;
        margin-bottom: 15px;
        position: relative;
        cursor: pointer; }
        .comments-area__action a:last-child {
          margin-bottom: 0; }
        .comments-area__action a:before {
          content: "";
          width: 24px;
          height: 24px;
          background-position: center;
          background-size: 24px;
          position: absolute;
          display: block;
          left: 0;
          top: -2px; }
        .comments-area__action a.comments-area__edit:before {
          background-image: url("../icon/user/ico_pencil.svg"); }
        .comments-area__action a.comments-area__delete:before {
          background-image: url("../icon/comment/delete.svg"); }
    .comments-area__comment-text {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #444;
      margin-bottom: 4px; }
    .comments-area__comment-reply-link {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 19px;
      color: #326E5B;
      text-decoration: none;
      cursor: pointer; }

  .comment-respond {
    width: 100%;
    background: #fff;
    padding: 14px 24px 13px 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgba(183, 189, 206, 0.3);
    z-index: 10; }
    .comment-respond__comment-parent {
      width: 350px;
      font-family: "Proxima Nova";
      font-style: normal;
      line-height: 14px;
      font-size: 12px;
      margin-bottom: 15px; }
    .comment-respond__comment-close {
      background-image: url("../icon/comment/close.svg");
      background-size: 12px;
      background-color: transparent;
      width: 12px;
      height: 12px;
      position: absolute;
      right: 42px;
      top: 18px;
      cursor: pointer; }
    .comment-respond__comment-author {
      font-weight: 700;
      color: #326E5B;
      margin-bottom: 4px; }
    .comment-respond__comment-text {
      font-weight: 400;
      font-size: 12px;
      color: #444;
      height: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .comment-respond .comment-form {
      display: flex;
      flex-direction: row;
      justify-content: space-between; }
      .comment-respond .comment-form #record{
        display: none!important;
      }
      .comment-respond .comment-form__textarea-wrapper {
        position: relative;
        flex-grow: 1;
        margin-right: 15px; }
      .comment-respond .comment-form textarea {
        width: 100%;
        height: 45px!important;
        min-height: unset!important;
        padding: 12px 16px 13px;
        /*margin-right: 15px;*/
        border: 1px solid #E9EBF0;
        border-radius: 8px;
        font-family: "Proxima Nova";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #444;
        resize: none;
        cursor: pointer; }
      .comment-respond .comment-form__voice-placeholder {
        display: flex;
        align-items: center;
        position: absolute;
        top: 12px;
        left: 16px;
        font-family: "Proxima Nova";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #444;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease-out;
      }
      .comment-respond .comment-form__audio-warn {
        display: none;
        position: absolute;
        bottom: calc(100% + 5px);
        right: 0;
        padding: 14px 24px 0px 25px;
      }
      .comment-respond .comment-form__audio-warn::before,
      .comment-respond .comment-form__audio-warn::after {
        content: '';
        position: absolute;
        background: #fff;
        right: 39px;
        bottom: -7px;
        width: 15px;
        height: 15px;
        border-radius: 3px 0px;
        transform: scaleX(0.8) rotate(45deg);
      }
      .comment-respond .comment-form__audio-warn::before {
        z-index: -1;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
      }
      .comment-respond .comment-form__audio-warn-wrapper {
        padding: 16px 12px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        background: #fff;
      }
      .comment-respond .comment-form__audio-warn-txt {
        font-family: "Proxima Nova";
        font-size: 16px;
        line-height: 19.49px;
        font-weight: 700;
        color: #E24242;
        display: flex;
      }
      .comment-respond .comment-form__audio-warn-txt::before {
        content:'';
        display: block;
        background: url("../icon/comment/all_comments_audio-warn.svg") center no-repeat transparent;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        flex-shrink: 0;
      }
      .comment-respond .comment-form__voice-placeholder::before {
        content: "";
        display: inline-block;
        width: 0px;
        height: 0px;
      }
      .comment-respond .comment-form__voice-placeholder.comment-form__voice-placeholder_recording {
        opacity: 1;
      }
      .comment-respond .comment-form__voice-placeholder.comment-form__voice-placeholder_recording::before {
        background-color: #E24242;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-right: 8px;
        animation: icon-recording 1.5s ease-in-out infinite;
      }
      @keyframes icon-recording {
        0%   {opacity: 0;}
        50%  {opacity: 1;}
        100% {opacity: 0;}
      }
      .comment-respond .comment-form__voice-placeholder.comment-form__voice-placeholder_voice-loading {
        color: #326E5B;
        opacity: 1;
      }
      .comment-respond .comment-form__voice-placeholder.comment-form__voice-placeholder_voice-loading::before {
        background: url("../icon/comment/all_comments_voice-loading.svg") center no-repeat transparent;
        width: 24px;
        height: 24px;
        margin-right: 8px;
        margin-top: -2px;
        animation: icon-voice-loading 1.2s linear infinite;
      }
      @keyframes icon-voice-loading {
        from { transform: rotate(-360deg); }
      }
      .comment-respond .comment-form p.form-submit {
        margin: 0; }
        .comment-respond .comment-form p.form-submit .comment-form__submit {
          width: 45px;
          height: 45px;
          min-height: 45px;
          padding: 0;
          background: url("../icon/comment/send.svg") center no-repeat #326E5B;
          border-radius: 100%;
          border-width: 0;
        }
        .comment-respond .comment-form p.form-submit .comment-form__submit.comment-form__submit_record {
          background: url("../icon/comment/all_comments_audio.svg") center no-repeat transparent;
          width: 44px;
          height: 44px;
          min-height: 44px;
          border: 1px solid #326E5B;
        }
        .comment-respond .comment-form p.form-submit .comment-form__submit.comment-form__submit_record:hover {
          background: url("../icon/comment/all_comments_audio.svg") center no-repeat transparent;
          opacity: 0.8;
        }
        .comment-respond .comment-form .player_action.comment-form__submit_stop#stop{
          left: auto !important;
          /* display: block; */
          right: 0;
          width: 44px;
          height: 44px;
          top: 0;
          border-radius: 100%;
          cursor: pointer;
        }
        .comment-respond .comment-form .player_action.comment-form__submit_stop#stop,
        .comment-respond .comment-form p.form-submit .comment-form__submit.comment-form__submit_stop,
        .comment-respond .comment-form p.form-submit .comment-form__submit.comment-form__submit_stop:hover {
          background: url("../icon/comment/all_comments_stop.svg") center no-repeat #E24242;
        }
        /* .comment-respond .comment-form .player_action.comment-form__submit_stop#stop:hover,
        .comment-respond .comment-form p.form-submit .comment-form__submit.comment-form__submit_stop:hover {
          opacity: 0.8;
        } */
        .comment-respond .comment-form .player_action.comment-form__submit_stop#stop::before{
          display: none;
        }
        .comment-respond .comment-form p.form-submit .comment-form__submit:hover{
            background-color: #408C74;
        }
        .comment-respond .comment-form p.form-submit .comment-form__submit:active{
          background-color: #2C6050;
        }
        .comment-respond .comment-form p.form-submit .comment-form__submit.disabled:not(.comment-form__submit_record, .comment-form__submit_stop) {
          opacity: 0.5;
          /*background: url("../icon/comment/send.svg") center no-repeat #326E5B!important;*/
        }
  .content__comments .wrap__allcomments .allcomments#myself {
    display: none; }
  .content__comments .wrap__allcomments .allcomments .one-comment {
    position: relative;
    margin-bottom: 11px;
    padding: 12px 110px 12px 25px;
    background: #FAFAFA;
    border: 1px solid #F4F4F4;
    border-radius: 8px; }
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted {
    background: rgba(183, 189, 206, 0.3);
  }
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted .one-comment__top{
    opacity: 0.3;
  }
  .content__comments .wrap__allcomments .allcomments .one-comment .one-comment__link.one-comment__restore,
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted .one-comment__link{
    display: none;
  }
  .content__comments .wrap__allcomments .allcomments .one-comment .one-comment__content p.one-comment__deleted-text,
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted .one-comment__content p{
    display: none;
  }
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted .one-comment__content p.one-comment__deleted-text{
    display: block;
  }
  .content__comments .wrap__allcomments .allcomments .one-comment.deleted .one-comment__link.one-comment__restore {
    display: inline-block;
    cursor: pointer;
  }
    .content__comments .wrap__allcomments .allcomments .one-comment:hover {
      background: rgba(141, 190, 175, 0.15);
      border: 1px solid #F4F4F4; }
    .content__comments .wrap__allcomments .allcomments .one-comment.unread {
      background: rgba(141, 190, 175, 0.15);
    }
    .content__comments .wrap__allcomments .allcomments .one-comment__top {
      margin-bottom: 12px; }
    .content__comments .wrap__allcomments .allcomments .one-comment__author {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 19px;
      color: #444;
      margin-bottom: 12px; }
      .content__comments .wrap__allcomments .allcomments .one-comment__author span {
        font-family: "Proxima Nova";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #B7BDCE; }
    .content__comments .wrap__allcomments .allcomments .one-comment__post {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #326E5B; }
      .content__comments .wrap__allcomments .allcomments .one-comment__post span {
        color: #B7BDCE;
        margin-right: 10px; }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico{
          width: 24px;
          height: 24px;
        }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico.river {
          background: url("../icon/comment/all_comments_river.svg") center no-repeat transparent;
        }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico.image {
          background: url("../icon/comment/all_comments_image.svg") center no-repeat transparent;
        }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico.video {
          background: url("../icon/comment/all_comments_play.svg") center no-repeat transparent;
        }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico.audio {
          background: url("../icon/comment/all_comments_audio.svg") center no-repeat transparent;
        }
        .content__comments .wrap__allcomments .allcomments .one-comment__post span.ico.person-ico {
          background: url("../icon/comment/all_comments_person.svg") center no-repeat transparent;
        }
    .content__comments .wrap__allcomments .allcomments .one-comment__content p {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      color: #444;
      margin-bottom: 10px; }
    .content__comments .wrap__allcomments .allcomments .one-comment__link {
      font-family: "Proxima Nova";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 19px;
      color: #326E5B;
      text-decoration: none; }
    .content__comments .wrap__allcomments .allcomments .one-comment__delete-link {
      background: url("../icon/comment/delete.svg") center no-repeat transparent;
      width: 24px;
      height: 24px;
      position: absolute;
      right: 25px;
      top: 0;
      bottom: 0;
      margin: auto;
      cursor: pointer; }
    .content__comments .wrap__allcomments .comments-area__no-comment {
      padding: 0;
    }
  /* START identical blocks with user-settings.css/.content__settings */
  .content__comments .rivertime-header {
    margin-bottom: 20rem;
  }
  .content__comments .comments__tabs {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(183, 189, 206, 0.3); }
    .content__comments .comments__tabs ul {
      list-style-type: none;
      display: flex;
      flex-direction: row; }
      .content__comments .comments__tabs ul li a {
        position: relative;
        padding: 4px 16px;
        font-family: "Source Serif Pro";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        color: #B7BDCE;
        cursor: pointer;
        display: block;}
        .content__comments .comments__tabs ul li a.active, .content__comments .comments__tabs ul li a:hover {
          color: #326E5B; }
          .content__comments .comments__tabs ul li a.active:after, .content__comments .comments__tabs ul li a:hover:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #326E5B;
            bottom: -1px;
            left:0;}
  /* FINISH identical blocks with user-settings.css/.content__settings */
  .photo_main .comment_container {
    padding: 70px 0 16px; }
    .photo_main .comment_container .full-width {
      height: 100%; }

  .background-black {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 120;
    background: rgba(0, 0, 0, 0.6); }

  .buttoncomments {
    display: inline-block;
    width: 69px;
    height: 69px;
    border: none;
    position: absolute;
    right: 0;
    top: 120px;
    right: 30px;
    cursor: pointer; }
  #comment-opener .rivertime-header-comments__quan,
  .container-person-top .buttoncomments .rivertime-header-comments__quan,
  .nd-header__wrap-menu .rivertime-header-comments__quan,
  .rivertime-header-top .rivertime-header-comments__quan,
  .nd-graduates__main .rivertime-header-comments__quan, {
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #326E5B;
    border: 1px solid #fff;
    border-radius: 100%;
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    text-align: center; }

  #comment-opener .rivertime-header-comments__quan {
    right: 1px;
    top: 1px; }

  .container-person-top .buttoncomments .rivertime-header-comments__quan {
    right: 15px;
    top: 15px; }

  .nd-header__wrap-menu .rivertime-header-comments__quan {
    left: 9px;
    top: -3px;
  }

  .user-nav__item {
    position: relative;
  }

.nd-graduates__main .rivertime-header-comments__quan,
.tree-box .rivertime-header-comments__quan,
.content__rivertime .rivertime-header-comments__quan,
.nd-social-circle__header .rivertime-header-comments__quan,
.attachment_action__wrapper .rivertime-header-comments__quan{
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #326E5B;
  border: 1px solid #fff;
  border-radius: 100%;
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  text-align: center;
}

.nd-graduates__main .rivertime-header-comments__quan,
.content__rivertime .rivertime-header-comments__quan,
.nd-social-circle__header .rivertime-header-comments__quan,
.attachment_action__wrapper .rivertime-header-comments__quan {
  top: 7px;
  right: 6px;
}

.tree-box .rivertime-header-comments__quan {
  top: -2px;
  right: -1px;
}

.nd-graduates__main .main-button-comment.active .rivertime-header-comments__quan,
.tree-box .main-button-comment.active .rivertime-header-comments__quan,
.content__rivertime .main-button-comment.active .rivertime-header-comments__quan,
.nd-social-circle__header .main-button-comment.active .rivertime-header-comments__quan,
.attachment_action__wrapper .main-button-comment.active .rivertime-header-comments__quan {
  border: 1px solid #B7BDCE;
}

@media screen and (max-width:768px) {
  .nd-social-circle__header .rivertime-header-comments__quan {
    display: none;
  }
}