.ratingx{
	--uiRatingSize: var(--ratingSize, 20px);
	--uiRatingColor: var(--ratingColor, #eee);
	--uiRatingColorActive: var(--ratingColorActive, #ffcc00);
	--uiRatingStroke: var(--ratingStroke, #222);
	--uiRatingStrokeWidth: var(--ratingStrokeWidth, 1px);
	--uiRatingBoder : var(--ratingBorder , 1px solid);
	--uiRatingBoderRadius : var(--ratingBorderRadius , 20px);
	display: flex;
  	font-size: var(--uiRatingSize);
	color: var(--uiRatingColor);
  	position: relative;
}

.rating-control{
	position: absolute;
	left: -9999px;
}

.rating-control:nth-of-type(1):focus ~ .rating-item:nth-of-type(1):before,
.rating-control:nth-of-type(2):focus ~ .rating-item:nth-of-type(2):before,
.rating-control:nth-of-type(3):focus ~ .rating-item:nth-of-type(3):before,
.rating-control:nth-of-type(4):focus ~ .rating-item:nth-of-type(4):before,
.rating-control:nth-of-type(5):focus ~ .rating-item:nth-of-type(5):before{
  content: ""; 
  box-shadow: 0 0 0 4px var(--uiRatingColorActive);
  
  position: absolute;
  top: -.15em;
  right: 0;
  bottom: -.15em;
  left: 0;
  z-index: -1;
}

.rating-item{
	-webkit-tap-highlight-color: transparent;
  cursor: pointer;  
  position: relative;
}

.rating-item{
  stroke: var(--uiRatingStroke);
  stroke-width: var(--uiRatingStrokeWidth);
  padding-left: .25em;
  padding-right: .25em;
}

.rating-star{
	display: block;
	width: 1em;
	height: 1em;

	fill: currentColor;
	stroke: var(--uiRatingStroke);
	stroke-width: var(--uiRatingStrokeWidth);
}

.rating-star2{
	display: block;
	width: 1em;
	height: 1em;

	fill: currentColor;
	stroke: var(--uiRatingStroke);
	stroke-width: var(--uiRatingStrokeWidth);
}

.rating-label{
	position: absolute;
	top: 0;
	left: -9999px;
}

.rating:hover,
.rating-control:nth-of-type(1):checked ~ .rating-item:nth-of-type(1) ,
.rating-control:nth-of-type(2):checked ~ .rating-item:nth-of-type(-n+2),
.rating-control:nth-of-type(3):checked ~ .rating-item:nth-of-type(-n+3),
.rating-control:nth-of-type(4):checked ~ .rating-item:nth-of-type(-n+4),
.rating-control:nth-of-type(5):checked ~ .rating-item:nth-of-type(-n+5){
	color: var(--uiRatingColorActive);
	/* border: var(--uiRatingBoder);
	border-radius: var(--uiRatingBoderRadius); */
}

.rating-control:nth-of-type(1):hover ~ .rating-item:nth-of-type(1) ,
.rating-control:nth-of-type(2):hover ~ .rating-item:nth-of-type(-n+2),
.rating-control:nth-of-type(3):hover ~ .rating-item:nth-of-type(-n+3),
.rating-control:nth-of-type(4):hover ~ .rating-item:nth-of-type(-n+4),
.rating-control:nth-of-type(5):hover ~ .rating-item:nth-of-type(-n+5){
	color: var(--uiRatingColorActive);
}

.rating-item:hover ~ .rating-item{
  color: var(--uiRatingColor);
}

/*
=====
LEVEL 2. SETTINGS
=====
*/

.ratingx{
  --ratingSize: 30px;
  --ratingColor: #eee;
	--ratingColorActive: #ffcc00;
	--ratingBorder :  1px solid black;
	--ratingBorderRadius: 20px;
}
.activex {
	background: red;
}
.loadActive {
	color : #ffcc00;
}
.sc_score.ratingx {
	--uiRatingColorActive: none;
}

.rating-control:nth-of-type(2):checked  ~ #rating-item:nth-of-type(-n+2) {
	
}