
@im-width: 200px;
@im-chat-width:300px;
@im-bg: #EEEEEE;
@im-color:#808080;
@im-border:#dfdfdf;
@im-shadow:0 0 30px 0 rgba(0, 0, 0, 0.2);
@im-shadow-main:0 0 100px 0 rgba(0, 0, 0, 0.8);

.pf-im-empty {
	opacity:0.6;
	text-align:center;
	font-size:11px;
	margin-top:20px;
}

#pf-im-total-messages {
	position:fixed;
	z-index:10001;
	right:4px;
	bottom:30px;
	padding:6px 8px;
	color:#fff;
	line-height:normal;
	background:#EF312C;
	font-size:9px;
	border-radius:50%;
	display:none;
}

.close-im-window, .popup-im-window {
	position:absolute;
	right:8px;
	top:12px;
	background:#EF312C;
	width:10px;
	height:10px;
	border-radius:50%;
	opacity:0.6;
}

.popup-im-window {
	background:green;
	right:22px;
}

.close-im-window:hover, .popup-im-window:hover {
	opacity:1;
}

#pf-open-im {
	position:fixed;
	z-index:1000;
	right:6px;
	bottom:50%;
	margin-bottom:-20px;
	width:40px;
	height:40px;
	background:fade(#fff, 80%);
	border:1px lighten(#dfdfdf, 5%) solid;
	border-radius:50%;
	cursor:pointer;
	visibility:hidden !important;

	i {
		font-size:22px;
		position:absolute;
		left:0;
		right:0;
		text-align:center;
		top:8px;
	}
}

#pf-im {
	background:@im-bg;
	box-shadow:@im-shadow-main;
	border-radius:3px;

	z-index:10000;
	left:50%;
	width:800px;
	margin-left:-400px;
	position:fixed;

	color:@im-color;
	top:50%;
	overflow:hidden;
	display:none;
	height:400px;
	margin-top:-200px;
	cursor:default;
}

.pf-im-title {
	height:35px;
	line-height:35px;
	font-weight:200;
	padding-left:5px;
	color:#808080;
	font-size:12px;
	border-bottom:1px #dfdfdf solid;
	border-right:1px #dfdfdf solid;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

	i {
		margin-right:5px;
		margin-left:5px;
	}

	i.fa-chevron-down {
		margin:auto;
		position:absolute;
		right:6px;
		top:10px;
		opacity:0.5;
		cursor:pointer;
	}

	i.fa-chevron-down:hover {
		opacity:1;
	}
}

.pf-im-menu {
	background:darken(#fff, 4%);
	border-bottom:1px #dfdfdf solid;
	border-right:1px #dfdfdf solid;
	width:300px;

	ul {
		display:table;
		table-layout:fixed;
		width:100%;
		margin:auto;
		height:30px;
		line-height:34px;

		li {
			display:table-cell;
			font-size:11px;
			text-align:center;
			width:50%;

			a, a:hover {
				display:block;
				text-decoration:none;
				color:#808080;
				text-align:center;
			}

			a.active {
				color:#337AB7;
			}
		}

		li:nth-of-type(2) {
			border-left:1px #dfdfdf solid;
		}
	}
}

#pf-im {
	> i {
		position:absolute;
		left:50%;
		top:50%;
		font-size:20px;
		opacity:0.6;
		margin-left:-10px;
		margin-top:-10px;
	}
}

.pf-im-main {
	position:absolute;
	top:70px;
	left:0;
	bottom:0;
	overflow:auto;
	width:300px;
	border-right:1px #dfdfdf solid;
	z-index:100;
}

.pf-im-main._is_friends_list {
	top:100px;
}

._pf_im_friend_search {
	position:absolute;
	top:70px;
	left:0;
	width:300px;
	background:#fff;
	border-right:1px #dfdfdf solid;
	height:30px;
	line-height:30px;
	z-index:99;

	> i {
		position:absolute;
		top:0;
		left:10px;
		bottom:0;
		height:30px;
		line-height:30px;
	}

	> input, > input:focus {
		padding:0;
		margin:0;
		box-shadow:none;
		outline:none;
		border:0;
		height:30px;
		line-height:30px;
		text-indent:30px;
		font-size:11px;
	}
}

