ion-icon {
  font-size: 16px;
}
.rating {
  display: inline;
}
.rating::after {
  content: "";
  clear: both;
  display: table;
}
.rating > input {
  display: none;
}
.rating > label::before {
  margin: 5px;
  font-size: 1.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  content: "\f005";
}
.rating > label {
  color: #ddd;
  float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #f7d106;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #fce873;
}
#star {
  padding-left: 10px;
}
#star label::before {
  padding: 3px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2em;
  content: "\f005";
}
.star-on {
  color: #f7d106;
}
.star-off {
  color: #ddd;
}