/* Rating */

.wpj-rating-single {
	display: flex;

	i.star.icon {
		font-size: 16px;
		color: $yellowColor;
		margin-right: 4px;;
	}

	.rating-score {
		font-size: 14px;
		font-weight: 700;
		color: $yellowColor;
	}

	.rating-reviews-number {
		font-size: 14px;
		font-weight: 400;
		color: $mainTextColor;
		margin-left: 4px;
	}
}

/* Order feedback */
.rating label {
	text-indent: 0;
	overflow: hidden;
	cursor: pointer;
}

.rating input[type="radio"] {
	display: none;
}

input[type="radio"],
.rating label.stars {
	float: right;
}

span + input[type="radio"] + label,
legend + input[type="radio"] + label {
	clear: right;
	margin-left: 0;
	margin-right: 80px;
	counter-reset: checkbox;
}

/* Ratings to award */
.dashboard-review-box {
	&:not(.review-list-item) {
		margin-bottom: 30px;

		@include small-desktop {
			margin-bottom: 20px;
		}

		@include mobile {
			margin-bottom: 10px;
		}
	}

	.title-job-left {
		padding-left: 10px;
		color: $mainColor;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
		line-height: 130%;

		a {
			color: inherit;
		}
	}

	.subtitle-job-left {
		font-size: 14px;
		font-weight: 600;
		color: $mainTextColor;
		padding-left: 10px;

		a {
			color: inherit;
		}
	}
}
.rating-title {
	padding-left: 0;
}
.job-review-subtitle {
	font-size: 16px;
	font-weight: 600;
	margin-right: 10px;
	color: $headlinesColor3;
}
.job-review-right {
	float: right;
	margin: 3px 0;
}

.wrapper-rating-stars {
	position: relative;
	text-align: right;
	margin-top: 5px;
	display: flex;
	align-items: center;
}

.rate {
	display: inline-flex;
	flex-direction: row-reverse;
}

.rate > label,
.rating > label {
	@include round(2px);

	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	color: $whiteColor;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: $headlinesColor2;

	&:not(:first-child) {
		margin-right: 5px;
	}
}

.rate > label:before,
.rating > label:before {
	content: "\f005";
	font-family: Icons;
	font-size: 10px;
	color: $whiteColor;
}

.rate>input:checked ~ label {
	background: $yellowColor;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
	background: $yellowColor;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
	background: $yellowColor;
}

.rate.review input {
	position: inherit;
	opacity: 0;
	height: auto;
}

.rating > input:checked ~ label {
	background: $yellowColor;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
	background: $yellowColor;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
	background: $yellowColor;
}

/* Ratings received */
.review-job-image {
	text-align: center;
}
.grey-time {
	color: $mainTextColor;
	font-size: 12px;
}

.review-rating-job,
.pending-review {
	.review-meta {
		margin-bottom: 5px;
		color: $headlinesColor3;

		span {
			font-weight: 600;
			color: $mainTextColor;
			font-size: 14px;
		}

		a {
			color: $headlinesColor3;
			font-weight: 600;
		}
	}
}

.review-list-item:not(:last-child) {
	padding-bottom: 20px;
	border-bottom: 1px solid $borderColor;
	margin-bottom: 20px;
}

.pending-review {
	.review-meta {
		padding-left: 10px;
	}
	.pending-review-title {
		color: $mainColor;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
		padding-left: 10px;
	}
}

.review-comment-job {
	margin-top: 20px;
	color: $headlinesColor3;

	p {
		color: inherit;
		font-size: 16px;
		line-height: 26px;

		&:not(:last-child) {
			margin-bottom: 20px;
		}

		@include small-desktop {
			font-size: 14px;
			line-height: 24px;
		}
	}
}

.review-job-title {
	display: flex;
	align-items: center;

	@include mobile {
		flex-wrap: wrap;
	}

	h3 {
		color: $mainColor;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 10px;

		a {
			color: inherit;
		}
	}

	.review-posted {
		margin-left: auto;

		@include mobile {
			flex: 1 1 100%;
		}
	}
}

.review-work-sample {
	margin-left: 15px;

	@include mobile {
		flex: 1 1 100%;
		margin-left: 0;
		margin-bottom: 15px;
	}
}

/* Review text */
.first_feedbacks_box .feed:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.feed a {
	font-size: 1.142rem;
	font-weight: bold;
}
.feed {
	border-bottom: 1px dotted #aaabac;
	margin-bottom: 20px;
}
.feed {
	border-top: 1px solid #f1f2f3;
	border-bottom: 0;
	margin-bottom: 0;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* User */
.reviews-wrapper {
	margin-bottom: 30px;
}

.ui.segment.review-item.feedback-answer {
	border-top: 1px solid $grayBackground2;
	padding-top: 20px;
}

.review-item .picture {
	float: left;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	overflow: hidden;
	border: 1px solid #e2e5e7;
}

.review-item .picture > img {
	max-width: 100%;
	max-height: 100%;
}

.review-item .text-content {
	float: left;
	width: calc(100% - 80px);
	padding-left: 25px;
	position: relative;
}

.review-item .text-content .postdate {
	font-size: 0.857rem;
	color: #b8b8bc;
}

/* Responsive */
@media only screen and (max-width:767px) {
	.wrapper-rating-stars {
		margin-top: 0;
	}
	.job-review-right {
		margin: 0;
		float: none;
	}
	.job-review-subtitle {
		margin-top: 0;
	}
	.rating-review {
		top: 0;
	}
	.review-item .text-content .postdate.right {
		float: left;
	}
	.review-item .picture {
		width: 40px;
		height: 40px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	.review-item .text-content {
		width: calc(100% - 40px);
		padding-left: 15px;
	}
}

@media only screen and (max-width:479px) {
	.wrapper-rating-stars {
		margin-top: 0;
	}
	.job-review-right {
		margin: 0;
		float: none;
	}
	.job-review-subtitle {
		margin-top: 0;
	}
	.rating-review {
		top: 0;
	}
}
