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

@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url("/lib/fonts/materialsymbolsoutlined.woff2") format('woff2');
}

.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
.rating:after{
content: "";
display: block;
width: 100%;
clear: both;
}
.rating{
padding: 50px 0px;
}
.rating .titleRating{
text-align: center;
color: #4E4E4E;
font-weight: 600;
}
.rating .titleRating>span{
display: block;
}

.rating .ratingFoot{
text-align: center;
color: #4E4E4E;
}

.divStars{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

.divStars .divVote{
margin-left: 30px;
}
.divStars .divVote button{
display: inline-block;
line-height: 40px;
padding: 0px 25px 0px 25px;
border: 1px solid #dfdfdf;
color: #dfdfdf;
font-size: 14px;
font-weight: 700;
transition: all 0.5s ease-out 0s;
background-color: #FFFFFF;
cursor: default;
border-radius: 3px;
float: right;
margin: 0px 0px 0px 0px;
}

.divStars .divVote button.show{
border: 1px solid #7FB615;
color: #FFFFFF;
background-color: #7FB615;
cursor: pointer;
}
.divStars .divVote button.show:hover{
color: #7FB615;
background-color: #FFFFFF;
}

.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: #ffc107;
transition:all 0.3s ease-out 0s;
display: inline-block;
font-family: 'Material Symbols Outlined';
}
.divStars .stars:hover .starItem .star i:before{
color: #ffc107;
}

.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;

}

.voteRating .divStars .stars .starItem .star i:before{
cursor: pointer;
}

.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;
}

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

.voteRating .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;
}


.rating_10{

}

@media screen and (max-width:770px){
.divStars{flex-direction: column}
.divStars .divVote{margin: 0px 0px 20px 0px}
}

@media screen and (max-width:640px){
.divStars .stars .starItem .star i:before{font-size: 40px;}
.divStars .stars .starItem .item {width: 30px;}
.divStars .stars .starItem {width: 45px;height: 52px;}
}
@media screen and (max-width:500px){
.divStars .stars .starItem .star i:before{font-size: 29px;}
.divStars .stars .starItem .item {width: 20px;}
.divStars .stars .starItem {width: 34px;height: 40px;}
}