/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
    display: inline-flex;
    position: relative;
}
.readonly{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: rgba(0,0,0,0);
}

.rating-group [type="radio"]:not(:checked) + label::before,
.rating-group [type="radio"]:checked + label::before,
.rating-group *::after
{
    display: none !important;
}

.rating-group [type="radio"]:not(:checked) + label,
.rating-group [type="radio"]:checked + label{
    padding-left:0;
}
/* make hover effect work properly in IE */
.rating__icon {
    pointer-events: none;
}

/* hide radio inputs */
.rating__input {
    position: absolute !important;
    left: -9999px !important;
}

/* hide 'none' input from screenreaders */
.rating__input--none {
    display: none
}

/* set icon padding and size */
.rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 2rem;
}

/* set default star color */
.rating__icon--star {
    color: orange;
}

/* if any input is checked, make its following siblings grey */
.rating-group .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
}

/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star {
    color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
}