.rating {
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
 }
 
 .rating > input{ display:none;}
 
 .rating > label {
   position: relative;
     width: 1em;
     font-size: 3vw;
     color: #6b6b6b;
     cursor: pointer;
 }
 .rating > label::before{ 
   content: "\2605";
   position: absolute;
   opacity: 1;
 }
 .rating > label:hover:before,
 .rating > label:hover ~ label:before {
   opacity: 1 !important;
   color: #FFD600;
 }
 
 .rating > input:checked ~ label:before{
   opacity:1;
   color: #FFD600;
 }
 
 .rating:hover > input:checked ~ label:before{ opacity: 1; }

 .sr-rating .rating > label {
  position: relative;
    width: 1em;
    font-size: 1rem;
    color: #6b6b6b;
    cursor: default;
    pointer-events: none;
    text-align: left;
    margin-top: -7px;
}