.id_rate {
	display: block;
	width: 50vmin;
	padding: 1vmin 0 1vmin 1vmin;
	background: linear-gradient(90deg, #ffffff90 40vmin, #fff0 40vmin 100%);
	border-radius: 5vmin;
	position: relative;
}

input { display: none; }

label {
	width: 3vmin;
	height: 3vmin;
	background: #000b;
	display: inline-flex;
	cursor: pointer;
	margin: 0.5vmin 0.65vmin;
	transition: all 1s ease 0s;
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

label[for=id_rate_0] {
	display: none;
}

label:before {
	width: 90%;
	height: 90%;
	content: "";
	background: orange;
	z-index: -1;
	display: block;
	margin-left: 5%;
	margin-top: 5%;
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
	background: linear-gradient(90deg, yellow, orange 30% 50%, #184580 50%, 70%, #173a75 100%);
	background-size: 205% 100%;
	background-position: 0 0;
}

label:hover:before {
	transition: all 0.25s ease 0s;
}

input:checked + label ~ label:before {
	background-position: 100% 0;
	transition: all 0.25s ease 0s;
}

input:checked + label ~ label:hover:before {
	background-position: 0% 0
}

#id_rate_1:checked ~ .rating-counter:before {
	content: "1";
}

#id_rate_2:checked ~ .rating-counter:before {
	content: "2";
}

#id_rate_3:checked ~ .rating-counter:before {
	content: "3";
}

#id_rate_4:checked ~ .rating-counter:before {
	content: "4";
}

#id_rate_5:checked ~ .rating-counter:before {
	content: "5";
}

label + input:checked ~ .rating-counter:before {
	color: #ffab00 !important;
	transition: all 0.25s ease 0s;
}

label:hover ~ .rating-counter:before {
	color: #9aacc6 !important;
	transition: all 0.5s ease 0s;
	animation: pulse 1s ease 0s infinite;
}

@keyframes pulse {
	  50% { font-size: 6.25vmin; }
}

label[for=rs1]:hover ~ .rating-counter:before {
	content: "1" !important;
}

label[for=rs2]:hover ~ .rating-counter:before {
	content: "2" !important;
}

label[for=rs3]:hover ~ .rating-counter:before {
	content: "3" !important;
}

label[for=rs4]:hover ~ .rating-counter:before {
	content: "4" !important;
}

label[for=rs5]:hover ~ .rating-counter:before {
	content: "5" !important;
}

input:checked:hover ~ .rating-counter:before {
	animation: none !important;
	color: #ffab00 !important ;
}