@charset "UTF-8";
.hr-small-orange {
  margin: 0.5rem 0;
}

#form-comments {
  max-width: 450px;
}
#form-comments .input-group {
  justify-content: space-around;
}
#form-comments .input-group .rate .stars-outer {
  width: 125px;
  height: 30px;
}
#form-comments .input-group .rate .stars-outer::before {
  position: absolute;
}
#form-comments .input-group .rate .stars-outer .stars-inner {
  width: 25px;
  position: relative;
  cursor: pointer;
}
#form-comments .input-group .rate .stars-outer .stars-inner::before {
  content: "☆";
  width: 25px;
  display: flex;
  color: #e83687;
}
#form-comments .input-group .rate .stars-outer .stars-inner.active::before, #form-comments .input-group .rate .stars-outer .stars-inner.hovered::before, #form-comments .input-group .rate .stars-outer .stars-inner:not(.active):hover::before {
  content: "★";
}

#modal-comments .modal {
  padding-top: 30px;
}
#modal-comments .header-modal {
  margin: 0;
  gap: unset;
}
#modal-comments .header-modal > img {
  width: 56px;
  margin-bottom: 5px;
}
#modal-comments .header-modal .h2 {
  text-align: center;
}
#modal-comments .modal-body {
  width: 100%;
  max-width: 650px;
  padding-bottom: 1rem;
}
#modal-comments .modal-body .message {
  text-align: center;
  margin: 0 0 1rem 0;
}
#modal-comments .modal-body .limit {
  display: block;
  text-align: center;
  margin: 10px 0 25px 0;
}

@media screen and (max-width: 500px) {
  #modal-comments .modal {
    min-width: unset;
    width: 90%;
  }
}