.rating {
    width: fit-content;
    text-align: left;
    padding: 10px;
}
.rating span { float:right; position:relative; }
.rating span input {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
    padding: 0 5px;
}
.rating span label {
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    color:#FFF;
    font-size:30px;
    margin-right:2px;
    line-height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    transition: all 0.2s;
    padding: 0 20px;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
    color:#F90;
    cursor: pointer;
}
.rating.disabled span:hover ~ span label,
.rating.disabled span:hover label,
.rating.disabled span.checked label,
.rating.disabled span.checked ~ span label {
    cursor: not-allowed;
    color: #FFF;
}