/****** Input Star Rating *****/

.rating fieldset, .rating label {
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.rating fieldset:hover, .rating fieldset:hover:before, .rating label:hover, .rating label:hover:before {
  outline: none;
  border: none;
}
.rating fieldset {
  border: none;
  display: inline-block;
  vertical-align: middle;
}
.rating fieldset > input {
  /*display: none;*/
  position: absolute;
  opacity: 0;
}
.rating fieldset > label:before {
  margin: 0;
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.4745 6.86075L11.4555 6.233L8.99995 0.712524L6.54435 6.233L0.525371 6.86075L5.01191 10.9226L3.77488 16.8308L8.99995 13.8029L14.2435 16.8308L12.988 10.9226L17.4745 6.86075Z' fill='%23D8D9E3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  border: none;
  height: 24px;
  width: 38px;
}
.rating fieldset > label {
  float: right;
  padding: 0;
  margin: 0;
}

/***** CSS Highlight Stars on Hover *****/
.rating fieldset > input:checked ~ label:before {
  background-image: url("data:image/svg+xml,<svg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.4745 6.86075L11.4555 6.233L8.99995 0.712524L6.54435 6.233L0.525371 6.86075L5.01191 10.9226L3.77488 16.8308L8.99995 13.8029L14.2435 16.8308L12.988 10.9226L17.4745 6.86075Z' fill='%23006cce'/></svg>");
  /* show star when clicked */
}
.rating.with-hover fieldset:not(:checked) > label:hover:before, .rating.with-hover fieldset:not(:checked) > label:hover ~ label:before {
  /* hover previous stars in list */
  background-image: url("data:image/svg+xml,<svg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.4745 6.86075L11.4555 6.233L8.99995 0.712524L6.54435 6.233L0.525371 6.86075L5.01191 10.9226L3.77488 16.8308L8.99995 13.8029L14.2435 16.8308L12.988 10.9226L17.4745 6.86075Z' fill='%23006cce'/></svg>");
}
.rating.with-hover fieldset > input:checked + label:hover:before,
.rating.with-hover fieldset > input:checked ~ label:hover:before,
.rating.with-hover fieldset > label:hover ~ input:checked ~ label:before,
.rating.with-hover fieldset > input:checked ~ label:hover:before ~ label:before {
  background-image: url("data:image/svg+xml,<svg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.4745 6.86075L11.4555 6.233L8.99995 0.712524L6.54435 6.233L0.525371 6.86075L5.01191 10.9226L3.77488 16.8308L8.99995 13.8029L14.2435 16.8308L12.988 10.9226L17.4745 6.86075Z' fill='%23006cce'/></svg>");
}
.rating.with-hover fieldset > input:checked + label:hover:before,
.rating.with-hover fieldset > input:checked ~ label:hover:before {
  opacity: 0.7;
}