.dcfe-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--dcfe-rating-alignment, center);
}

.dcfe-rating-hidden-input{
	display: none;
}

.dcfe-rating .rating-icon-wrapper {
	display: inline-block;
	position: relative;
	font-size: var(--dcfe-rating-size, 24px);
	margin-right: var(--dcfe-rating-spacing, 4px);
	line-height: 1;
}

.dcfe-rating .rating-icon-wrapper:last-child {
	margin-right: 0;
}

.dcfe-rating .rating-icon-wrapper .rating-icon svg {
	height: var(--dcfe-rating-size, 24px);
	width: auto;
	vertical-align: middle;
}

.dcfe-rating .rating-icon-wrapper .rating-icon img {
	height: var(--dcfe-rating-size, 24px);
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

.dcfe-rating .rating-icon {
	cursor: pointer;
	transition: color 0.2s, fill 0.2s;
	color: var(--dcfe-rating-unmarked, #e0e0e0);
	fill: var(--dcfe-rating-unmarked, #e0e0e0);
	user-select: none;
}

.dcfe-rating .rating-icon.half {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
	z-index: 2;
}

.dcfe-rating .rating-icon.full {
	position: relative;
	z-index: 1;
}

.dcfe-rating .rating-icon.full.marked,
.dcfe-rating .rating-icon.half.marked,
.dcfe-rating .rating-icon.full.hover,
.dcfe-rating .rating-icon.half.hover,
.dcfe-rating .rating-icon.full.marked svg,
.dcfe-rating .rating-icon.half.marked svg,
.dcfe-rating .rating-icon.full.hover svg,
.dcfe-rating .rating-icon.half.hover svg {
	color: var(--dcfe-rating-marked, #ffd700);
	fill: var(--dcfe-rating-marked, #ffd700);
}

.rating-icon-wrapper .rating-icon:hover ~ .rating-icon,
.rating-icon-wrapper:hover ~ .rating-icon-wrapper .rating-icon {
	color: var(--dcfe-rating-unmarked, #e0e0e0) !important;
	fill: var(--dcfe-rating-unmarked, #e0e0e0) !important;
}

.dcfe-rating .dcfe-rating-value {
	margin-left: 10px;
	font-size: calc(var(--dcfe-rating-size, 24px) * 0.6);
	min-width: calc(var(--dcfe-rating-size, 24px) * 2);
}

.dcfe-rating-error-msg {
	color: #d9534f;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.3;
	width: 100%;
	flex-basis: 100%;
}

div.cool-error-field-wrapper{
	gap: 0px;
}
