@charset "utf-8";

.comments-title { font-weight: bold; font-size: 20px; margin: 32px 0px 8px; }

.comment-add {
  margin-bottom: 32px; display: block; text-align: right;
  & textarea { padding: 10px; width: 100%; height: 80px; border: 1px solid rgb(204, 204, 204); border-radius: 4px; }
  & button { margin-top: 10px; margin-left: auto; background-color: rgb(96, 96, 160); color: rgb(255, 255, 255); width: 140px; height: 40px; cursor: pointer; border-radius: 4px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 16px; font-weight: bold; }
}

.comments-list { display: flex; flex-direction: column; gap: 24px; margin: 48px auto; }

.comment-item { display: flex; flex-wrap: wrap; gap: 10px; }

.comment-item--reply { padding-left: 8px; margin-left: 48px; border-left: 1px dotted rgb(211, 214, 219); }

.comment-item__avatar { display: none; width: 40px; }

.comment-item__avatar img { width: 40px; height: 40px; object-fit: cover; border-radius: 100%; }

.comment-item__info { display: flex; flex-direction: column; gap: 4px; width: calc(100% - 50px); }

.comment-item__name a { color: rgb(54, 88, 153); font-weight: 700; font-family: OpenSansBold, sans-serif; }

.comment-item__text { font-family: OpenSansBold, sans-serif; }

.comment-item__action {
  color: rgb(144, 148, 156); font-size: 12px; display: flex; align-items: center; gap: 4px;
  & span {
  display: inline-flex; align-items: center;
  & img { width: 16px; }
}
}

.comment-item-more { background-color: rgb(246, 247, 249); color: rgb(54, 88, 153); padding: 8px; margin-bottom: 12px; width: 100%; font-weight: 700; }