
.voting-message {
	border: 1px solid var(--color-grey);
	padding: 10px;
	display: block;
}

	.voting-message.error {
		border-color: var(--color-red);
	}

.no-uploads {
	opacity: 0.5;
}

.no-attachments {
	opacity: 0.5;
}

.voting .uploads-list {
	list-style-type: none;
	padding: 0;
	margin: 80px 0 0;
}

	.voting .uploads-list > li {
		margin-top: 20px;
	}

		.voting .uploads-list .toggle-area {
			border: 1px solid var(--color-grey-light);
			padding: 20px;
		}

		.voting .uploads-list .toggle-area .toggle-content {
			padding-top: 1em;
		}

		.voting .uploads-list .toggle-area .rating {
			position: absolute;
			right: 60px;
			top: 2px;
		}

			.voting .uploads-list .toggle-area .rating.none {
				opacity: 0.5;
			}

.voting .attachments-list {
	margin: 0;
}

.voting .toggle-area.inited {
	padding: 0;
}

	.voting .toggle-area.inited .toggle-head {
		border-top: 3px solid var(--color-black);
		padding: 20px;
		padding-right: 100px;
		box-sizing: border-box;
	}

		.voting .toggle-area.inited .toggle-head:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top-color: var(--color-black);
			position: absolute;
			top: 28px;
			right: 20px;
		}

			.voting .toggle-area.inited.open .toggle-head:after {
				border-top-color: transparent;
				border-bottom-color: var(--color-grey-light);
				margin-top: -10px;
			}

	.voting .toggle-area.inited .toggle-content {
		padding: 0 20px 20px;
	}

		.voting .toggle-area.inited.open .toggle-content {
			display: block;
		}

	.voting .toggle-area .toggle-content .fade {
		opacity: 0.5;
		margin-top: 1em;
		display: block;
	}

.voting .rating-area {
	margin-top: 1em;
}

	.voting .rating-area .custom-rating {
		display: none;
	}

		.voting .rating-area .custom-rating.inited {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			margin-top: 10px;
		}

			.voting .rating-area .custom-rating > div {
				display: inline-block;
				width: calc(100% / 11);
				height: 55px;
				cursor: pointer;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				opacity: 0.5;
				position: relative;
			}

				.voting .rating-area .custom-rating > div:before {
					content: "";
					display: block;
					width: 20px;
					margin-left: -10px;
					height: 20px;
					position: absolute;
					left: 50%;
					top: 0;
					border: 3px solid black;
					border-radius: 50%;
				}

				.voting .rating-area .custom-rating > div.active {
					opacity: 1;
				}

					.voting .rating-area .custom-rating > div.active:before {
						background: #000;
					}

	.voting .rating-area .custom-rating .overlay {
		display: none;
	}

		.voting .rating-area .custom-rating .overlay.visible {
			display: flex;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			background: rgba(255,255,255,.8);
			justify-content: center;
			align-items: center;
			text-align: center;
		}

@media ( max-width: 1080px ) {

	.voting .width {
		max-width: 100% !important;
	}

}

@media ( max-width: 640px ) {

	.voting .rating-area .custom-rating > div {
		height: 38px;
		font-size: 13px;
	}

	.voting .rating-area .custom-rating > div:before {
		width: 20px;
		height: 20px;
		margin-left: -10px;
	}

}

