.box-chat {
	position: fixed;
	bottom: 0;
	right: 214px;
    z-index: 100;
	}

	.box-chat.hide,
	.box-chat .hide {
		display: none;
	}
	.box-chat .jspContainer {
		overflow: hidden;
		position: relative;
		}
		.box-chat .jspContainer .jspPane {
			width: 100% !important;
			position: absolute;
			left: 0;
			margin-left: 0 !important;
		}
		.box-chat .jspContainer .jspTrack {
			width: 9px;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 50;
			}
			.box-chat .jspContainer .jspTrack .jspDrag.jspActive,
			.box-chat .jspContainer .jspTrack:hover .jspDrag {
				width: 8px;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.box-chat .jspContainer .jspTrack .jspDrag {
				position: absolute;
				right: 3px;
				width: 6px;
				background: #94d4e1;
				border-radius: 5px;
				cursor: pointer;
				opacity: 0.5;
				filter: alpha(opacity=50);
				-webkit-transition: width 200ms ease, opacity 200ms ease;
				   -moz-transition: width 200ms ease, opacity 200ms ease;
				    -ms-transition: width 200ms ease, opacity 200ms ease;
				     -o-transition: width 200ms ease, opacity 200ms ease;
				        transition: width 200ms ease, opacity 200ms ease;
			}

	.box-chat .emptyList {
		height: 315px;
		overflow: hidden;
		}
		.box-chat .emptyList .text {
			margin-top: 70px;
			padding-bottom: 90px;
			text-align: center;
			color: #333333;
			font-size: 12px;
			background: url("/static/contents/box-chat/icon-mail.png") 50% 100% no-repeat;
			}
			.box-chat .emptyList .text b {
				display: block;
			}
			.box-chat .emptyList .text .link {
				display: inline-block;
				cursor: pointer;
				color: #377c88;
				text-decoration: underline;
				}
				.box-chat .emptyList .text .link:hover {
					text-decoration: none;
				}
	.box-chat .modelClose {
		width: 210px;
		height: 36px;
		background: #377c88 url("/static/contents/box-chat/logo.png") 5px 50% no-repeat;
		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
		position: relative;
		border-radius: 4px 4px 0 0;
		cursor: pointer;
		}
		.box-chat .modelClose .count {
			padding: 0 0 0 15px;
			position: absolute;
			top: 11px;
			right: 10px;
			background:  url("/static/contents/box-chat/icon-user.png") 0 1px no-repeat;
			color: #a0e5f1;
			font-size: 12px;
			font-weight: bold;
		}
	.box-chat .modelOpen {
		width: 250px;
		background: #f2f5f7;
		}
		.box-chat .headBlock {
			height: 36px;
			position: relative;
			background: #377c88 url("/static/contents/box-chat/logo.png") 5px 50% no-repeat;
			border-radius: 4px 4px 0 0;
			border-bottom: 1px solid #2c6c77;
			}
			.box-chat .headBlock .func {
				position: absolute;
				top: 14px;
				right: 10px;
				font-size: 0;
				}
				.box-chat .headBlock .func img {
					margin-left: 9px;
					cursor: pointer;
				}
		.box-chat .infoBlock {
			height: 22px;
			padding: 2px 0 0 8px;
			border-top: 1px solid #3d8f9d;
			background-color: #377c88;
			color: #fff;
			font-size: 13px;
		}
		.box-chat .usersBlock {
			height: 315px;
			border-left: 1px solid #d7dade;
			border-right: 1px solid #d7dade;
			position: relative;
			z-index: 0;
			overflow: auto;
			}
			.box-chat .usersBlock:after {
				width: 100%;
				position: absolute;
				left: 0;
				top: 30px;
				z-index: 0;
				content: 'Не найдено друзей с таким именем.';
				text-align: center;
				font-size: 12px;
			}
			.box-chat .usersBlock .item {
				overflow: hidden;
				padding: 6px 4px;
				cursor: pointer;
				position: relative;
				z-index: 10;
				background: #f2f5f7;
				}
				.box-chat .usersBlock .item:hover {
					background-color: #e4e4e4;
				}
				.box-chat .usersBlock .item img {
					display: block;
					float: left;
					width: 40px;
					height: 35px;
					margin: 0 8px 0 0;
					}
					.box-chat .usersBlock .item .name {
						padding-top: 10px;
						font-size: 12px;
						color: #026987;
						font-weight: bold;
					}
					.box-chat .usersBlock .item .online {
                        width: 5px;
                        height: 5px;
                        position: absolute;
                        left: 38px;
                        bottom: 6px;
                        border-top: 1px solid #F2F5F7;
                        border-left: 1px solid #F2F5F7;
                        background-color: #E66E06;
					}
		.box-chat .searchBlock {
			padding: 0 33px 0 0;
			background-color: #fff;
			border: 1px solid #d7dade;
			border-bottom: none;
			}
			.box-chat .searchBlock input {
				width: 100%;
				height: 38px;
				padding: 0 0 0 33px;
				font-size: 12px;
				background: #fff url("/static/contents/box-chat/icon-search.png") 10px 50% no-repeat;
				border: none;
			}


	.box-chat .modelNotifications {
		width: 56px;
		margin-left: 11px;
		position: absolute;
		left: 100%;
		bottom: 0;
		background-color: #f2f5f7;
		border-radius: 4px 4px 0 0;
		text-align: center;
		}
		.box-chat .modelNotifications .count {
			display: inline-block;
			margin: 12px 0 14px;
			padding-left: 12px;
			background:  url("/static/contents/box-chat/icon-user1.png") 0 2px no-repeat;
			color: #539fac;
			font-size: 12px;
			font-weight: bold;
			cursor: pointer;
			}
			.box-chat .modelNotifications .count:before {
				position: absolute;
				background-image: url("/static/contents/box-chat/icon-user2.png");
				content: '';
			}
			.box-chat .modelNotifications .count:hover {
				color: #377c88;
				background-image: url("/static/contents/box-chat/icon-user2.png");
			}
		.box-chat .modelNotifications .user {
			padding: 6px 8px;
			position: relative;
			cursor: pointer;
			}
			.box-chat .modelNotifications .user:first-child {
				border-radius: 4px 4px 0 0;
			}
			.box-chat .modelNotifications:hover .user .name {
				margin-right: 8px;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.box-chat .modelNotifications .user:hover {
				background-color: #e4e4e4;
				}
				.box-chat .modelNotifications .user:hover .name {
					visibility: visible;
				}
				.box-chat .modelNotifications .user:hover .online {
					border-color: #e4e4e4;
				}
				.box-chat .modelNotifications .user:hover .close {
					visibility: visible;
					opacity: 1;
					filter: alpha(opacity=100);
				}
			.box-chat .modelNotifications .user img {
				display: block;
				width: 40px;
				height: 35px;
			}
			.box-chat .modelNotifications .user .name {
				visibility: hidden;
				opacity: 0;
				filter: alpha(opacity=0);
				padding: 6px 8px;
				margin-right: 24px;
				position: absolute;
				top: 12px;
				right: 100%;
				background-color: #377c88;
				color: #fff;
				border-radius: 4px;
				font-size: 12px;
				line-height: 1;
				-webkit-transition: opacity 150ms linear 0s, margin-right 150ms linear 0s;
				   -moz-transition: opacity 150ms linear 0s, margin-right 150ms linear 0s;
				    -ms-transition: opacity 150ms linear 0s, margin-right 150ms linear 0s;
				     -o-transition: opacity 150ms linear 0s, margin-right 150ms linear 0s;
				        transition: opacity 150ms linear 0s, margin-right 150ms linear 0s;
				}
				.box-chat .modelNotifications .user .name:after {
					position: absolute;
					top: 6px;
					left: 100%;
					border: 8px solid transparent;
					border-top-width: 6px;
					border-bottom-width: 6px;
					border-left-color: #377c88;
					content: '';
				}
			.box-chat .modelNotifications .user .online {
				width: 5px;
				height: 5px;
				position: absolute;
				right: 8px;
				bottom: 6px;
				border-top: 1px solid #f2f5f7;
				border-left: 1px solid #f2f5f7;
				background-color: #e66e06;
			}
			.box-chat .modelNotifications .user .close {
				visibility: hidden;
				opacity: 0;
				filter: alpha(opacity=0);
				width: 13px;
				height: 13px;
				position: absolute;
				top: 6px;
				right: 8px;
				background: #377c88;
				-webkit-transition: opacity 150ms linear 0s;
				   -moz-transition: opacity 150ms linear 0s;
				    -ms-transition: opacity 150ms linear 0s;
				     -o-transition: opacity 150ms linear 0s;
				        transition: opacity 150ms linear 0s;
				}
				.box-chat .modelNotifications .user .close:hover:after {
					opacity: 1;
					filter: alpha(opacity=100);
				}
				.box-chat .modelNotifications .user .close:after {
					width: 100%;
					height: 100%;
					background: url("/static/contents/box-chat/icon-close-white.png") 50% 50% no-repeat;
					position: absolute;
					left: 0;
					top: 0;
					content: '';
					opacity: 0.5;
					filter: alpha(opacity=50);
					-webkit-transition: opacity 150ms linear 0s;
					   -moz-transition: opacity 150ms linear 0s;
					    -ms-transition: opacity 150ms linear 0s;
					     -o-transition: opacity 150ms linear 0s;
					        transition: opacity 150ms linear 0s;
				}
	.box-chat .messagesBlock {
		height: 315px;
		border-left: 1px solid #d7dade;
		border-right: 1px solid #d7dade;
		position: relative;
		z-index: 0;
		overflow: auto;
		}
		.box-chat .messagesBlock .date {
			margin-top: 2px;
			color: #aaaaaa;
			text-align: right;
			font-size: 10px;
		}
		.box-chat .messagesBlock .message {
			max-width: 100%;
			padding: 2px 7px;
			border: 1px solid #c7c7c7;
			border-radius: 4px;
			font-size: 12px;
			position: relative;
			word-wrap: break-word;
			}
			.box-chat .messagesBlock .message:before,
			.box-chat .messagesBlock .message:after {
				border: 6px solid transparent;
				position: absolute;
				content: '';
			}
			.box-chat .messagesBlock .message img {
				width: 20px;
			}

		.box-chat .messagesBlock .user,
		.box-chat .messagesBlock .me {
			margin: 8px 0;
			overflow: hidden;
		}
		.box-chat .messagesBlock .user {
			padding-left: 44px;
			padding-right: 11px;
			position: relative;
			z-index: 0;
			}
			.box-chat .messagesBlock .user > img {
				position: absolute;
				top: 5px;
				left: 4px;
				width: 30px;
				height: 26px;
			}
			.box-chat .messagesBlock .user .message {
				float: left;
				background: #fdfdfd;
				}
				.box-chat .messagesBlock .user .message:before,
				.box-chat .messagesBlock .user .message:after {
					top: 10px;
					right: 100%;
				}
				.box-chat .messagesBlock .user .message:before {
					border-right-color: #c7c7c7;
				}
				.box-chat .messagesBlock .user .message:after {
					border-right-color: #fdfdfd;
					margin-right: -1px;
				}
		.box-chat .messagesBlock .me {
			padding: 0 10px;
			}
			.box-chat .messagesBlock .me .message {
				float: right;
				background: #edfcff;
				}
				.box-chat .messagesBlock .me .message:before,
				.box-chat .messagesBlock .me .message:after {
					bottom: 5px;
					left: 100%;
				}
				.box-chat .messagesBlock .me .message:before {
					border-left-color: #c7c7c7;
				}
				.box-chat .messagesBlock .me .message:after {
					border-left-color: #edfcff;
					margin-left: -1px;
				}
	.box-chat .sendBlock {
		padding: 5px 0;
		border: 1px solid #d7dade;
		border-bottom: none;
		position: relative;
		background: #fff;
		}
		.box-chat .sendBlock .emoji-button {
			position: absolute;
			top: 7px;
			right: 8px;
		}
		.box-chat .sendBlock textarea {
			width: 100%;
			height: 25px;
			max-height: 43px;
			padding: 0 35px 0 5px;
			background: none;
			border: none;
			resize: none;
			box-shadow: none;
			font-size: 12px;
		}
		.box-chat .sendBlock .emoji-wysiwyg-editor {
			padding: 5px 35px 5px 5px;
			min-height: 30px;
			max-height: 43px;
			font-size: 12px;
			background: #fff;
			overflow: auto;
			}
			.box-chat .sendBlock .emoji-wysiwyg-editor img {
				width: 18px;
				vertical-align: middle;
			}
	.box-chat .sendBlock.long {

		}
		.box-chat .sendBlock.long .emoji-button {
			right: 20px;
		}
		.box-chat .sendBlock.long .emoji-wysiwyg-editor {
			overflow-y: scroll;
		}


.emoji-menu {
	position: fixed;
	top: auto !important;
	left: auto !important;
	bottom: 50px;
	right: 215px;
	z-index: 999;
	width: 180px;
	margin-left: -100px;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.emoji-menu > div {
	max-height: 200px;
	overflow: hidden;
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.emoji-menu img {
	width: 25px;
	height: 25px;
	vertical-align: middle;
	border: 0 none;
}
.emoji-menu a {
	margin: -1px 0 0 -1px;
	border: 1px solid #f2f2f2;
	padding: 5px;
	display: block;
	float: left;
}
.emoji-menu a:hover {
	background-color: #fffae7;
}
.emoji-menu:after {
	content: ' ';
	display: block;
	clear: left;
}
.emoji-menu a .label {
	display: none;
}

.modelNotifications__message .user {
    position: fixed;
    z-index: 100;
    left: 150px;
    height: 120px;
    width: 300px;
    bottom: 0;
    background: rgba(55,124,136,0.8);
    color: #FFF;
    padding: 10px;
    margin-top: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    cursor: pointer;
}

.modelNotifications__message .user img {
    float: left;
    max-width: 50px;
}

.modelNotifications__message .user .name {
    margin-left: 59px;
    font-weight: bold;
    margin-bottom: 5px
}

.modelNotifications__message .user .msg {
    max-height: 57px;
    margin-left: 60px;
    font-size: 12px;
    word-wrap: break-word;
    overflow: hidden;
}

.modelNotifications__message .user .title {
    margin-bottom: 5px;
    font-weight: bold;
}

.modelNotifications__message.hide,
.modelNotifications__message .hide {
    display: none;
}

.modelNotifications__message .user .close {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 6px;
    right: 8px;
    background: #377c88;
    -webkit-transition: opacity 150ms linear 0s;
    -moz-transition: opacity 150ms linear 0s;
    -ms-transition: opacity 150ms linear 0s;
    -o-transition: opacity 150ms linear 0s;
    transition: opacity 150ms linear 0s;
    cursor: pointer;
}
.modelNotifications__message .user .close:after {
    width: 100%;
    height: 100%;
    background: url("/static/contents/box-chat/icon-close-white.png") 50% 50% no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: opacity 150ms linear 0s;
    -moz-transition: opacity 150ms linear 0s;
    -ms-transition: opacity 150ms linear 0s;
    -o-transition: opacity 150ms linear 0s;
    transition: opacity 150ms linear 0s;
}