#apbd-cht-admin-container .apc-main-container, .apbd-cht-admin-container .apc-main-container {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	height: 100%;
	.apc-spinner {
		display: inline;
		margin-right: 10px;
		&>div {
			width: 8px;
			height: 8px;
			background-color: #000;
			border-radius: 100%;
			display: inline-block;
			-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
			animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		}
		.apc-bounce1 {
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}
		.apc-bounce2 {
			-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}
	}
	.apc-diver {
		background: #fef8f8;
		color: #b22e20;
		font-weight: bold;
		border-bottom: 0px;
		border-top: 0px;
		padding: 2px;
		position: relative;
		min-height: 35px;
		input {
			color: #aaaaaa;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			border: 0px;
			padding: 0 10px;
			height: 26px;
			margin-top: -2px;
			position: absolute;
			left: 5px;
			right: 5px;
			font-weight: 500;
			top: 5px;
		}
	}
	&&.apc-chat-container, &&.apc-user-list, &&.apc-chat-user-info {
		padding: 0px 10px 0px 10px;
	}
	&&#chat-canned-msg-btn {
		margin-top: -2px;
	}
	&&.apc-loading {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 991;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		&>.apc-loading-msg {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			top: 50%;
			margin-top: -20px;
			font-weight: bold;
			font-size: 24px;
			color: #fff;
		}
	}
	&>.apc-loading-msg {
		position: absolute;
		left: 0;
		right: 0;
		text-align: center;
		top: 50%;
		margin-top: -20px;
		font-weight: bold;
		font-size: 24px;
		color: #fff;
	}
	&&&>div {
		display: inline;
		height: 100%;
		.apc-pnl-header {
			font-weight: bold;
			border-bottom: 1px solid rgba(201, 201, 201, 0.67);
			margin-left: -10px;
			margin-right: -10px;
			padding: 10px;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 50px;
			.apc-open-user-list, .apc-open-chatinfo {
				display: none;
			}
			.apc-chat-desi {
				font-size: 10px;
			}
		}
		.apc-pnl-content {
			height: 80%;
			height: calc(100% - 50px);
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-align-items: flex-start;
			align-items: flex-start;
			&>div {
				margin-right: -10px;
				margin-left: -10px;
				padding: 10px;
				width: 100%;
				width: calc(100% ;
				&&.apc-pnl-content .apc-chat-item-content {
					height: 100%;
					position: relative;
					&>.apc-msgs {
						overflow: auto;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						padding: 30px;
						.apc-load-move {
							display: none;
						}
						.apc-chat-img-dl {
							display: block;
						}
						.apc-chat-img {
							display: block;
							img {
								max-height: 200px;
								border: 2px solid rgba(204, 204, 204, 0.31);
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								border-radius: 5px;
								&:hover {
									border: 2px solid rgba(175, 34, 38, 0.44);
								}
							}
						}
						.apc-msg-time {
							display: table;
							clear: both;
							width: 90%;
							width: calc(100% - 64px);
							text-align: right;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: #595e5f;
						}
						&>.apc-msg-sys-item {
							overflow-wrap: break-word;
							.apc-msg {
								float: none;
								width: 90%;
								background: rgba(77, 77, 77, 0.3);
								margin-left: 11px;
								border-radius: 16px 16px 16px 16px;
								padding: 7px;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								margin: 5px auto;
								&>.apc-msg-item-header {
									border-bottom: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: -2px;
									margin-bottom: 5px;
									padding-bottom: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&>.apc-msg-item-footer {
									border-top: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: 5px;
									padding-top: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&-time {
									width: 90%;
									width: calc(100% - 103px);
								}
							}
						}
						&>.apc-msg-item {
							margin: 10px 0;
							overflow-wrap: break-word;
							&>.apc-umg {
								border-radius: 50%;
								background: #fff;
								width: 40px;
								height: 40px;
								float: left;
								overflow: hidden;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								img {
									width: 40px;
									height: 40px;
								}
							}
							&>.apc-msg {
								margin-top: 5px;
								float: left;
								width: 83%;
								width: calc(100% - 103px);
								background: rgb(255 255 255);
								margin-left: 11px;
								border-radius: 6px 6px 6px 16px;
								border: 1px solid #e4e8ee;
								padding: 7px;
							}
							&.apc-me>.apc-umg {
								float: right;
							}
							&.apc-me>.apc-msg {
								float: right;
								border-radius: 6px 4px 16px 6px;
								margin-right: 11px;
								margin-left: 0px;
								background: rgba(63,92,134,.14);
							}
							&:after {
								content: "";
								display: table;
								clear: both;
							}
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
				}
				&>.apc-msgs {
					overflow: auto;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 30px;
					.apc-load-move {
						display: none;
					}
					.apc-chat-img-dl {
						display: block;
					}
					.apc-chat-img {
						display: block;
						img {
							max-height: 200px;
							border: 2px solid rgba(204, 204, 204, 0.31);
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							&:hover {
								border: 2px solid rgba(175, 34, 38, 0.44);
							}
						}
					}
					.apc-msg-time {
						display: table;
						clear: both;
						width: 90%;
						width: calc(100% - 64px);
						text-align: right;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: #595e5f;
					}
					&>.apc-msg-sys-item {
						overflow-wrap: break-word;
						.apc-msg {
							float: none;
							width: 90%;
							background: rgba(77, 77, 77, 0.3);
							margin-left: 11px;
							border-radius: 16px 16px 16px 16px;
							padding: 7px;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							margin: 5px auto;
							&>.apc-msg-item-header {
								border-bottom: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: -2px;
								margin-bottom: 5px;
								padding-bottom: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&>.apc-msg-item-footer {
								border-top: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: 5px;
								padding-top: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&-time {
								width: 90%;
								width: calc(100% - 103px);
							}
						}
					}
					&>.apc-msg-item {
						margin: 10px 0;
						overflow-wrap: break-word;
						&>.apc-umg {
							border-radius: 50%;
							background: #fff;
							width: 40px;
							height: 40px;
							float: left;
							overflow: hidden;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							img {
								width: 40px;
								height: 40px;
							}
						}
						&>.apc-msg {
							margin-top: 5px;
							float: left;
							width: 83%;
							width: calc(100% - 103px);
							background: rgb(255 255 255);
							margin-left: 11px;
							border-radius: 6px 6px 6px 16px;
							border: 1px solid #e4e8ee;
							padding: 7px;
						}
						&.apc-me>.apc-umg {
							float: right;
						}
						&.apc-me>.apc-msg {
							float: right;
							border-radius: 6px 4px 16px 6px;
							margin-right: 11px;
							margin-left: 0px;
							background: rgba(63,92,134,.14);
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				img {
					width: 40px;
					height: 40px;
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&&.apc-pnl-content .apc-chat-item-msg-divider {
					height: 6px;
					border-top: 1px solid rgba(201, 201, 201, 0.37);
					border-bottom: 1px solid rgba(201, 201, 201, 0.37);
					text-align: center;
					color: #cccccc;
					background: #fffefe;
					background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
					filter: progid;
					padding: 1px;
					line-height: 0;
					font-weight: bold;
					cursor: row-resize;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
				&&.apc-pnl-content .apc-chat-msg-type-panel {
					position: relative;
					border-top: 1px solid rgba(201, 201, 201, 0.67);
					height: 100px;
					.apc-file-up-status {
						position: absolute;
						top: -33px;
						right: 22px;
						display: none;
						background: rgba(0, 0, 0, 0.66);
						padding: 5px;
						color: #ffffff;
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
					}
					.panel {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						border: none;
						padding: 0;
						margin-bottom: 0 ;
						.panel-heading {
							padding: 0 15px;
							height: 24px;
							-webkit-border-radius: 0 ;
							-moz-border-radius: 0 ;
							border-radius: 0 ;
							.form-group {
								margin: 0;
								.control-label {
									margin-top: -2px;
								}
								.form-control {
									height: 20px;
									margin-top: 2px;
									&:focus {
										background-image: none ;
										background-size: 0;
										box-shadow: none;
										outline: 0 none;
										transition-duration: .3s;
									}
									&+.btn {
										right: 2px;
										top: 1px;
										position: absolute;
									}
								}
								select {
									min-width: 200px;
									font-size: 12px;
									padding: 0;
									&+.btn {
										height: 19px;
										font-size: 10px;
									}
								}
								.control-label {
									display: none;
								}
								.form-control {
									margin-bottom: 0 ;
									margin-top: 1.5px;
									width: calc(100% - 40px) ;
								}
							}
						}
						.panel-body {
							position: relative;
							height: calc(100% - 24px);
							&>.apc-send-ctrl {
								text-align: center;
								white-space: nowrap;
								margin-right: 5px;
								position: absolute;
								right: 13px;
								z-index: 99;
								&>i {
									padding: 5px;
									font-size: 20px;
									color: #cccccc;
									&:hover {
										color: #4d4d4d;
									}
								}
							}
							&>textarea {
								position: absolute;
								left: 0;
								right: 110px;
								height: 99%;
								width: 99%;
								width: calc(100% - 110px);
								bottom: 0;
								top: 0;
								border: none;
								padding: 5px;
								resize: none;
								z-index: 98;
							}
						}
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 0;
						height: 99%;
						height: calc(100% - 2px);
						width: 99%;
						width: calc(100% - 2px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
					}
					.apc-msg-typing {
						position: absolute;
						top: -23px;
						left: 10px;
						background: rgba(0, 0, 0, 0.09);
						padding: 2px 10px;
						border-radius: 9px;
						font-size: 10px;
						color: #616564;
						display: none;
					}
					.panel {
						margin-top: -2px;
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
				}
				.apc-file-up-status {
					position: absolute;
					top: -33px;
					right: 22px;
					display: none;
					background: rgba(0, 0, 0, 0.66);
					padding: 5px;
					color: #ffffff;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				.panel {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: none;
					padding: 0;
					margin-bottom: 0 ;
					.panel-heading {
						padding: 0 15px;
						height: 24px;
						-webkit-border-radius: 0 ;
						-moz-border-radius: 0 ;
						border-radius: 0 ;
						.form-group {
							margin: 0;
							.control-label {
								margin-top: -2px;
							}
							.form-control {
								height: 20px;
								margin-top: 2px;
								&:focus {
									background-image: none ;
									background-size: 0;
									box-shadow: none;
									outline: 0 none;
									transition-duration: .3s;
								}
								&+.btn {
									right: 2px;
									top: 1px;
									position: absolute;
								}
							}
							select {
								min-width: 200px;
								font-size: 12px;
								padding: 0;
								&+.btn {
									height: 19px;
									font-size: 10px;
								}
							}
							.control-label {
								display: none;
							}
							.form-control {
								margin-bottom: 0 ;
								margin-top: 1.5px;
								width: calc(100% - 40px) ;
							}
						}
					}
					.panel-body {
						position: relative;
						height: calc(100% - 24px);
						&>.apc-send-ctrl {
							text-align: center;
							white-space: nowrap;
							margin-right: 5px;
							position: absolute;
							right: 13px;
							z-index: 99;
							&>i {
								padding: 5px;
								font-size: 20px;
								color: #cccccc;
								&:hover {
									color: #4d4d4d;
								}
							}
						}
						&>textarea {
							position: absolute;
							left: 0;
							right: 110px;
							height: 99%;
							width: 99%;
							width: calc(100% - 110px);
							bottom: 0;
							top: 0;
							border: none;
							padding: 5px;
							resize: none;
							z-index: 98;
						}
					}
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
				&:hover {
					color: #4d4d4d;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 0;
					height: 99%;
					height: calc(100% - 2px);
					width: 99%;
					width: calc(100% - 2px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
				}
				.apc-msg-typing {
					position: absolute;
					top: -23px;
					left: 10px;
					background: rgba(0, 0, 0, 0.09);
					padding: 2px 10px;
					border-radius: 9px;
					font-size: 10px;
					color: #616564;
					display: none;
				}
				&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
					display: block;
					position: absolute;
					top: 0px;
					z-index: 99;
					padding: 17px 15px;
				}
				&&.apc-pnl-header .apc-open-user-list {
					left: -5px;
				}
				&&.apc-pnl-header .apc-open-chatinfo {
					right: 5px;
				}
				.panel {
					margin-top: -2px;
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
		}
	}
	.apc-pnl-header {
		font-weight: bold;
		border-bottom: 1px solid rgba(201, 201, 201, 0.67);
		margin-left: -10px;
		margin-right: -10px;
		padding: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 50px;
		.apc-open-user-list, .apc-open-chatinfo {
			display: none;
		}
		.apc-chat-desi {
			font-size: 10px;
		}
	}
	.apc-open-user-list, .apc-open-chatinfo {
		display: none;
	}
	.apc-chat-desi {
		font-size: 10px;
	}
	.apc-pnl-content {
		height: 80%;
		height: calc(100% - 50px);
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		&>div {
			margin-right: -10px;
			margin-left: -10px;
			padding: 10px;
			width: 100%;
			width: calc(100% ;
			&&.apc-pnl-content .apc-chat-item-content {
				height: 100%;
				position: relative;
				&>.apc-msgs {
					overflow: auto;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 30px;
					.apc-load-move {
						display: none;
					}
					.apc-chat-img-dl {
						display: block;
					}
					.apc-chat-img {
						display: block;
						img {
							max-height: 200px;
							border: 2px solid rgba(204, 204, 204, 0.31);
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							&:hover {
								border: 2px solid rgba(175, 34, 38, 0.44);
							}
						}
					}
					.apc-msg-time {
						display: table;
						clear: both;
						width: 90%;
						width: calc(100% - 64px);
						text-align: right;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: #595e5f;
					}
					&>.apc-msg-sys-item {
						overflow-wrap: break-word;
						.apc-msg {
							float: none;
							width: 90%;
							background: rgba(77, 77, 77, 0.3);
							margin-left: 11px;
							border-radius: 16px 16px 16px 16px;
							padding: 7px;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							margin: 5px auto;
							&>.apc-msg-item-header {
								border-bottom: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: -2px;
								margin-bottom: 5px;
								padding-bottom: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&>.apc-msg-item-footer {
								border-top: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: 5px;
								padding-top: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&-time {
								width: 90%;
								width: calc(100% - 103px);
							}
						}
					}
					&>.apc-msg-item {
						margin: 10px 0;
						overflow-wrap: break-word;
						&>.apc-umg {
							border-radius: 50%;
							background: #fff;
							width: 40px;
							height: 40px;
							float: left;
							overflow: hidden;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							img {
								width: 40px;
								height: 40px;
							}
						}
						&>.apc-msg {
							margin-top: 5px;
							float: left;
							width: 83%;
							width: calc(100% - 103px);
							background: rgb(255 255 255);
							margin-left: 11px;
							border-radius: 6px 6px 6px 16px;
							border: 1px solid #e4e8ee;
							padding: 7px;
						}
						&.apc-me>.apc-umg {
							float: right;
						}
						&.apc-me>.apc-msg {
							float: right;
							border-radius: 6px 4px 16px 6px;
							margin-right: 11px;
							margin-left: 0px;
							background: rgba(63,92,134,.14);
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
			}
			&>.apc-msgs {
				overflow: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding: 30px;
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			img {
				max-height: 200px;
				border: 2px solid rgba(204, 204, 204, 0.31);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
			}
			&:hover {
				border: 2px solid rgba(175, 34, 38, 0.44);
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			.apc-msg {
				float: none;
				width: 90%;
				background: rgba(77, 77, 77, 0.3);
				margin-left: 11px;
				border-radius: 16px 16px 16px 16px;
				padding: 7px;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				margin: 5px auto;
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
			}
			&>.apc-msg-item-header {
				border-bottom: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: -2px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&>.apc-msg-item-footer {
				border-top: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: 5px;
				padding-top: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&-time {
				width: 90%;
				width: calc(100% - 103px);
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&>.apc-umg {
				border-radius: 50%;
				background: #fff;
				width: 40px;
				height: 40px;
				float: left;
				overflow: hidden;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				img {
					width: 40px;
					height: 40px;
				}
			}
			img {
				width: 40px;
				height: 40px;
			}
			&>.apc-msg {
				margin-top: 5px;
				float: left;
				width: 83%;
				width: calc(100% - 103px);
				background: rgb(255 255 255);
				margin-left: 11px;
				border-radius: 6px 6px 6px 16px;
				border: 1px solid #e4e8ee;
				padding: 7px;
			}
			&.apc-me>.apc-umg {
				float: right;
			}
			&.apc-me>.apc-msg {
				float: right;
				border-radius: 6px 4px 16px 6px;
				margin-right: 11px;
				margin-left: 0px;
				background: rgba(63,92,134,.14);
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			&&.apc-pnl-content .apc-chat-item-msg-divider {
				height: 6px;
				border-top: 1px solid rgba(201, 201, 201, 0.37);
				border-bottom: 1px solid rgba(201, 201, 201, 0.37);
				text-align: center;
				color: #cccccc;
				background: #fffefe;
				background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
				background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
				background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
				filter: progid;
				padding: 1px;
				line-height: 0;
				font-weight: bold;
				cursor: row-resize;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			&&.apc-pnl-content .apc-chat-msg-type-panel {
				position: relative;
				border-top: 1px solid rgba(201, 201, 201, 0.67);
				height: 100px;
				.apc-file-up-status {
					position: absolute;
					top: -33px;
					right: 22px;
					display: none;
					background: rgba(0, 0, 0, 0.66);
					padding: 5px;
					color: #ffffff;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				.panel {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: none;
					padding: 0;
					margin-bottom: 0 ;
					.panel-heading {
						padding: 0 15px;
						height: 24px;
						-webkit-border-radius: 0 ;
						-moz-border-radius: 0 ;
						border-radius: 0 ;
						.form-group {
							margin: 0;
							.control-label {
								margin-top: -2px;
							}
							.form-control {
								height: 20px;
								margin-top: 2px;
								&:focus {
									background-image: none ;
									background-size: 0;
									box-shadow: none;
									outline: 0 none;
									transition-duration: .3s;
								}
								&+.btn {
									right: 2px;
									top: 1px;
									position: absolute;
								}
							}
							select {
								min-width: 200px;
								font-size: 12px;
								padding: 0;
								&+.btn {
									height: 19px;
									font-size: 10px;
								}
							}
							.control-label {
								display: none;
							}
							.form-control {
								margin-bottom: 0 ;
								margin-top: 1.5px;
								width: calc(100% - 40px) ;
							}
						}
					}
					.panel-body {
						position: relative;
						height: calc(100% - 24px);
						&>.apc-send-ctrl {
							text-align: center;
							white-space: nowrap;
							margin-right: 5px;
							position: absolute;
							right: 13px;
							z-index: 99;
							&>i {
								padding: 5px;
								font-size: 20px;
								color: #cccccc;
								&:hover {
									color: #4d4d4d;
								}
							}
						}
						&>textarea {
							position: absolute;
							left: 0;
							right: 110px;
							height: 99%;
							width: 99%;
							width: calc(100% - 110px);
							bottom: 0;
							top: 0;
							border: none;
							padding: 5px;
							resize: none;
							z-index: 98;
						}
					}
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 0;
					height: 99%;
					height: calc(100% - 2px);
					width: 99%;
					width: calc(100% - 2px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
				}
				.apc-msg-typing {
					position: absolute;
					top: -23px;
					left: 10px;
					background: rgba(0, 0, 0, 0.09);
					padding: 2px 10px;
					border-radius: 9px;
					font-size: 10px;
					color: #616564;
					display: none;
				}
				.panel {
					margin-top: -2px;
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
			}
			.apc-file-up-status {
				position: absolute;
				top: -33px;
				right: 22px;
				display: none;
				background: rgba(0, 0, 0, 0.66);
				padding: 5px;
				color: #ffffff;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			.panel {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: none;
				padding: 0;
				margin-bottom: 0 ;
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.form-group {
				margin: 0;
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
			}
			.control-label {
				margin-top: -2px;
			}
			.form-control {
				height: 20px;
				margin-top: 2px;
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
			&:focus {
				background-image: none ;
				background-size: 0;
				box-shadow: none;
				outline: 0 none;
				transition-duration: .3s;
			}
			select {
				min-width: 200px;
				font-size: 12px;
				padding: 0;
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
			}
			&+.btn {
				height: 19px;
				font-size: 10px;
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&>.apc-send-ctrl {
				text-align: center;
				white-space: nowrap;
				margin-right: 5px;
				position: absolute;
				right: 13px;
				z-index: 99;
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
			}
			&>i {
				padding: 5px;
				font-size: 20px;
				color: #cccccc;
				&:hover {
					color: #4d4d4d;
				}
			}
			&:hover {
				color: #4d4d4d;
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 110px;
				height: 99%;
				width: 99%;
				width: calc(100% - 110px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
				z-index: 98;
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 0;
				height: 99%;
				height: calc(100% - 2px);
				width: 99%;
				width: calc(100% - 2px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
			}
			.apc-msg-typing {
				position: absolute;
				top: -23px;
				left: 10px;
				background: rgba(0, 0, 0, 0.09);
				padding: 2px 10px;
				border-radius: 9px;
				font-size: 10px;
				color: #616564;
				display: none;
			}
			&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
				display: block;
				position: absolute;
				top: 0px;
				z-index: 99;
				padding: 17px 15px;
			}
			&&.apc-pnl-header .apc-open-user-list {
				left: -5px;
			}
			&&.apc-pnl-header .apc-open-chatinfo {
				right: 5px;
			}
			.panel {
				margin-top: -2px;
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
			.control-label {
				display: none;
			}
			.form-control {
				margin-bottom: 0 ;
				margin-top: 1.5px;
				width: calc(100% - 40px) ;
			}
			&+.btn {
				right: 2px;
				top: 1px;
				position: absolute;
			}
		}
	}
	&>div {
		margin-right: -10px;
		margin-left: -10px;
		padding: 10px;
		width: 100%;
		width: calc(100% ;
		&&.apc-pnl-content .apc-chat-item-content {
			height: 100%;
			position: relative;
			&>.apc-msgs {
				overflow: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding: 30px;
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
		}
		&>.apc-msgs {
			overflow: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 30px;
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
		.apc-load-move {
			display: none;
		}
		.apc-chat-img-dl {
			display: block;
		}
		.apc-chat-img {
			display: block;
			img {
				max-height: 200px;
				border: 2px solid rgba(204, 204, 204, 0.31);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
			}
		}
		img {
			max-height: 200px;
			border: 2px solid rgba(204, 204, 204, 0.31);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			&:hover {
				border: 2px solid rgba(175, 34, 38, 0.44);
			}
		}
		&:hover {
			border: 2px solid rgba(175, 34, 38, 0.44);
		}
		.apc-msg-time {
			display: table;
			clear: both;
			width: 90%;
			width: calc(100% - 64px);
			text-align: right;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: #595e5f;
		}
		&>.apc-msg-sys-item {
			overflow-wrap: break-word;
			.apc-msg {
				float: none;
				width: 90%;
				background: rgba(77, 77, 77, 0.3);
				margin-left: 11px;
				border-radius: 16px 16px 16px 16px;
				padding: 7px;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				margin: 5px auto;
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
			}
		}
		.apc-msg {
			float: none;
			width: 90%;
			background: rgba(77, 77, 77, 0.3);
			margin-left: 11px;
			border-radius: 16px 16px 16px 16px;
			padding: 7px;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			margin: 5px auto;
			&>.apc-msg-item-header {
				border-bottom: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: -2px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&>.apc-msg-item-footer {
				border-top: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: 5px;
				padding-top: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&-time {
				width: 90%;
				width: calc(100% - 103px);
			}
		}
		&>.apc-msg-item-header {
			border-bottom: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: -2px;
			margin-bottom: 5px;
			padding-bottom: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&>.apc-msg-item-footer {
			border-top: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: 5px;
			padding-top: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&-time {
			width: 90%;
			width: calc(100% - 103px);
		}
		&>.apc-msg-item {
			margin: 10px 0;
			overflow-wrap: break-word;
			&>.apc-umg {
				border-radius: 50%;
				background: #fff;
				width: 40px;
				height: 40px;
				float: left;
				overflow: hidden;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				img {
					width: 40px;
					height: 40px;
				}
			}
			&>.apc-msg {
				margin-top: 5px;
				float: left;
				width: 83%;
				width: calc(100% - 103px);
				background: rgb(255 255 255);
				margin-left: 11px;
				border-radius: 6px 6px 6px 16px;
				border: 1px solid #e4e8ee;
				padding: 7px;
			}
			&.apc-me>.apc-umg {
				float: right;
			}
			&.apc-me>.apc-msg {
				float: right;
				border-radius: 6px 4px 16px 6px;
				margin-right: 11px;
				margin-left: 0px;
				background: rgba(63,92,134,.14);
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
		&>.apc-umg {
			border-radius: 50%;
			background: #fff;
			width: 40px;
			height: 40px;
			float: left;
			overflow: hidden;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			img {
				width: 40px;
				height: 40px;
			}
		}
		img {
			width: 40px;
			height: 40px;
		}
		&>.apc-msg {
			margin-top: 5px;
			float: left;
			width: 83%;
			width: calc(100% - 103px);
			background: rgb(255 255 255);
			margin-left: 11px;
			border-radius: 6px 6px 6px 16px;
			border: 1px solid #e4e8ee;
			padding: 7px;
		}
		&.apc-me>.apc-umg {
			float: right;
		}
		&.apc-me>.apc-msg {
			float: right;
			border-radius: 6px 4px 16px 6px;
			margin-right: 11px;
			margin-left: 0px;
			background: rgba(63,92,134,.14);
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
		&&.apc-pnl-content .apc-chat-item-msg-divider {
			height: 6px;
			border-top: 1px solid rgba(201, 201, 201, 0.37);
			border-bottom: 1px solid rgba(201, 201, 201, 0.37);
			text-align: center;
			color: #cccccc;
			background: #fffefe;
			background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
			background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
			background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
			filter: progid;
			padding: 1px;
			line-height: 0;
			font-weight: bold;
			cursor: row-resize;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		&&.apc-pnl-content .apc-chat-msg-type-panel {
			position: relative;
			border-top: 1px solid rgba(201, 201, 201, 0.67);
			height: 100px;
			.apc-file-up-status {
				position: absolute;
				top: -33px;
				right: 22px;
				display: none;
				background: rgba(0, 0, 0, 0.66);
				padding: 5px;
				color: #ffffff;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			.panel {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: none;
				padding: 0;
				margin-bottom: 0 ;
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 0;
				height: 99%;
				height: calc(100% - 2px);
				width: 99%;
				width: calc(100% - 2px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
			}
			.apc-msg-typing {
				position: absolute;
				top: -23px;
				left: 10px;
				background: rgba(0, 0, 0, 0.09);
				padding: 2px 10px;
				border-radius: 9px;
				font-size: 10px;
				color: #616564;
				display: none;
			}
			.panel {
				margin-top: -2px;
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
		}
		.apc-file-up-status {
			position: absolute;
			top: -33px;
			right: 22px;
			display: none;
			background: rgba(0, 0, 0, 0.66);
			padding: 5px;
			color: #ffffff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		.panel {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			padding: 0;
			margin-bottom: 0 ;
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		.panel-heading {
			padding: 0 15px;
			height: 24px;
			-webkit-border-radius: 0 ;
			-moz-border-radius: 0 ;
			border-radius: 0 ;
			.form-group {
				margin: 0;
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
			}
		}
		.form-group {
			margin: 0;
			.control-label {
				margin-top: -2px;
			}
			.form-control {
				height: 20px;
				margin-top: 2px;
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
			select {
				min-width: 200px;
				font-size: 12px;
				padding: 0;
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
			}
			.control-label {
				display: none;
			}
			.form-control {
				margin-bottom: 0 ;
				margin-top: 1.5px;
				width: calc(100% - 40px) ;
			}
		}
		.control-label {
			margin-top: -2px;
		}
		.form-control {
			height: 20px;
			margin-top: 2px;
			&:focus {
				background-image: none ;
				background-size: 0;
				box-shadow: none;
				outline: 0 none;
				transition-duration: .3s;
			}
			&+.btn {
				right: 2px;
				top: 1px;
				position: absolute;
			}
		}
		&:focus {
			background-image: none ;
			background-size: 0;
			box-shadow: none;
			outline: 0 none;
			transition-duration: .3s;
		}
		select {
			min-width: 200px;
			font-size: 12px;
			padding: 0;
			&+.btn {
				height: 19px;
				font-size: 10px;
			}
		}
		&+.btn {
			height: 19px;
			font-size: 10px;
		}
		.panel-body {
			position: relative;
			height: calc(100% - 24px);
			&>.apc-send-ctrl {
				text-align: center;
				white-space: nowrap;
				margin-right: 5px;
				position: absolute;
				right: 13px;
				z-index: 99;
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 110px;
				height: 99%;
				width: 99%;
				width: calc(100% - 110px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
				z-index: 98;
			}
		}
		&>.apc-send-ctrl {
			text-align: center;
			white-space: nowrap;
			margin-right: 5px;
			position: absolute;
			right: 13px;
			z-index: 99;
			&>i {
				padding: 5px;
				font-size: 20px;
				color: #cccccc;
				&:hover {
					color: #4d4d4d;
				}
			}
		}
		&>i {
			padding: 5px;
			font-size: 20px;
			color: #cccccc;
			&:hover {
				color: #4d4d4d;
			}
		}
		&:hover {
			color: #4d4d4d;
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 110px;
			height: 99%;
			width: 99%;
			width: calc(100% - 110px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
			z-index: 98;
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 0;
			height: 99%;
			height: calc(100% - 2px);
			width: 99%;
			width: calc(100% - 2px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
		}
		.apc-msg-typing {
			position: absolute;
			top: -23px;
			left: 10px;
			background: rgba(0, 0, 0, 0.09);
			padding: 2px 10px;
			border-radius: 9px;
			font-size: 10px;
			color: #616564;
			display: none;
		}
		&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
			display: block;
			position: absolute;
			top: 0px;
			z-index: 99;
			padding: 17px 15px;
		}
		&&.apc-pnl-header .apc-open-user-list {
			left: -5px;
		}
		&&.apc-pnl-header .apc-open-chatinfo {
			right: 5px;
		}
		.panel {
			margin-top: -2px;
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		&-heading {
			margin-top: -4px;
			padding: 1px 2px 0 2px;
		}
		.control-label {
			display: none;
		}
		.form-control {
			margin-bottom: 0 ;
			margin-top: 1.5px;
			width: calc(100% - 40px) ;
		}
		&+.btn {
			right: 2px;
			top: 1px;
			position: absolute;
		}
	}
	&&.apc-user-list {
		width: 25%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
		.apc-pnl-content>.slimScrollDiv {
			width: calc(100% ;
			padding-top: 0;
		}
		ul.apc-chat-list, ul.apc-chat-end-list {
			padding: 0;
			margin: 0 -10px;
			width: 100%;
			width: calc(100% ;
			&>li {
				cursor: pointer;
				display: block;
				width: 100%;
				padding: 10px 20px 10px 25px;
				list-style: none;
				border-bottom: 1px solid rgba(201, 201, 201, 0.67);
				border-left: 4px solid rgba(201, 201, 201, 0.67);
				position: relative;
				span.apc-rtc-c {
					display: none;
					position: absolute;
					right: 13px;
					top: 50%;
					margin-top: -12px;
					&.badge {
						margin-top: -10px;
					}
					span.apc-btn-rc {
						padding: 0 2px;
					}
				}
				&.has-msg:not(.apc-active) span.apc-rtc-c {
					display: block;
				}
				&.has-msg:not(.apc-active)::before {
					-webkit-animation-name: flash;
					animation-name: flash;
					animation-iteration-count: infinite;
					animation-duration: 2s;
				}
				&.apc-active {
					font-weight: bold;
					position: relative;
					border-left: 4px solid rgba(0, 0, 0, 0.3) ;
					&::after {
						content: ';
						position: absolute;
						width: 20px;
						right: -2px;
						z-index: 99;
						background: #fff;
						top: 0;
						bottom: 0;
						font-size: 21px;
						line-height: 35px;
						color: rgba(0, 0, 0, 0.12);
						font-weight: normal;
					}
				}
				&::before {
					content: ' ';
					position: absolute;
					width: 8px;
					height: 8px;
					left: 12px;
					top: 50%;
					margin-top: -4px;
					z-index: 99;
					background: #00a65a;
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
				}
				&:hover {
					border-left: 4px solid rgba(176, 176, 176, 0.67);
				}
			}
		}
		ul.apc-chat-end-list>li::before {
			background: #cc0000;
			width: 8px;
			height: 8px;
			left: 12px;
			top: 50%;
			margin-top: -3px;
		}
		&.apc-show {
			left: 0;
		}
		.apc-close-btn {
			right: 7px;
			&&&:hover {
				background: rgba(0, 0, 0, 0.13);
			}
		}
		ul.apc-chat-list>li.apc-active::after {
			display: none;
		}
	}
	.apc-pnl-content>.slimScrollDiv {
		width: calc(100% ;
		padding-top: 0;
	}
	ul.apc-chat-list, ul.apc-chat-end-list {
		padding: 0;
		margin: 0 -10px;
		width: 100%;
		width: calc(100% ;
		&>li {
			cursor: pointer;
			display: block;
			width: 100%;
			padding: 10px 20px 10px 25px;
			list-style: none;
			border-bottom: 1px solid rgba(201, 201, 201, 0.67);
			border-left: 4px solid rgba(201, 201, 201, 0.67);
			position: relative;
			span.apc-rtc-c {
				display: none;
				position: absolute;
				right: 13px;
				top: 50%;
				margin-top: -12px;
				&.badge {
					margin-top: -10px;
				}
				span.apc-btn-rc {
					padding: 0 2px;
				}
			}
			&.has-msg:not(.apc-active) span.apc-rtc-c {
				display: block;
			}
			&.has-msg:not(.apc-active)::before {
				-webkit-animation-name: flash;
				animation-name: flash;
				animation-iteration-count: infinite;
				animation-duration: 2s;
			}
			&.apc-active {
				font-weight: bold;
				position: relative;
				border-left: 4px solid rgba(0, 0, 0, 0.3) ;
				&::after {
					content: ';
					position: absolute;
					width: 20px;
					right: -2px;
					z-index: 99;
					background: #fff;
					top: 0;
					bottom: 0;
					font-size: 21px;
					line-height: 35px;
					color: rgba(0, 0, 0, 0.12);
					font-weight: normal;
				}
			}
			&::before {
				content: ' ';
				position: absolute;
				width: 8px;
				height: 8px;
				left: 12px;
				top: 50%;
				margin-top: -4px;
				z-index: 99;
				background: #00a65a;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}
			&:hover {
				border-left: 4px solid rgba(176, 176, 176, 0.67);
			}
		}
	}
	&>li {
		cursor: pointer;
		display: block;
		width: 100%;
		padding: 10px 20px 10px 25px;
		list-style: none;
		border-bottom: 1px solid rgba(201, 201, 201, 0.67);
		border-left: 4px solid rgba(201, 201, 201, 0.67);
		position: relative;
		span.apc-rtc-c {
			display: none;
			position: absolute;
			right: 13px;
			top: 50%;
			margin-top: -12px;
			&.badge {
				margin-top: -10px;
			}
			span.apc-btn-rc {
				padding: 0 2px;
			}
		}
		&.has-msg:not(.apc-active) span.apc-rtc-c {
			display: block;
		}
		&.has-msg:not(.apc-active)::before {
			-webkit-animation-name: flash;
			animation-name: flash;
			animation-iteration-count: infinite;
			animation-duration: 2s;
		}
		&.apc-active {
			font-weight: bold;
			position: relative;
			border-left: 4px solid rgba(0, 0, 0, 0.3) ;
			&::after {
				content: ';
				position: absolute;
				width: 20px;
				right: -2px;
				z-index: 99;
				background: #fff;
				top: 0;
				bottom: 0;
				font-size: 21px;
				line-height: 35px;
				color: rgba(0, 0, 0, 0.12);
				font-weight: normal;
			}
		}
		&::before {
			content: ' ';
			position: absolute;
			width: 8px;
			height: 8px;
			left: 12px;
			top: 50%;
			margin-top: -4px;
			z-index: 99;
			background: #00a65a;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		&:hover {
			border-left: 4px solid rgba(176, 176, 176, 0.67);
		}
	}
	span.apc-rtc-c {
		display: none;
		position: absolute;
		right: 13px;
		top: 50%;
		margin-top: -12px;
		&.badge {
			margin-top: -10px;
		}
		span.apc-btn-rc {
			padding: 0 2px;
		}
	}
	&.badge {
		margin-top: -10px;
	}
	span.apc-btn-rc {
		padding: 0 2px;
	}
	&.has-msg:not(.apc-active) span.apc-rtc-c {
		display: block;
	}
	&.has-msg:not(.apc-active)::before {
		-webkit-animation-name: flash;
		animation-name: flash;
		animation-iteration-count: infinite;
		animation-duration: 2s;
	}
	&.apc-active {
		font-weight: bold;
		position: relative;
		border-left: 4px solid rgba(0, 0, 0, 0.3) ;
		&::after {
			content: ';
			position: absolute;
			width: 20px;
			right: -2px;
			z-index: 99;
			background: #fff;
			top: 0;
			bottom: 0;
			font-size: 21px;
			line-height: 35px;
			color: rgba(0, 0, 0, 0.12);
			font-weight: normal;
		}
	}
	&::after {
		content: ';
		position: absolute;
		width: 20px;
		right: -2px;
		z-index: 99;
		background: #fff;
		top: 0;
		bottom: 0;
		font-size: 21px;
		line-height: 35px;
		color: rgba(0, 0, 0, 0.12);
		font-weight: normal;
	}
	&::before {
		content: ' ';
		position: absolute;
		width: 8px;
		height: 8px;
		left: 12px;
		top: 50%;
		margin-top: -4px;
		z-index: 99;
		background: #00a65a;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	&:hover {
		border-left: 4px solid rgba(176, 176, 176, 0.67);
	}
	ul.apc-chat-end-list>li::before {
		background: #cc0000;
		width: 8px;
		height: 8px;
		left: 12px;
		top: 50%;
		margin-top: -3px;
	}
	&&.apc-chat-container {
		width: 100%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
	}
	&&.apc-chat-user-info {
		width: 25%;
		overflow: hidden;
		.dl-horizontal dt {
			text-align: left;
			width: 75px;
			position: relative;
			&:after {
				content: ';
				padding: 0 5px;
				position: absolute;
				right: 0;
			}
			&:after {
				content: '';
				display: none;
			}
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-left: 75px;
			padding-left: 0px;
			margin-bottom: 5px;
		}
		&.apc-show {
			right: 0;
			-webkit-box-shadow: -1px 0px 2px -1px #000;
			-moz-box-shadow: -1px 0px 2px -1px #000;
			box-shadow: -1px 0px 2px -1px #000;
		}
		.apc-close-btn {
			right: 7px;
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-top: -20px;
			padding-left: 0;
			margin-bottom: 5px;
			margin-left: 75px;
		}
		.dl-horizontal dd {
			width: 100%;
			padding-left: 0;
			margin-left: unset;
			display: block;
		}
	}
	.dl-horizontal dt {
		text-align: left;
		width: 75px;
		position: relative;
		&:after {
			content: ';
			padding: 0 5px;
			position: absolute;
			right: 0;
		}
		&:after {
			content: '';
			display: none;
		}
	}
	&:after {
		content: ';
		padding: 0 5px;
		position: absolute;
		right: 0;
	}
	.dl-horizontal dd {
		width: calc(100% - 34px);
		margin-left: 75px;
		padding-left: 0px;
		margin-bottom: 5px;
	}
	&&.apc-close-btn {
		display: none;
	}
	&&.apc-user-list {
		position: absolute;
		left: -80%;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
	}
	&.apc-show {
		left: 0;
	}
	.apc-close-btn {
		right: 7px;
		&&&:hover {
			background: rgba(0, 0, 0, 0.13);
		}
	}
	ul.apc-chat-list>li.apc-active::after {
		display: none;
	}
	&&.apc-chat-container {
		border: none;
	}
	&&.apc-chat-user-info {
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
		position: absolute;
		right: -80%;
	}
	&.apc-show {
		right: 0;
		-webkit-box-shadow: -1px 0px 2px -1px #000;
		-moz-box-shadow: -1px 0px 2px -1px #000;
		box-shadow: -1px 0px 2px -1px #000;
	}
	.apc-close-btn {
		right: 7px;
	}
	&&.apc-show {
		top: 0px;
		width: 80%;
		background: #373737;
		color: #ffffff;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	&&.apc-close-btn {
		top: 8px;
		position: absolute;
		display: block;
		padding: 8px 12px;
		border: 1px solid rgba(201, 201, 201, 0.67);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.dl-horizontal dd {
		width: calc(100% - 34px);
		margin-top: -20px;
		padding-left: 0;
		margin-bottom: 5px;
		margin-left: 75px;
	}
	&:after {
		content: '';
		display: none;
	}
	.dl-horizontal dd {
		width: 100%;
		padding-left: 0;
		margin-left: unset;
		display: block;
	}
}
-webkit-keyframes sk-bouncedelay {
	-webkit-transform: scale(0);
}
 {
	-webkit-transform: scale(1);
	&&.apc-chat-container, &&.apc-user-list, &&.apc-chat-user-info {
		padding: 0px 10px 0px 10px;
	}
	&&#chat-canned-msg-btn {
		margin-top: -2px;
	}
	&&.apc-loading {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 991;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		&>.apc-loading-msg {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			top: 50%;
			margin-top: -20px;
			font-weight: bold;
			font-size: 24px;
			color: #fff;
		}
	}
	&>.apc-loading-msg {
		position: absolute;
		left: 0;
		right: 0;
		text-align: center;
		top: 50%;
		margin-top: -20px;
		font-weight: bold;
		font-size: 24px;
		color: #fff;
	}
	&&&>div {
		display: inline;
		height: 100%;
		.apc-pnl-header {
			font-weight: bold;
			border-bottom: 1px solid rgba(201, 201, 201, 0.67);
			margin-left: -10px;
			margin-right: -10px;
			padding: 10px;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 50px;
			.apc-open-user-list, .apc-open-chatinfo {
				display: none;
			}
			.apc-chat-desi {
				font-size: 10px;
			}
		}
		.apc-pnl-content {
			height: 80%;
			height: calc(100% - 50px);
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-align-items: flex-start;
			align-items: flex-start;
			&>div {
				margin-right: -10px;
				margin-left: -10px;
				padding: 10px;
				width: 100%;
				width: calc(100% ;
				&&.apc-pnl-content .apc-chat-item-content {
					height: 100%;
					position: relative;
					&>.apc-msgs {
						overflow: auto;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						padding: 30px;
						.apc-load-move {
							display: none;
						}
						.apc-chat-img-dl {
							display: block;
						}
						.apc-chat-img {
							display: block;
							img {
								max-height: 200px;
								border: 2px solid rgba(204, 204, 204, 0.31);
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								border-radius: 5px;
								&:hover {
									border: 2px solid rgba(175, 34, 38, 0.44);
								}
							}
						}
						.apc-msg-time {
							display: table;
							clear: both;
							width: 90%;
							width: calc(100% - 64px);
							text-align: right;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: #595e5f;
						}
						&>.apc-msg-sys-item {
							overflow-wrap: break-word;
							.apc-msg {
								float: none;
								width: 90%;
								background: rgba(77, 77, 77, 0.3);
								margin-left: 11px;
								border-radius: 16px 16px 16px 16px;
								padding: 7px;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								margin: 5px auto;
								&>.apc-msg-item-header {
									border-bottom: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: -2px;
									margin-bottom: 5px;
									padding-bottom: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&>.apc-msg-item-footer {
									border-top: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: 5px;
									padding-top: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&-time {
									width: 90%;
									width: calc(100% - 103px);
								}
							}
						}
						&>.apc-msg-item {
							margin: 10px 0;
							overflow-wrap: break-word;
							&>.apc-umg {
								border-radius: 50%;
								background: #fff;
								width: 40px;
								height: 40px;
								float: left;
								overflow: hidden;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								img {
									width: 40px;
									height: 40px;
								}
							}
							&>.apc-msg {
								margin-top: 5px;
								float: left;
								width: 83%;
								width: calc(100% - 103px);
								background: rgb(255 255 255);
								margin-left: 11px;
								border-radius: 6px 6px 6px 16px;
								border: 1px solid #e4e8ee;
								padding: 7px;
							}
							&.apc-me>.apc-umg {
								float: right;
							}
							&.apc-me>.apc-msg {
								float: right;
								border-radius: 6px 4px 16px 6px;
								margin-right: 11px;
								margin-left: 0px;
								background: rgba(63,92,134,.14);
							}
							&:after {
								content: "";
								display: table;
								clear: both;
							}
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
				}
				&>.apc-msgs {
					overflow: auto;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 30px;
					.apc-load-move {
						display: none;
					}
					.apc-chat-img-dl {
						display: block;
					}
					.apc-chat-img {
						display: block;
						img {
							max-height: 200px;
							border: 2px solid rgba(204, 204, 204, 0.31);
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							&:hover {
								border: 2px solid rgba(175, 34, 38, 0.44);
							}
						}
					}
					.apc-msg-time {
						display: table;
						clear: both;
						width: 90%;
						width: calc(100% - 64px);
						text-align: right;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: #595e5f;
					}
					&>.apc-msg-sys-item {
						overflow-wrap: break-word;
						.apc-msg {
							float: none;
							width: 90%;
							background: rgba(77, 77, 77, 0.3);
							margin-left: 11px;
							border-radius: 16px 16px 16px 16px;
							padding: 7px;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							margin: 5px auto;
							&>.apc-msg-item-header {
								border-bottom: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: -2px;
								margin-bottom: 5px;
								padding-bottom: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&>.apc-msg-item-footer {
								border-top: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: 5px;
								padding-top: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&-time {
								width: 90%;
								width: calc(100% - 103px);
							}
						}
					}
					&>.apc-msg-item {
						margin: 10px 0;
						overflow-wrap: break-word;
						&>.apc-umg {
							border-radius: 50%;
							background: #fff;
							width: 40px;
							height: 40px;
							float: left;
							overflow: hidden;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							img {
								width: 40px;
								height: 40px;
							}
						}
						&>.apc-msg {
							margin-top: 5px;
							float: left;
							width: 83%;
							width: calc(100% - 103px);
							background: rgb(255 255 255);
							margin-left: 11px;
							border-radius: 6px 6px 6px 16px;
							border: 1px solid #e4e8ee;
							padding: 7px;
						}
						&.apc-me>.apc-umg {
							float: right;
						}
						&.apc-me>.apc-msg {
							float: right;
							border-radius: 6px 4px 16px 6px;
							margin-right: 11px;
							margin-left: 0px;
							background: rgba(63,92,134,.14);
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				img {
					width: 40px;
					height: 40px;
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&&.apc-pnl-content .apc-chat-item-msg-divider {
					height: 6px;
					border-top: 1px solid rgba(201, 201, 201, 0.37);
					border-bottom: 1px solid rgba(201, 201, 201, 0.37);
					text-align: center;
					color: #cccccc;
					background: #fffefe;
					background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
					filter: progid;
					padding: 1px;
					line-height: 0;
					font-weight: bold;
					cursor: row-resize;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
				&&.apc-pnl-content .apc-chat-msg-type-panel {
					position: relative;
					border-top: 1px solid rgba(201, 201, 201, 0.67);
					height: 100px;
					.apc-file-up-status {
						position: absolute;
						top: -33px;
						right: 22px;
						display: none;
						background: rgba(0, 0, 0, 0.66);
						padding: 5px;
						color: #ffffff;
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
					}
					.panel {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						border: none;
						padding: 0;
						margin-bottom: 0 ;
						.panel-heading {
							padding: 0 15px;
							height: 24px;
							-webkit-border-radius: 0 ;
							-moz-border-radius: 0 ;
							border-radius: 0 ;
							.form-group {
								margin: 0;
								.control-label {
									margin-top: -2px;
								}
								.form-control {
									height: 20px;
									margin-top: 2px;
									&:focus {
										background-image: none ;
										background-size: 0;
										box-shadow: none;
										outline: 0 none;
										transition-duration: .3s;
									}
									&+.btn {
										right: 2px;
										top: 1px;
										position: absolute;
									}
								}
								select {
									min-width: 200px;
									font-size: 12px;
									padding: 0;
									&+.btn {
										height: 19px;
										font-size: 10px;
									}
								}
								.control-label {
									display: none;
								}
								.form-control {
									margin-bottom: 0 ;
									margin-top: 1.5px;
									width: calc(100% - 40px) ;
								}
							}
						}
						.panel-body {
							position: relative;
							height: calc(100% - 24px);
							&>.apc-send-ctrl {
								text-align: center;
								white-space: nowrap;
								margin-right: 5px;
								position: absolute;
								right: 13px;
								z-index: 99;
								&>i {
									padding: 5px;
									font-size: 20px;
									color: #cccccc;
									&:hover {
										color: #4d4d4d;
									}
								}
							}
							&>textarea {
								position: absolute;
								left: 0;
								right: 110px;
								height: 99%;
								width: 99%;
								width: calc(100% - 110px);
								bottom: 0;
								top: 0;
								border: none;
								padding: 5px;
								resize: none;
								z-index: 98;
							}
						}
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 0;
						height: 99%;
						height: calc(100% - 2px);
						width: 99%;
						width: calc(100% - 2px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
					}
					.apc-msg-typing {
						position: absolute;
						top: -23px;
						left: 10px;
						background: rgba(0, 0, 0, 0.09);
						padding: 2px 10px;
						border-radius: 9px;
						font-size: 10px;
						color: #616564;
						display: none;
					}
					.panel {
						margin-top: -2px;
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
				}
				.apc-file-up-status {
					position: absolute;
					top: -33px;
					right: 22px;
					display: none;
					background: rgba(0, 0, 0, 0.66);
					padding: 5px;
					color: #ffffff;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				.panel {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: none;
					padding: 0;
					margin-bottom: 0 ;
					.panel-heading {
						padding: 0 15px;
						height: 24px;
						-webkit-border-radius: 0 ;
						-moz-border-radius: 0 ;
						border-radius: 0 ;
						.form-group {
							margin: 0;
							.control-label {
								margin-top: -2px;
							}
							.form-control {
								height: 20px;
								margin-top: 2px;
								&:focus {
									background-image: none ;
									background-size: 0;
									box-shadow: none;
									outline: 0 none;
									transition-duration: .3s;
								}
								&+.btn {
									right: 2px;
									top: 1px;
									position: absolute;
								}
							}
							select {
								min-width: 200px;
								font-size: 12px;
								padding: 0;
								&+.btn {
									height: 19px;
									font-size: 10px;
								}
							}
							.control-label {
								display: none;
							}
							.form-control {
								margin-bottom: 0 ;
								margin-top: 1.5px;
								width: calc(100% - 40px) ;
							}
						}
					}
					.panel-body {
						position: relative;
						height: calc(100% - 24px);
						&>.apc-send-ctrl {
							text-align: center;
							white-space: nowrap;
							margin-right: 5px;
							position: absolute;
							right: 13px;
							z-index: 99;
							&>i {
								padding: 5px;
								font-size: 20px;
								color: #cccccc;
								&:hover {
									color: #4d4d4d;
								}
							}
						}
						&>textarea {
							position: absolute;
							left: 0;
							right: 110px;
							height: 99%;
							width: 99%;
							width: calc(100% - 110px);
							bottom: 0;
							top: 0;
							border: none;
							padding: 5px;
							resize: none;
							z-index: 98;
						}
					}
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
				&:hover {
					color: #4d4d4d;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 0;
					height: 99%;
					height: calc(100% - 2px);
					width: 99%;
					width: calc(100% - 2px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
				}
				.apc-msg-typing {
					position: absolute;
					top: -23px;
					left: 10px;
					background: rgba(0, 0, 0, 0.09);
					padding: 2px 10px;
					border-radius: 9px;
					font-size: 10px;
					color: #616564;
					display: none;
				}
				&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
					display: block;
					position: absolute;
					top: 0px;
					z-index: 99;
					padding: 17px 15px;
				}
				&&.apc-pnl-header .apc-open-user-list {
					left: -5px;
				}
				&&.apc-pnl-header .apc-open-chatinfo {
					right: 5px;
				}
				.panel {
					margin-top: -2px;
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
		}
	}
	.apc-pnl-header {
		font-weight: bold;
		border-bottom: 1px solid rgba(201, 201, 201, 0.67);
		margin-left: -10px;
		margin-right: -10px;
		padding: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 50px;
		.apc-open-user-list, .apc-open-chatinfo {
			display: none;
		}
		.apc-chat-desi {
			font-size: 10px;
		}
	}
	.apc-open-user-list, .apc-open-chatinfo {
		display: none;
	}
	.apc-chat-desi {
		font-size: 10px;
	}
	.apc-pnl-content {
		height: 80%;
		height: calc(100% - 50px);
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		&>div {
			margin-right: -10px;
			margin-left: -10px;
			padding: 10px;
			width: 100%;
			width: calc(100% ;
			&&.apc-pnl-content .apc-chat-item-content {
				height: 100%;
				position: relative;
				&>.apc-msgs {
					overflow: auto;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 30px;
					.apc-load-move {
						display: none;
					}
					.apc-chat-img-dl {
						display: block;
					}
					.apc-chat-img {
						display: block;
						img {
							max-height: 200px;
							border: 2px solid rgba(204, 204, 204, 0.31);
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							&:hover {
								border: 2px solid rgba(175, 34, 38, 0.44);
							}
						}
					}
					.apc-msg-time {
						display: table;
						clear: both;
						width: 90%;
						width: calc(100% - 64px);
						text-align: right;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: #595e5f;
					}
					&>.apc-msg-sys-item {
						overflow-wrap: break-word;
						.apc-msg {
							float: none;
							width: 90%;
							background: rgba(77, 77, 77, 0.3);
							margin-left: 11px;
							border-radius: 16px 16px 16px 16px;
							padding: 7px;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							margin: 5px auto;
							&>.apc-msg-item-header {
								border-bottom: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: -2px;
								margin-bottom: 5px;
								padding-bottom: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&>.apc-msg-item-footer {
								border-top: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: 5px;
								padding-top: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&-time {
								width: 90%;
								width: calc(100% - 103px);
							}
						}
					}
					&>.apc-msg-item {
						margin: 10px 0;
						overflow-wrap: break-word;
						&>.apc-umg {
							border-radius: 50%;
							background: #fff;
							width: 40px;
							height: 40px;
							float: left;
							overflow: hidden;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							img {
								width: 40px;
								height: 40px;
							}
						}
						&>.apc-msg {
							margin-top: 5px;
							float: left;
							width: 83%;
							width: calc(100% - 103px);
							background: rgb(255 255 255);
							margin-left: 11px;
							border-radius: 6px 6px 6px 16px;
							border: 1px solid #e4e8ee;
							padding: 7px;
						}
						&.apc-me>.apc-umg {
							float: right;
						}
						&.apc-me>.apc-msg {
							float: right;
							border-radius: 6px 4px 16px 6px;
							margin-right: 11px;
							margin-left: 0px;
							background: rgba(63,92,134,.14);
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
			}
			&>.apc-msgs {
				overflow: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding: 30px;
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			img {
				max-height: 200px;
				border: 2px solid rgba(204, 204, 204, 0.31);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
			}
			&:hover {
				border: 2px solid rgba(175, 34, 38, 0.44);
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			.apc-msg {
				float: none;
				width: 90%;
				background: rgba(77, 77, 77, 0.3);
				margin-left: 11px;
				border-radius: 16px 16px 16px 16px;
				padding: 7px;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				margin: 5px auto;
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
			}
			&>.apc-msg-item-header {
				border-bottom: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: -2px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&>.apc-msg-item-footer {
				border-top: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: 5px;
				padding-top: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&-time {
				width: 90%;
				width: calc(100% - 103px);
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&>.apc-umg {
				border-radius: 50%;
				background: #fff;
				width: 40px;
				height: 40px;
				float: left;
				overflow: hidden;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				img {
					width: 40px;
					height: 40px;
				}
			}
			img {
				width: 40px;
				height: 40px;
			}
			&>.apc-msg {
				margin-top: 5px;
				float: left;
				width: 83%;
				width: calc(100% - 103px);
				background: rgb(255 255 255);
				margin-left: 11px;
				border-radius: 6px 6px 6px 16px;
				border: 1px solid #e4e8ee;
				padding: 7px;
			}
			&.apc-me>.apc-umg {
				float: right;
			}
			&.apc-me>.apc-msg {
				float: right;
				border-radius: 6px 4px 16px 6px;
				margin-right: 11px;
				margin-left: 0px;
				background: rgba(63,92,134,.14);
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			&&.apc-pnl-content .apc-chat-item-msg-divider {
				height: 6px;
				border-top: 1px solid rgba(201, 201, 201, 0.37);
				border-bottom: 1px solid rgba(201, 201, 201, 0.37);
				text-align: center;
				color: #cccccc;
				background: #fffefe;
				background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
				background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
				background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
				filter: progid;
				padding: 1px;
				line-height: 0;
				font-weight: bold;
				cursor: row-resize;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			&&.apc-pnl-content .apc-chat-msg-type-panel {
				position: relative;
				border-top: 1px solid rgba(201, 201, 201, 0.67);
				height: 100px;
				.apc-file-up-status {
					position: absolute;
					top: -33px;
					right: 22px;
					display: none;
					background: rgba(0, 0, 0, 0.66);
					padding: 5px;
					color: #ffffff;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				.panel {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: none;
					padding: 0;
					margin-bottom: 0 ;
					.panel-heading {
						padding: 0 15px;
						height: 24px;
						-webkit-border-radius: 0 ;
						-moz-border-radius: 0 ;
						border-radius: 0 ;
						.form-group {
							margin: 0;
							.control-label {
								margin-top: -2px;
							}
							.form-control {
								height: 20px;
								margin-top: 2px;
								&:focus {
									background-image: none ;
									background-size: 0;
									box-shadow: none;
									outline: 0 none;
									transition-duration: .3s;
								}
								&+.btn {
									right: 2px;
									top: 1px;
									position: absolute;
								}
							}
							select {
								min-width: 200px;
								font-size: 12px;
								padding: 0;
								&+.btn {
									height: 19px;
									font-size: 10px;
								}
							}
							.control-label {
								display: none;
							}
							.form-control {
								margin-bottom: 0 ;
								margin-top: 1.5px;
								width: calc(100% - 40px) ;
							}
						}
					}
					.panel-body {
						position: relative;
						height: calc(100% - 24px);
						&>.apc-send-ctrl {
							text-align: center;
							white-space: nowrap;
							margin-right: 5px;
							position: absolute;
							right: 13px;
							z-index: 99;
							&>i {
								padding: 5px;
								font-size: 20px;
								color: #cccccc;
								&:hover {
									color: #4d4d4d;
								}
							}
						}
						&>textarea {
							position: absolute;
							left: 0;
							right: 110px;
							height: 99%;
							width: 99%;
							width: calc(100% - 110px);
							bottom: 0;
							top: 0;
							border: none;
							padding: 5px;
							resize: none;
							z-index: 98;
						}
					}
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 0;
					height: 99%;
					height: calc(100% - 2px);
					width: 99%;
					width: calc(100% - 2px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
				}
				.apc-msg-typing {
					position: absolute;
					top: -23px;
					left: 10px;
					background: rgba(0, 0, 0, 0.09);
					padding: 2px 10px;
					border-radius: 9px;
					font-size: 10px;
					color: #616564;
					display: none;
				}
				.panel {
					margin-top: -2px;
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
			}
			.apc-file-up-status {
				position: absolute;
				top: -33px;
				right: 22px;
				display: none;
				background: rgba(0, 0, 0, 0.66);
				padding: 5px;
				color: #ffffff;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			.panel {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: none;
				padding: 0;
				margin-bottom: 0 ;
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.form-group {
				margin: 0;
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
			}
			.control-label {
				margin-top: -2px;
			}
			.form-control {
				height: 20px;
				margin-top: 2px;
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
			&:focus {
				background-image: none ;
				background-size: 0;
				box-shadow: none;
				outline: 0 none;
				transition-duration: .3s;
			}
			select {
				min-width: 200px;
				font-size: 12px;
				padding: 0;
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
			}
			&+.btn {
				height: 19px;
				font-size: 10px;
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&>.apc-send-ctrl {
				text-align: center;
				white-space: nowrap;
				margin-right: 5px;
				position: absolute;
				right: 13px;
				z-index: 99;
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
			}
			&>i {
				padding: 5px;
				font-size: 20px;
				color: #cccccc;
				&:hover {
					color: #4d4d4d;
				}
			}
			&:hover {
				color: #4d4d4d;
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 110px;
				height: 99%;
				width: 99%;
				width: calc(100% - 110px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
				z-index: 98;
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 0;
				height: 99%;
				height: calc(100% - 2px);
				width: 99%;
				width: calc(100% - 2px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
			}
			.apc-msg-typing {
				position: absolute;
				top: -23px;
				left: 10px;
				background: rgba(0, 0, 0, 0.09);
				padding: 2px 10px;
				border-radius: 9px;
				font-size: 10px;
				color: #616564;
				display: none;
			}
			&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
				display: block;
				position: absolute;
				top: 0px;
				z-index: 99;
				padding: 17px 15px;
			}
			&&.apc-pnl-header .apc-open-user-list {
				left: -5px;
			}
			&&.apc-pnl-header .apc-open-chatinfo {
				right: 5px;
			}
			.panel {
				margin-top: -2px;
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
			.control-label {
				display: none;
			}
			.form-control {
				margin-bottom: 0 ;
				margin-top: 1.5px;
				width: calc(100% - 40px) ;
			}
			&+.btn {
				right: 2px;
				top: 1px;
				position: absolute;
			}
		}
	}
	&>div {
		margin-right: -10px;
		margin-left: -10px;
		padding: 10px;
		width: 100%;
		width: calc(100% ;
		&&.apc-pnl-content .apc-chat-item-content {
			height: 100%;
			position: relative;
			&>.apc-msgs {
				overflow: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding: 30px;
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
		}
		&>.apc-msgs {
			overflow: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 30px;
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
		.apc-load-move {
			display: none;
		}
		.apc-chat-img-dl {
			display: block;
		}
		.apc-chat-img {
			display: block;
			img {
				max-height: 200px;
				border: 2px solid rgba(204, 204, 204, 0.31);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
			}
		}
		img {
			max-height: 200px;
			border: 2px solid rgba(204, 204, 204, 0.31);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			&:hover {
				border: 2px solid rgba(175, 34, 38, 0.44);
			}
		}
		&:hover {
			border: 2px solid rgba(175, 34, 38, 0.44);
		}
		.apc-msg-time {
			display: table;
			clear: both;
			width: 90%;
			width: calc(100% - 64px);
			text-align: right;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: #595e5f;
		}
		&>.apc-msg-sys-item {
			overflow-wrap: break-word;
			.apc-msg {
				float: none;
				width: 90%;
				background: rgba(77, 77, 77, 0.3);
				margin-left: 11px;
				border-radius: 16px 16px 16px 16px;
				padding: 7px;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				margin: 5px auto;
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
			}
		}
		.apc-msg {
			float: none;
			width: 90%;
			background: rgba(77, 77, 77, 0.3);
			margin-left: 11px;
			border-radius: 16px 16px 16px 16px;
			padding: 7px;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			margin: 5px auto;
			&>.apc-msg-item-header {
				border-bottom: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: -2px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&>.apc-msg-item-footer {
				border-top: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: 5px;
				padding-top: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&-time {
				width: 90%;
				width: calc(100% - 103px);
			}
		}
		&>.apc-msg-item-header {
			border-bottom: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: -2px;
			margin-bottom: 5px;
			padding-bottom: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&>.apc-msg-item-footer {
			border-top: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: 5px;
			padding-top: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&-time {
			width: 90%;
			width: calc(100% - 103px);
		}
		&>.apc-msg-item {
			margin: 10px 0;
			overflow-wrap: break-word;
			&>.apc-umg {
				border-radius: 50%;
				background: #fff;
				width: 40px;
				height: 40px;
				float: left;
				overflow: hidden;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				img {
					width: 40px;
					height: 40px;
				}
			}
			&>.apc-msg {
				margin-top: 5px;
				float: left;
				width: 83%;
				width: calc(100% - 103px);
				background: rgb(255 255 255);
				margin-left: 11px;
				border-radius: 6px 6px 6px 16px;
				border: 1px solid #e4e8ee;
				padding: 7px;
			}
			&.apc-me>.apc-umg {
				float: right;
			}
			&.apc-me>.apc-msg {
				float: right;
				border-radius: 6px 4px 16px 6px;
				margin-right: 11px;
				margin-left: 0px;
				background: rgba(63,92,134,.14);
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
		&>.apc-umg {
			border-radius: 50%;
			background: #fff;
			width: 40px;
			height: 40px;
			float: left;
			overflow: hidden;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			img {
				width: 40px;
				height: 40px;
			}
		}
		img {
			width: 40px;
			height: 40px;
		}
		&>.apc-msg {
			margin-top: 5px;
			float: left;
			width: 83%;
			width: calc(100% - 103px);
			background: rgb(255 255 255);
			margin-left: 11px;
			border-radius: 6px 6px 6px 16px;
			border: 1px solid #e4e8ee;
			padding: 7px;
		}
		&.apc-me>.apc-umg {
			float: right;
		}
		&.apc-me>.apc-msg {
			float: right;
			border-radius: 6px 4px 16px 6px;
			margin-right: 11px;
			margin-left: 0px;
			background: rgba(63,92,134,.14);
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
		&&.apc-pnl-content .apc-chat-item-msg-divider {
			height: 6px;
			border-top: 1px solid rgba(201, 201, 201, 0.37);
			border-bottom: 1px solid rgba(201, 201, 201, 0.37);
			text-align: center;
			color: #cccccc;
			background: #fffefe;
			background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
			background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
			background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
			filter: progid;
			padding: 1px;
			line-height: 0;
			font-weight: bold;
			cursor: row-resize;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		&&.apc-pnl-content .apc-chat-msg-type-panel {
			position: relative;
			border-top: 1px solid rgba(201, 201, 201, 0.67);
			height: 100px;
			.apc-file-up-status {
				position: absolute;
				top: -33px;
				right: 22px;
				display: none;
				background: rgba(0, 0, 0, 0.66);
				padding: 5px;
				color: #ffffff;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			.panel {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: none;
				padding: 0;
				margin-bottom: 0 ;
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 0;
				height: 99%;
				height: calc(100% - 2px);
				width: 99%;
				width: calc(100% - 2px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
			}
			.apc-msg-typing {
				position: absolute;
				top: -23px;
				left: 10px;
				background: rgba(0, 0, 0, 0.09);
				padding: 2px 10px;
				border-radius: 9px;
				font-size: 10px;
				color: #616564;
				display: none;
			}
			.panel {
				margin-top: -2px;
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
			}
		}
		.apc-file-up-status {
			position: absolute;
			top: -33px;
			right: 22px;
			display: none;
			background: rgba(0, 0, 0, 0.66);
			padding: 5px;
			color: #ffffff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		.panel {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			padding: 0;
			margin-bottom: 0 ;
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		.panel-heading {
			padding: 0 15px;
			height: 24px;
			-webkit-border-radius: 0 ;
			-moz-border-radius: 0 ;
			border-radius: 0 ;
			.form-group {
				margin: 0;
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
			}
		}
		.form-group {
			margin: 0;
			.control-label {
				margin-top: -2px;
			}
			.form-control {
				height: 20px;
				margin-top: 2px;
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
			select {
				min-width: 200px;
				font-size: 12px;
				padding: 0;
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
			}
			.control-label {
				display: none;
			}
			.form-control {
				margin-bottom: 0 ;
				margin-top: 1.5px;
				width: calc(100% - 40px) ;
			}
		}
		.control-label {
			margin-top: -2px;
		}
		.form-control {
			height: 20px;
			margin-top: 2px;
			&:focus {
				background-image: none ;
				background-size: 0;
				box-shadow: none;
				outline: 0 none;
				transition-duration: .3s;
			}
			&+.btn {
				right: 2px;
				top: 1px;
				position: absolute;
			}
		}
		&:focus {
			background-image: none ;
			background-size: 0;
			box-shadow: none;
			outline: 0 none;
			transition-duration: .3s;
		}
		select {
			min-width: 200px;
			font-size: 12px;
			padding: 0;
			&+.btn {
				height: 19px;
				font-size: 10px;
			}
		}
		&+.btn {
			height: 19px;
			font-size: 10px;
		}
		.panel-body {
			position: relative;
			height: calc(100% - 24px);
			&>.apc-send-ctrl {
				text-align: center;
				white-space: nowrap;
				margin-right: 5px;
				position: absolute;
				right: 13px;
				z-index: 99;
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 110px;
				height: 99%;
				width: 99%;
				width: calc(100% - 110px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
				z-index: 98;
			}
		}
		&>.apc-send-ctrl {
			text-align: center;
			white-space: nowrap;
			margin-right: 5px;
			position: absolute;
			right: 13px;
			z-index: 99;
			&>i {
				padding: 5px;
				font-size: 20px;
				color: #cccccc;
				&:hover {
					color: #4d4d4d;
				}
			}
		}
		&>i {
			padding: 5px;
			font-size: 20px;
			color: #cccccc;
			&:hover {
				color: #4d4d4d;
			}
		}
		&:hover {
			color: #4d4d4d;
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 110px;
			height: 99%;
			width: 99%;
			width: calc(100% - 110px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
			z-index: 98;
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 0;
			height: 99%;
			height: calc(100% - 2px);
			width: 99%;
			width: calc(100% - 2px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
		}
		.apc-msg-typing {
			position: absolute;
			top: -23px;
			left: 10px;
			background: rgba(0, 0, 0, 0.09);
			padding: 2px 10px;
			border-radius: 9px;
			font-size: 10px;
			color: #616564;
			display: none;
		}
		&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
			display: block;
			position: absolute;
			top: 0px;
			z-index: 99;
			padding: 17px 15px;
		}
		&&.apc-pnl-header .apc-open-user-list {
			left: -5px;
		}
		&&.apc-pnl-header .apc-open-chatinfo {
			right: 5px;
		}
		.panel {
			margin-top: -2px;
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		&-heading {
			margin-top: -4px;
			padding: 1px 2px 0 2px;
		}
		.control-label {
			display: none;
		}
		.form-control {
			margin-bottom: 0 ;
			margin-top: 1.5px;
			width: calc(100% - 40px) ;
		}
		&+.btn {
			right: 2px;
			top: 1px;
			position: absolute;
		}
	}
	&&.apc-pnl-content .apc-chat-item-content {
		height: 100%;
		position: relative;
		&>.apc-msgs {
			overflow: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 30px;
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
	}
	&>.apc-msgs {
		overflow: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 30px;
		.apc-load-move {
			display: none;
		}
		.apc-chat-img-dl {
			display: block;
		}
		.apc-chat-img {
			display: block;
			img {
				max-height: 200px;
				border: 2px solid rgba(204, 204, 204, 0.31);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
			}
		}
		.apc-msg-time {
			display: table;
			clear: both;
			width: 90%;
			width: calc(100% - 64px);
			text-align: right;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: #595e5f;
		}
		&>.apc-msg-sys-item {
			overflow-wrap: break-word;
			.apc-msg {
				float: none;
				width: 90%;
				background: rgba(77, 77, 77, 0.3);
				margin-left: 11px;
				border-radius: 16px 16px 16px 16px;
				padding: 7px;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				margin: 5px auto;
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
			}
		}
		&>.apc-msg-item {
			margin: 10px 0;
			overflow-wrap: break-word;
			&>.apc-umg {
				border-radius: 50%;
				background: #fff;
				width: 40px;
				height: 40px;
				float: left;
				overflow: hidden;
				box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
				img {
					width: 40px;
					height: 40px;
				}
			}
			&>.apc-msg {
				margin-top: 5px;
				float: left;
				width: 83%;
				width: calc(100% - 103px);
				background: rgb(255 255 255);
				margin-left: 11px;
				border-radius: 6px 6px 6px 16px;
				border: 1px solid #e4e8ee;
				padding: 7px;
			}
			&.apc-me>.apc-umg {
				float: right;
			}
			&.apc-me>.apc-msg {
				float: right;
				border-radius: 6px 4px 16px 6px;
				margin-right: 11px;
				margin-left: 0px;
				background: rgba(63,92,134,.14);
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}
	.apc-load-move {
		display: none;
	}
	.apc-chat-img-dl {
		display: block;
	}
	.apc-chat-img {
		display: block;
		img {
			max-height: 200px;
			border: 2px solid rgba(204, 204, 204, 0.31);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			&:hover {
				border: 2px solid rgba(175, 34, 38, 0.44);
			}
		}
	}
	img {
		max-height: 200px;
		border: 2px solid rgba(204, 204, 204, 0.31);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		&:hover {
			border: 2px solid rgba(175, 34, 38, 0.44);
		}
	}
	&:hover {
		border: 2px solid rgba(175, 34, 38, 0.44);
	}
	.apc-msg-time {
		display: table;
		clear: both;
		width: 90%;
		width: calc(100% - 64px);
		text-align: right;
		font-size: 10px;
		font-style: italic;
		font-weight: bold;
		letter-spacing: 1px;
		color: #595e5f;
	}
	&>.apc-msg-sys-item {
		overflow-wrap: break-word;
		.apc-msg {
			float: none;
			width: 90%;
			background: rgba(77, 77, 77, 0.3);
			margin-left: 11px;
			border-radius: 16px 16px 16px 16px;
			padding: 7px;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			margin: 5px auto;
			&>.apc-msg-item-header {
				border-bottom: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: -2px;
				margin-bottom: 5px;
				padding-bottom: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&>.apc-msg-item-footer {
				border-top: 1px solid rgba(100, 100, 100, 0.04);
				text-align: center;
				margin-top: 5px;
				padding-top: 5px;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: rgba(89, 94, 95, 0.5);
			}
			&-time {
				width: 90%;
				width: calc(100% - 103px);
			}
		}
	}
	.apc-msg {
		float: none;
		width: 90%;
		background: rgba(77, 77, 77, 0.3);
		margin-left: 11px;
		border-radius: 16px 16px 16px 16px;
		padding: 7px;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
		margin: 5px auto;
		&>.apc-msg-item-header {
			border-bottom: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: -2px;
			margin-bottom: 5px;
			padding-bottom: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&>.apc-msg-item-footer {
			border-top: 1px solid rgba(100, 100, 100, 0.04);
			text-align: center;
			margin-top: 5px;
			padding-top: 5px;
			font-size: 10px;
			font-style: italic;
			font-weight: bold;
			letter-spacing: 1px;
			color: rgba(89, 94, 95, 0.5);
		}
		&-time {
			width: 90%;
			width: calc(100% - 103px);
		}
	}
	&>.apc-msg-item-header {
		border-bottom: 1px solid rgba(100, 100, 100, 0.04);
		text-align: center;
		margin-top: -2px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		font-size: 10px;
		font-style: italic;
		font-weight: bold;
		letter-spacing: 1px;
		color: rgba(89, 94, 95, 0.5);
	}
	&>.apc-msg-item-footer {
		border-top: 1px solid rgba(100, 100, 100, 0.04);
		text-align: center;
		margin-top: 5px;
		padding-top: 5px;
		font-size: 10px;
		font-style: italic;
		font-weight: bold;
		letter-spacing: 1px;
		color: rgba(89, 94, 95, 0.5);
	}
	&-time {
		width: 90%;
		width: calc(100% - 103px);
	}
	&>.apc-msg-item {
		margin: 10px 0;
		overflow-wrap: break-word;
		&>.apc-umg {
			border-radius: 50%;
			background: #fff;
			width: 40px;
			height: 40px;
			float: left;
			overflow: hidden;
			box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
			img {
				width: 40px;
				height: 40px;
			}
		}
		&>.apc-msg {
			margin-top: 5px;
			float: left;
			width: 83%;
			width: calc(100% - 103px);
			background: rgb(255 255 255);
			margin-left: 11px;
			border-radius: 6px 6px 6px 16px;
			border: 1px solid #e4e8ee;
			padding: 7px;
		}
		&.apc-me>.apc-umg {
			float: right;
		}
		&.apc-me>.apc-msg {
			float: right;
			border-radius: 6px 4px 16px 6px;
			margin-right: 11px;
			margin-left: 0px;
			background: rgba(63,92,134,.14);
		}
		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}
	&>.apc-umg {
		border-radius: 50%;
		background: #fff;
		width: 40px;
		height: 40px;
		float: left;
		overflow: hidden;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
		img {
			width: 40px;
			height: 40px;
		}
	}
	img {
		width: 40px;
		height: 40px;
	}
	&>.apc-msg {
		margin-top: 5px;
		float: left;
		width: 83%;
		width: calc(100% - 103px);
		background: rgb(255 255 255);
		margin-left: 11px;
		border-radius: 6px 6px 6px 16px;
		border: 1px solid #e4e8ee;
		padding: 7px;
	}
	&&.chat-end-button {
		width: 100% ;
	}
	&.apc-me>.apc-umg {
		float: right;
	}
	&.apc-me>.apc-msg {
		float: right;
		border-radius: 6px 4px 16px 6px;
		margin-right: 11px;
		margin-left: 0px;
		background: rgba(63,92,134,.14);
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	&&.apc-pnl-content .apc-chat-item-msg-divider {
		height: 6px;
		border-top: 1px solid rgba(201, 201, 201, 0.37);
		border-bottom: 1px solid rgba(201, 201, 201, 0.37);
		text-align: center;
		color: #cccccc;
		background: #fffefe;
		background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
		background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
		background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
		filter: progid;
		padding: 1px;
		line-height: 0;
		font-weight: bold;
		cursor: row-resize;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	&&.apc-pnl-content .apc-chat-msg-type-panel {
		position: relative;
		border-top: 1px solid rgba(201, 201, 201, 0.67);
		height: 100px;
		.apc-file-up-status {
			position: absolute;
			top: -33px;
			right: 22px;
			display: none;
			background: rgba(0, 0, 0, 0.66);
			padding: 5px;
			color: #ffffff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		.panel {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			padding: 0;
			margin-bottom: 0 ;
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 0;
			height: 99%;
			height: calc(100% - 2px);
			width: 99%;
			width: calc(100% - 2px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
		}
		.apc-msg-typing {
			position: absolute;
			top: -23px;
			left: 10px;
			background: rgba(0, 0, 0, 0.09);
			padding: 2px 10px;
			border-radius: 9px;
			font-size: 10px;
			color: #616564;
			display: none;
		}
		.panel {
			margin-top: -2px;
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
	}
	.apc-file-up-status {
		position: absolute;
		top: -33px;
		right: 22px;
		display: none;
		background: rgba(0, 0, 0, 0.66);
		padding: 5px;
		color: #ffffff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: none;
		padding: 0;
		margin-bottom: 0 ;
		.panel-heading {
			padding: 0 15px;
			height: 24px;
			-webkit-border-radius: 0 ;
			-moz-border-radius: 0 ;
			border-radius: 0 ;
			.form-group {
				margin: 0;
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
			}
		}
		.panel-body {
			position: relative;
			height: calc(100% - 24px);
			&>.apc-send-ctrl {
				text-align: center;
				white-space: nowrap;
				margin-right: 5px;
				position: absolute;
				right: 13px;
				z-index: 99;
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
			}
			&>textarea {
				position: absolute;
				left: 0;
				right: 110px;
				height: 99%;
				width: 99%;
				width: calc(100% - 110px);
				bottom: 0;
				top: 0;
				border: none;
				padding: 5px;
				resize: none;
				z-index: 98;
			}
		}
		&-heading {
			margin-top: -4px;
			padding: 1px 2px 0 2px;
		}
	}
	.panel-heading {
		padding: 0 15px;
		height: 24px;
		-webkit-border-radius: 0 ;
		-moz-border-radius: 0 ;
		border-radius: 0 ;
		.form-group {
			margin: 0;
			.control-label {
				margin-top: -2px;
			}
			.form-control {
				height: 20px;
				margin-top: 2px;
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
			select {
				min-width: 200px;
				font-size: 12px;
				padding: 0;
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
			}
			.control-label {
				display: none;
			}
			.form-control {
				margin-bottom: 0 ;
				margin-top: 1.5px;
				width: calc(100% - 40px) ;
			}
		}
	}
	.form-group {
		margin: 0;
		.control-label {
			margin-top: -2px;
		}
		.form-control {
			height: 20px;
			margin-top: 2px;
			&:focus {
				background-image: none ;
				background-size: 0;
				box-shadow: none;
				outline: 0 none;
				transition-duration: .3s;
			}
			&+.btn {
				right: 2px;
				top: 1px;
				position: absolute;
			}
		}
		select {
			min-width: 200px;
			font-size: 12px;
			padding: 0;
			&+.btn {
				height: 19px;
				font-size: 10px;
			}
		}
		.control-label {
			display: none;
		}
		.form-control {
			margin-bottom: 0 ;
			margin-top: 1.5px;
			width: calc(100% - 40px) ;
		}
	}
	.control-label {
		margin-top: -2px;
	}
	.form-control {
		height: 20px;
		margin-top: 2px;
		&:focus {
			background-image: none ;
			background-size: 0;
			box-shadow: none;
			outline: 0 none;
			transition-duration: .3s;
		}
		&+.btn {
			right: 2px;
			top: 1px;
			position: absolute;
		}
	}
	&:focus {
		background-image: none ;
		background-size: 0;
		box-shadow: none;
		outline: 0 none;
		transition-duration: .3s;
	}
	select {
		min-width: 200px;
		font-size: 12px;
		padding: 0;
		&+.btn {
			height: 19px;
			font-size: 10px;
		}
	}
	&+.btn {
		height: 19px;
		font-size: 10px;
	}
	.panel-body {
		position: relative;
		height: calc(100% - 24px);
		&>.apc-send-ctrl {
			text-align: center;
			white-space: nowrap;
			margin-right: 5px;
			position: absolute;
			right: 13px;
			z-index: 99;
			&>i {
				padding: 5px;
				font-size: 20px;
				color: #cccccc;
				&:hover {
					color: #4d4d4d;
				}
			}
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 110px;
			height: 99%;
			width: 99%;
			width: calc(100% - 110px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
			z-index: 98;
		}
	}
	&>.apc-send-ctrl {
		text-align: center;
		white-space: nowrap;
		margin-right: 5px;
		position: absolute;
		right: 13px;
		z-index: 99;
		&>i {
			padding: 5px;
			font-size: 20px;
			color: #cccccc;
			&:hover {
				color: #4d4d4d;
			}
		}
	}
	&>i {
		padding: 5px;
		font-size: 20px;
		color: #cccccc;
		&:hover {
			color: #4d4d4d;
		}
	}
	&:hover {
		color: #4d4d4d;
	}
	&>textarea {
		position: absolute;
		left: 0;
		right: 110px;
		height: 99%;
		width: 99%;
		width: calc(100% - 110px);
		bottom: 0;
		top: 0;
		border: none;
		padding: 5px;
		resize: none;
		z-index: 98;
	}
	&>textarea {
		position: absolute;
		left: 0;
		right: 0;
		height: 99%;
		height: calc(100% - 2px);
		width: 99%;
		width: calc(100% - 2px);
		bottom: 0;
		top: 0;
		border: none;
		padding: 5px;
		resize: none;
	}
	.apc-msg-typing {
		position: absolute;
		top: -23px;
		left: 10px;
		background: rgba(0, 0, 0, 0.09);
		padding: 2px 10px;
		border-radius: 9px;
		font-size: 10px;
		color: #616564;
		display: none;
	}
	&&.apc-user-list {
		width: 25%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
		.apc-pnl-content>.slimScrollDiv {
			width: calc(100% ;
			padding-top: 0;
		}
		ul.apc-chat-list, ul.apc-chat-end-list {
			padding: 0;
			margin: 0 -10px;
			width: 100%;
			width: calc(100% ;
			&>li {
				cursor: pointer;
				display: block;
				width: 100%;
				padding: 10px 20px 10px 25px;
				list-style: none;
				border-bottom: 1px solid rgba(201, 201, 201, 0.67);
				border-left: 4px solid rgba(201, 201, 201, 0.67);
				position: relative;
				span.apc-rtc-c {
					display: none;
					position: absolute;
					right: 13px;
					top: 50%;
					margin-top: -12px;
					&.badge {
						margin-top: -10px;
					}
					span.apc-btn-rc {
						padding: 0 2px;
					}
				}
				&.has-msg:not(.apc-active) span.apc-rtc-c {
					display: block;
				}
				&.has-msg:not(.apc-active)::before {
					-webkit-animation-name: flash;
					animation-name: flash;
					animation-iteration-count: infinite;
					animation-duration: 2s;
				}
				&.apc-active {
					font-weight: bold;
					position: relative;
					border-left: 4px solid rgba(0, 0, 0, 0.3) ;
					&::after {
						content: ';
						position: absolute;
						width: 20px;
						right: -2px;
						z-index: 99;
						background: #fff;
						top: 0;
						bottom: 0;
						font-size: 21px;
						line-height: 35px;
						color: rgba(0, 0, 0, 0.12);
						font-weight: normal;
					}
				}
				&::before {
					content: ' ';
					position: absolute;
					width: 8px;
					height: 8px;
					left: 12px;
					top: 50%;
					margin-top: -4px;
					z-index: 99;
					background: #00a65a;
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
				}
				&:hover {
					border-left: 4px solid rgba(176, 176, 176, 0.67);
				}
			}
		}
		ul.apc-chat-end-list>li::before {
			background: #cc0000;
			width: 8px;
			height: 8px;
			left: 12px;
			top: 50%;
			margin-top: -3px;
		}
		&.apc-show {
			left: 0;
		}
		.apc-close-btn {
			right: 7px;
			&&&:hover {
				background: rgba(0, 0, 0, 0.13);
			}
		}
		ul.apc-chat-list>li.apc-active::after {
			display: none;
		}
	}
	.apc-pnl-content>.slimScrollDiv {
		width: calc(100% ;
		padding-top: 0;
	}
	ul.apc-chat-list, ul.apc-chat-end-list {
		padding: 0;
		margin: 0 -10px;
		width: 100%;
		width: calc(100% ;
		&>li {
			cursor: pointer;
			display: block;
			width: 100%;
			padding: 10px 20px 10px 25px;
			list-style: none;
			border-bottom: 1px solid rgba(201, 201, 201, 0.67);
			border-left: 4px solid rgba(201, 201, 201, 0.67);
			position: relative;
			span.apc-rtc-c {
				display: none;
				position: absolute;
				right: 13px;
				top: 50%;
				margin-top: -12px;
				&.badge {
					margin-top: -10px;
				}
				span.apc-btn-rc {
					padding: 0 2px;
				}
			}
			&.has-msg:not(.apc-active) span.apc-rtc-c {
				display: block;
			}
			&.has-msg:not(.apc-active)::before {
				-webkit-animation-name: flash;
				animation-name: flash;
				animation-iteration-count: infinite;
				animation-duration: 2s;
			}
			&.apc-active {
				font-weight: bold;
				position: relative;
				border-left: 4px solid rgba(0, 0, 0, 0.3) ;
				&::after {
					content: ';
					position: absolute;
					width: 20px;
					right: -2px;
					z-index: 99;
					background: #fff;
					top: 0;
					bottom: 0;
					font-size: 21px;
					line-height: 35px;
					color: rgba(0, 0, 0, 0.12);
					font-weight: normal;
				}
			}
			&::before {
				content: ' ';
				position: absolute;
				width: 8px;
				height: 8px;
				left: 12px;
				top: 50%;
				margin-top: -4px;
				z-index: 99;
				background: #00a65a;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}
			&:hover {
				border-left: 4px solid rgba(176, 176, 176, 0.67);
			}
		}
	}
	&>li {
		cursor: pointer;
		display: block;
		width: 100%;
		padding: 10px 20px 10px 25px;
		list-style: none;
		border-bottom: 1px solid rgba(201, 201, 201, 0.67);
		border-left: 4px solid rgba(201, 201, 201, 0.67);
		position: relative;
		span.apc-rtc-c {
			display: none;
			position: absolute;
			right: 13px;
			top: 50%;
			margin-top: -12px;
			&.badge {
				margin-top: -10px;
			}
			span.apc-btn-rc {
				padding: 0 2px;
			}
		}
		&.has-msg:not(.apc-active) span.apc-rtc-c {
			display: block;
		}
		&.has-msg:not(.apc-active)::before {
			-webkit-animation-name: flash;
			animation-name: flash;
			animation-iteration-count: infinite;
			animation-duration: 2s;
		}
		&.apc-active {
			font-weight: bold;
			position: relative;
			border-left: 4px solid rgba(0, 0, 0, 0.3) ;
			&::after {
				content: ';
				position: absolute;
				width: 20px;
				right: -2px;
				z-index: 99;
				background: #fff;
				top: 0;
				bottom: 0;
				font-size: 21px;
				line-height: 35px;
				color: rgba(0, 0, 0, 0.12);
				font-weight: normal;
			}
		}
		&::before {
			content: ' ';
			position: absolute;
			width: 8px;
			height: 8px;
			left: 12px;
			top: 50%;
			margin-top: -4px;
			z-index: 99;
			background: #00a65a;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		&:hover {
			border-left: 4px solid rgba(176, 176, 176, 0.67);
		}
	}
	span.apc-rtc-c {
		display: none;
		position: absolute;
		right: 13px;
		top: 50%;
		margin-top: -12px;
		&.badge {
			margin-top: -10px;
		}
		span.apc-btn-rc {
			padding: 0 2px;
		}
	}
	&.badge {
		margin-top: -10px;
	}
	span.apc-btn-rc {
		padding: 0 2px;
	}
	&.has-msg:not(.apc-active) span.apc-rtc-c {
		display: block;
	}
	&.has-msg:not(.apc-active)::before {
		-webkit-animation-name: flash;
		animation-name: flash;
		animation-iteration-count: infinite;
		animation-duration: 2s;
	}
	&.apc-active {
		font-weight: bold;
		position: relative;
		border-left: 4px solid rgba(0, 0, 0, 0.3) ;
		&::after {
			content: ';
			position: absolute;
			width: 20px;
			right: -2px;
			z-index: 99;
			background: #fff;
			top: 0;
			bottom: 0;
			font-size: 21px;
			line-height: 35px;
			color: rgba(0, 0, 0, 0.12);
			font-weight: normal;
		}
	}
	&::after {
		content: ';
		position: absolute;
		width: 20px;
		right: -2px;
		z-index: 99;
		background: #fff;
		top: 0;
		bottom: 0;
		font-size: 21px;
		line-height: 35px;
		color: rgba(0, 0, 0, 0.12);
		font-weight: normal;
	}
	&::before {
		content: ' ';
		position: absolute;
		width: 8px;
		height: 8px;
		left: 12px;
		top: 50%;
		margin-top: -4px;
		z-index: 99;
		background: #00a65a;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	&:hover {
		border-left: 4px solid rgba(176, 176, 176, 0.67);
	}
	ul.apc-chat-end-list>li::before {
		background: #cc0000;
		width: 8px;
		height: 8px;
		left: 12px;
		top: 50%;
		margin-top: -3px;
	}
	&&.apc-chat-container {
		width: 100%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
	}
	&&.apc-chat-user-info {
		width: 25%;
		overflow: hidden;
		.dl-horizontal dt {
			text-align: left;
			width: 75px;
			position: relative;
			&:after {
				content: ';
				padding: 0 5px;
				position: absolute;
				right: 0;
			}
			&:after {
				content: '';
				display: none;
			}
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-left: 75px;
			padding-left: 0px;
			margin-bottom: 5px;
		}
		&.apc-show {
			right: 0;
			-webkit-box-shadow: -1px 0px 2px -1px #000;
			-moz-box-shadow: -1px 0px 2px -1px #000;
			box-shadow: -1px 0px 2px -1px #000;
		}
		.apc-close-btn {
			right: 7px;
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-top: -20px;
			padding-left: 0;
			margin-bottom: 5px;
			margin-left: 75px;
		}
		.dl-horizontal dd {
			width: 100%;
			padding-left: 0;
			margin-left: unset;
			display: block;
		}
	}
	.dl-horizontal dt {
		text-align: left;
		width: 75px;
		position: relative;
		&:after {
			content: ';
			padding: 0 5px;
			position: absolute;
			right: 0;
		}
		&:after {
			content: '';
			display: none;
		}
	}
	&:after {
		content: ';
		padding: 0 5px;
		position: absolute;
		right: 0;
	}
	.dl-horizontal dd {
		width: calc(100% - 34px);
		margin-left: 75px;
		padding-left: 0px;
		margin-bottom: 5px;
	}
	&&.apc-close-btn {
		display: none;
	}
	&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
		display: block;
		position: absolute;
		top: 0px;
		z-index: 99;
		padding: 17px 15px;
	}
	&&.apc-pnl-header .apc-open-user-list {
		left: -5px;
	}
	&&.apc-pnl-header .apc-open-chatinfo {
		right: 5px;
	}
	.panel {
		margin-top: -2px;
		&-heading {
			margin-top: -4px;
			padding: 1px 2px 0 2px;
		}
	}
	&-heading {
		margin-top: -4px;
		padding: 1px 2px 0 2px;
	}
	.control-label {
		display: none;
	}
	.form-control {
		margin-bottom: 0 ;
		margin-top: 1.5px;
		width: calc(100% - 40px) ;
	}
	&+.btn {
		right: 2px;
		top: 1px;
		position: absolute;
	}
	&&.apc-user-list {
		position: absolute;
		left: -80%;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
	}
	&.apc-show {
		left: 0;
	}
	.apc-close-btn {
		right: 7px;
		&&&:hover {
			background: rgba(0, 0, 0, 0.13);
		}
	}
	ul.apc-chat-list>li.apc-active::after {
		display: none;
	}
	&&.apc-chat-container {
		border: none;
	}
	&&.apc-chat-user-info {
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
		position: absolute;
		right: -80%;
	}
	&.apc-show {
		right: 0;
		-webkit-box-shadow: -1px 0px 2px -1px #000;
		-moz-box-shadow: -1px 0px 2px -1px #000;
		box-shadow: -1px 0px 2px -1px #000;
	}
	.apc-close-btn {
		right: 7px;
	}
	&&.apc-show {
		top: 0px;
		width: 80%;
		background: #373737;
		color: #ffffff;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	&&.apc-close-btn {
		top: 8px;
		position: absolute;
		display: block;
		padding: 8px 12px;
		border: 1px solid rgba(201, 201, 201, 0.67);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	&&&:hover {
		background: rgba(0, 0, 0, 0.13);
	}
	.dl-horizontal dd {
		width: calc(100% - 34px);
		margin-top: -20px;
		padding-left: 0;
		margin-bottom: 5px;
		margin-left: 75px;
	}
	&:after {
		content: '';
		display: none;
	}
	.dl-horizontal dd {
		width: 100%;
		padding-left: 0;
		margin-left: unset;
		display: block;
	}
}
keyframes sk-bouncedelay {
	-webkit-transform: scale(0);
	transform: scale(0);
}
 {
	-webkit-transform: scale(1);
	transform: scale(1);
	&&.apc-chat-container, &&.apc-user-list, &&.apc-chat-user-info {
		padding: 0px 10px 0px 10px;
	}
	&&#chat-canned-msg-btn {
		margin-top: -2px;
	}
	&&.apc-loading {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 991;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		&>.apc-loading-msg {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			top: 50%;
			margin-top: -20px;
			font-weight: bold;
			font-size: 24px;
			color: #fff;
		}
	}
	&&&>div {
		display: inline;
		height: 100%;
		.apc-pnl-header {
			font-weight: bold;
			border-bottom: 1px solid rgba(201, 201, 201, 0.67);
			margin-left: -10px;
			margin-right: -10px;
			padding: 10px;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 50px;
			.apc-open-user-list, .apc-open-chatinfo {
				display: none;
			}
			.apc-chat-desi {
				font-size: 10px;
			}
		}
		.apc-pnl-content {
			height: 80%;
			height: calc(100% - 50px);
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-align-items: flex-start;
			align-items: flex-start;
			&>div {
				margin-right: -10px;
				margin-left: -10px;
				padding: 10px;
				width: 100%;
				width: calc(100% ;
				&&.apc-pnl-content .apc-chat-item-content {
					height: 100%;
					position: relative;
					&>.apc-msgs {
						overflow: auto;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						padding: 30px;
						.apc-load-move {
							display: none;
						}
						.apc-chat-img-dl {
							display: block;
						}
						.apc-chat-img {
							display: block;
							img {
								max-height: 200px;
								border: 2px solid rgba(204, 204, 204, 0.31);
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								border-radius: 5px;
								&:hover {
									border: 2px solid rgba(175, 34, 38, 0.44);
								}
							}
						}
						.apc-msg-time {
							display: table;
							clear: both;
							width: 90%;
							width: calc(100% - 64px);
							text-align: right;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: #595e5f;
						}
						&>.apc-msg-sys-item {
							overflow-wrap: break-word;
							.apc-msg {
								float: none;
								width: 90%;
								background: rgba(77, 77, 77, 0.3);
								margin-left: 11px;
								border-radius: 16px 16px 16px 16px;
								padding: 7px;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								margin: 5px auto;
								&>.apc-msg-item-header {
									border-bottom: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: -2px;
									margin-bottom: 5px;
									padding-bottom: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&>.apc-msg-item-footer {
									border-top: 1px solid rgba(100, 100, 100, 0.04);
									text-align: center;
									margin-top: 5px;
									padding-top: 5px;
									font-size: 10px;
									font-style: italic;
									font-weight: bold;
									letter-spacing: 1px;
									color: rgba(89, 94, 95, 0.5);
								}
								&-time {
									width: 90%;
									width: calc(100% - 103px);
								}
							}
						}
						&>.apc-msg-item {
							margin: 10px 0;
							overflow-wrap: break-word;
							&>.apc-umg {
								border-radius: 50%;
								background: #fff;
								width: 40px;
								height: 40px;
								float: left;
								overflow: hidden;
								box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
								img {
									width: 40px;
									height: 40px;
								}
							}
							&>.apc-msg {
								margin-top: 5px;
								float: left;
								width: 83%;
								width: calc(100% - 103px);
								background: rgb(255 255 255);
								margin-left: 11px;
								border-radius: 6px 6px 6px 16px;
								border: 1px solid #e4e8ee;
								padding: 7px;
							}
							&.apc-me>.apc-umg {
								float: right;
							}
							&.apc-me>.apc-msg {
								float: right;
								border-radius: 6px 4px 16px 6px;
								margin-right: 11px;
								margin-left: 0px;
								background: rgba(63,92,134,.14);
							}
							&:after {
								content: "";
								display: table;
								clear: both;
							}
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
				}
				&>.apc-msgs {
					overflow: auto;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					padding: 30px;
					.apc-load-move {
						display: none;
					}
					.apc-chat-img-dl {
						display: block;
					}
					.apc-chat-img {
						display: block;
						img {
							max-height: 200px;
							border: 2px solid rgba(204, 204, 204, 0.31);
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							&:hover {
								border: 2px solid rgba(175, 34, 38, 0.44);
							}
						}
					}
					.apc-msg-time {
						display: table;
						clear: both;
						width: 90%;
						width: calc(100% - 64px);
						text-align: right;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: #595e5f;
					}
					&>.apc-msg-sys-item {
						overflow-wrap: break-word;
						.apc-msg {
							float: none;
							width: 90%;
							background: rgba(77, 77, 77, 0.3);
							margin-left: 11px;
							border-radius: 16px 16px 16px 16px;
							padding: 7px;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							margin: 5px auto;
							&>.apc-msg-item-header {
								border-bottom: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: -2px;
								margin-bottom: 5px;
								padding-bottom: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&>.apc-msg-item-footer {
								border-top: 1px solid rgba(100, 100, 100, 0.04);
								text-align: center;
								margin-top: 5px;
								padding-top: 5px;
								font-size: 10px;
								font-style: italic;
								font-weight: bold;
								letter-spacing: 1px;
								color: rgba(89, 94, 95, 0.5);
							}
							&-time {
								width: 90%;
								width: calc(100% - 103px);
							}
						}
					}
					&>.apc-msg-item {
						margin: 10px 0;
						overflow-wrap: break-word;
						&>.apc-umg {
							border-radius: 50%;
							background: #fff;
							width: 40px;
							height: 40px;
							float: left;
							overflow: hidden;
							box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
							img {
								width: 40px;
								height: 40px;
							}
						}
						&>.apc-msg {
							margin-top: 5px;
							float: left;
							width: 83%;
							width: calc(100% - 103px);
							background: rgb(255 255 255);
							margin-left: 11px;
							border-radius: 6px 6px 6px 16px;
							border: 1px solid #e4e8ee;
							padding: 7px;
						}
						&.apc-me>.apc-umg {
							float: right;
						}
						&.apc-me>.apc-msg {
							float: right;
							border-radius: 6px 4px 16px 6px;
							margin-right: 11px;
							margin-left: 0px;
							background: rgba(63,92,134,.14);
						}
						&:after {
							content: "";
							display: table;
							clear: both;
						}
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				.apc-load-move {
					display: none;
				}
				.apc-chat-img-dl {
					display: block;
				}
				.apc-chat-img {
					display: block;
					img {
						max-height: 200px;
						border: 2px solid rgba(204, 204, 204, 0.31);
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
						&:hover {
							border: 2px solid rgba(175, 34, 38, 0.44);
						}
					}
				}
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
				&:hover {
					border: 2px solid rgba(175, 34, 38, 0.44);
				}
				.apc-msg-time {
					display: table;
					clear: both;
					width: 90%;
					width: calc(100% - 64px);
					text-align: right;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: #595e5f;
				}
				&>.apc-msg-sys-item {
					overflow-wrap: break-word;
					.apc-msg {
						float: none;
						width: 90%;
						background: rgba(77, 77, 77, 0.3);
						margin-left: 11px;
						border-radius: 16px 16px 16px 16px;
						padding: 7px;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						margin: 5px auto;
						&>.apc-msg-item-header {
							border-bottom: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: -2px;
							margin-bottom: 5px;
							padding-bottom: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&>.apc-msg-item-footer {
							border-top: 1px solid rgba(100, 100, 100, 0.04);
							text-align: center;
							margin-top: 5px;
							padding-top: 5px;
							font-size: 10px;
							font-style: italic;
							font-weight: bold;
							letter-spacing: 1px;
							color: rgba(89, 94, 95, 0.5);
						}
						&-time {
							width: 90%;
							width: calc(100% - 103px);
						}
					}
				}
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
				&>.apc-msg-item-header {
					border-bottom: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: -2px;
					margin-bottom: 5px;
					padding-bottom: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&>.apc-msg-item-footer {
					border-top: 1px solid rgba(100, 100, 100, 0.04);
					text-align: center;
					margin-top: 5px;
					padding-top: 5px;
					font-size: 10px;
					font-style: italic;
					font-weight: bold;
					letter-spacing: 1px;
					color: rgba(89, 94, 95, 0.5);
				}
				&-time {
					width: 90%;
					width: calc(100% - 103px);
				}
				&>.apc-msg-item {
					margin: 10px 0;
					overflow-wrap: break-word;
					&>.apc-umg {
						border-radius: 50%;
						background: #fff;
						width: 40px;
						height: 40px;
						float: left;
						overflow: hidden;
						box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
						img {
							width: 40px;
							height: 40px;
						}
					}
					&>.apc-msg {
						margin-top: 5px;
						float: left;
						width: 83%;
						width: calc(100% - 103px);
						background: rgb(255 255 255);
						margin-left: 11px;
						border-radius: 6px 6px 6px 16px;
						border: 1px solid #e4e8ee;
						padding: 7px;
					}
					&.apc-me>.apc-umg {
						float: right;
					}
					&.apc-me>.apc-msg {
						float: right;
						border-radius: 6px 4px 16px 6px;
						margin-right: 11px;
						margin-left: 0px;
						background: rgba(63,92,134,.14);
					}
					&:after {
						content: "";
						display: table;
						clear: both;
					}
				}
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				img {
					width: 40px;
					height: 40px;
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
				&&.apc-pnl-content .apc-chat-item-msg-divider {
					height: 6px;
					border-top: 1px solid rgba(201, 201, 201, 0.37);
					border-bottom: 1px solid rgba(201, 201, 201, 0.37);
					text-align: center;
					color: #cccccc;
					background: #fffefe;
					background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
					background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
					filter: progid;
					padding: 1px;
					line-height: 0;
					font-weight: bold;
					cursor: row-resize;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
				&&.apc-pnl-content .apc-chat-msg-type-panel {
					position: relative;
					border-top: 1px solid rgba(201, 201, 201, 0.67);
					height: 100px;
					.apc-file-up-status {
						position: absolute;
						top: -33px;
						right: 22px;
						display: none;
						background: rgba(0, 0, 0, 0.66);
						padding: 5px;
						color: #ffffff;
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
					}
					.panel {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						border: none;
						padding: 0;
						margin-bottom: 0 ;
						.panel-heading {
							padding: 0 15px;
							height: 24px;
							-webkit-border-radius: 0 ;
							-moz-border-radius: 0 ;
							border-radius: 0 ;
							.form-group {
								margin: 0;
								.control-label {
									margin-top: -2px;
								}
								.form-control {
									height: 20px;
									margin-top: 2px;
									&:focus {
										background-image: none ;
										background-size: 0;
										box-shadow: none;
										outline: 0 none;
										transition-duration: .3s;
									}
									&+.btn {
										right: 2px;
										top: 1px;
										position: absolute;
									}
								}
								select {
									min-width: 200px;
									font-size: 12px;
									padding: 0;
									&+.btn {
										height: 19px;
										font-size: 10px;
									}
								}
								.control-label {
									display: none;
								}
								.form-control {
									margin-bottom: 0 ;
									margin-top: 1.5px;
									width: calc(100% - 40px) ;
								}
							}
						}
						.panel-body {
							position: relative;
							height: calc(100% - 24px);
							&>.apc-send-ctrl {
								text-align: center;
								white-space: nowrap;
								margin-right: 5px;
								position: absolute;
								right: 13px;
								z-index: 99;
								&>i {
									padding: 5px;
									font-size: 20px;
									color: #cccccc;
									&:hover {
										color: #4d4d4d;
									}
								}
							}
							&>textarea {
								position: absolute;
								left: 0;
								right: 110px;
								height: 99%;
								width: 99%;
								width: calc(100% - 110px);
								bottom: 0;
								top: 0;
								border: none;
								padding: 5px;
								resize: none;
								z-index: 98;
							}
						}
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 0;
						height: 99%;
						height: calc(100% - 2px);
						width: 99%;
						width: calc(100% - 2px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
					}
					.apc-msg-typing {
						position: absolute;
						top: -23px;
						left: 10px;
						background: rgba(0, 0, 0, 0.09);
						padding: 2px 10px;
						border-radius: 9px;
						font-size: 10px;
						color: #616564;
						display: none;
					}
					.panel {
						margin-top: -2px;
						&-heading {
							margin-top: -4px;
							padding: 1px 2px 0 2px;
						}
					}
				}
				.apc-file-up-status {
					position: absolute;
					top: -33px;
					right: 22px;
					display: none;
					background: rgba(0, 0, 0, 0.66);
					padding: 5px;
					color: #ffffff;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				.panel {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					border: none;
					padding: 0;
					margin-bottom: 0 ;
					.panel-heading {
						padding: 0 15px;
						height: 24px;
						-webkit-border-radius: 0 ;
						-moz-border-radius: 0 ;
						border-radius: 0 ;
						.form-group {
							margin: 0;
							.control-label {
								margin-top: -2px;
							}
							.form-control {
								height: 20px;
								margin-top: 2px;
								&:focus {
									background-image: none ;
									background-size: 0;
									box-shadow: none;
									outline: 0 none;
									transition-duration: .3s;
								}
								&+.btn {
									right: 2px;
									top: 1px;
									position: absolute;
								}
							}
							select {
								min-width: 200px;
								font-size: 12px;
								padding: 0;
								&+.btn {
									height: 19px;
									font-size: 10px;
								}
							}
							.control-label {
								display: none;
							}
							.form-control {
								margin-bottom: 0 ;
								margin-top: 1.5px;
								width: calc(100% - 40px) ;
							}
						}
					}
					.panel-body {
						position: relative;
						height: calc(100% - 24px);
						&>.apc-send-ctrl {
							text-align: center;
							white-space: nowrap;
							margin-right: 5px;
							position: absolute;
							right: 13px;
							z-index: 99;
							&>i {
								padding: 5px;
								font-size: 20px;
								color: #cccccc;
								&:hover {
									color: #4d4d4d;
								}
							}
						}
						&>textarea {
							position: absolute;
							left: 0;
							right: 110px;
							height: 99%;
							width: 99%;
							width: calc(100% - 110px);
							bottom: 0;
							top: 0;
							border: none;
							padding: 5px;
							resize: none;
							z-index: 98;
						}
					}
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				.panel-heading {
					padding: 0 15px;
					height: 24px;
					-webkit-border-radius: 0 ;
					-moz-border-radius: 0 ;
					border-radius: 0 ;
					.form-group {
						margin: 0;
						.control-label {
							margin-top: -2px;
						}
						.form-control {
							height: 20px;
							margin-top: 2px;
							&:focus {
								background-image: none ;
								background-size: 0;
								box-shadow: none;
								outline: 0 none;
								transition-duration: .3s;
							}
							&+.btn {
								right: 2px;
								top: 1px;
								position: absolute;
							}
						}
						select {
							min-width: 200px;
							font-size: 12px;
							padding: 0;
							&+.btn {
								height: 19px;
								font-size: 10px;
							}
						}
						.control-label {
							display: none;
						}
						.form-control {
							margin-bottom: 0 ;
							margin-top: 1.5px;
							width: calc(100% - 40px) ;
						}
					}
				}
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
				.control-label {
					margin-top: -2px;
				}
				.form-control {
					height: 20px;
					margin-top: 2px;
					&:focus {
						background-image: none ;
						background-size: 0;
						box-shadow: none;
						outline: 0 none;
						transition-duration: .3s;
					}
					&+.btn {
						right: 2px;
						top: 1px;
						position: absolute;
					}
				}
				&:focus {
					background-image: none ;
					background-size: 0;
					box-shadow: none;
					outline: 0 none;
					transition-duration: .3s;
				}
				select {
					min-width: 200px;
					font-size: 12px;
					padding: 0;
					&+.btn {
						height: 19px;
						font-size: 10px;
					}
				}
				&+.btn {
					height: 19px;
					font-size: 10px;
				}
				.panel-body {
					position: relative;
					height: calc(100% - 24px);
					&>.apc-send-ctrl {
						text-align: center;
						white-space: nowrap;
						margin-right: 5px;
						position: absolute;
						right: 13px;
						z-index: 99;
						&>i {
							padding: 5px;
							font-size: 20px;
							color: #cccccc;
							&:hover {
								color: #4d4d4d;
							}
						}
					}
					&>textarea {
						position: absolute;
						left: 0;
						right: 110px;
						height: 99%;
						width: 99%;
						width: calc(100% - 110px);
						bottom: 0;
						top: 0;
						border: none;
						padding: 5px;
						resize: none;
						z-index: 98;
					}
				}
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>i {
					padding: 5px;
					font-size: 20px;
					color: #cccccc;
					&:hover {
						color: #4d4d4d;
					}
				}
				&:hover {
					color: #4d4d4d;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 0;
					height: 99%;
					height: calc(100% - 2px);
					width: 99%;
					width: calc(100% - 2px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
				}
				.apc-msg-typing {
					position: absolute;
					top: -23px;
					left: 10px;
					background: rgba(0, 0, 0, 0.09);
					padding: 2px 10px;
					border-radius: 9px;
					font-size: 10px;
					color: #616564;
					display: none;
				}
				&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
					display: block;
					position: absolute;
					top: 0px;
					z-index: 99;
					padding: 17px 15px;
				}
				&&.apc-pnl-header .apc-open-user-list {
					left: -5px;
				}
				&&.apc-pnl-header .apc-open-chatinfo {
					right: 5px;
				}
				.panel {
					margin-top: -2px;
					&-heading {
						margin-top: -4px;
						padding: 1px 2px 0 2px;
					}
				}
				&-heading {
					margin-top: -4px;
					padding: 1px 2px 0 2px;
				}
				.control-label {
					display: none;
				}
				.form-control {
					margin-bottom: 0 ;
					margin-top: 1.5px;
					width: calc(100% - 40px) ;
				}
				&+.btn {
					right: 2px;
					top: 1px;
					position: absolute;
				}
			}
		}
	}
	&&.apc-pnl-content .apc-chat-item-content {
		height: 100%;
		position: relative;
		&>.apc-msgs {
			overflow: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 30px;
			.apc-load-move {
				display: none;
			}
			.apc-chat-img-dl {
				display: block;
			}
			.apc-chat-img {
				display: block;
				img {
					max-height: 200px;
					border: 2px solid rgba(204, 204, 204, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					&:hover {
						border: 2px solid rgba(175, 34, 38, 0.44);
					}
				}
			}
			.apc-msg-time {
				display: table;
				clear: both;
				width: 90%;
				width: calc(100% - 64px);
				text-align: right;
				font-size: 10px;
				font-style: italic;
				font-weight: bold;
				letter-spacing: 1px;
				color: #595e5f;
			}
			&>.apc-msg-sys-item {
				overflow-wrap: break-word;
				.apc-msg {
					float: none;
					width: 90%;
					background: rgba(77, 77, 77, 0.3);
					margin-left: 11px;
					border-radius: 16px 16px 16px 16px;
					padding: 7px;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					margin: 5px auto;
					&>.apc-msg-item-header {
						border-bottom: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: -2px;
						margin-bottom: 5px;
						padding-bottom: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&>.apc-msg-item-footer {
						border-top: 1px solid rgba(100, 100, 100, 0.04);
						text-align: center;
						margin-top: 5px;
						padding-top: 5px;
						font-size: 10px;
						font-style: italic;
						font-weight: bold;
						letter-spacing: 1px;
						color: rgba(89, 94, 95, 0.5);
					}
					&-time {
						width: 90%;
						width: calc(100% - 103px);
					}
				}
			}
			&>.apc-msg-item {
				margin: 10px 0;
				overflow-wrap: break-word;
				&>.apc-umg {
					border-radius: 50%;
					background: #fff;
					width: 40px;
					height: 40px;
					float: left;
					overflow: hidden;
					box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
					img {
						width: 40px;
						height: 40px;
					}
				}
				&>.apc-msg {
					margin-top: 5px;
					float: left;
					width: 83%;
					width: calc(100% - 103px);
					background: rgb(255 255 255);
					margin-left: 11px;
					border-radius: 6px 6px 6px 16px;
					border: 1px solid #e4e8ee;
					padding: 7px;
				}
				&.apc-me>.apc-umg {
					float: right;
				}
				&.apc-me>.apc-msg {
					float: right;
					border-radius: 6px 4px 16px 6px;
					margin-right: 11px;
					margin-left: 0px;
					background: rgba(63,92,134,.14);
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
			&:after {
				content: "";
				display: table;
				clear: both;
			}
		}
	}
	&&.chat-end-button {
		width: 100% ;
	}
	&&.apc-pnl-content .apc-chat-item-msg-divider {
		height: 6px;
		border-top: 1px solid rgba(201, 201, 201, 0.37);
		border-bottom: 1px solid rgba(201, 201, 201, 0.37);
		text-align: center;
		color: #cccccc;
		background: #fffefe;
		background: -moz-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
		background: -webkit-linear-gradient(top, #fffefe 0%, #f9f6f6 100%);
		background: linear-gradient(to bottom, #fffefe 0%, #f9f6f6 100%);
		filter: progid;
		padding: 1px;
		line-height: 0;
		font-weight: bold;
		cursor: row-resize;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	&&.apc-pnl-content .apc-chat-msg-type-panel {
		position: relative;
		border-top: 1px solid rgba(201, 201, 201, 0.67);
		height: 100px;
		.apc-file-up-status {
			position: absolute;
			top: -33px;
			right: 22px;
			display: none;
			background: rgba(0, 0, 0, 0.66);
			padding: 5px;
			color: #ffffff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		.panel {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			padding: 0;
			margin-bottom: 0 ;
			.panel-heading {
				padding: 0 15px;
				height: 24px;
				-webkit-border-radius: 0 ;
				-moz-border-radius: 0 ;
				border-radius: 0 ;
				.form-group {
					margin: 0;
					.control-label {
						margin-top: -2px;
					}
					.form-control {
						height: 20px;
						margin-top: 2px;
						&:focus {
							background-image: none ;
							background-size: 0;
							box-shadow: none;
							outline: 0 none;
							transition-duration: .3s;
						}
						&+.btn {
							right: 2px;
							top: 1px;
							position: absolute;
						}
					}
					select {
						min-width: 200px;
						font-size: 12px;
						padding: 0;
						&+.btn {
							height: 19px;
							font-size: 10px;
						}
					}
					.control-label {
						display: none;
					}
					.form-control {
						margin-bottom: 0 ;
						margin-top: 1.5px;
						width: calc(100% - 40px) ;
					}
				}
			}
			.panel-body {
				position: relative;
				height: calc(100% - 24px);
				&>.apc-send-ctrl {
					text-align: center;
					white-space: nowrap;
					margin-right: 5px;
					position: absolute;
					right: 13px;
					z-index: 99;
					&>i {
						padding: 5px;
						font-size: 20px;
						color: #cccccc;
						&:hover {
							color: #4d4d4d;
						}
					}
				}
				&>textarea {
					position: absolute;
					left: 0;
					right: 110px;
					height: 99%;
					width: 99%;
					width: calc(100% - 110px);
					bottom: 0;
					top: 0;
					border: none;
					padding: 5px;
					resize: none;
					z-index: 98;
				}
			}
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
		&>textarea {
			position: absolute;
			left: 0;
			right: 0;
			height: 99%;
			height: calc(100% - 2px);
			width: 99%;
			width: calc(100% - 2px);
			bottom: 0;
			top: 0;
			border: none;
			padding: 5px;
			resize: none;
		}
		.apc-msg-typing {
			position: absolute;
			top: -23px;
			left: 10px;
			background: rgba(0, 0, 0, 0.09);
			padding: 2px 10px;
			border-radius: 9px;
			font-size: 10px;
			color: #616564;
			display: none;
		}
		.panel {
			margin-top: -2px;
			&-heading {
				margin-top: -4px;
				padding: 1px 2px 0 2px;
			}
		}
	}
	&&.apc-user-list {
		width: 25%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
		.apc-pnl-content>.slimScrollDiv {
			width: calc(100% ;
			padding-top: 0;
		}
		ul.apc-chat-list, ul.apc-chat-end-list {
			padding: 0;
			margin: 0 -10px;
			width: 100%;
			width: calc(100% ;
			&>li {
				cursor: pointer;
				display: block;
				width: 100%;
				padding: 10px 20px 10px 25px;
				list-style: none;
				border-bottom: 1px solid rgba(201, 201, 201, 0.67);
				border-left: 4px solid rgba(201, 201, 201, 0.67);
				position: relative;
				span.apc-rtc-c {
					display: none;
					position: absolute;
					right: 13px;
					top: 50%;
					margin-top: -12px;
					&.badge {
						margin-top: -10px;
					}
					span.apc-btn-rc {
						padding: 0 2px;
					}
				}
				&.has-msg:not(.apc-active) span.apc-rtc-c {
					display: block;
				}
				&.has-msg:not(.apc-active)::before {
					-webkit-animation-name: flash;
					animation-name: flash;
					animation-iteration-count: infinite;
					animation-duration: 2s;
				}
				&.apc-active {
					font-weight: bold;
					position: relative;
					border-left: 4px solid rgba(0, 0, 0, 0.3) ;
					&::after {
						content: ';
						position: absolute;
						width: 20px;
						right: -2px;
						z-index: 99;
						background: #fff;
						top: 0;
						bottom: 0;
						font-size: 21px;
						line-height: 35px;
						color: rgba(0, 0, 0, 0.12);
						font-weight: normal;
					}
				}
				&::before {
					content: ' ';
					position: absolute;
					width: 8px;
					height: 8px;
					left: 12px;
					top: 50%;
					margin-top: -4px;
					z-index: 99;
					background: #00a65a;
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
				}
				&:hover {
					border-left: 4px solid rgba(176, 176, 176, 0.67);
				}
			}
		}
		ul.apc-chat-end-list>li::before {
			background: #cc0000;
			width: 8px;
			height: 8px;
			left: 12px;
			top: 50%;
			margin-top: -3px;
		}
		&.apc-show {
			left: 0;
		}
		.apc-close-btn {
			right: 7px;
			&&&:hover {
				background: rgba(0, 0, 0, 0.13);
			}
		}
		ul.apc-chat-list>li.apc-active::after {
			display: none;
		}
	}
	&&.apc-chat-container {
		width: 100%;
		border-right: 1px solid rgba(201, 201, 201, 0.67);
	}
	&&.apc-chat-user-info {
		width: 25%;
		overflow: hidden;
		.dl-horizontal dt {
			text-align: left;
			width: 75px;
			position: relative;
			&:after {
				content: ';
				padding: 0 5px;
				position: absolute;
				right: 0;
			}
			&:after {
				content: '';
				display: none;
			}
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-left: 75px;
			padding-left: 0px;
			margin-bottom: 5px;
		}
		&.apc-show {
			right: 0;
			-webkit-box-shadow: -1px 0px 2px -1px #000;
			-moz-box-shadow: -1px 0px 2px -1px #000;
			box-shadow: -1px 0px 2px -1px #000;
		}
		.apc-close-btn {
			right: 7px;
		}
		.dl-horizontal dd {
			width: calc(100% - 34px);
			margin-top: -20px;
			padding-left: 0;
			margin-bottom: 5px;
			margin-left: 75px;
		}
		.dl-horizontal dd {
			width: 100%;
			padding-left: 0;
			margin-left: unset;
			display: block;
		}
	}
	&&.apc-close-btn {
		display: none;
	}
	&&.apc-pnl-header .apc-open-user-list, &&.apc-pnl-header .apc-open-chatinfo {
		display: block;
		position: absolute;
		top: 0px;
		z-index: 99;
		padding: 17px 15px;
	}
	&&.apc-pnl-header .apc-open-user-list {
		left: -5px;
	}
	&&.apc-pnl-header .apc-open-chatinfo {
		right: 5px;
	}
	&&.apc-user-list {
		position: absolute;
		left: -80%;
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
	}
	&&.apc-chat-container {
		border: none;
	}
	&&.apc-chat-user-info {
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 500ms;
		-o-transition: all 500ms;
		transition: all 500ms;
		z-index: 999;
		position: absolute;
		right: -80%;
	}
	&&.apc-show {
		top: 0px;
		width: 80%;
		background: #373737;
		color: #ffffff;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	&&.apc-close-btn {
		top: 8px;
		position: absolute;
		display: block;
		padding: 8px 12px;
		border: 1px solid rgba(201, 201, 201, 0.67);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	&&&:hover {
		background: rgba(0, 0, 0, 0.13);
	}
}
media all and (max-width: 768px) {
	padding: 5px 35px;
}
media all and (min-width: 769px) and (max-width: 992px) {
	text-align: left;
	width: 100%;
	display: block;
}
