/* WPJobster Single Job SASS file */

$singleJobSidebarWidth: 400px;
$singleJobSidebarSmallDesktopWidth: 300px;

.single-job-grid {
	display: flex;
	align-items: flex-start;

	@include tablet {
		flex-wrap: wrap;
	}
}

.single-job-body {
	display: block;
	max-width: calc(100% - #{$singleJobSidebarWidth} - 60px);
	flex: 1 1 calc(100% - #{$singleJobSidebarWidth} - 60px);

	@include small-desktop {
		max-width: calc(100% - #{$singleJobSidebarSmallDesktopWidth} - 40px);
		flex: 1 1 calc(100% - #{$singleJobSidebarSmallDesktopWidth} - 40px);
	}

	@include tablet {
		max-width: 100%;
		flex: 1 1 100%;

		@supports (display: contents) {
			display: contents;
		}
	}

	order: 20;

	> * {
		order: 200;
		max-width: 100%;
	}

	.single-job-slider {
		width: 100%;
		margin-bottom: 30px;

		@include tablet {
			order: 40;
						width: 100%;
		}
	}

	.job-description-wrapper {
		@include tablet {
			order: 100;
						width: 100%;
		}

		.single-job-title-description {
			 + .ui.divider {
				margin: 5px 0;
			}
		}

		h2 {
			font-size: 24px;
			font-weight: 600;
		}

		.job-post {
			p {
				font-size: 14px;
				line-height: 24px;
			}
		}
	}

	.job-instructions-wrapper {
		@include tablet {
			order: 110;
		}
	}

	.job-user-main-info-wrapper {
		@include default-shape;

		border: 1px solid $borderColor;
		padding: 20px 30px;
		margin-top: 10px;

		@include tablet {
			order: 150;
			width: 100%;
		}

		@include mobile {
			padding: 15px 20px;
			margin-top: 0;
		}

		.job-user-main-info-header {
			display: flex;

			.user-img-container {
				flex-shrink: 0;

				.user-avatar-image-link > img {
					@include medium-desktop {
						width: 100px;
						height: 100px;
					}

					@include mobile {
						width: 50px;
						height: 50px;
					}
				}
			}

			.user-info {
				padding-top: 15px;
				margin-left: auto;
				flex: 0 1 calc(100% - 130px - 25px);

				@include medium-desktop {
					flex: 0 1 calc(100% - 100px - 20px);
				}

				@include mobile {
					flex: 0 1 calc(100% - 50px - 15px);
					padding-top: 5px;
				}
			}

			.user-info-header {
				display: flex;
				justify-content: space-between;

				h3 {
					display: block;
					margin-bottom: 5px;
				}

				.user-type {
					color: $mainTextColor;
					font-size: 14px;
					margin-top: 5px;
				}

				.user-info-subtitle {
					color: $mainTextColor;
					font-size: 14px;
					margin-top: 5px;
				}
			}
		}

		.meta-columns-wrapper {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;

			.meta-column {
				margin-bottom: 10px;
				text-align: left;

				.label-class {
					display: block;
					font-size: 16px;
					font-weight: 600;
					color: $headlinesColor3;
				}

				.value-class {
					font-size: 14px;
					font-weight: 600;
					display: block;
					color: $mainTextColor;

					&.red {
						color: $redColor;
					}

					&.green {
						color: $greenColor;
					}

					&.yellow {
						color: $yellowColor;
					}
				}

				&:not(:last-child) {
					margin-right: 50px;

					@include medium-desktop {
						margin-right: 30px;
					}
				}
			}
		}
	}

	.single-job-review-wrapper {
		margin-top: 30px;

		@include tablet {
			order: 160;
			width: 100%;
		}
	}

	.single-job-other-job {
		@include tablet {
			order: 350;
			width: 100%;
		}
	}

}

.job-user-biography {
	margin-top: 20px;
	font-size: 14px;
	line-height: 24px;
	color: $mainTextColor;

	@include tablet {
		font-size: 13px;
		line-height: 20px;
	}
}

.job-faq-wrapper {
	@include tablet {
		width: 100%;
	}
}

.jp-flat-audio {
	&:not(:last-child) {
		margin-bottom: 20px;
	}

	.jp-details {
		padding-right: 100px;

		.jp-title {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: block;
		}
	}
}

.job-preview-wrapper {
	@include tablet {
		width: 100%;
	}
}

.job-map-wrapper {
	@include tablet {
		width: 100%;
	}
}

.single-job-sidebar {
	width: $singleJobSidebarWidth;
	flex-shrink: 0;
	margin-left: auto;

	@include small-desktop {
		width: $singleJobSidebarSmallDesktopWidth;
	}

	@include tablet {
		width: 100%;
		flex-grow: 1;

		@supports (display: contents) {
			&, .ui.sticky  {
				display: contents;
			}
		}
	}

	// position: sticky;
	// top: 30px + $topHeaderHeight;

	order: 30;

	.ui.sticky {
		z-index: 10;
		transition: margin-top 0.2s ease-in-out;

		&.fixed.top {
			margin-top: 90px !important;
			top: 0 !important;
		}
	}

	&, .ui.sticky  {
		> * {
			order: 300;
			max-width: 100%;
		}

		.single-job-buy {
			@include tablet {
				order: 50;
								width: 100%;
			}
		}
	}

	// Price
}

.admin-bar {
	.single-job-sidebar {
		// top: 30px + $topHeaderHeight + $adminBarHeight;
		.ui.sticky {
			&.fixed.top {
				margin-top: 120px !important;
				top: 0 !important;
			}
		}
	}
}

// separate elements

.single-job-cover {
	.job-cover-wrapper {
		@include default-shape();

		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		max-height: 260px;
		margin-bottom: 30px;

		.job-cover-image {
			flex-shrink: 0;
			min-width: 100%;
			min-height: 100%
		}
	}
}

.job-cover-wrapper > picture.job-cover-image > img {
	width: 100%;
	border-radius: 6px;
}

.single-job-slider {
	.payment-job-categories {
		line-height: normal;
	}

	.job-title-wrapper {
		h1 {
			font-size: 32px;
			line-height: 1.2;
			margin-bottom: 24px;

			@include medium-desktop {
				font-size: 30px;
			}

			@include small-desktop {
				font-size: 26px;
			}

			@include mobile {
				font-size: 24px;
			}

			@include small-mobile {
				font-size: 22px;
			}
		}
	}

	.single-job-overview {
		margin-bottom: 30px;
		color: $mainTextColor;
		flex-wrap: wrap;

		.single-job-overview-left {
			margin-right: 10px;
		}

		.single-job-overview-left,
		.single-job-overview-right {
			flex: 0 0 auto;
		}

		.single-job-overview-right {
			@include mobile {
				flex: 1 0 100%;
				margin-top: 10px;
			}

			.text-button {
				@include mobile {
					width: 100%;
				}
			}
		}

		.single-job-overview-center {
			flex: 1 1 0;
		}

		.single-job-overview-thumb {
			position: relative;

			img {
				vertical-align: middle;
			}

			.user-status-wrapper {
				position: absolute;
				top: auto;
				right: 0;
				bottom: 0;
				left: auto;

				.online-icon-wrapper,
				.offline-icon-wrapper {
					height: 14px;
					width: 14px;
				}
			}
		}

		.single-job-overview-username {
			h3 {
				margin: 0;
			}
		}

		.single-job-overview-details {
			flex-wrap: wrap;

			> * {
				display: flex;
			}

			> * {
				&:not(:last-child) {
					position: relative;
					margin-right: 26px;

					&:after {
						content: '|';
						position: absolute;
						right: -15px;
						left: auto;
						color: $borderColor2;
					}
				}
			}

			.user-level-label {
				font-weight: 600;
			}

			.user-level-label-3 {
				color: $yellowColor;
			}

			.value {
				font-weight: 600;
			}
		}
	}
}

.order-additional-sidebar-wrapper {
	@include default-shape;

	border: 1px solid $borderColor;
	background: $grayBackground5;
	margin-bottom: 20px;

	.ui.list {
		margin: 0;
	}

	.activate-job-link,
	.deactivate-job-link {
		color: #2c2c2d;
		text-align: center;
		display: block;
		font-weight: 600;
		line-height: 34px;
		cursor: pointer;
	}

	.text-button.disabled {
		background: $whiteColor;
		line-height: 22px;
	}

	.single-job-custom-offer-button {
		font-size: 18px;
		padding: 15px 20px;
		margin: 0 25px 25px;
		display: flex;

		@include medium-desktop {
			font-size: 16px;
			margin: 0 20px 20px;
		}

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

		@include mobile {
			width: auto !important;
		}
	}

	.job-purchase-action {
		font-size: 18px;
		padding: 20px 20px;
		font-weight: 400;
		display: flex;
		width: 100%;
		align-items: center;
		flex-wrap: wrap;

		.price {
			display: inline-block;
			font-weight: 700;
		}

		@include big-desktop {
			font-size: 16px;
		}

		@include medium-desktop {
			font-size: 14px;
		}

		@include mobile {
			margin-bottom: -5px !important;
		}

		&.small {
			font-size: 16px;
			padding: 14px 15px;
		}
	}

	.ui.menu.ui.menu {
		box-shadow: none;
		border: 0;
		background: none;
		border-radius: 0;
		margin: 0;
		display: flex;

		> a.item {
			border: 0;

			&:first-child {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

			@include default-shape-top-only;

			padding: 20px 15px;
			text-align: center;
			flex: 1 1 50%;
			text-transform: uppercase;
			font-size: 16px;
			letter-spacing: 0.05em;
			color: $mainTextColor;
			border-bottom: 3px solid transparent;
			font-weight: 600;
			display: block;
			background: none;

			@include medium-desktop {
				font-size: 14px;
			}

			@include small-desktop {
				font-size: 13px;
				padding: 15px 10px;
			}

			&:not(:last-child) {
				border-right: 1px solid $borderColor;
			}

			&:not(.active) {
				background: $whiteColor;
			}

			&.active {
				color: $headlinesColor3;
				border-bottom: 3px solid $mainColor;
			}
		}
	}
}

.single-job-sidebar-padded-content {
	padding: 25px 25px;

	@include medium-desktop {
		padding: 20px 20px;
	}

	@include tablet {
		padding: 0;
	}

	@include mobile {
		padding: 0;
	}

	> .text-button.disabled {
		margin: 0 auto;
		display: block;
	}
}

.single-job-sidebar-price-content {
	padding: 10px 25px;
	border-bottom: 1px solid $borderColor;

	@include medium-desktop {
		padding: 10px 20px;
	}

	&.border-top {
		border-top: 1px solid $borderColor;
	}
}

.sidebar-top-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;

	.type {
		font-size: 18px;
		font-weight: 600;
		color: $headlinesColor3;
		text-transform: lowercase;

		@include medium-desktop {
			font-size: 16px;
		}

		&:first-letter {
			text-transform: uppercase;
		}
	}

	.price {
		font-size: 24px;
		font-weight: 600;
		color: $headlinesColor3;

		@include medium-desktop {
			font-size: 20px;
		}
	}
}

.sidebar-delivery-location {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;

	@include tablet {
		justify-content: space-between;
	}

	@include mobile {
		justify-content: space-evenly;
	}

	.sidebar-delivery-days {
		display: flex;
		align-items: center;

		.icon {
			width: 16px;
			margin-right: 7px;
		}

		span {
			font-size: 15px;
			font-weight: 600;
			color: $headlinesColor3;

			@include medium-desktop {
				font-size: 13px;
			}
		}
	}

	.job-location {
		font-size: 15px;
		font-weight: 600;
		color: $headlinesColor3;
		display: flex;
		align-items: center;

		@include medium-desktop {
			font-size: 13px;
		}

		.job-location-icon {
			width: 16px;
			margin-right: 7px;
		}
	}
}

.sidebar-orders-in-queue {
	margin-top: 15px;
	font-size: 14px;
	color: $mainTextColor;
}

.sidebar-top-title {
	h1 {
		color: $mainTextColor;
		font-size: 14px;
		line-height: 22px;
		font-weight: 600;
		word-break: break-word;
	}
}

.sidebar-rating {
	margin-bottom: 10px;
	display: flex;
	align-items: center;

	.wpj-star-rating-static {
		margin-top: 5px;
	}

	span {
		color: $headlinesColor2;
		font-size: 13px;
	}
}

/* 100% Secure */
.secure-info-badge {
	display: flex;
	margin: 25px 0;

		@include tablet {
			width: 100%;
		}

	.secure-info-badge-graphic {
		margin-right: 20px;
		height: 60px;

		@include small-desktop {
			height: 50px;
		}
	}

	.text-content {
		h3 {
			font-size: 24px;
			font-weight: 700;
			margin: 0;
			color: $headlinesColor;

			@include medium-desktop {
				font-size: 20px;
			}

			@include small-desktop {
				font-size: 18px;
			}
		}

		.content {
			color: $mainTextColor;
			font-size: 16px;

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

.job-sidebar-after-form {
	&:not(:empty) {
		padding: 0 20px 20px;
		text-align: center;

		@include medium-desktop {
			padding: 0 15px 15px;
		}
	}

	.report-link {
		.ui.label {
			@include round(11px);

			background: none;
			color: $redColor;
			padding: 2px 10px;
			border: 1px solid $redColor;
			font-weight: 400;
			font-size: 13px;
			display: inline-block;
			letter-spacing: normal;
		}
	}
}

.single-job-info-list {
		@include tablet {
			width: 100%;
		}

	ul.green-list {
		list-style-type: none;
		padding-left: 0;
		margin: 0;

		li {
			position: relative;
			padding-left: 20px;
			font-size: 16px;
			font-weight: 400;
			color: $mainTextColor;
			margin-bottom: 20px;
			line-height: 24px;

			@include medium-desktop {
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 15px;
			}

			&:before {
				content: "";
				height: 7px;
				width: 7px;
				background: $greenColor;
				position: absolute;
				top: 5px;
				left: 0;
			}
		}
	}

	.hiw-link {
		padding-top: 20px;
		border-top: 1px solid $borderColor;

		a {
			font-size: 16px;
			font-weight: 600;
			color: $mainColor;
		}
	}
}

.job-tags-wrapper {
	margin: 20px 0;

	h4 {
		color: $mainTextColor;
	}

	.views {
		h4 {
			font-size: 12px;
			color: $mainTextColor;
			font-weight: 400;
			text-transform: uppercase;
		}
	}
}

.single-job-body {
	.dynamically-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ui.segment {
		@include mobile {
			margin: 10px 0;
		}
	}

	h2 {
		font-size: 24px;
		font-weight: 600;
		line-height: 1.2;

			@include tablet {
				font-size: 20px;
			}
	}
}

.order-additional-wrapper {
	@include tablet {
		width: 100%;
	}

	.extra-item .ui.checkbox label {
		font-size: 14px;

		@include medium-desktop {
			font-size: 13px;
		}
	}

	.job-purchase-action,
	.single-job-custom-offer-button {
		@include mobile {
			width: 100%;
			margin-bottom: 10px;
		}

		&.small:not(.disabled) {
			border: 2px solid $mainColor;
		}
	}

	.amount_section {
		background: $whiteColor;
		margin-right: 0;

		input[type=text].current_amount.current_amount {
			width: 30px;
			background: $whiteColor;
		}

		margin-left: 5px;
	}

	.item {
		display: flex;
		justify-content: space-between;

		.ui.checkbox label:before {
			background: $whiteColor;
		}

		.price-value {
			font-size: 13px;
			color: $headlinesColor3;
			display: flex;
			align-items: center;
		}

		.price-label {
			font-size: 13px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 0.05em;
			color: $mainTextColor;
			display: flex;
			align-items: center;
			&.rate-type{
				display: inline;
			}
		}

		.price-content {
			margin-left: auto;
			
			@include breakpoint-down( lg ) {
				align-items: center;
				justify-content: end;
			}

			.extra-price-inside {
				font-size: inherit;
				color: inherit;
				display: block;
				flex-shrink: 0;
			}

			.amount_section {
				margin-right: 0;

				input[type="text"] {
					background: $whiteColor;
				}
			}
		}
	}

	.edit-job-button-only {
		margin-top: 12px;
		font-size: 18px;
		margin-bottom: -8px;
	}
}

/* Map */
#job_map .job_google_map {
	height: 350px;
	width: 100%;
}

/* Feedback */
.feedback-item {
	display: flex;
	margin-bottom: 10px;

	&:not(.feedback-answer) {
		@include default-shape;

		border: 1px solid $borderColor;
		padding: 18px 25px;

		@include mobile {
			padding: 15px 15px;
		}
	}

	.job-feedback-picture {
		margin-right: 25px;
		flex-shrink: 0;
		align-self: flex-start;

		> img {
			@include medium-desktop {
				width: 60px;
				height: 60px;
			}

			@include mobile {
				width: 40px;
				height: 40px;
			}
		}

		@include medium-desktop {
			margin-right: 15px;
		}
	}
	.feedback-content {
		width: 100%;
		word-break: break-word;
	}
	.feedback-content-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 10px;
		flex-grow: 1;
		align-items: center;

		.title {
			font-size: 18px;
			color: $headlinesColor;
			font-weight: 700;

			a {
				color: inherit;
			}
		}

		.date {
			font-size: 13px;
			color: $headlinesColor2;
		}
	}

	.feedback-content-text {
		font-size: 14px;
		line-height: 24px;
		color: $mainTextColor;
	}

	.feedback-feedbacks:not(:empty) {
		border-top: 1px solid $borderColor;
		margin-top: 20px;
	}

	.feedback-answer {
		margin-top: 20px;

		.job-feedback-picture {
			> img {
				width: 50px;
				height: 50px;

				@include medium-desktop {
					width: 40px;
					height: 40px;
				}

				@include mobile {
					width: 30px;
					height: 30px;
				}
			}
		}

		.feedback-content-header {
			.title {
				font-size: 16px;
			}
			.date {
				font-size: 12px;
			}
		}

		.feedback-content-text {
			font-size: 13px;
			line-height: 20px;
		}
	}
}

/* Suggested jobs */
.single-job-wrapper .single-job-other-job {
	margin-top: 15px;
}

/* Widgets */
.ui.segment .widget-area > ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

// User Reviews Carousel
.job-user-reviews-carousel-wrapper {
	margin-bottom: 30px;

	@include tablet {
		order: 95;
	}

	.job-user-reviews-header {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 10px;
		align-items: flex-end;

		h2 {
			margin-bottom: 0;
			margin-right: 10px;
		}

		.read-more {
			color: $mainColor;
		}
	}
}

/* Responsive */
@media only screen and (max-width:767px) {
	#job_map .job_google_map {
		height: 280px;
		width: 100%;
	}

	.file-wrapper:nth-child(4n) {
		margin-right: 0;
		margin-left: auto;
	}
}

@media only screen and (max-width:479px) {
	.jp-flat-audio {
		min-width: initial;
	}
}

.audio-embed-wrapper {
	@include default-shape;

	overflow: hidden;
}