.dialogs {
	
}
.dialogs .dialog {
	display: flex;
	width: 100%;
	padding: 5px;
	background-color: rgba(58, 58, 58, 0.68);
	text-decoration: none;
	box-sizing: border-box;
	margin-bottom: 3px;
}
.dialogs .dialog > .dialog-image {
	width: 44px;
	cursor: pointer;
	flex: none;
}
.dialogs .dialog > .dialog-image > .image {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
}
.dialogs .dialog > .dialog-image > .image > .src {
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-transform: translate(50%, 50%);
	-moz-transform: translate(50%, 50%);
	transform: translate(50%, 50%);
	left: -50%;
	top: -50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.dialogs .dialog > .dialog-body {
	width: 100%;
}
.dialogs .dialog > .dialog-body > .cw {
	position: relative;
	margin: 0 7px;
}
.dialogs .dialog > .dialog-body > .cw > .content {
	
}
.dialogs .dialog > .dialog-body > .cw > .content > .name {
	
}
.dialogs .dialog > .dialog-body > .cw > .content > .prev {
    display: block;
}
.dialogs .dialog > .dialog-body > .cw > .content > .prev > .who {
	display: inline-block;
	color: #9ea0a2;
	margin-right: 3px;
}
.dialogs .dialog > .dialog-body > .cw > .content > .prev > .text {
	display: inline-block;
}
.dialogs .dialog > .dialog-body > .cw > .date {
	color: #777e8c;
	font-size: 0.8em;
	position: absolute;
	top: 5px;
	right: 0;
	opacity: 0.8;
}
.im-vs {
	display: flex;
	justify-content: space-between;
}
.im-vs .head {
	display: flex;
	padding: 5px 0;
}
.im-vs .head.me {
	flex-direction: row-reverse;
}
.im-vs .head img {
	width: 50px;
	height: 50px;
	border-radius: 5px;
}
.im-vs .head span {
	justify-content: center;
	align-self: center;
	padding: 10px;
}
.im-messages-box {
	max-height: 330px;
	overflow-y: auto;
	overflow-x: hidden;
}
.im-messages {
	
}
	.im-messages > .message {
		display: flex;
		flex-flow: column;
		margin-left: 8px;
		margin-right: 0;
		align-items: flex-start;
	}
	.im-messages > .message.me {
		margin-right: 8px;
		margin-left: 0;
		align-items: flex-end;
	}
		.im-messages > .message > .body {
			max-width: calc(100% - 10%);
		}
			.im-messages > .message > .body > .text {
				width: 100%;
				border-radius: .3rem;
				background: rgb(95, 123, 252);
				border: 1px solid rgb(95, 123, 252);
				color: #ffffff;
				padding: 5px 10px;
				position: relative;
			}
			.im-messages > .message.me > .body > .text {
				background: rgb(83, 179, 94);
				border: 1px solid rgb(83, 179, 94)
			}
			.im-messages > .message > .body > .text a {
				color: #fff;
			}
			.im-messages > .message > .body > .text a:hover {
				color: #eee;
			}
			.im-messages > .message > .body > .text > .reply {
				display: flex;
				flex-flow: column;
				border-radius: 0 3px 3px 0;
				width: 100%;
				color: inherit;
				font-size: 0.8em;
				border-left: 2px;
				padding: 3px 3px 3px 5px;
				border-top: 0;
				border-bottom: 0;
				border-right: 0;
				border-style: solid;
				cursor: pointer;
				margin-bottom: 5px;
				text-decoration: unset;
			}
			.im-messages > .message > .body > .text > .reply > .name {
				font-weight: bold;
			}
			.im-messages > .message > .body > .text > .reply > .text {
				margin: 4px 0;
			}
		.im-messages > .message > .body > .text::before {
			border: solid transparent;
			border-width: 6px;
			margin-top: -6px;
			border-right-color: rgb(95, 123, 252);
			content: ' ';
			height: 0;
			pointer-events: none;
			position: absolute;
			right: 100%;
			top: 15px;
			width: 0;
		}
		.im-messages > .message.me > .body > .text::before {
			border-left-color: rgb(83, 179, 94);
			border-right-color: transparent;
			right: 0;
			left: 100%;
		}
		.im-messages > .message > .body > .foot {
			
		}
			.im-messages > .message > .body > .foot .time {
				color: #cacaca;
				font-size: 0.8em;
				float: right;
				padding: 2px;
			}

.add-message {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
}
	.add-message .message-info {
		display: block;
		font-size: .875rem;
		margin-bottom: 5px;
		overflow: hidden;
	}
		.add-message .message-info .message-name {
			font-weight: 600;
		}
		.add-message .message-info .message-timestamp {
			color: #cacaca;
		}
	.add-message .message-body {
		display: flex;
	}		
	.add-message .message-foot {
		margin-top: 5px;
		display: flex;
		padding: 0 5px;
		justify-content: flex-end;
	}
	.add-message .message-foot .btn-send {
		padding: 3px 5px;
		background-color: rgb(83, 179, 94);
		font-size: 13px;
		cursor: pointer;
		display: inline-block;
		color: #ffffff;
		outline: none;
		border: 0;
		border-radius: 3px;
		margin-bottom: 5px;
		text-decoration: none;
	}
	.add-message .message-foot .btn-send:hover {
		background-color: rgb(65, 142, 74);
	}
		.add-message .message-body .message-img {
			border-radius: 5px;
			height: 50px;
			width: 50px;
		}
		.add-message .message-body .message-text {
			width: calc(100% - 65px);
			border-radius: .3rem;
			background: rgb(83, 179, 94);
			border: 1px solid rgb(83, 179, 94);
			color: #ffffff;
			margin-left: 15px;
			padding: 5px 10px;
			position: relative;
		}
		.add-message .message-body .message-text .message-msg {
			padding: 0px;
			width: 100%;
			overflow: hidden;
			min-height: 35px;
			background-color: transparent;
			border-radius: inherit;
			resize: vertical;
		}
		.add-message .message-body .message-text .message-msg::-webkit-input-placeholder {color:#ffffffb8;}
		.add-message .message-body .message-text .message-msg::-moz-placeholder          {color:#ffffffb8;}/* Firefox 19+ */
		.add-message .message-body .message-text .message-msg:-moz-placeholder           {color:#ffffffb8;}/* Firefox 18- */
		.add-message .message-body .message-text .message-msg:-ms-input-placeholder      {color:#ffffffb8;}
		.add-message .message-body .message-text::after, .add-message .message-body .message-text::before {
			border: solid transparent;
			border-right-color: rgb(83, 179, 94);
			content: ' ';
			height: 0;
			pointer-events: none;
			position: absolute;
			right: 100%;
			top: 15px;
			width: 0;
		}
		.add-message .message-body .message-text::before {
			border-width: 6px;
			margin-top: -6px;
		}
.addMessage {
	padding: 10px 0;
}