.rating {
    border: none;
}

.myratings {
    font-size: 85px;
    color: green;
    text-align: center;
    display: grid;
}

.rating > [id^="star"],
.rating > input {
    display: none
}

.rating > label:before {
    margin: 5px;
    font-size: 2.25em;
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    content: "\f005"
}

.rating > .half:before {
    content: "\f089";
    position: absolute
}

.rating > label {
    color: #ddd;
    float: right
}

.rating > [id^="star"]:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: #FFD700
}

    .rating > [id^="star"]:checked + label:hover,
    .rating > [id^="star"]:checked ~ label:hover,
    .rating > label:hover ~ [id^="star"]:checked ~ label,
    .rating > [id^="star"]:checked ~ label:hover ~ label {
        color: #FFED85
    }

.reset-option {
    display: none
}

.reset-button {
    margin: 6px 12px;
    background-color: rgb(255, 255, 255);
    text-transform: uppercase
}