#pf-chat-window-active {
	visibility:hidden;

	position:fixed;
	z-index:100000001;
	right:(@im-width + 5px);
	top:50px;

	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7.5px 0 7.5px 10px;
	border-color: transparent transparent transparent #fff;
}

#pf-chat-window {
	z-index:10000000;
	right:0;
	left:300px;
	top:35px;
	bottom:0;
	background:fade(#fff, 100%);
	position:absolute;
	overflow:hidden;

	.chat-row {
		position:absolute;
		left:0;
		right:0;
		top:35px;
		bottom:60px;
		overflow:auto;
	}

	.chat-form {
		position:absolute;
		bottom:5px;
		left:5px;
		right:5px;
		height:50px;
		background:#fff;
		border:1px @im-border solid;
		overflow:hidden;
		border-radius:6px;

		> span {
			position:absolute;
			height:20px;
			line-height:20px;
			bottom:0;
			left:0;
			right:0;
			padding-left:5px;
			display:block;

			> i {
				display:inline-block;
				margin-right:8px;
				font-size:12px;
			}
		}

		> div {
			padding:4px;
		}

		input, input:focus {
			width:100%;
			box-shadow:none !important;
			height:50px;
			border:0;
			background:transparent;
			padding:0 0 22px 0;
			margin:0;
			font-size:12px;
		}
	}
}

.pf-chat-with-user {
	color:#fff;
	cursor:pointer;
	font-size:12px;
	height:30px;
	line-height:30px;
	padding-left:10px;
}

.pf-chat-with-user:hover {
	background:darken(@im-bg, 5%);
}

.pf-chat-message {
	padding:8px 8px 8px 40px;
	position:relative;
}

.pf-chat-owner {
	padding-left:8px;
	padding-right:40px;

	.pf-chat-image {
		left:auto;
		right:8px;
	}
}

.im-img() {
	.image_deferred, .image_object {
		background-size:contain;
		width:25px;
		height:25px;
		display:inline-block;
	}
	// _image__120_square image_object  fb_built
	._size__120, ._size__120:hover, ._size__50, ._size__50:hover {
		display:inline-block;
		max-width:25px;
		max-height:25px;

		> span {
			font-size:11px;
			top:6px;
		}
	}
}

