/* WPJobster User Profile page SASS file */

// Cover
.user-cover-wrapper {
	display: flex;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;

	.banner-uploader-wrapper {
		margin-left: auto;
	}

	&.ub-cover-photo {
		margin-bottom: 25px;
		height: 270px;
		@include default-shape;

		a:hover {
			opacity: 1;
		}
	}

	.add-user-cover-button {
		&.labeled.icon.button {
			margin-bottom: 20px;
		}
	}

	.delete-user-cover-button {
		position: absolute;
		top: 13px;
		right: 15px;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: $whiteColor;
		text-align: center;
		background: rgba(0, 0, 0, 0.4);
		font-size: 12px;

		&:hover {
			background: rgba(0, 0, 0, 0.8);
		}

		i {
			opacity: .4;
			margin: 0;
		}

		&:hover i {
			opacity: 1;
		}
	}
}

// Split structure
.profile-page-wrapper {

	.ub-cover-photo + .profile-split-content {
		.profile-sidebar {
			.user-info-wrapper {
				padding: 55px 0 0 !important;

				.photo-wrapper {
					position: absolute;
					left: 50%;
					margin-left: -76px;
					top: -92px;
				}
			}
		}
	}

	.profile-split-content {
		@include mobile {
			width: 100% !important;
		}

		// Left part
		.profile-sidebar {
			.user-info-wrapper {
				position: relative;
				padding: 25px 0 0;
				@include grey-card-w-border;

				.photo-wrapper {
					position: relative;
					left: 0%;
					margin-left: calc(50% - 75px);
					top: 0;
					margin-bottom: 15px;
				}

				#report-users-link {
					position: absolute;
					left: 11px;
					top: 14px;
					z-index: 15;
				}

				.user-status-wrapper {
					position: absolute;
					top: 14px;
					right: 11px;
					display: inline-flex;

					.status-icon-wrapper {
						position: relative;

						&.online-text-wrapper,
						&.offline-text-wrapper {
							padding-left: 18px;
							padding-right: 9px;
							z-index: 15;
						}

						&.online-icon-wrapper,
						&.offline-icon-wrapper {
							display: inline-block;
							vertical-align: middle;
						}
					}
				}

				.user-info {
					text-align: center;
					padding-bottom: 20px;

					.user-title-wrapper {
						margin-bottom: 7px;
					}

					.user-reputation-wrapper {
						margin-bottom: 10px;
						display: block;
					}
				}

				.user-info-list {
					ul {
						display: block;
						margin: 0;
						padding: 0;

						li {
							border-bottom: 1px solid #f2f4f6;
							display: flex;
							align-items: center;
							list-style-type: none;
							overflow: hidden;
							border-top: 1px solid $borderColor2;
							padding: 20px 25px;

							.checkbox {
								text-align: right;
								flex: 1;

								label {
									padding-left: 50px;
								}
							}

							p {
								margin: 0;
								text-align: left;
								font-size: 13px;
								text-transform: uppercase;
								color: $mainTextColor;
								font-family: $mainFont;
								font-weight: 600;
								letter-spacing: 2px;
							}

							span {
								text-align: right;
								flex: 1;
								@include secondary-font;

								img {
									margin-left: 0;
									margin-right: 4px;
									border-radius: 2px;
								}
							}
						}
					}

					.bottom-content {
						text-align: center;
						padding: 0;

						a.text {
							padding-bottom: 10px;
							text-align: center;
							font-size: 0.928rem;
							color: $secondaryColor;
							display: block;
						}
					}
				}
			}
		}

		// Right part
		.profile-main-content {
			.user-vacancy-box {
				margin-top: 0 !important;
				padding: 15px;

				h2 {
					font-weight: 600;
					margin: 0;
				}

				.description-user-vacancy {
					margin-top: 5px;
					color: $mainTextColor;
				}

				.vacancy-date {
					font-weight: 200;
					font-style: italic;
				}

				.username-vacancy-contact {
					color: $mainColor;
				}

				.vacancy-image-wrapper {
					position: relative;
					width: 90px;
					height: 90px;
					background-color: $whiteColor;
					border-radius: 50%;
					margin-right: 10px;
					.vacancy-icon-image {
						height: 50px;
						width: 50px;
						margin: 0;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-right: -50%;
						transform: translate(-50%, -50%)
					}
				}

				.user-vacancy-message {
					font-style: italic;
				}
			}

			&.user-icons-wrapper {
				.icons-wrapper {
					@include grey-card-w-border;
					padding: 25px 25px 10px;

					.ui.header {
						.icon {
							font-size: 32px;
							margin-bottom: 25px;
						}

						.header {
							font-size: 16px;
						}

						.sub.header {
							font-size: 18px;
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
}

// Avatar
.photo-wrapper {
	position: relative;
	width: 140px;

	.photo-content {
		position: relative;
		border: 4px solid $whiteColor;
		width: 158px;
		height: 158px;
		border-radius: 50%;
	}
}

// Level
.user-level-image {
	position: absolute;
	left: 75%;
	bottom: -5px;
}

// Report
.report-users-link-label.ui.label {
	border-radius: 10px;
	height: 18px;
	font-weight: 400;
	padding: 3px 13px;
	font-size: 11px;
}

// Status
.user-status-wrapper {
	position: relative;
	display: inline-block;

	.status-icon-wrapper {

		// Text
		&.online-text-wrapper, &.offline-text-wrapper {
			background: $whiteColor;
			border-radius: 10px;
			font-size: 11px;
			line-height: 16px;
			padding-left: 20px;
			padding-right: 10px;

			&:before {
				content: "";
				width: 6px;
				height: 6px;
				border-radius: 3px;
				position: absolute;
				top: 50%;
				margin-top: -3px;
				left: 8px;
				-webkit-animation: blink-anime 0.7s infinite alternate;
				-moz-animation: blink-anime 0.7s infinite alternate;
				-o-animation: blink-anime 0.7s infinite alternate;
				animation: blink-anime 0.7s infinite alternate;
			}
		}

		&.online-text-wrapper {
			color: $mainColor;
			border: 1px solid $mainColor;

			&:before {
				background: $mainColor;
			}
		}

		&.offline-text-wrapper {
			color: #b8b8bc;
			border: 1px solid #b8b8bc;

			&:before {
				background: #b8b8bc;
			}
		}

		// Bullet
		&.online-icon-wrapper, &.offline-icon-wrapper {
			font-size: 0;
			font-weight: 400;
			border: 2px solid $whiteColor;
			border-radius: 50%;
			height: 18px;
			width: 18px;
			cursor: pointer;
		}

		&.online-icon-wrapper {
			color: $mainColor;
			background: $mainColor;
		}

		&.offline-icon-wrapper {
			color: #dddedf;
			background: #dddedf;
		}
	}
}

// Username
.user-title-wrapper {
	font-size: 1.142rem;
	font-weight: 700;
	color: #333435;
}

// Icons
.user-info-icons-wrapper .icon {
	color: $headlinesColor2;
	transition: .25s all ease-in-out;
	cursor: pointer;

	&:hover {
		color: $mainColor;
		transition: .25s all ease-in-out;
	}
}

// Tagline
.user-tagline-wrapper {
	@include secondary-font;
	line-height: 24px;
	color: $mainTextColor;
	font-weight: 500;

	#tmp_tagline {
		border-radius: 20px;
		margin-bottom: 10px;
	}

	.save-info {
		font-size: 13px;
		color: $secondaryColor;
		cursor: pointer;
	}
}

// Reviews
.user-stars-wrapper {
	span {
		color: $yellowColor;
		font-weight: bold;
	}
}

// Buttons
.user-contact_me-wrapper {
	span {
		.bottom-content {
			padding: 0 45px 0;
		}
	}
}

.user-request_custom_offer-wrapper {
	cursor: pointer;

	span {
		.bottom-content {
			padding-bottom: 20px;
			@include secondary-font;
			color: $headlinesColor3;

			p {
				text-align: center;
				font-size: 14px;
				font-weight: 600;
				color: $headlinesColor3;
			}
		}
	}

	.request-custom-offer {
		text-align: center;
	}
}

// Widgets
.info-widget {
	margin-bottom: 30px;
	border-bottom: 1px solid #e2e5e7;
	position: relative;
	border: none;

	.widget-title {
		font-size: 14px;
		text-transform: uppercase;
		color: $headlinesColor2;
		font-family: $mainFont;
		letter-spacing: 2px;
		line-height: 48px;
		margin-bottom: 0;
		margin-top: 0;
	}

	.new_item {
		margin-top: 10px;
	}

	.edit-info {
		font-size: 14px;
		font-weight: 600;
		color: $headlinesColor2;
		line-height: 48px;
		top: 0;
		transition: .25s all linear;
		display: block;
		position: absolute;
		right: 0;
		cursor: pointer;
		background: transparent;

		&:hover {
			color: $mainColor;
			transition: .25s all linear;
		}

		.icon {
			color: $headlinesColor2 !important;
			transition: .25s all ease-in-out;
			cursor: pointer;

			&:hover {
				color: $redColor !important;
				transition: .25s all ease-in-out;
			}
		}
	}

	.save-info {
		font-size: 13px;
		color: $secondaryColor;
		cursor: pointer;
	}

	.no_item {
		margin: 0;
		color: $mainTextColor;
	}
}

// Description
.user-description-wrapper {
	border-bottom: 0px;

	.description-content {
		.description {
			color: rgb(137, 142, 180);
			font-size: 14px;
			font-weight: 500;
			line-height: 1.75;
		}
	}

	textarea#tmp_description {
		width: 100%;
		resize: none;
	}
}

// Language
.user-languages-wrapper {
	.languages-content {
		span {
			display: flex;
			justify-content: center;
			align-items: center;

			&:not(:first-of-type) {
				border-top: 1px solid $borderColor2;
				padding-top: 10px;
				margin-top: 10px;
			}

			.action-icons {
				display: flex;
				margin-left: auto;
			}
		}

		.inp_language {
			@include default-shape;
			border: 2px solid $headlinesColor2;
			padding: 0.67857143em 1em;
			background-color: transparent;
			width: 35%;

			&.not_editable {
				color: $headlinesColor3 !important;
				font-weight: 400;
				padding: 1px 2px;
				border-radius: initial;
				border: none;
				font-size: 16px;
				@include secondary-font;
				border: none;
				outline: transparent;

				&:focus {
					border: none;
					outline: none;
					box-shadow: none;
				}
			}
		}

		.inp_proficiency {
			@include default-shape;
			border: 2px solid $headlinesColor2;
			padding: 0.56em 2em 0.57em 1em;
			width: auto;
			margin-left: 5px;
			min-height: 39px;

			&.not_editable {
				width: 35%;
				padding: 3px 0;
				border-radius: 24px;
				border: 1px solid $borderColor2;
				background: #f6f7fa;
				text-align: center;
				color: rgb(137, 142, 180);
				height: auto;
				min-height: auto;
				cursor: default;
				pointer-events: none;
				-webkit-appearance: none;
				-moz-appearance: none;

				i {
					display: none
				}

				.text {
					color: rgb(137, 142, 180);
				}
			}
		}

		.up_language, .up_proficiency {
			border-radius: 6px;
			border: 2px solid $headlinesColor2;
			font-size: 14px;
			color: $categoriesColor;
			font-weight: 500;
		}

		.user-edit-language, .user-remove-item {
			color: $headlinesColor2 !important;
			transition: .25s all ease-in-out;
			cursor: pointer;

			&:hover {
				color: $redColor !important;
				transition: .25s all ease-in-out;
			}
		}

		.no_item {
			margin: 0;
			color: $mainTextColor;
			border: 1px solid $borderColor2;
			padding: 20px 25px;
			border-radius: 6px;
		}
	}
}

// Skills
.user-skills-wrapper {
	.skills-content {
		overflow: hidden;
		padding: 10px 0;

		.ui.message {
			@include grey-card-w-border;

			.close.icon {
				color: $redColor;
			}
		}

		.new-skill-wrapper .ui.input .up_skills {
			padding: 0 10px;
		}

		.skill-wrapper, .up_skills {
			border-radius: 6px;
			border: 2px solid $headlinesColor2;
			font-size: 14px;
			font-weight: 500;
			color: $categoriesColor;
			display: block;
			float: left;
			min-height: 2.571rem;
			line-height: 2.428rem;
			padding: 0 20px;
			margin-left: 0;
			margin-right: 5px;
			margin-bottom: 5px;
			word-break: break-all;

			img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-left: -18px;
				margin-bottom: -11px;
				margin-right: 5px;
			}

			.remove-skill-wrapper {
				position: absolute;
				top: -5px;
				right: -5px;
				cursor: pointer;
				background-color: $headlinesColor2;

				i {
					margin: 0;
					color: $whiteColor;
				}
			}
		}

		.no_item {
			margin: 0;
			color: $mainTextColor;
			border: 1px solid $borderColor2;
			padding: 20px 25px;
			border-radius: 6px;
		}
	}
}

// Education
.user-education-wrapper {
	.education-content {
		border: 1px solid $borderColor2;
		padding: 20px 25px;
		@include default-shape;

		#education-item {
			.school-itm {
				line-height: 24px;
				font-weight: 700;
				font-size: 16px;
				color: rgb(69, 74, 96);
			}

			.degree-itm, .study-itm, .grade-itm {
				line-height: 24px;
				font-weight: 600;
				font-size: 14px;
				color: rgb(69, 74, 96);
			}

			.from-to-itm {
				font-weight: 500;
				line-height: 20px;
				font-size: 14px;
				color: rgb(137, 142, 180);
			}

			.activities-itm {
				line-height: 24px;
				font-weight: 400;
				font-size: 14px;
				color: rgb(137, 142, 180);
			}

			.description-itm {
				line-height: 20px;
				font-weight: 400;
				font-size: 14px;
				color: rgb(137, 142, 180);
			}
		}

		.user-edit-item, .user-remove-item {
			color: $headlinesColor2 !important;
			transition: .25s all ease-in-out;
			cursor: pointer;

			&:hover {
				color: $redColor !important;
				transition: .25s all ease-in-out;
			}
		}
	}
}

// Certification
.user-certification-wrapper {
	.certification-content {
		border: 1px solid $borderColor2;
		padding: 20px 25px;
		@include default-shape;

		#certification-item {
			.certification-name-itm {
				line-height: 24px;
				font-weight: 700;
				font-size: 16px;
				color: rgb(69, 74, 96);
			}
			.date-itm {
				font-weight: 500;
				line-height: 20px;
				font-size: 14px;
				color: rgb(137, 142, 180);
			}
			span.bullet {
				padding: 5px;
			}
			.certification-url-itm a {
				line-height: 24px;
				font-weight: 600;
				font-size: 14px;
				color: rgb(69, 74, 96);
			}
			.certification-authority-itm {
				margin: 15px 0;
				line-height: 20px;
				font-weight: 400;
				font-size: 14px;
				color: rgb(137, 142, 180);
			}
		}

		.user-edit-item, .user-remove-item {
			color: $headlinesColor2 !important;
			transition: .25s all ease-in-out;
			cursor: pointer;

			&:hover {
				color: $redColor !important;
				transition: .25s all ease-in-out;
			}
		}
	}
}

