/*GradientStarsCSS-Colorsbasedonpercentage*/
.gradient-stars{
display:inline-block;
width:115px;
}
.gradient-star{
font-size:21px;
margin-right:2px;
background:linear-gradient(45deg,#ff6916 0%,#ffc749 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
color:transparent;
}
/*Defaultcolorforemptystars*/
.gradient-star.fa-star-o{
background:none;
-webkit-text-fill-color:#6e6e6e;
color:#6e6e6e;
}
/*Makefilledstarsmoreprominent*/
.gradient-star.fa-star,
.gradient-star.fa-star-half-o{
}
/*Alternativegradientdirections*/
.gradient-star.fa-star:nth-child(1),
.gradient-star.fa-star-half-o:nth-child(1){
background:linear-gradient(45deg,#ff6916 0%,#ff6216 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.gradient-star.fa-star:nth-child(2),
.gradient-star.fa-star-half-o:nth-child(2){
background:linear-gradient(45deg,#ff6318 0%,#ff6e28 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.gradient-star.fa-star:nth-child(3),
.gradient-star.fa-star-half-o:nth-child(3){
background:linear-gradient(45deg,#ff6d26 0%,#f5a522 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.gradient-star.fa-star:nth-child(4),
.gradient-star.fa-star-half-o:nth-child(4){
background:linear-gradient(45deg,#f5a522 0%,#ffc749 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.gradient-star.fa-star:nth-child(5),
.gradient-star.fa-star-half-o:nth-child(5){
background:linear-gradient(45deg,#ffc749 0%,#ffab49 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
/*Percentagedisplaystyling*/
.percentage-display{
font-weight:bold;
font-size:14px;
margin-left:5px;
color:#333;
}
/*Responsiveadjustments*/
@media(max-width:768px){
.gradient-star{
font-size:14px;
}
.percentage-display{
font-size:12px;
}
}