.chat-row-close {
	position:absolute;
	right:7px;
	top:7px;
	opacity:0.8;
	color:lighten(#808080, 10%);
}

.chat-row-users {
	opacity:0.7;

	> span {
		display:inline-block;
		vertical-align:top;
		margin-right:4px;
	}
}

.chat-row-title {
	height:35px;
	padding-left:8px;
	padding-top:5px;
	border-bottom:1px lighten(#dfdfdf, 4%) solid;
}

.chat-row-title:hover {
	.chat-row-users {
		opacity:1;
	}
}

.chat-row-title {
	cursor:default;
	position:relative;
	
	.im-img();
}

.pf-chat-image {
	position:absolute;
	left:8px;
	top:10px;

	.im-img();
}

.pf-chat-body {
	background:darken(#fff, 5%);
	padding:5px;
	font-size:13px;
	border-radius:6px;

	time {
		display:block;
		color:#808080;
		padding-top:5px;
		font-size:11px;
	}
}

.pf-im-panel.active, .pf-im-panel.active:hover {
	background:#337AB7 !important;
	color:#fff !important;

	time, .pf-im-panel-preview {
		color:#fff !important;
	}
}

.pf-im-panel.new {
	.pf-im-count {
		display:block;
	}
}

.pf-im-panel-info {
	padding-left:50px;
	padding-top:4px;
}

.pf-im-count {
	background:#337AB7;
	color:#fff;
	display:none;
	width:10px;
	height:10px;
	border-radius:50%;
	position:absolute;
	left:22px;
	bottom:8px;
	font-size:7px;
	z-index:2;
	box-shadow:@im-shadow;
	opacity:0.8;
}

.pf-im-panel:hover {
	background:#fff;
	transition:all 0.50s ease;
}

.pf-im-friends > span {
	._size__50, ._size__50:hover, ._size__120, ._size__120:hover {
		width:20px;
		height:20px;

		> span {
			font-size:9px;
			top:5px;
		}
	}
}

.pf-im-panel {
	transition:all 0.50s ease;
	position:relative;
	height:75px;
	padding:0 8px;
	cursor:pointer;
	border-bottom:1px #dfdfdf solid;
	color:#222;

	.pf-im-panel-image {
		position:absolute;
		left:8px;
		top:8px;

		.image_deferred, .image_object {
			background-size:contain;
			width:40px;
			height:40px;
		}

		._size__50, ._size__50:hover, ._size__120, ._size__120:hover {
			width:40px;
			height:40px;

			> span {
				font-size:18px;
				top:10px;
			}
		}
	}

	time {
		/*
		position:absolute;
		right:8px;
		top:8px;
		*/
		font-size:10px;
		opacity:0.8;
		display:inline-block;
		color:#808080;
	}

	.pf-im-panel-content {
		padding-left:50px;
		padding-top:8px;
		font-size:12px;
		font-weight:normal;
	}
}

.pf-im-panel-preview {
	font-size:11px;
	color:#808080;
	opacity:0.5;
	width:(@im-width - 65);
	padding-top:4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pf-im-friends:hover {
	background:darken(#EEEEEE, 5%);
}

.pf-im-friends {
	display:block;
	height:35px;
	line-height:35px;
	cursor:pointer;
	overflow:hidden;
	position:relative;
	padding-left:32px;
	border-bottom:1px #dfdfdf solid;
	font-size:12px;

	> span {
		position:absolute;
		left:5px;
		top:7px;
		display:block;
		line-height:normal;

		a, a:hover {
			display:block;
		}
	}

	.image_deferred, .image_object {
		background-size:contain;
		width:20px;
		height:20px;
	}

	._size__120, ._size__120:hover {
		width:20px;
		height:20px;
	}
}

.chat-row-back {
	display:none;
}

/**
 * Responsive
 */
@media (max-device-width: 980px), (max-width: 980px) {
	body {
		margin-right:0 !important;
	}
}

@media only screen and (max-device-width: 825px), (max-width: 825px) {
	body.im-is-active {
		#pf-im {
			display:block !important;
			width:auto;
			right:0;
			left:0;
			top:0;
			bottom:0;
			margin:0;
			height:auto;
		}

		.popup-im-window {
			display:none;
		}

		.chat-row-back {
			display:inline-block;
			vertical-align:middle;
			margin-left:-5px;
			margin-top:-5px;
			margin-right:5px;
			background:darken(#fff, 5%);
			height:35px;
			line-height:35px;
			padding:0 10px;
		}

		.pf-im-menu, .pf-im-main {
			width:auto;
			right:0;
		}

		#pf-chat-window {
			left:0;
		}
	}
}

.ui-resizable-handle {
	z-index:100000000 !important;
}

#page_route_im_popup {
	#pf-im {
		display:block !important;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		top:0;
		width:auto;
		height:auto;
		margin:0;

		> i {
			display:none;
		}
	}

	.close-im-window, .popup-im-window {
		display:none;
	}
}

.pf-im-panel.is_hidden {
	display:none !important;
}

.chat-form-actions-close {
	position:absolute;
	right:10px;
	bottom:60px;
	padding:1px 4px;
	font-size:14px;
	display:none;
}

.chat-form-actions {
	position:absolute;
	left:0;
	bottom:-60px;
	right:0;
	height:60px;
	overflow:auto;
	background:#fff;
	z-index:1000;
	border:1px @im-border solid;
	border-left:0;
	border-right:0;

	> i {
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-6px;
		margin-top:-6px;
		font-size:12px;
		opacity:0.6;
	}
}

.pf_im_hosting {
	background:#fff;
	padding:20px;
	margin-bottom:10px;
	max-width:300px;
}

.pf_im_hosting_title {
	font-size:18px;
	font-weight:200;
	letter-spacing:1px;
	color:#222;
	padding-bottom:5px;
	margin-bottom:15px;
	border-bottom:1px lighten(#dfdfdf, 5%) solid;
}

.pf_im_hosting_packages {
	> div {
		background:#f6f6f6;
		padding:10px;
		display:block;
		vertical-align:top;

		> em {
			font-style:normal;
			font-size:18px;
			font-weight:200;
			letter-spacing:1px;
			display:block;

			> span {
				font-size:12px;
			}
		}

		> span {
			display:block;
			font-size:12px;
			opacity:0.6;
			padding:6px 0;
		}

		> strong {
			font-size:12px;
			font-weight:600;
			display:block;
			text-transform:uppercase;
			padding-bottom:10px;
		}
	}
}

.pf_im_hosting_pay, .pf_im_hosting_pay:hover {
	display:block;
	margin-top:10px;
	text-decoration:none;
	font-weight:200;
	background:#F4645F;
	color:#fff;
	opacity:0.6;
	padding:10px 0;
	text-align:center;
	text-transform:uppercase;
	transition:all 0.5s ease;
	letter-spacing:1px;
}

.pf_im_hosting_pay:hover {
	opacity:1;
}

.pf_im_cancel {
	margin-top:20px;
	font-size:12px;
	text-align:center;

	a, a:hover {
		font-weight:normal;
		color:#808080;
		opacity:0.6;
	}

	a:hover {
		color:#F4645F;
		opacity:1;
	}
}

.pf_im_is_hosted {
	margin-top:10px;

	> span {
		background:#2ecc71;
		color:#fff;
		display:inline-block;
		padding:10px 10px;
		font-size:12px;
	}
}

._im_a {
	margin:10px 30px 10px 0;
	background:#fff;
	font-size:11px;
	padding:10px;
	border-radius:3px;
	position:relative;
	cursor:pointer;

	._im_a_image {
		position:absolute;
		top:12px;
		left:10px;

		> img {
			max-width:60px;
		}
	}

	._im_a_body {
		padding-left:70px;

		> h1 {
			font-size:12px;
			font-weight:600;
			margin:0;
			padding:0;
			color:#222;
		}

		> p {
			padding:5px 0 0 0;
			color:#808080;
		}
	}
}

._im_attach_link {
	position:relative;

	.error_message {
		position:fixed;
		top:50%;
		width:300px;
		left:50%;
		margin-left:-150px;
		z-index:100000;
	}

	#__form_url {
		background:#EEEEEE;
		padding:0;
		height:30px;
		line-height:30px;
		font-size:12px;
		text-indent:5px;
	}

	.table > .table_right {
		padding:10px 5px 0 5px;
	}

	.table_clear {
		position:absolute;
		right:5px;
		top:10px;
		padding:0;
		margin:0;

		> input.btn {
			margin:0;
			padding:0 10px;
			font-size:12px;
			height:30px;
			line-height:30px;
		}
	}
}

.chat-form {
	._im_a {
		margin-left:10px;
		margin-right:10px;
		margin-bottom:20px;
		background:#F2F2F2;
	}
}

.pf-chat-body {
	position:relative;
}

.pf_chat_message_deleted {
	font-size:11px;
	opacity:0.6;
	font-style:italic;
}

.pf_chat_delete_message {
	position:absolute;
	bottom:2px;
	right:6px;
	display:none;

	i {
		color:#808080;
		opacity:0.6;
	}
}

.pf-chat-message:hover {
	.pf_chat_delete_message {
		display:block;
	}
}

.pf_chat_delete_message:hover {
	i {
		opacity:1;
	}
}

.open_it {
	margin-left:40px;
	position:relative;

	.chat_panel_remove {
		background:fade(red, 80%);
		left:-40px;
		top:0;
		bottom:0;
		right:auto;
		position:absolute;
		display:block;
		width:40px;
		text-align:center;

		i {
			color:#fff;
			display:block;
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			text-align:center;
			height:75px;
			line-height:75px;
			z-index:1000;
		}
	}
}