.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
  }

  .rating > input {
    display: none;
  }

  .rating > label {
    display: inline-block;
    font-size: 3rem;
    color: #ddd;
    cursor: pointer;
  }

  .rating > label:before {
    content: '\2605';
    padding: 5px;
  }

  .rating > input:checked ~ label,
  .rating:not(:checked) > label:hover,
  .rating:not(:checked) > label:hover ~ label {
    color: #ffca08;
  }

  .rating > input:checked + label:hover,
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label,
  .rating > input:checked ~ label:hover ~ label {
    color: #ffca08;
  }