.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    font-size: 30px;
}
  
.rating span.star, .rating span.star {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}
  
.rating span.star:hover, .rating span.star:hover {
    cursor: pointer;
}
  
.rating span.star:before, .rating span.star:before {
    content: "★";
    padding-right: 5px;
    color: #BEC3C7;
    
}
  
.rating span.star:hover:before, .rating span.star:hover:before, .rating span.star:hover ~ span.star:before, .rating span.star:hover ~ span.star:before {
    content: "★";
    color: #41CAC0;
     
    
}
  
.rating span.star.active::before, .rating span.star.active::before, .rating span.star.active ~ span.star::before, .rating span.star.active ~ span.star::before {
    color: #41cac0;
  
    content: "★";
}