/* WPJobster Private messages page SASS file */

/* Custom Offer PM Single */
.title-clock-icon .pm-custom-offer-request-header:before,
.title-clock-icon .pm-custom-offer-offer-header:before {
	background-position: -215px -514px;
}
.title-tag-icon .pm-custom-offer-request-header:before,
.title-tag-icon .pm-custom-offer-offer-header:before {
	background-position: -215px -265px;
}
.title-tag-icon.pm-offer-gray .pm-custom-offer-request-header:before,
.title-tag-icon.pm-offer-gray .pm-custom-offer-offer-header:before {
	background-position: -165px -265px;
}
.title-minus-icon .pm-custom-offer-request-header:before,
.title-minus-icon .pm-custom-offer-offer-header:before {
	background-position: -215px -465px;
}
.title-close-icon .pm-custom-offer-request-header:before,
.title-close-icon .pm-custom-offer-offer-header:before {
	background-position: -215px -415px;
}
.title-check-icon .pm-custom-offer-request-header:before,
.title-check-icon .pm-custom-offer-offer-header:before {
	background-position: -215px -365px;
}

/* Custom Offer Modal */
.custom-offers-default-container label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}
.custom-offers-default-container label.right-label {
	display: inline-block;
	margin-left: 10px;
	font-weight: normal;
	color: #666768;
}
.custom-offers-default-container .meta {
	color: #A6A6A6;
	font-size: 11px;
	font-weight: 300;
	line-height: 1.2em;
}
.custom-offers-default-container input[type="password"]:hover,
.custom-offers-default-container input[type="text"]:hover,
.custom-offers-default-container input[type="number"]:hover,
.custom-offers-default-container textarea:hover {
	border-color: #aaa;
}
.custom-offers-default-container input[type="password"]:focus,
.custom-offers-default-container input[type="text"]:focus,
.custom-offers-default-container input[type="number"]:focus,
.custom-offers-default-container textarea:focus {
	border-color: #999;
	outline: none;
}
.custom-offers-default-container input[type="password"],
.custom-offers-default-container input[type="text"],
.custom-offers-default-container input[type="number"],
.custom-offers-default-container textarea {
	-webkit-transition-property: border-color;
	-moz-transition-property: border-color;
	-o-transition-property: border-color;
	-ms-transition-property: border-color;
	transition-property: border-color;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear;
	width: 100%;
	margin: 0 0 15px 0;
	background: $whiteColor;
	border: 1px solid #ddd;
	border-radius: 3px!important;
	border-radius: 0;
	font-size: 15px;
	letter-spacing: normal;
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
}
.custom-offers-default-container textarea {
	height: 100px;
}

.custom-offers-default-container input[type="checkbox"] {
	opacity: 1;
	filter: alpha(opacity=1);
	margin: 0 5px 0 0;
	vertical-align: middle;
}
.custom-offers-default-container .button-container {
	float: left;
	padding: 0;
	width: 100%;
}
.custom-offers-default-container input[type="password"].co-input-25,
.custom-offers-default-container input[type="text"].co-input-25,
.custom-offers-default-container input[type="number"].co-input-25,
.custom-offers-default-container textarea.co-input-25 {
	width: 25%;
}
.custom-offers-default-container input[type="password"].co-input-50,
.custom-offers-default-container input[type="text"].co-input-50,
.custom-offers-default-container input[type="number"].co-input-50,
.custom-offers-default-container textarea.co-input-50 {
	width: 50%;
}
.custom-offers-default-container .noon {
	margin: 0 0 20px 0;
}
.custom-offers-default-container .noon.inline-left {
	text-align: left;
}

/* Responsive */
@media only screen and (max-width:767px) {
	.pm-custom-offer-actions {
		width: 100%;
	}
	.pm-request-holder.pm-offer-gray .padding-cnt,
	.pm-offer-holder.pm-offer-gray .padding-cnt,
	.pm-request-holder.pm-offer-green .padding-cnt,
	.pm-offer-holder.pm-offer-green .padding-cnt,
	.pm-request-holder.pm-offer-blue .padding-cnt,
	.pm-offer-holder.pm-offer-blue .padding-cnt,
	.pm-request-holder.pm-offer-red .padding-cnt,
	.pm-offer-holder.pm-offer-red .padding-cnt {
		padding-bottom: 10px;
	}
}

