:root { --color_comments_priamry: #9faeb5; --color_comments_secondary: #eeee; --color_comments_text: rgb(65, 65, 65); --color_comments_hover: #5f95ad; }
.comments { position: relative !important; margin: 0px 0px 30px !important; box-sizing: border-box !important; }
.comments > * { box-sizing: border-box !important; }
.comments__header { position: relative !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 5px !important; margin: 0px 0px 30px !important; padding: 0px !important; box-sizing: border-box !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
.comments__header::before { content: "" !important; position: absolute !important; bottom: 0px !important; left: 0px !important; z-index: 0 !important; width: 100% !important; height: 2px !important; background-color: var(--color_comments_secondary) !important; }
.comments__left-box { position: relative !important; z-index: 1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 5px !important; padding: 10px 0px !important; border-bottom: 2px solid var(--color_comments_priamry) !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
.comments__header-title { margin: 0px !important; padding: 0px !important; font-size: 20px !important; font-weight: 700 !important; text-transform: capitalize !important; color: var(--color_comments_text) !important; box-sizing: border-box !important; }
.comments__item-list { display: flex !important; flex-flow: column !important; gap: 30px !important; -webkit-box-direction: normal !important; -webkit-box-orient: vertical !important; }
.comments__item { display: flex !important; flex-flow: column !important; gap: 10px !important; -webkit-box-direction: normal !important; -webkit-box-orient: vertical !important; }
.comments__item-header { display: flex !important; gap: 15px !important; }
.comments__item-avatar { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; margin: 0px !important; border-radius: 100% !important; object-fit: cover !important; }
.comments__item-info { display: flex !important; flex-flow: column !important; gap: 7px !important; -webkit-box-direction: normal !important; -webkit-box-orient: vertical !important; }
.comments__item-name { margin: 0px !important; padding: 0px !important; font-size: 20px !important; font-weight: 600 !important; text-align: left !important; text-transform: capitalize !important; line-height: 1 !important; color: var(--color_comments_text) !important; }
.comments__item-data { margin: 0px !important; padding: 0px !important; font-size: 15px !important; font-weight: 500 !important; text-align: left !important; text-transform: initial !important; line-height: 1 !important; color: var(--color_comments_priamry) !important; }
.comments__item-body { display: flex !important; flex-flow: column !important; gap: 15px !important; -webkit-box-direction: normal !important; -webkit-box-orient: vertical !important; }
.comments__item-content { margin: 0px !important; padding: 0px !important; font-size: 16px !important; font-weight: 400 !important; text-align: left !important; text-transform: initial !important; color: var(--color_comments_text) !important; }
.comments__item-picture { display: block !important; }
.comments__item-img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; margin: 0px !important; }
.comments__item-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
.comments__item-replay { margin: 0px !important; border: none !important; font-size: 18px !important; font-weight: 400 !important; text-decoration: none !important; text-transform: initial !important; color: var(--color_comments_priamry) !important; transition: 0.2s ease-in-out !important; box-shadow: none !important; }
.comments__item-replay:hover { color: var(--color_comments_hover) !important; }
.comments__item-grade { display: flex !important; align-items: center !important; gap: 15px !important; -webkit-box-align: center !important; }
.comments__item-icon { cursor: pointer !important; width: 20px !important; height: 20px !important; }
.comments__item-icon path { transition: 0.2s ease-in-out !important; }
.comments__item-icon[data-type="like"]:hover path { fill: rgb(32, 161, 20) !important; }
.comments__item-icon[data-type="dislike"]:hover path { fill: rgb(185, 33, 28) !important; }
@media (min-width: 576px) {
  .comments__item-name { margin: 0px !important; padding: 0px !important; font-size: 22px !important; font-weight: 600 !important; color: var(--color_comments_text) !important; }
  .comments__item-data { margin: 0px !important; padding: 0px !important; font-size: 16px !important; font-weight: 500 !important; text-align: left !important; color: var(--color_comments_priamry) !important; }
  .comments__item-content { margin: 0px !important; padding: 0px !important; font-size: 18px !important; font-weight: 400 !important; color: var(--color_comments_text) !important; }
  .comments__item-img { display: block !important; width: 100% !important; height: auto !important; max-width: 350px !important; margin: 0px !important; }
  .comments__item-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; max-width: 350px !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
}
@media (min-width: 768px) {
  .comments__header { position: relative !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 5px !important; padding: 0px !important; box-sizing: border-box !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
  .comments__item-name { margin: 0px !important; padding: 0px !important; font-size: 22px !important; font-weight: 600 !important; color: var(--color_comments_text) !important; }
  .comments__item-data { margin: 0px !important; padding: 0px !important; font-size: 16px !important; font-weight: 500 !important; text-align: left !important; color: var(--color_comments_priamry) !important; }
  .comments__item-content { margin: 0px !important; padding: 0px !important; font-size: 18px !important; font-weight: 400 !important; color: var(--color_comments_text) !important; }
  .comments__item-img { display: block !important; width: 100% !important; height: auto !important; max-width: 350px !important; margin: 0px !important; }
  .comments__item-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; max-width: 350px !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
}
@media (min-width: 992px) {
  .comments__header-title { margin: 0px !important; padding: 0px !important; font-size: 20px !important; font-weight: 700 !important; color: var(--color_comments_text) !important; box-sizing: border-box !important; }
  .comments__item-name { margin: 0px !important; padding: 0px !important; font-size: 24px !important; font-weight: 600 !important; color: var(--color_comments_text) !important; }
  .comments__item-data { margin: 0px !important; padding: 0px !important; font-size: 18px !important; font-weight: 500 !important; color: var(--color_comments_priamry) !important; }
  .comments__item-content { margin: 0px !important; padding: 0px !important; font-size: 20px !important; font-weight: 400 !important; color: var(--color_comments_text) !important; }
  .comments__item-img { display: block !important; width: 100% !important; height: auto !important; max-width: 350px !important; margin: 0px !important; }
  .comments__item-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; max-width: 350px !important; -webkit-box-align: center !important; -webkit-box-pack: justify !important; }
}