#message-wrapper {
	> .card {
		overflow: hidden;
		height: calc(100vh - 130px);
	}
	//----------------------------------------------------------------------------->
	//== CHAT CONTACTS
	//----------------------------------------------------------------------------->
	.aside-left {
		padding: 0;
		min-width: 300px;
		width: 300px;
		max-width: 300px;
		transition: all 250ms ease;
		background: #fff;

		.contact-list {
			overflow: auto;
		}

		.search-wrapper {
			.search-button-submit {
				top: 27px;
				left: 33px;

				i {
					font-size: 20px;
				}
			}
		}

		.list-group {
			margin-top: 15px;
			height: calc(100vh - 220px);

			.list-group-item {
				border: none;
				border-radius: none;
				padding: 10px;
				margin-bottom: 0;
				display: flex;
				border-bottom: 1px solid rgba(234, 243, 253, 0.9);
				border-left: solid 3px transparent;
				z-index: 0;

				.item {
					flex-direction: row;
					align-items: stretch;
					width: 100%;

					.row-content {
						flex-direction: row;
						align-items: stretch;
						width: 100%;
					}
				}

				.list-group-item-text {
					margin: 0;
					line-height: 1.3;
					font-weight: 300;
					font-size: rem(12);
				}

				.avatar {
					margin: 0 10px 10px 0;
					min-width: 40px;
					height: auto;
					width: auto;
				}

				.list-group-item-title {
					margin: 0;
					padding: 0;
					font-weight: 400;
				}

				.list-group-item-heading {
					font-size: rem(15);
					white-space: nowrap;
					max-width: 90%;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0;
				}

				&:last-child {
					border-bottom: none;
				}

				&:hover {
					border-left: solid 3px #7468bd !important;
					background-color: #f7faff;
					border-radius: 0;
				}

				&.active {
					background-color: transparent;
					border: none;
					border-left: solid 3px #7468bd !important;
					background-color: #f7faff;
					border-radius: 0;

					a,
					i {
						color: #7468bd;
					}
				}
			}
		}
		@media (max-width: 670px) {
			position: absolute;
			width: 300px;
			left: -300px;
			min-height: 100vh;
			z-index: 1001;

			&.open {
				left: 0;
			}
		}
	}
	//----------------------------------------------------------------------------->
	//== CHAT CONTENT
	//----------------------------------------------------------------------------->
	.center-content {
		flex: 1 0 100%;
		position: relative;
		border-left: 1px solid rgba(234, 243, 253, 1);
		border-right: 1px solid rgba(234, 243, 253, 1);

		#mobile-aside-menu-trigger {
			display: none;
			float: left;
		}

		.toolbar {
			background: #fff;
			height: 78px;

			.actions.top-left {
				left: 15px;
				top: 24px;

				.avatar-wrapper {
					width: auto;
					height: auto;

					.badge {
						position: absolute;
						top: -2px;
						border: solid #fff 1px;
						width: 10px;
						height: 10px;
						padding: 1px;
					}
				}
			}
		}

		.chat-contents {
			height: 100%;

			.chat-content-wrap {
				height: 100%;
				position: relative;
				width: 100%;

				.chat-wrap-inner {
					bottom: 158px;
					left: 0;
					overflow: auto;
					position: absolute;
					right: 0;
					top: 0;

					.chats {
						padding: 30px 15px;

						.chat {
							.chat-body {
								display: block;
								margin: 10px 0 0;
								overflow: hidden;

								&:first-child {
									margin-top: 0;
								}
							}
						}

						.chat.chat-right .chat-content {
							position: relative;
							display: block;
							float: right;
							padding: 8px 15px;
							margin: 0;
							clear: both;
							background: rgb(65,55,145);
							background: -moz-linear-gradient(-45deg, rgba(65,55,145,1) 1%, rgba(173,99,201,1) 100%);
							background: -webkit-linear-gradient(-45deg, rgba(65,55,145,1) 1%,rgba(173,99,201,1) 100%);
							background: linear-gradient(135deg, rgba(65,55,145,1) 1%,rgba(173,99,201,1) 100%);
							border-radius: 10px 2px 2px 10px;
							max-width: 60%;

							a,
							p {
								color: #fff;
							}
						}

						.chat-bubble {
							display: block;
							width: 100%;
							float: left;
							margin-bottom: 10px;
							font-size: rem(13);

							p {
								font-size: rem(13);
							}
						}

						.chat.chat-right .chat-bubble:last-child .chat-content {
							border-bottom-right-radius: 10px;
						}

						.chat.chat-right .chat-bubble:first-child .chat-content {
							border-top-right-radius: 10px;
						}

						.chat-content > p {
							margin-bottom: 0;
							word-wrap: break-word;
						}

						.chat-meta {
							.chat-file-name,
							.chat-file-size {
								color: rgba(255, 255, 255, 0.5);
								font-size: rem(11);
							}
						}

						.chat-time {
							color: rgba(255, 255, 255, 0.5);
							display: block;
							font-size: rem(11);
						}

						.chat-right .chat-time {
							text-align: right;
						}

						.chat-line {
							border-bottom: 1px solid #d3dce9;
							height: 12px;
							margin: 7px 0 20px;
							position: relative;
							text-align: center;
						}

						.chat-date {
							background-color: #f3f3f3;
							color: #000;
							font-size: rem(11);
							padding: 0 11px;
						}

						.chat-avatar {
							float: right;
						}

						.chat-avatar .avatar {
							line-height: 30px;
							height: 30px;
							width: 30px;
						}

						.chat-left .chat-avatar {
							float: left;
						}

						.chat-left .chat-body {
							margin-right: 0;
							margin-left: 30px;
							padding-right: 20px;
						}

						.chat-left .chat-content {
							background-color: #fff;
							border: 1px solid rgba(211, 220, 233, .6);
							float: left;
							position: relative;
							padding: 8px 15px;
							border-radius: 2px 10px 10px 2px;
							max-width: 60%;
						}

						.avatar {
							background-color: #aaa;
							border-radius: 50%;
							color: #fff;
							display: inline-block;
							font-weight: 500;
							height: 38px;
							line-height: 38px;
							margin: 0 10px 0 0;
							overflow: hidden;
							text-align: center;
							text-decoration: none;
							text-transform: uppercase;
							vertical-align: middle;
							width: 38px;
							position: relative;
							white-space: nowrap;
						}

						.avatar:hover {
							color: #fff;
						}

						.avatar > img {
							width: 100%;
							display: block;
						}

						.chat.chat-left .chat-bubble:first-child .chat-content {
							border-top-left-radius: 10px;
							margin-top: 0;
						}

						.chat.chat-left .chat-bubble:last-child .chat-content {
							border-bottom-left-radius: 10px;
						}

						.chat-left .chat-time {
							color: #333;
						}

						.attach-list {
							color: #adb7be;
							padding: 5px 0 0;
							line-height: 24px;
							margin: 0;
							list-style: none;
						}

						.attach-list i {
							margin-right: 3px;
							font-size: rem(16);
						}

						.attach-list a {
							word-wrap: break-word;
						}
					}
				}
			}
		}

		.card-footer {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 80px;

			.actions.top-left {
				left: 15px;
				top: 24px;
			}
		}
		@media (max-width: 670px) {
			.toolbar {
				.actions.top-left {
					.avatar-wrapper {
						margin-left: 20px;
					}

					#mobile-aside-menu-trigger {
						display: block;
					}
				}
			}
		}
	}
	//----------------------------------------------------------------------------->
	//== CHAT PROFILE
	//----------------------------------------------------------------------------->
	.aside-right {
		min-width: 240px;
		width: 240px;
		max-width: 240px;
		@media (max-width: 1280px) {
			position: absolute;
			width: 240px;
			right: -240px;
			min-height: 100vh;
			background: #fff;

			&.open {
				right: 0;
				z-index: 1001;
			}
		}
	}
	@media (max-width: 670px) {
		padding: 0 !important;

		> .card {
			overflow: hidden;
			height: calc(100vh - 65px);
			margin: 0;
		}
	}
}
//----------------------------------------------------------------------------->
//== Vertical Layout
//----------------------------------------------------------------------------->

.layout-vertical {
	#message-wrapper {
		> .card {
			overflow: hidden;
			height: calc(100vh - 200px);
		}
	}
}