/* WRAP */

.rj-rating-wrap{

margin-top:20px;

padding:12px;

background:#1c1c1c;

border-radius:14px;

}

/* TOP */

.rj-rating-top{

display:flex;

align-items:center;

justify-content:flex-start;

gap:10px;

flex-wrap:nowrap;

overflow:hidden;

}

/* USER STARS */

.rj-user-stars{

display:flex;

align-items:center;

gap:2px;

flex-shrink:0;

}

/* STAR */

.rj-star{

font-size:30px;

line-height:1;

color:#555;

cursor:pointer;

transition:.2s;

user-select:none;

display:inline-block;

}

/* USER ACTIVE */

.rj-star.user-active{

color:#ffd54f;

}

/* SCORE */

.rj-rating-score{

font-size:14px;

font-weight:600;

opacity:.95;

white-space:nowrap;

}

/* BARS */

.rj-rating-bars{

display:flex;

flex-direction:column;

gap:10px;

margin-top:14px;

}

/* ROW */

.rj-rating-bar-row{

display:grid;

grid-template-columns:
14px 1fr 36px;

align-items:center;

gap:8px;

width:100%;

}

/* LABEL */

.rj-bar-label{

font-size:13px;

opacity:.9;

}

/* BAR */

.rj-bar{

width:100%;

height:10px;

background:#2a2a2a;

border-radius:999px;

overflow:hidden;

}

/* FILL */

.rj-bar-fill{

height:100%;

width:0%;

transition:width .3s ease;

border-radius:999px;

}

/* COLORS */

.rj-bar-5{
background:#32ff00;
}

.rj-bar-4{
background:#7dff00;
}

.rj-bar-3{
background:#ffd000;
}

.rj-bar-2{
background:#ff8c00;
}

.rj-bar-1{
background:#ff3b00;
}

/* PERCENT */

.rj-bar-percent{

font-size:12px;

min-width:30px;

text-align:right;

opacity:.9;

}

/* MOBILE */

@media(max-width:480px){

.rj-star{

font-size:26px;

}

.rj-rating-score{

font-size:13px;

}

.rj-bar{

height:9px;

}

}