@import url(../font/bootstrap-icon/bootstrap-icons.min.css);
.rating {
    border: none;
}

.rating:not(:checked) > input {
    position: absolute;
    /* top:-9999px; */
    clip: rect(0, 0, 0, 0);
}

.rating:not(:checked) > label {
    float: right;
    width: 1em;
    padding: 0 .1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 200%;
    line-height: 1.2;
    color: #ddd;
}

.rating:not(:checked) > label:before {
    /* content: '★ '; */
    content: "\f586";
    font-family: 'bootstrap-icons', serif;
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: #fff;
}

.rating > input:checked ~ label {
    color: #f7ad0d;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: #f7ad0d;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #f7ad0d;
}

.rating > label:active {
    position: relative;
}
.star i.bi-star-fill{
    color: #f7ad0d;
}