@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.rating:after{
content: "";
display: block;
width: 100%;
clear: both;
}
.rating{
padding: 50px 0px;
}
.rating .titleRating{
text-align: center;
color: var(--g1-color);
font-weight: 600;
}
.rating .titleRating>span{
display: block;
}

.rating .ratingFoot{
text-align: center;
color: var(--g1-color);
}

.divStars{
text-align: center;
}
.divStars .stars {
display: inline-block;
}
.divStars .stars .starItem{
position: relative;
width: 60px;
height: 60px;
display: inline-block;
}
.divStars .stars .starItem .item{
width: 40px;
position: relative;
}
.divStars .stars .starItem .star{
position: absolute;
top:0px;
left: 0px;
text-align: center;
transition:all 0.3s ease-out 0s;
overflow: hidden;
width: 100%;
}
.divStars .stars .starItem .star.empty{

}
.divStars .stars .starItem .star.full{

}
.divStars .stars .starItem .star i{
color: var(--g2-color);
transition:all 0.3s ease-out 0s;
display: inline-block;
font-family: 'Material Symbols Outlined';
}
.divStars .stars:hover .starItem .star i:before{
color: var(--g1-color);
}

.divStars .stars .starItem .star i:before{
font-style: normal;
font-weight: 400;
line-height: 1;
font-size: 50px;
transition:all 0.3s ease-out 0s;
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
position: relative;
left: -5px;
}
.divStars .stars .starItem .star.empty i:before{
content: "\e838";
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
transition:all 0.3s ease-out 0s;
}
.divStars .stars .starItem .star.full i:before{
content: "star";
transition:all 0.3s ease-out 0s;
}

.divStars .stars:hover .starItem .star {
width: 100% !important;
}

.divStars .stars .starItem:hover ~ .starItem > .item .star.full {
opacity: 0;
transition:all 0.3s ease-out 0s;
}
.ratings_message{
text-align: center;
}
.ratings_message .spError{
color: #BD3F3FFF;
}
.ratings_message .spSuccess{
color: #00c156;
}