.rate {
  display: inline-block;
  border: 0;
}

.rate > input {
  display: none;
}

.rate > label {
  float: right;
  color: #ddd;
}

.rate > label:before {
  display: inline-block;
  font-size: 1.4rem;
  padding: 0.3rem 0.2rem;
  margin: 0;
  cursor: pointer;
  font-family: FontAwesome;
  content: "\f005";
}

.rate .half:before {
  content: "\f089";
  position: absolute;
  padding-right: 0;
}

.rate input:checked ~ label,
.rate label:hover,
.rate label:hover ~ label {
  color: #FF9900 !important;
}

.rate input:checked + .rate label:hover,
.rate input input:checked ~ label:hover,
.rate input:checked ~ .rate label:hover ~ label,
.rate label:hover ~ input:checked ~ label {
  color: #FF9900 !important;
}

.rate--large > label:before {
  font-size: 4.6rem;
}
.rate--small > label:before {
  font-size: 1.3rem;
  padding: 0.1rem 0.1rem;
}

.stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.stars__item {
  position: relative;
  width: 1em;
  height: 1em;
}
.stars__item::before {
  content: "\f005";
  font-family: FontAwesome;
  position: absolute;
  color: #ddd;
  width: 100%;
}
.stars__half {
  position: absolute;
  height: 100%;
  overflow: hidden;
}
.stars__half--left {
  left: 0;
  width: 50%;
}
.stars__half--left::before {
  content: "\f005";
  font-family: FontAwesome;
  position: absolute;
  color: #FF9900;
  width: 200%;
  left: 0;
}
.stars__half--right {
  right: 7%;
  width: 50%;
}
.stars__half--right::before {
  content: "\f005";
  font-family: FontAwesome;
  position: absolute;
  color: #FF9900;
  width: 200%;
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.stars--small {
  font-size: 14px;
}
.stars--large {
  font-size: 38px;
}/*# sourceMappingURL=rate.css.map */