// Page Manager

@media (min-width: 992px){
	.ht-page-manager-content{
		overflow-x: auto;
		overflow-x: overlay;
	}
	.page-content-wrapper .ht-page-manager-content {
		position: fixed;
    left: 235px;
    top: 50px;
    right: 0;
	}
	.page-sidebar-closed .page-content-wrapper .ht-page-manager-content {
	  left: 45px !important;
	}
}

.page-content-wrapper{
	// position: relative;
}
.ht-page-title-wrap{
	display: none;
	align-items: center;
	position: fixed;
	height: 38px;
	top: 6px;
	background-color: $grey100;
	border-radius: 4px;
	z-index: 9998;
	color: $grey700;
	.ptw_main-title{
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 0 12px 0;
		line-height: 24px;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		.main-title-wrap{
			display: inline-block;
			max-width: 100%;
			vertical-align: top;
			position: relative;
			line-height: 24px;
			padding: 0 0 0 32px;
			.main-title_profile-image{
				position: absolute;
				top: 0; left: 0;
				width: 24px;
				height: 24px;
				margin: 0 8px 0 0;
				background-color: $grey300;
				border-radius: 50%;
			}
		}
	}
	.ptw_more-actions{
		flex: 0 0 auto;
		min-width: 0;
		padding: 0 12px;
	}
}
@media (min-width: 992px){
	.ht-page-title-wrap{
		display: flex;
	}
	.page-content-wrapper .ht-page-title-wrap{
    left: 235px;
    width: calc(33% - 79px);
	}
	.page-sidebar-closed .page-content-wrapper .ht-page-title-wrap{
	  left: 45px !important;
	  width: calc(33% - 15px);
	}
	// .ht-page-title-wrap{
	//   left: 45px !important;
	// }
}
.ht-page-manager-content{
	min-height: 0 !important;
	height: auto !important;
}
// Full Height minus Header's height
.ht-pm-container{
	min-width: 1080px;
	height: calc(100vh - 50px);
	// overflow: auto;
	background-color: #fff;
	// Elements
	a{
		@include transition(color .1s ease-in-out, background-color .1s ease-in-out);
	}
	.tooltip{
		.tooltip-inner{
			padding: 2px 6px;
			font-size: 11px;
			white-space: nowrap;
			border-radius: 2px;
		}
	}
	.ht-list-loading{
		color: $grey400;
		height: 56px;
		background-image: url("../img/spinner.svg");
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
	// List Select Column
	.ht-list-select-col{
		position: relative;
		float: left;
		width: 33%;
		height: calc(100vh - 50px);
		margin: 0;
		padding: 0;
		border-right: 1px solid $grey400;
		
		&.has-account-list{
			padding-left: 72px;
			.ht-account-list-wrap{
				position: absolute;
				top: 0; left: 0; bottom: 0;
				width: 72px;
				color: $grey900;
				background-color: $grey100;
				border-right: 1px solid $grey400;
				height: calc(100vh - 50px);
				// overflow-y: auto;
				// @include scrollbar(4px, $grey500, $grey200);
				.single-account{
					position: relative;
					margin-top: 16px;
					a{
						display: block;
						padding: 0 11px 0 8px;
						border-left: 4px solid transparent;
						.account-image{
							width: 48px;
							height: 48px;
							background-color: $grey300;
							border-radius: 50%;
							@include transition(opacity .12s ease-in-out);
						}
						&:hover{
							.account-image{
								opacity: .6;
							}
						}
					}
					&.has-new-notify{
						&:before{
							z-index: 23;
							content: "";
							display: block;
							position: absolute;
							width: 8px;
							height: 8px;
							top: 0; left: 50%;
							margin-left: 12px;
							background-color: material-color('red','500');
							border-radius: 50%;
						}
					}
					&.active{
						a{
							border-color: material-color('green','500');
						}
					}
				}
				.add-more-account{
					margin-top: 8px;
					a{
						display: block;
						padding: 12px 0;
						line-height: 28px;
						text-align: center;
						color: #bdbdbd;
						i{
							display: inline-block;
							vertical-align: top;
							line-height: 28px;
							font-size: 24px;
						}
						&:hover{
							color: $grey700;
						}
					}
				}
			}
		}
		.ht-convo-list-wrap{
			position: relative;
			.convo-nav-tabs{
				background-color: $grey100;
				& > ul{
					padding: 0;
					margin: 0;
					list-style: none;
					& > li{
						display: table-cell;
			    	width: 1%;
			    	float: none;
						border-left: $border;
						&:first-child{
							border-left: 0;
						}
			    	& > .dropdown > a,
						& > a{
							display: block;
							text-align: center;
							color: #999;
							background-color: #f5f5f5;
							border: 0;
							border-bottom: 1px solid #e0e0e0;
							& > span{
								display: block;
								padding: 8px 0;
							}
							i{
								display: inline-block;
								line-height: 30px;
								font-size: 18px;
								text-align: center;
							}
							&:hover{
								text-decoration: none;
							}
						}
						&.active{
							a{
								color: material-color('blue','500');
								background-color: #fff;
								border-bottom-color: #fff;
							}
						}
						& > .dropdown{
							.dropdown-menu{
								margin-top: -1px;
								right: -1px;
								padding: 4px 0;
								min-width: 120px;
								// border: 1px solid #e0e0e0 !important;
								// border-radius: 0px !important;
								// box-shadow: 0 3px 8px 0 rgba(#000, .2) !important;
								li{
									a{
										// font-size: 12px;
										// line-height: 16px;
										// padding: 5px 20px 5px 12px;
										// min-width: 0;
									}
								}
							}
						}
					}
				}
			}
			.convo-search{
				padding: 12px;
				border-bottom: 1px solid #e0e0e0;
				.form-group{
					position: relative;
					margin: 0;
					padding: 0;
				}
				.form-control{
					border-radius: 0;
					padding-left: 34px; 
					border-color: #ddd;
				}
				.search-icon{
					position: absolute;
					display: block;
					height: 34px;
					width: 34px;
					top: 0; left: 0;
					text-align: center;
					background-color: transparent;
					color: $grey400;
					i{
						display: inline-block;
						line-height: 34px;
						font-size: 14px;
					}
					&.on-load{
						i{
							-webkit-animation: fa-spin 1s infinite steps(8);
						  animation: fa-spin 1s infinite steps(8);
						  color: material-color('blue','400');
							&:before {
							  content: "\f110";
							}
						}
					}
				}
			}
			.convo-list{
				// overflow-x: visible;
				// overflow-y: auto;
				$height-convo-list: calc(100vh - 50px - 47px - 59px);
				height: $height-convo-list;
				.tab-pane{
					height: $height-convo-list;
					overflow-y: auto;
					@include scrollbar(3px, $grey400, $grey200);
				}
				.tooltip{
					&.bottom{
						margin-top: 4px !important;
						left: auto !important;
						right: 8px !important;
					}
					&.bottom .tooltip-arrow {
						left: auto !important;
						right: 6px !important;
					}
				}
				.single-convo{
					position: relative;
					min-height: 80px;
					padding: 12px 12px 12px 68px;
					cursor: pointer;
					border-bottom: 1px solid #eee;
					@include transition(background-color .12s ease-in-out);
					&:hover{
						background-color: $grey50;
					}
					.user-avatar{
						position: absolute;
						top: 12px; left: 12px;
						width: 56px;
						height: 56px;
						background-color: $grey300;
						border-radius: 28px;
					}
					.convo-main{
						padding: 0 0 0 8px;
						// display: flex;
						// align-items: center;
					}
					.convo-title{
						display: flex;
						justify-content: space-between;
						margin: 0;
						.user-name{
							flex: 1 1 auto;
							min-width: 0;
							margin: 0 8px 0 0;
							min-width: 0;
							padding: 0;
							line-height: 16px;
							font-size: 13px;
							font-weight: 600;
							color: $grey900;
						}
						.meta-time{
							flex: 0 0 auto;
							min-width: 0;
							line-height: 16px;
							font-size: 11px;
							color: $grey500;
						}
					}
					.convo-content{
						margin-top: 3px;
						display: flex;
						.mess-excerpt{
							flex: 1 1 0%;
							padding: 0;
							line-height: 16px;
							font-size: 13px;
							color: $grey600;
						}
						.user-action{
							flex: 0 0 auto;
							padding: 0 0 0 8px;
							line-height: 16px;
							a{
								display: inline-block;
								vertical-align: middle;
								margin: 0 2px;
							}
							.read-status{
								width: 12px;
								height: 12px;
								background-color: $grey200;
								border: 2px solid #ccc;
								border-radius: 8px;
								&.active{
									background-color: material-color('blue','500');
									border-color: transparent;
								}
							}
						}
					}
					.convo-info{
						display: flex;
						align-items: center;
						margin-top: 5px;
						.convo-labels{
							flex: 1 1 auto;
							min-width: 0;
							line-height: 16px;
							margin-right: 12px;
							font-size: 0;
							.single-label{
								display: inline-block;
								vertical-align: top;
								margin: 0 4px 0 0;
								padding: 0 5px;
								font-size: 10px;
								font-weight: 600;
								line-height: 16px;
								border-radius: 2px;
							}
						}
						.convo-last-reply-user{
							flex: 0 0 auto;
							.user-name{
								// max-width: 120px;
								font-size: 11px;
								line-height: 14px;
								color: material-color('blue','400');
							}
						}
					}
				}
				ul{
					li{
						&.active{
							.single-convo{
								background-color: material-color('blue','50');
							}
						}
					}
				}
				.ht-list-loading{
					color: $grey400;
					height: 56px;
					background-image: url("../img/spinner.svg");
					background-repeat: no-repeat;
					background-position: 50% 50%;
				}
			}
		}
	}
	// Convo Content
	.ht-convo-content-col{
		float: right;
		width: 67%;
		.ht-chatbox-main{
			float: left;
			width: 67%;
			&.on-loading{
				position: relative;
				&:after{
					content: "";
					z-index: 999;
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					background-color: rgba(#fff,.6);
					background-image: url("../img/spinner.svg");
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 96px 96px;
				}
			}
			.chatbox-header{
				display: flex;
				padding: 0 12px;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				.header-title{
					padding: 8px 0;
					line-height: 30px;
					font-size: 24px;
				}
				.header-action{
					padding: 9px 0;
				}
			}
			.convo-labels{
				padding: 8px 12px;
				border-bottom: 1px solid #eee;
				font-size: 0;
				display: block;
		    overflow: overlay;
		    white-space: nowrap;
		    @include scrollbar(5px, rgba(#000,.16), rgba(#000,.04));
				.single-label{
					display: inline-block;
					vertical-align: top;
					margin: 2px 4px 0 0;
					padding: 2px 8px;
					font-size: 11px;
					font-weight: 600;
					line-height: 16px;
					border-radius: 2px;
				}
			}
			.list-messages{
				height: calc(100vh - 50px - 47px - 123px - 41px);
				overflow-y: auto;
				@include scrollbar(5px, $grey400, $grey200);
				padding: 12px;
				.original-post-preview{
					display: flex;
					margin: 0 -12px;
					padding: 0 12px 12px;
					border-bottom: 1px solid #eee;
					.post-preview-image{
						flex: 0 0 128px;
						min-width: 0;
					}
					.post-preview-content{
						flex: 1 1 auto;
						min-width: 0;
						padding: 0 0 0 12px;
						font-size: 13px;
						.content-excerpt{
							font-size: 13px;
							line-height: 18px;
							@include multiLineEllipsis(3);
							max-height: 54px;
						}
						.content-action{
							margin-top: 6px;
						}
					}
				}
				.convo-start-time{
					margin: 28px 0 16px;
					font-size: 12px;
					font-weight: 600;
					color: $grey500;
				}
				.message-loading{
					.loading-animation{
						display: inline-block;
						vertical-align: top;
						height: 34px;
						width: 48px;
						background-image: url("../img/loading-typing.svg");
						background-repeat: no-repeat;
						background-position: 0 -18px;
						background-size: auto 48px;
					}
					
				}
				.convo-message{
					position: relative;
					margin: 16px 0;
					padding: 0 0 0 40px;
					text-align: left;
					.tooltip{
						.tooltip-inner{
							border-radius: 4px;
						}
					}
					& > .ht-inner{
						//
					}
					.user-avatar{
						display: block;
						position: absolute;
						bottom: 0; left: 0;
						width: 34px;
						height: 34px;
						background-color: $grey200;
						border-radius: 50%;
					}
					.user-title{
						margin: 0 0 5px;
						padding: 0 12px;
						line-height: 15px;
						font-size: 12px;
						color: $grey500;
					}
					.user-messages{
						img{
							max-width: 100%;
						}
						.single-message{
							.single-message_content{
								max-width: 60%;
								display: inline-block;
								vertical-align: bottom;
								line-height: 18px;
								font-size: 13px;
								text-align: left;
								color: $grey900;
								background-color: $grey200;
								border-radius: 12px;
								overflow: hidden;
								.content-text{
									padding: 8px 12px;
									display: inline-block;
									& + .content-attachment{
										padding: 4px 12px 12px 12px;
										img{
											border-radius: 8px;
										}
										&.has-multiple-attachments{
											padding-top: 4px;
										}
									}
								}
								.content-attachment{
									a{
										vertical-align: top;
										display: inline-block;
									}
									img{
										display: block;
										max-width: 100%;
										max-height: 200px;
									}
									&.has-multiple-attachments{
										@include clearfix();
										padding: 12px;
										margin: -6px;
										.single-attachment{
											min-width: 96px;
											max-width: 152px;
											width: calc(50% - 6px);
											float: left;
											margin: 3px;
											.ht-inner{
												border-radius: 8px;
												background-color: #fff;
											}
										}
									}
								}
								&.secondary-bg-color{
									background-color: material-color('lime','100');
								}
							}
							.single-message_meta{
								display: inline-block;
								vertical-align: bottom;
								margin: 0;
								padding: 0 0 4px 6px;
								font-size: 0;
								color: $grey400;
								white-space: nowrap;
								span{
									display: inline-block;
									vertical-align: top;
									line-height: 16px;
									font-size: 11px;
									white-space: nowrap;
									& + span{
										&:before{
											content: ",";
											display: inline-block;
											vertical-align: top;
											line-height: 16px;
											font-size: 11px;
											padding: 0 4px 0 0;
										}
									}
								}
								b{
									font-weight: 700;
								}
							}
						}
						.single-message-action{
							font-size: 0;
							padding: 4px 12px;
							margin: 0 0 4px;
							span{
								display: inline-block;
								vertical-align: top;
								line-height: 18px;
								font-size: 12px;
								font-weight: 600;
								color: $grey700;
								& + span:before{
									content: "\2022";
									display: inline-block;
									vertical-align: top;
									line-height: 18px;
									padding: 0 5px;
									font-size: 6px;
									color: material-color('grey','400');
								}
								&.deleted-comment-label{
									display: none;
									color: $grey500;
								}
							}
						}
					}
					&.inbox-message{
						.user-messages{
							.single-message{
								& + .single-message{
									margin-top: 4px;
								}
								.single-message_content{
									border-radius: 4px 12px 12px 4px;
								}
								.single-message_meta{
									display: none;
								}
								&:first-child{
									.single-message_content{
										border-top-left-radius: 12px;
									}
								}
								&:last-child{
									.single-message_content{
										border-bottom-left-radius: 12px;
									}
									.single-message_meta{
										display: inline-block;
									}
								}
							}
						}
					}
					&.comment-message{
						.user-avatar{
							bottom: 26px;
						}
						.user-messages{
							.single-message{
								&:not(:first-child){
									margin-top: 4px;
								}
								.single-message_content{
									//
								}
								.single-message_meta{
									display: none;
								}
								&:nth-last-child(2){
									.single-message_meta{
										display: inline-block;
									}
								}
							}
						}
					}
					&.is-from-admin{
						text-align: right;
						padding: 0;
						.user-avatar{
							bottom: 0; left: auto; right: 0;
						}
						.user-title{
							//
						}
						.user-messages{
							direction: rtl;
							.single-message{
								direction: ltr;
								& + .single-message{
									margin-top: 6px;
								}
								.single-message_content{
									display: inline-block;
									color: #fff;
									background-color: material-color('blue','500');
									border-radius: 12px 4px 4px 12px;
									&.no-bg-color{
										background-color: transparent;
									}
								}
								.single-message_meta{
									display: block;
									margin: 2px 0 0;
									padding: 0 12px;
								}
								&:first-child{
									.single-message_content{
										border-top-right-radius: 12px;
									}
								}
								&:last-child{
									.single-message_content{
										border-bottom-right-radius: 12px;
									}
								}
								&.sent-error{
									.single-message_content{
										background-color: material-color('blue','200');
									}
									.single-message_meta{
										color: material-color('red','500');
									}
								}
							}
						}
					}
					&.deleted{
						.user-messages{
							.single-message{
								.single-message_content{
									color: $grey500;
									.content-text{
										text-decoration: line-through;

										& + .content-attachment{
											padding: 4px 12px  12px 12px;
											img{
												border-radius: 8px;
											}
										}
									}
									.content-attachment{
										opacity: .6;
									}
									&.secondary-bg-color{
										background-color: material-color('lime','50');
									}
								}
							}
						}
						.single-message-action{
							span{
								display: none;
								& + span:before{
									display: none;
								}
								&.deleted-comment-label{
									display: inline-block;
								}
							}
						}
					}

					// old style
					.messages-wrap{
						text-align: left;
						.single-message{
							display: block;
							margin-top: 3px;
							.message-content{
								display: inline-block;
								max-width: 60%;
								position: relative;
								.content-main{
									display: inline-block;
									vertical-align: top;
									max-width: 100%;
									padding: 7px 12px;
									line-height: 18px;
									font-size: 13px;
									text-align: left;
									color: $grey900;
									background-color: $grey200;
									border-radius: 3px 14px 14px 3px;
									overflow: hidden;
									&.attachment-file{
										padding: 0;
										a{
											display: inline-block;
											border: 1px solid #eee;
										}
										img{
											display: inline-block;
											max-width: 100%;
											max-height: 200px;
										}
									}
									&.secondary-bg-color{
										background-color: material-color('lime','100');
									}
								}
								.content-meta{
									position: absolute;
									left: 100%; bottom: 2px;
									margin-left: 8px;
									font-size: 0;
									color: $grey500;
									white-space: nowrap;
									span{
										display: inline-block;
										vertical-align: top;
										line-height: 16px;
										font-size: 11px;
										white-space: nowrap;
										& + span{
											&:before{
												content: ",";
												font-size: 11px;
												padding: 0 4px 0 0;
											}
										}
									}
									b{
										font-weight: 700;
									}
								}
							}
							.message-action{
								font-size: 0;
								padding: 4px 12px;
								margin: 0 0 4px;
								span{
									display: inline-block;
									vertical-align: top;
									line-height: 18px;
									font-size: 12px;
									font-weight: 600;
									& + span:before{
										content: "\2022";
										display: inline-block;
										vertical-align: top;
										line-height: 18px;
										padding: 0 6px;
										font-size: 8px;
										color: material-color('grey','400');
									}
								}
							}
							&:first-child{
								.message-content{
									.content-main{
										border-top-left-radius: 12px !important;
									}
								}
							}
							&:last-child{
								.message-content{
									.content-main{
										border-bottom-left-radius: 12px !important;
									}
								}
							}
						}
					}
					&.is-from-owner{
						padding: 0;
						.messages-wrap{
							text-align: right;
							.single-message{
								.message-content{
									.content-main{
										color: #fff;
										background-color: material-color('blue','600');
										border-radius: 14px 3px 3px 14px;
									}
									.content-meta{
										position: static;
										left: auto; bottom: auto;
										margin: 2px 0 5px;
										font-size: 0;
										color: $grey500;
										white-space: nowrap;
										text-align: right;
									}
								}
								&:first-child{
									.message-content{
										.content-main{
											border-top-right-radius: 12px !important;
										}
									}
								}
								&:last-child{
									.message-content{
										.content-main{
											border-bottom-right-radius: 12px !important;
										}
									}
								}
							}
						}
					}
					// end old style
				}
			}
		}
		.message-reply-section{
			padding: 0;
			border-top: $border;
			.form-group{
				margin: 0;
			}
			.form-control{
				height: auto;
				padding: 12px 12px;
				font-size: 13px;
				border: 0;
				border-radius: 0;
				resize: none;
			}
			.reply-actions{
				margin: 0 12px 0;
				padding: 12px 0;
				border-top: 1px solid #eee;
				.single-action{
					display: inline-block;
					margin-right: 12px;
					padding: 2px 0 0;
					font-size: 0;
					text-align: center;
					color: $grey500;
					.action-icon{
						font-size: 14px;
					}
					.action-label{
						font-size: 11px;
					}
					&:hover{
						text-decoration: none;
						color: material-color('blue','500');
					}
				}
			}
			.sample-message-list{
				width: 560px;
				padding: 0;
				margin-left: -120px;
				.tooltip{
					.tooltip-inner{
						padding: 4px 6px;
						white-space: normal;
						text-align: center;
					}
				}
				.single-message{
					padding: 3px 4px;
					border-bottom: $border;
					a{
						// display: inline-block !important;
						// vertical-align: top;
						&:hover{
							text-decoration: none;
						}
					}
					.flex-item-content{
						flex: 0 0 480px; 
					}
					.message-content{
						display: block;
						padding: 4px 8px;
						line-height: 18px;
						font-size: 13px;
						color: $grey800;
						&:hover{
							color: material-color('blue','500');
						}
					}
					.message-content-input{
						width: 306px;
						margin: 0 7px;
						padding: 3px 12px;
						line-height: 18px;
						font-size: 13px;
						border: 1px solid #ccc;
						background-color: $grey50;
						border-radius: 2px;
						&:focus{
							outline: none;
							background-color: #fff;
						}
					}
					.message-action{
						line-height: 18px;
						font-size: 13px;
						padding: 4px 2px;
					}
				}
				.add-more-message{
					padding-top: 5px;
					padding-bottom: 5px;
					font-size: 11px;
					font-weight: 600;
					color: material-color('blue','500');
				}
			}
		}
		.ht-convo-info{
			display: flex;
			flex-direction: column;
			position: relative;
			float: right;
			padding: 0 0 0;
			width: 33%;
			height: calc(100vh - 50px);
			border-left: $border;
			.top-section{
				min-height: 0;
				min-width: 0;
				// position: absolute;
				// top: 0; bottom: 300px; left: 0; right: 0;
				overflow-y: auto;
				@include scrollbar(5px, $grey400, $grey200);
			}
			.bottom-section{
				// height: 300px;
				// position: absolute;
				// bottom: 0; left: 0; right: 0;
				min-height: 200px;
			  max-height: 400px;
			  flex-basis: auto; /* default value */
			  flex-grow: 1;
				overflow-y: auto;
				@include scrollbar(5px, $grey400, $grey200);
				border-top: $border;
			}

			// Single Section
			.single-section{
				padding: 12px;
				.section-header{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 0 8px;
					padding: 0;
					// border-bottom: 1px solid #eee;
					.section-title{
						flex: 1 1 auto;
						margin: 0;
						padding: 0;
						line-height: 18px;
						font-size: 13px;
						font-weight: 600;
						color: $grey500;
					}
					.section-action{
						flex: 0 0 auto;
					}
				}
				.section-content{
					//
				}
			}
			// Convo Info: Participant Profile
			.ptcp-profile-section{
				border-bottom: $border;
				.section-header{
					//
				}
				.section-content{
					.profile-info{
						position: relative;
						min-height: 60px;
						padding: 0 0 0 68px;
					}
					.profile-image{
						position: absolute;
						top: 0; left: 0;
						width: 60px;
						height: 60px;
						padding: 2px;
						border: 1px solid #eee;
						border-radius: 2px;
						.ht-bgcover{
							width: 54px;
							height: 54px;
							background-color: $grey200;
						}
					}
					.profile-detail{
						ul{
							li{
								position: relative;
								margin: 0 0 2px;
								padding: 0 0 0 22px;
								line-height: 18px;
								font-size: 13px;
								.icon-left{
									display: block;
									position: absolute;
									top: 0; left: 0;
									width: 18px;
									height: 18px;
									line-height: 18px;
									font-size: 12px;
									text-align: center;
									color: $grey500;
								}
							}
						}
					}
				}
			}

			// Convo Notes
			.convo-notes-section{
				.section-header{
					//
				}
				.section-content{
					.no-note{
						padding: 16px 10%;
						.ht-title{
							margin: 0 0 6px;
							font-size: 14px;
							font-weight: 600;
							color: $grey800;
						}
						.ht-descr{
							font-size: 14px;
							font-size: 12px;
							color: $grey600;
						}
					}
					.list-notes{
						.single-note{
							margin-bottom: 12px;
							&:last-child{
								margin-bottom: 0;
							}
							.note-content{
								margin: 0 0 4px;
								font-size: 13px;
							}
							.note-meta{
								font-size: 0;
								span{
									display: inline-block;
									font-size: 11px;
									color: $grey500;
									&:after{
										content:"\2022";
										display: inline-block;
										padding: 0 4px;
										font-size: 10px;
										color: $grey400;
									}
									&:last-child{
										&:after{
											display: none;
										}
									}
								}
								a{
									font-size: 11px;
								}
							}
						}
					}
				}
			}

			.caring-date-section{
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
			}

			// Customer Orders
			.customer-order-section{
				.section-footer{
					margin-top: 12px;
				}
				.single-order{
					.order-image{
						.image-wrap{
							width: 48px;
							height: 48px;
							background-color: $grey200;
							border: $border;
						}
					}
					.order-info{
						padding-left: 8px;
						.order-title{
							margin: 0;
							line-height: 18px;
							font-size: 14px;
							font-weight: 600;
						}
						.order-note{
							margin: 3px 0 0;
							line-height: 16px;
							font-size: 12px;
							color: $grey600;
						}
					}
				}
			}

			// Purchased Products
			.purchased-products-section{
				.list-products{
					padding-top: 8px;
					.single-product{
						display: flex;
						// align-items: top;
						margin-bottom: 12px;
						.product-image{
							flex: 0 0 40px;
							min-width: 0;
							.image-wrap{
								display: block;
								width: 40px;
								height: 40px;
								background-color: $grey200;
								border: $border;
							}
						}
						.product-info{
							margin: 0 ;
							flex: 1 1 auto;
							min-width: 0;
							padding-left: 8px;
							.info-title{
								margin: 0;
								line-height: 17px;
								font-size: 13px;
								font-weight: 600;
								a{
									color: $grey900;
								}
							}
							.info-descr{
								margin: 4px 0 0;
								line-height: 16px;
								font-size: 0;
								color: $grey500;
								span{
									display: inline-block;
									vertical-align: top;
									line-height: 16px;
									font-size: 12px;
									& + span{
										&:before{
											content: "\2022";
											display: inline-block;
											vertical-align: top;
											line-height: 14px;
											padding: 2px 5px 0;
											font-size: 8px;
											color: $grey400;
										}
									}
								}
							}
						}
					}
				}
			}

			// 
		}
	}

	.ht-convo-not-selected-col{
		float: right;
		width: 67%;
		.convo-not-selected-message{
			text-align: center;
			height: calc(100vh - 50px);
			display: flex;
			align-items: center;
			justify-content: space-around;
			.message-wrapper{
				.message-icon{
					color: $grey400;
				}
				.message-text{
					margin: 8px 0 0;
					line-height: 18px;
					font-size: 14px;
					color: $grey500;
				}
				.message-helper{
					margin: 28px 0 0;
					padding: 12px 20px;
					font-size: 14px;
					color: $grey700;
					background-color: $grey50;
					border: 2px dashed #e0e0e0;
				}
			}
		}
	}


	.ht-convo-add-new-convo{
		.ht-main-content-wrapper{
			height: calc(100vh - 50px);
			padding: 24px;
			display: flex;
			align-items: baseline;
			justify-content: space-around;
			background-color: $grey100;
		}
		.ht-convo-add-new-card{
			width: 400px;
			background-color: #fff;
			box-shadow: 0 1px 3px 0 rgba(#000,.12);
			@media (min-width: $screen-sm-min){
				width: 480px;
			}
			@media (min-width: $screen-md-min){
				width: 560px;
			}
			@media (min-width: $screen-lg-min){
				width: 640px;
			}
			.card-header{
				padding: 12px;
				background-color: #fff;
				border-bottom: 1px solid #eaeaea;
				.card-title{
					margin: 0;
					line-height: 30px;
					font-size: 24px;
					font-weight: 500;
				}
			}
			.card-content{
				.convo-selected-users{
					display: flex;
					padding: 12px 12px 8px;
					background-color: $grey50;
					.list-label{
						flex: 0 0 auto;
						min-width: 0;
						font-size: 13px;
						line-height: 18px;
						padding: 4px 12px 4px 0;
					}
					.list-selected-users{
						flex: 1 1 auto;
						min-width: 0;
						font-size: 0;
						.single-selected-user{
							position: relative;
							display: inline-block;
							vertical-align: top;
							margin: 0 8px 5px 0;
							line-height: 26px;
							padding: 0 34px 0 8px;
							background-color: $grey200;
							border-radius: 2px;
							.ssu_user-title{
								display: block;
								max-width: 240px;
								overflow: hidden;
								text-overflow: ellipsis;
								padding: 4px 0 4px 0;
								line-height: 18px;
								font-size: 13px;
								white-space: nowrap;
								color: $grey800;
							}
							.ssu_user-action{
								display: block;
								position: absolute;
								top: 0; right: 0;
								line-height: 26px;
								width: 26px;
								font-size: 18px;
								font-weight: 700;
								text-align: center;
								color: material-color("red",'500');
								background-color: $grey200;
								border-radius: 0 2px 2px 0;
								z-index: 15;
								border-left: 1px solid #eaeaea;
								&:hover{
									background-color: $grey300;
								}
								&:hover, &:active, &:focus{
									text-decoration: none;
								}
							}
						}
					}
				}
				.convo-search-user{
					padding: 12px;
					.form-group{
						position: relative;
						.form-control{
							font-size: 13px;
							padding-left: 36px;
							border-radius: 2px;
						}
						.form-icon{
							position: absolute;
							top: 0; left: 0;
							width: 34px;
							height: 34px;
							line-height: 34px;
							text-align: center;
							color: $grey400;
							i{
								display: inline-block;
								vertical-align: top;
								margin: 5px 0;
								width: 24px;
								height: 24px;
								line-height: 24px;
								@include transition(transform .2s ease-in-out);
							}
						}
						.form-control{
							&:focus{
								border-color: #ccc;
								& + .form-icon{
									i{
										@include rotate(90deg);
									}
								}
							}
						}
						ul.form-suggested-list{
							position: absolute;
							top: 100%; left: 4px; 
							list-style: none;
							padding: 4px 0;
							margin: 0;
							width: 65%;
							background-color: #fff;
							z-index: 20;
							box-shadow: 0 2px 5px rgba(#000,.16);
							max-height: 360px;
							overflow: auto;
							min-width: 360px;
							li{
								line-height: 18px;
								&.list-loading{
									height: 48px;
									line-height: 24px;
									font-size: 12px;
									color: $grey500;
									padding: 12px 12px 12px 48px;
									background-image: url(../img/spinner.svg);
									background-size: 48px 48px;
									background-position: 0 0;
									background-repeat: no-repeat;
								}
								&.list-title{
									margin-bottom: 4px;
									padding: 4px 12px;
									font-size: 13px;
									color: $grey500;
									background-color: $grey50;
								}
							}
							a{
								display: block;
								&:hover, &:focus, &:active{
									text-decoration: none;
								}
							}
							.single-user{
								display: flex;
								align-items: center;
								padding: 8px 12px;
								.su_user-avatar{
									flex: 0 0 36px;
									min-width: 0;
									border-radius: 50%;
									overflow: hidden;
									background-color: $grey200;
									img{
										display: block;
										width: 36px;
										height: 36px;
										object-fit: cover;
									}
								}
								.su_user-title{
									flex: 1 1 auto;
									padding: 0 0 0 8px;
									font-size: 13px;
									line-height: 18px;
									color: $grey900;
								}
								&:hover{
									background-color: material-color('blue','50');
								}
							}
						}
					}
				}
			}
			.card-footer{
				border-top: 1px solid #eaeaea;
				padding: 12px;
			}
		}
	}
}


// Modal

.image-storage-modal-dialog{
	width: 800px;
}
.image-storage-modal-content{
	.modal-body{
		padding: 12px;
	}
	.modal-footer{
		padding: 12px;
		border-top: $border !important;
	}
	.list-uploaded-images{
		margin: 8px -6px;
	}
}
.list-uploaded-images{
	.single-image{
		padding: 6px;
		width: 16.6666%;
		float: left;
		.single-image_label{
			display: block;
			padding: 0;
			margin: 0;
			cursor: pointer;
			.option-input{
				display: none;
			}
			.image-wrapper{
				border: 2px solid #eaeaea;
				@include transition(border-color .1s ease-in-out);
			}
			.option-input{
				&:checked{
					& + .image-wrapper{
						border-color: material-color('blue','500');
					}
				}
			}
		}
	}
}
.convo-tag-edit-modal-content{
	.modal-body{
		padding: 12px;
	}
	.modal-footer{
		padding: 12px;
		border-top: $border !important;
	}
	.tags-helped-text{
		font-size: 14px;
	}
	.tag-list_pre-added{
		padding: 8px 0;
		border-bottom: 1px solid #eee;
		.single-pre-added-tag{
			display: inline-block;
			padding: 0;
			font-size: 13px;
			font-weight: 600;
			line-height: 18px;
			border-radius: 2px;
			&.deactive{
				opacity: .4;
			}
			a{
				display: inline-block;
				vertical-align: top;
				color: #fff;
				line-height: 18px;
				&:hover{
					text-decoration: none;
				}
			}
			.tag-label{
				padding: 4px 10px;
				&:hover{
					opacity: .9;
				}
			}
			.tag-action{
				padding: 4px 8px;
				font-size: 16px;
				background-color: rgba(#000,.1);
				&:hover{
					background-color: rgba(#000,.2);
				}
			}
		}
	}
	.bootstrap-tagsinput{
		width: 100%;
		.tag{
			line-height: 18px;
			font-size: 13px;
			text-transform: none;
			padding: 5px 10px;
			margin: 0 0 5px;
		}
		input{
			display: block;
			width: 100%;
			padding: 4px 0;
		}
	}
}

.quick-inbox-modal-content{
	width: 480px;
	.modal-header{
		padding: 10px 12px;
		.modal-title{
			font-size: 16px;
			font-weight: 600;
		}
	}
	.modal-body{
		padding: 12px;
	}
	.modal-footer{
		padding: 12px;
		border-top: $border !important;
	}
	.inbox-receivers-wrap{
		font-size: 0;
		span{
			display: inline-block;
			vertical-align: middle;
			margin: 0 5px 5px 0;
			line-height: 18px;
			font-size: 13px;
		}
		.label-text{
		}
		.single-receiver{
			padding: 4px 8px;
			background-color: $grey100;
			font-weight: 600;
			color: material-color('blue','500');
			border: 1px solid $grey300;
			border-radius: 4px;
		}
	}
	.inbox-input-wrap{
		margin: 12px -12px 0;
		padding: 4px 0 0;
		border-top: $border;
		.form-control{
			border-color: transparent;
		}
	}
}


// Page select

.fb-page-select-section{
	max-width: 560px;
	margin: 56px auto;
	background-color: #fff;
	border: 1px solid #ddd;
	
	.section-header{
		// position: relative;
		// z-index: 70;
		padding: 16px;
		background-color: $grey100;
		border-bottom: 1px solid #ddd;
		.section-title{
			margin: 0;
			font-size: 18px;
			font-weight: 600;
		}
	}
	.section-content{
		// position: relative;
		// z-index: 70;
	}
	.section-footer{
		// position: relative;
		// z-index: 70;
		padding: 16px;
		border-top: 1px solid #ddd;
	}
	.fb-page-list{
		padding: 4px 0 4px 0;
		.single-page{
			display: block;
			.single-page_label{
				display: block;
				position: relative;
				cursor: pointer;
				padding: 12px 60px 12px 16px;
			}
			& + .single-page{
				border-top: 1px solid #eee;
			}
			.spl_input{
				display: none;
			}
			.spl_check-input{
				position: absolute;
				z-index: 80;
				display: block;
				top: 12px; right: 16px;
				color: $grey300;
				width: 28px;
				text-align: center;
				i{
					font-size: 24px;
					display: inline-block;
					vertical-align: top;
					line-height: 64px;
				}
			}
			.spl_info{
				position: relative;
				z-index: 90;
				display: flex;
				align-items: center;
				background-color: transparent;
				.spl_info_avatar{
					flex: 0 0 64px;
					min-width: 0;
					width: 64px;
					height: 64px;
					background-color: $grey200;
					border-radius: 50%;
				}
				.spl_info_title{
					flex: 1 1 auto;
					min-width: 0;
					margin: 0;
					padding: 0 14px;
					line-height: 22px;
					font-size: 18px;
					font-weight: 600;
				}
			}
		 	.spl_input:checked + .spl_check-input{
		 		color: material-color('blue','500');
		 	}
		 	.spl_input:checked + .spl_check-input + .spl_info{
		 		.spl_info_title{
		 			color: material-color('blue','700');
		 		}
		 	}
		}
	}
}

// 
.fb-require-login-section{
	max-width: 560px;
	margin: 24px auto;
	.ht-login-section{
		margin: 0;
		padding: 40px;
		background-color: #fafafa;
		border: 2px dashed #ddd;
		.ht-title{
			margin: 0 0 8px;
			line-height: 30px;
			font-size: 24px;
			font-weight: 600;
			color: #333;
		}
		.ht-subtitle{
			margin: 0 0 0;
			font-size: 14px;
			color: #777;
		}
		.btn-wrapper{
			margin: 24px 0 0;
			text-align: center;
			a{
				display: inline-block;
				vertical-align: top;
				max-width: 360px;
			}
		}
	}
}




// modal 

.modal{
	background-color: rgba(#000,.2);
}
.modal-dialog{
	margin-top: 56px;
}
.modal-backdrop{
	display: none;
}