/* PM page */
.private-messages-wrapper {
	@include default-shape();

	overflow: hidden;
	max-width: 1400px;
	border: 1px solid $borderColor;
	margin-left: auto;
	margin-right: auto;

	@include mobile {
		padding: 10px 0;
	}
}

.is-page-pm .footer-wrapper,
.is-page-pm .scroll-to-top-wrapper,
.is-page-pm #wpadminbar {
	display: none;
}

.admin-bar .is-page-pm .header-wrapper .fixed,
.admin-bar .is-page-pm .header-wrapper.fixed {
	top: 0;
}

.wpj-messenger .ui.segment.error-no-messages,
.wpj-messenger .ui.segment#no_messages {
	padding: 1em 1.5em;
	box-shadow: none;
}
.ui.segment.wpj-messenger,
.wpj-messenger {
	height: calc(100vh - 65px - 101px); /* Fallback */
	height: calc((var(--vh, 1vh) * 100) - 65px - 101px);
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

/* PM page - users list */
.thread-list-body {
	width: 250px;
	height: 100%;
	border-right: 1px solid $borderColor;
	display: flex;
	flex-direction: column;
	background: $grayBackground4;

	@include mobile {
		width: 100%;
		display: flex;
	}
}

.thread-buttons-header {
	display: flex;
	padding: 15px 20px;

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

.thread-list-header {
	border-bottom: 1px solid $borderColor;
}
.thread-list-header .ui.segment {
	padding: 1em 1.5em;
}
.thread-list-header .df {
	align-items: center;
	height: 3.5rem;
}
.thread-list-header .df h1 {
	font-size: 22px;
}
.thread-list-header .df div + div {
	min-width: 10em;
}
.thread-list-header .ui.button {
	background: #f7f8f9;
}
.thread-list-header .ui.button:hover {
	background: #e1e2e3;
}

.thread-list-wrapper {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.thread-list-viewport {
	height: 100%;

	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}
.thread-list-user-search {
	padding: 1em;
	border-bottom: 1px solid #e5e6e7;
	display: none;
}
.thread-list-content {
	width: 100%;

	position: static;
	top: auto;
	display: block;
	transform: translate3d(0,0,0); /* scrolling performance */

	.pm-holder {
		border-bottom: 1px solid $borderColor;

		.link-to-pm {
			display: flex;
			padding: 15px 20px;

			&.active {
				background: $whiteColor;
			}
		}
	}

	.pm-unread-message:not(.active) {
		font-weight: 700;
		border-left: 5px solid $greenColor;
	}
}

/* PM page - conversations list section */
.pm-list-holder {
	border-bottom: 1px solid $borderColor;

	.link-to-pm {
		display: flex;
		align-items: flex-start;
		padding: 15px 20px;

		&:hover {
			background: $whiteColor;
		}

		.pm-avatar {
			margin-right: 10px;
			position: relative;
			flex-shrink: 0;

			img {
				border: 2px solid $whiteColor;
			}
		}

		.pm-content {
			flex: 1 1 calc(100% - 64px);
			max-width: calc(100% - 64px);
		}

		.pm-user {
			font-weight: 600;
			font-size: 16px;
			color: $headlinesColor3;
			text-transform: none;
			letter-spacing: normal;
			margin: 0;
		}

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

		.pm-excerpt {
			font-size: 13px;
			color: $headlinesColor3;
		}

		&.hover {
			.pm-settings .ui.dropdown {
				opacity: 1;
			}
		}
	}

	&.active {
		.link-to-pm {
			background: $whiteColor;
		}
	}
}

/* PM page - messages section */
.thread-body {
	position: relative;
	outline: 0;
	width: calc(100% - 250px);
	height: 100%;

	@include mobile {
		width: 100%;
		display: none;
	}
}
.thread-body-content {
	height: 100%;

	flex-shrink: 1;
	flex-grow: 1;
	max-width: 100%;

	display: flex;
	flex-direction: column;
}

.thread-header {
	padding: 7px 30px;
	border-bottom: 1px solid $borderColor;
	display: flex;
	align-items: center;

	.message-user-avatar {
		margin-right: 12px;
	}

	.conversation-title {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;

		h2 {
			margin: 0;
			color: $mainColor;
			font-size: 16px;
			font-weight: 600;
			line-height: 1;
			display: block;

			a {
				color: inherit;
				font-size: inherit;
				font-weight: inherit;
				display: block;
				line-height: inherit;
			}
		}

		span {
			color: $mainTextColor;
			display: block;
			font-size: 13px;
		}
	}

	.actions {
		display: flex;
		margin-left: auto;
		align-items: center;

		.conversation-settings {
			margin-right: 10px;
		}
	}
}

.message-user-avatar {
	position: relative;
}
.message-user-avatar .user-status-wrapper {
	position: absolute;
	bottom: 0;
	right: 0;
}

.thread-wrapper {
	flex: 1;
	position: relative;
	overflow: hidden;
	margin-bottom: 83px;
}
.thread-viewport {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column-reverse;
	padding: 30px 30px;

	@include mobile {
		padding: 30px 20px;
	}

}
.thread-content {
	width: 100%;
	position: static;
	bottom: auto;
	margin-bottom: auto;
	display: block;
	transform: translate3d(0,0,0); /* scrolling performance */
}

.thread-empty {
	margin-bottom: 2.5em;
	display: flex;
	flex-direction: column;
	align-items: center;

	.icon {
		color: $mainTextColor;
	}
}
.thread-empty i + h2 {
	margin: 1rem 0 0.5rem;
	color: $headlinesColor3;
}

/* PM page - scroll down */
.scroll-down-wrapper {
	display: none;
	position: fixed;
	font-size: 18px;
	bottom: 135px;
	background-color: #466194;
	color: $whiteColor;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	right: 0;
	left: 16%;
	margin-right: auto;
	margin-left: auto;
	cursor: pointer;

	@include tablet {
		bottom: 115px;
	}

	@include mobile {
		left: -60px;
		bottom: 100px;
	}
}

/* PM page - input */
.thread-input {
	display: block;
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: auto;
	border-top: 1px solid #e5e6e7;
	background: #f0f5ff;
	z-index: 9;

	@include mobile {
		background: $whiteColor;
	}
}
.thread-input-padding {
	padding: 20px;

	@include mobile {
		padding: 5px;
	}
}
.thread-input .send-my-pm {
	display: flex;
	align-items: center;
	color: $mainTextColor;
}
.thread-input .send-my-pm .wrapper-pm-to-user {
	border: 1px solid #e5e6e7;
	border-radius: .21428571428rem;
	padding: 0;
	background: $whiteColor;
	width: calc(100% - 200px);
	flex: 1 1 100%;
	position: relative;

	@include mobile {
		border: 0;
	}

	.form-container-pm {
		max-height: 200px;
		overflow: auto;
		overflow-x: hidden;
	}
}
.thread-input .send-my-pm .wrapper-pm-submit {
	flex: 0 1 auto;
}
.thread-input .send-my-pm .wrapper-pm-submit i.icons {
	min-width: unset;
	min-height: unset;
	margin: unset;
}
.thread-input .send-my-pm .wrapper-pm-submit .ui.icon.button {
	font-size: 1.5em;
	padding: 9px;
	background: transparent;
}
.thread-input .send-my-pm .wrapper-pm-submit .button .icons .icon:first-child {
	margin-right: 0;
}
.thread-input .send-my-pm .wrapper-pm-submit .button .icons .icon:last-child {
	margin-left: -0.5em;
	font-size: 0.5em;
}
.thread-input .send-my-pm .wrapper-pm-submit .button .icons .icon.white {
	color: $whiteColor;
}
.thread-input .send-my-pm .wrapper-pm-submit .ui.button:active,
.thread-input .send-my-pm .wrapper-pm-submit .ui.button:focus,
.thread-input .send-my-pm .wrapper-pm-submit .ui.button:hover {
	-webkit-filter: brightness(100%);
	filter: brightness(100%);
}

/* PM page - textarea */
.thread-input textarea.message-field,
.thread-input textarea.message-field:focus {
	border: none !important;
	box-shadow: none !important;
}
.thread-input .ui.form textarea.message-field {
	padding: 10px 70px 10px 10px;
	resize: none;
	overflow: hidden;

	@include mobile {
		padding: 5px 30px 5px 20px;
		background-color: #e0e1e2;
		border-radius: 50px;
		min-height: 30px;
	}
}
.thread-input.has-scroll .ui.form textarea.message-field {
	@include mobile {
		border-radius: 6px;
		padding: 5px 30px 5px 10px;
	}
}
.thread-input.has-scroll .form-container-pm {
	@include mobile {
		border-radius: 6px;
	}
}

/* PM page - buttons */
.thread-input .textarea-buttons-wrapper {
	position: absolute;
	right: 45px;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;

	@include mobile {
		top: 8px;
	}
}
.thread-input.has-scroll .textarea-buttons-wrapper {
	right: 55px;
}

/* PM page - settings */
.input-pm-settings .ui.dropdown > .icon {
	font-size: 19px;
}
.input-pm-settings .ui.dropdown .menu > .text {
	padding: 0.78571429rem 1.14285714rem;
}
.thread-input .input-pm-settings .ui.bottom.left.pointing.dropdown > .menu {
	left: -8px;
}
.thread-input .input-pm-settings .ui.bottom.right.pointing.dropdown > .menu {
	right: -5px;
}

/* PM page - attachments */
.thread-input .wrapper-pm-attachments {
	display: flex;
	align-items: center;
	justify-content: center;

	.pm-file-attachments-button,
	.pm-image-attachments-button { /* button wrapper */
		cursor: pointer;

		i { /* button icon */
			font-size: 18px;
			color: $mainTextColor;
		}
	}
}

.messages-image-uploader-wrapper { /* hide until button click */
	display: none;
}

/* PM page - colors */
.pm-settings .ui.dropdown > .icon,
.pm-settings-menu.ui.dropdown > .icon {
	color: $mainTextColor;
}
.thread-input .ui.dropdown > .icon,
.wrapper-pm-submit .ui.button {
	color: $mainTextColor;
}

/* Single pm */
.pm-holder {
	@include default-shape();

	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;

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

	.pm-content-holder {
		max-width: calc(100% - 55px);
		flex: 1 1 calc(100% - 55px);
		display: flex;
		flex-direction: column;

		@include mobile {
			max-width: calc(100% - 45px);
			flex: 1 1 calc(100% - 45px);
		}
	}

	.pm-date {
		color: $categoriesColor;
		font-size: 13px;
		margin-top: 5px;
	}

	.pm-content {
		@include default-shape;

		padding: 20px 25px;
		background: $grayBackground5;
		position: relative;
		align-self: flex-start;
		display: flex;
		align-items: flex-start;

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

		.pm-settings {
			margin-left: 10px;
			margin-right: -20px;
		}
	}

	&.pm-user-own-message {
		flex-direction: row-reverse;

		.pm-content {
			background: $mainColorBackground;
			align-self: flex-end;
		}

		.pm-content-holder {
			.pm-date {
				align-self: flex-start;
				margin-left: auto;
			}
		}
	}

	.pm-user {
		text-transform: none;
		letter-spacing: normal;
		color: $headlinesColor3;
		font-size: 16px;
		font-weight: 600;
		margin: 0;
	}

	.pm-avatar {
		margin-right: 10px;
		flex-shrink: 0;
		align-self: flex-start;

		img {
			border: 2px solid $whiteColor;
		}
	}
}

.pm-user-own-message {
	.pm-avatar {
		margin-left: 10px;
		margin-right: 0;
	}
}

.pm-custom-offer {
	@include default-shape;

	background: $grayBackground5;

	.pm-custom-offer-header-wrapper {
		@include default-shape-top-only;

		background: $blueColor;
		padding: 12px 30px;
		color: $whiteColor;

		@include mobile {
			padding: 10px 20px;
		}
	}

	.pm-custom-offer-header-title {
		font-size: 18px;
		color: $whiteColor;
		font-weight: 400;
		line-height: 1.1;

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

	.pm-custom-offer-header-subtitle {
		font-size: 13px;
		font-weight: 600;
		opacity: .6;
		text-decoration: none;
		display: block;
		color: $whiteColor;
	}

	.pm-custom-offer-body {
		padding: 25px 30px;

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

	.btn-margin-bottom-helper {
		margin-top: 10px;

		span {
			font-style: italic;
			font-weight: 600;
		}

		.actions {
			margin-top: 20px;
		}
	}

	.meta-columns-wrapper {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;

		.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;
				}
			}
		}
	}

	.pm-custom-offer-content-wrapper {
		display: flex;

		.pm-settings {
			margin-left: auto;
		}
	}
}

.link-to-pm h3 {
	display: inline-block;
	margin-bottom: 0.5rem;
}
.pm-content-header {
	margin-bottom: 5px;
}
.pm-settings {
	justify-self: flex-end;
	align-self: flex-start;
	margin-left: auto;
}
.pm-settings .ui.dropdown {
	opacity: 0;
}
.pm-holder:hover,
.pm-list-holder:hover {
	.pm-settings .ui.dropdown {
		opacity: 1;
	}
}
.pm-settings .ui.dropdown > .menu {
	margin-top: -0.6em !important;
}
.pm-parse-errors {
	margin-top: 5px;
}
.parse-error {
	color: $redColor;
}
.is-page-pm .no-results {
	border: 0;
}

body.wpj-is-iframe.wpj-is-handheld .ui.segment.wpj-messenger,
body.wpj-is-iframe.wpj-is-handheld .wpj-messenger {
	height: 100vh; /* Fallback */
	height: calc(var(--vh, 1vh) * 100);
}

.is-page-pm {
	&.is-page-pm-single {
		@include tablet {
			.send-custom-offer {
				min-width: 40px;
				padding-left: 10px;
				padding-right: 10px;

				.icon {
					margin: 0;
				}
				.icon + .text {
					display: none;
				}
			}
		}
	}
}

/* Search message */
.private-messages-wrapper {
	.search-message-form {
		&.ui.input {
			top: 61px;
		}
	}
}

.search-message-form {
	&.ui.input {
		position: absolute;
		top: 65px;
		width: 100%;
		height: 54px;
		z-index: 9;
		border-bottom: 1px solid #E5E6E7;
		display: none;

		@media only screen and (max-width: 835px) {
			top: 72px;
		}

		@media only screen and (max-width: 767px) {
			top: 66px;
		}

		@media only screen and (max-width: 403px) {
			top: 72px;
		}

		input {
			border-radius: 0;
			border: 0;
		}

		a {
			border: 0;
		}

		.search-message-icons > .icon {
			color: #a1a2a4;
		}
	}
}

.search-messages-result-wrapper {
	margin-top: 45px;

	.search-message-selected {
		.pm-holder {
			border: 1px solid $grayBackground4;
		}
	}

	.load-more-icon-down {
		margin-bottom: 20px;
	}
}

.search-message-result-wrapper {
	border-radius: 6px;
	border: 1px solid $borderColor;
	padding: 10px;
	margin-top: 20px;
	cursor: pointer;

	&:first-child {
		margin-top: 45px;
	}

	.pm-holder {
		margin-bottom: 0;

		.pm-settings {
			display: none
		}
	}
}

/* Responsive */
@media only screen and (max-width:991px) {
	.ui.segment.wpj-messenger,
	.wpj-messenger {
		height: calc(100vh - 60px - 101px); /* Fallback */
		height: calc((var(--vh, 1vh) * 100) - 60px - 101px);
		margin: 0;
	}

	.pm-settings .ui.dropdown {
		display: block;
	}

	.pm-settings .ui.right.pointing.dropdown > .menu {
		right: 100% !important;
	}
}

@media only screen and (max-width:767px) {
	.ui.segment.wpj-messenger,
	.wpj-messenger {
		display: block;
	}

	.private-messages-wrapper.wpj-messenger {
		margin-top: 0 !important;
	}

	.is-page-pm #main-wrapper {
		margin: 0;
	}

	.is-page-pm-single .thread-list-body {
		display: none;
	}

	.is-page-pm-single .thread-body {
		display: flex;
	}
}