/****** Style Star Rating Widget *****/
.rating {
  border: none;
  float: left;
}

.rating > input { display: none; }
.rating > label:before {
  margin-right: 4px;
  font-size: 22px;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  content: "\f005";
}

.rating > .half:before {
  content: "\f089";
  position: absolute;
}

.rating > label {
  color: #ddd;
  float: right;
  width: auto;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
}
.rating > label.half:before {
  text-align: left;
  width: 12px;
  overflow: hidden;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }