.rating-container .stars {
display: inline-block;
font-size: 45px;
cursor: pointer;
}
.rating-container .star {
color: #ccc;
transition: color 0.2s;
position: relative;
display: inline-block;
width: 32px;
height: 32px;
line-height: 24px;
text-align: center;
}
.rating-container .star:hover,
.rating-container .star.active {
color: #f5c518;
}
.star-number {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: #333;
font-weight: bold;
}
.star:hover .star-number,
.star.active .star-number {
color: #fff;
}
.update-message {
display: none;
color: #427642;
}
.update-message.show {
display: block;
}
.avg-rating{
color: #c79f10;
font-weight: 600;
}
.rating-info {
margin-top: 10px;
font-size: 16px;
}
.rating-prompt {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
}
.star svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.star:hover,
.star.active {
color: #f5c518;
}
.star:hover .star-overlay,
.star.active .star-overlay {
fill: #ffcc00; }
.star:hover .star-number,
.star.active .star-number {
color: #fff;
}