.comments-rating {
	position: absolute;
	left: 20px;
	bottom: 0;
	border: none;
	padding: 0;
	margin-left: 0;
	overflow: visible;
}

@media screen and (max-width: 577px) {
	.comments-rating {
		bottom: 40px;
	}
}

.comments-rating label {
	display: inline-block;
}

.rating-container {
	/* remove inline-block whitespace */
	font-size: 0;
	/* flip the order so we can use the + and ~ combinators */
	unicode-bidi: bidi-override;
	direction: rtl;
}

.rating-container * {
	font-size: 1.4rem;
}

.rating-container > input {
	display: none;
}

.rating-container > input + label {
	/* only enough room for the star */
	font-family: 'dashicons';
	display: inline-block;
	overflow: hidden;
	text-indent: 9999px;
	width: 2em;
	white-space: nowrap;
	cursor: pointer;
	margin: 0;
}

.rating-container > input + label:before {
	display: inline-block;
	text-indent: -9999px;
	content: "\f155";
	color: #DDDDDD;
	font-size: 36px;
}

@media screen and (max-width: 577px) {
	.rating-container > input + label:before {
		font-size: 30px;
	}
}

.rating-container > input:checked ~ label:before,
.rating-container > input + label:hover ~ label:before,
.rating-container > input + label:hover:before {
	content: "\f155";
	color: #F8A836;
}

.rating-container label:last-of-type .rating-val {
	opacity: 1;
}

.rating-container > input:checked + label .rating-val {
	opacity: 1;
}

.rating-container > input:checked ~ label:last-of-type .rating-val {
	opacity: 0;
}

.rating-container > .star-cb-clear + label {
	text-indent: -9999px;
	width: .5em;
	margin-left: -.5em;
}

.rating-container > .star-cb-clear + label:before {
	width: .5em;
}

.rating-container:hover > input + label:before {
	content: "\f155";
	color: #DDDDDD;
	text-shadow: none;
}

.rating-container:hover > input + label:hover ~ label:before,
.rating-container:hover > input + label:hover:before {
	content: "\f155";
	color: #F8A836;
}

.comment-respond .rating-container > .star-cb-clear + label, .comment-respond .rating-container > input + label:before {
	text-indent: 9999px;
}

.comment-respond .rating-container > input + label {
	text-indent: -9999px;
}

.rating-val {
	position: absolute;
	left: -30px;
  top: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
	font-weight: 700;
  font-size: 34px;
  color: #f8a836;
  text-indent: 0;
	opacity: 0;
}

@media screen and (max-width: 577px) {
	.rating-val {
		top: -6px;
		font-size: 28px;
	}
}

.rating-container > input + label {
	overflow: visible;
	text-indent: 0;
}

.dashicons-star-filled:before {
	color: #f8a836;
}