.main-container {
  .page-comment-main {
    // delete button
    .page-comment-control {
      position: absolute;
      display: none;    // default hidden
      top: 0;
      right: 0;
    }
  }

  // modal
  .page-comment-delete-modal .modal-content {
    .modal-body {
      .comment-body {
        // scrollable
        overflow-y: auto;
        max-height: 13em;
      }
    }
  }
}

.main-container .crowi-sidebar .side-content { // styles only for original crowi

.page-comments {
  margin: 8px 0 0 0;

  .page-comment-form {
    margin-top: 16px;

    .comment-form {
    }

    .comment-form-main {

      .comment-form-comment {
        height: 60px;
      }

      .comment-submit {
        margin-top: 8px;
        text-align: right;
      }
    }
  }

  .page-comments-list {
    .page-comment {
      margin-top: 8px;
      padding-top: 8px;
      border-top: solid 1px #ccc;

      .picture {
        float: left;
        width: 24px;
        height: 24px;
      }

      .page-comment-creator {
        font-weight: bold;
      }

      .page-comment-main {
        position: relative;
        margin-left: 40px;

        .page-comment-meta {
          color: #aaa;
          font-size: .9em;
        }
        .page-comment-body {
          padding: 8px 0;
          word-wrap: break-word;
        }
        .page-comment-control {
          position: absolute;
          display: none;    // default hidden
          top: 0;
          right: 0;
        }
      }

      // show controls when hover
      .page-comment-main:hover > .page-comment-control {
        display: block;
      }
    }

  }
}

} // .main-container aside.sidebar .side-content

.main-container {
  .page-comments {

    .page-comments-list-toggle-newer,
    .page-comments-list-toggle-older {
      text-align: center;
      display: block;
      margin: 8px;
      font-size: .9em;
      color: #999;
    }

    // older comments
    .page-comments-list-older .page-comment {
    }
    // newer comments
    .page-comments-list-newer .page-comment {
      opacity: .7;

      &:hover {
        opacity: 1;
      }
    }
  }
}