#commentForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 10px;

  >* {
    flex-grow: 2;
  }

  textarea {
    width: 100%;
  }

  button {
    width: 100%;

    &:hover {
      background-color: var(--color2);
    }
  }
}

.commentContainer {
  border-bottom: 1px solid lightgray;
  margin-bottom: 30px;
  padding-bottom: 10px;

  .commenter {
    display: flex;
    color: lightgray;
    margin-bottom: 5px;

    .commentDate {
      &::before {
        content: '•';
        margin-inline: 10px;

      }
    }
  }

  .comment {
    color: gray;
  }

  .answer {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 10px;
    margin-top: 10px;
    &::before {
      content: 'پاسخ عیاره:';
      color: lightgray;
      grid-row: 1 / 3;
      padding-inline-end: 5px;
      border-inline-end: 1px solid lightgray;
    }
    .cmtAnswerDate{
      color:lightgray;
    }
  }

}