@charset "utf-8";

@font-face { font-family: Roboto; src: none format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: Roboto; src: none format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: Roboto; src: none format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: Roboto; src: none format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

#comments { font-family: Roboto; }

#comments > .title { font-weight: 700; font-size: 32px; line-height: 27px; color: rgb(0, 0, 0); margin-bottom: 24px; }

#comments > .quantity { font-weight: 700; font-size: 16px; line-height: 24px; color: rgb(122, 122, 122); margin-bottom: 24px; }

#comments > .list { display: flex; flex-direction: column; gap: 24px; padding: 0px 0px 50px; margin: 0px 0px 25px; border-bottom: 1px solid rgb(207, 207, 207); }

#comments > .list > li { display: flex; flex-direction: column; gap: 40px; position: relative; }

#comments > .list > li .comment { display: flex; align-items: flex-start; gap: 22px; }

#comments > .list > li .comment.reply { margin-left: 102px; }

.reply { margin-left: 102px; }

@media (max-width: 991px) {
  #comments > .list > li .comment.reply { margin-left: 56px; }
  .reply { margin-left: 56px; }
}

@media only screen and (max-width: 380px) {
  #comments > .list > li .comment.reply { margin-left: 0px; }
  .reply { margin-left: 0px; }
}

#comments > .list > li .comment > .author { width: 48px; height: 48px; overflow: hidden; border-radius: 50%; z-index: 10; position: relative; }

#comments > .list > li .comment > .author > img { width: 100%; height: 100%; object-fit: cover; }

#comments > .list > li .comment > div { width: calc(100% - 48px); }

#comments > .list > li .comment > div > .content { background-color: rgb(246, 246, 246); border-radius: 24px; padding: 24px; margin-bottom: 5px; }

#comments > .list > li .comment > div > .content > p:nth-of-type(1) { color: rgb(54, 88, 153); font-weight: 600; font-size: 18px; line-height: 27px; margin-bottom: 8px; }

#comments > .list > li .comment > div > .content > p:nth-of-type(2) { color: rgb(0, 0, 0); font-weight: 400; font-size: 18px; line-height: 27px; margin-bottom: 8px; }

#comments > .list > li .comment > div > .content > img { max-width: 355px; max-height: 500px; height: 100%; width: 100%; object-fit: cover; }

#comments > .list > li .comment > div > .comment-actions { display: flex; align-items: center; justify-content: space-between; }

#comments > .list > li .comment > div > .comment-actions > a:first-of-type { font-weight: 400; font-style: italic; font-size: 19.81px; line-height: 29.71px; color: rgb(60, 85, 176); text-decoration: none; }

#comments > .list > li .comment > div > .comment-actions > a:first-of-type > span { color: rgb(128, 128, 128); }

#comments > .list > li .comment > div > .comment-actions > a:last-of-type { display: flex; align-items: center; text-decoration: none; }

#comments > .list > li .comment > div > .comment-actions > a:last-of-type > img { width: 70.2871px; }

#comments > .list > li .comment > div > .comment-actions > a:last-of-type > p { color: rgb(89, 89, 89); font-weight: 400; font-size: 18.57px; line-height: 27.85px; }

#comments .comment-text { font-weight: 400; font-size: 16px; line-height: 24px; color: rgb(122, 122, 122); text-align: center; margin-bottom: 40px; }

#comments .fb { display: flex; align-items: center; gap: 12px; color: rgb(84, 89, 95); font-weight: 600; font-size: 14px; line-height: 16.8px; }

#comments p { margin: 0px; }

@media only screen and (max-width: 400px) {
  #comments > .list > li .comment > div > .comment-actions > a:first-of-type { font-size: 15px; }
}