.rare > input{
    display: none;
  }
  
  .rare{
    display: inline-block;;
    border: 0;
  } 
  
  .rare > label{
    float: right;
  }
  
  /* Showing the stars */
  .rare > label:before{
    display: inline-block;
    font-size: 1.1rem;
    font-family: FontAwesome;
    content: "\f005";
    margin:0;
    padding:0.3rem .2rem;
    cursor: pointer;
  }
  
  /* Half star */
  .rare .half:before{
    content: "\f089";
    position: absolute;
    padding-right: 0;
  }
  
  /* Click and hover */
  input:checked ~ label, label:hover ~ label{
    color: #ffb503;
  }
  
  /* hover hightlight */
  input:checked + label:hover, input:checked ~ label:hover,input:checked ~ label:hover ~ label,
  label:hover ~ input:checked ~ label{
    color: #cc9000;
  }



  .rating-star i{
    color: #ffb503 !important;
  }