// Main content
.profile-main-content {
	position: relative;
}

// Portfolio
.user-portfolio-wrapper {
	.widget-title b {
		display: inline-block;
		font-weight: 700;
		position: relative;
		font-size: 24px;
		color: $headlinesColor;
		margin-top: 10px;
	}

	.portfolio-content {
		width: 100%;
		padding: 30px;
		border: 1px solid $borderColor2;
		@include default-shape;

		.edit-info {
			font-size: 14px;
			font-weight: 600;
			color: $headlinesColor2;
			line-height: 48px;
			top: 0;
			transition: 0.25s all linear;
			display: block;
			position: absolute;
			right: 0;
			cursor: pointer;
			background: transparent;

			&:hover {
				color: $mainColor;
				transition: .25s all linear;
			}
		}

		.owl-carousel.owl-theme.owl-loaded.owl-drag {
			.owl-item {
				img, video {
					@include default-shape;
				}

				video {
					width: 100%;
					height: auto;
				}
			}
			.owl-nav {
				z-index: 0;

				button {
					font-size: 24px !important;
				}
			}
			.nav-next {
				margin-right: 0;
			}
			.nav-prev {
				margin-left: 0;
			}
		}

		.bordered-lightbox-carousel .owl-item .item > a {
			padding: 0;
			border: none;
			@include default-shape;
		}
	}
}

.user-portfolio-wrapper ~ .user-jobs-wrapper {
	margin-top: 30px;
}

// Jobs
.user-jobs-wrapper {
	.widget-title {
		margin-top: -7px;

		b {
			display: inline-block;
			font-weight: 700;
			position: relative;
			font-size: 24px;
			color: $headlinesColor;
		}
	}

	.user-profile-jobs {
		top: -2px;
	}
}

// Reviews
.user-reviews-wrapper {
	.widget-title b {
		display: inline-block;
		font-weight: 700;
		position: relative;
		font-size: 24px;
		color: $headlinesColor;
		margin-top: 10px;
	}
}