.ht-feedback-container{
	background-color: #fff;
}
.feedback-wrapper{
	width: 75%;
	margin: 0 auto;
	max-width: 640px;
	p{
		margin: 0 0 8px;
	}
	.ht-section{
		display: block;
		margin: 0 6px 12px;
		padding: 12px;
		&.full-width{
			margin-left: -6px;
			margin-right: -6px;
		}
		.section-header{
			padding-bottom: 12px;
			margin-bottom: 16px;
			&.has-bdb{
				border-bottom: $border;
			}
			.sh-title{
				margin-bottom: 0;
			}
			.sh-actions{
				a{
					display: inline-block;
					margin: 0 0 0 8px;
					padding: 2px 4px;
					line-height: 20px;
					font-size: 14px;
					color: material-color('grey','600');
					i{
						display: inline-block;
						vertical-align: top;
						line-height: 18px;
						font-size: 18px;
						color: material-color('grey','500');
					}
					span{
						margin-left: 4px;
						display: inline-block;
						line-height: 20px;
						font-size: 13px;
					}
					&:active{
						background-color: material-color('grey','200');
					}
				}
			}
		}	
	}
	.social-post-card{
		.news-header{
			margin: 0 0 12px;
			.news-title{
				margin: 0 0 5px;
				line-height: 24px;
				font-size: 18px;
				font-weight: 600;
				a{
					color: material-color('grey','900');
				}
			}
			.news-meta{
				font-size: 0;
				span{
					display: inline-block;
					vertical-align: top;
					line-height: 16px;
					font-size: 12px;
					color: material-color('grey','600');
					&:after{
						content: "\2022";
						display: inline-block;
						padding: 2px 7px 0;
						line-height: 14px;
						font-size: 10px;
						color: material-color('grey','400');
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
				a{
					color: material-color('blue','500');
					font-weight: 600;
				}
			}
		}
			
		.card-header{
			margin: 0 0 0;
			padding: 0 32px 0 56px;
			min-height: 44px;
	    position: relative;
	    .user-avatar{
	      position: absolute;
	      top: 0; left: 0;
	      width: 44px;
	      height: 44px;
	      background-color: material-color('grey','400');
	      border-radius: 50%;
	    }
	    .user-title{
	      margin: 0 0 2px;
	      padding: 2px 0 0;
	      line-height: 22px;
	      font-size: 16px;
	      font-weight: 600;
	    }
	    .post-meta{
				margin: 0 0 0;
	      line-height: 16px;
	      font-size: 12px;
	      color: material-color('grey','600');
	    }
	    .post-action{
	    	position: absolute;
		    top: 4px; right: 0;
	    	button{
	    		margin: 0;
	    		padding: 0;
		    	height: 28px;
		    	width: 28px;
		    	font-size: 18px;
		    	text-align: center;
		    	color: material-color('grey','600');
		    	background-color: transparent;
		    	border: 0;
		    	i{
		    		display: inline-block;
		    		vertical-align: top;
		    		line-height: 24px;
		    	}
	    	}
	    	.dropdown-menu{
	    		li{
	    			a{
	    				.icon-left{
	    					display: inline-block;
	    					width: 16px;
	    					margin-right: 5px;
	    					text-align: center
	    				}
	    			}
	    		}
	    	}
	    }
		}
		.card-content{
			margin-top: 12px;
			
			img{
				display: inline-block !important;
				max-width: 100% !important;
				width: auto !important;
				height: auto !important;
			}
			.post-content{
				line-height: 21px;
				font-size: 14px;
				p{
					margin-bottom: 5px;
					// &:last-child{
					// 	margin-bottom: 0;
					// }
				}
				.read-more{
					color: material-color('grey','400');
				}
			}
			.post-title{
				margin: 0 0 8px;
				line-height: 24px;
				font-size: 18px;
				font-weight: 600;
			}
			.post-attachment{
				margin: 12px 0 0;
				a{
					position: relative;
					display: block;
					img{
						display: block;
					}
					.ht-inner{
						background-color: material-color('grey','300');
					}
					&:active{
						opacity: .85;
					}
					.more-items{
						display: block;
						position: absolute;
						top: 0; left: 0; right: 0; bottom: 0;
						background-color: rgba(#000,.5);
						.ht-text{
							position: absolute;
							top: 50%; left: 0; right: 0;
							margin-top: -40px;
							line-height: 80px;
							font-size: 48px;
							color: #fff;
							text-align: center;
						}
					}
				}
				&.has-multi-items{
					margin-left: -1px;
					margin-right: -1px;
					.single-item{
						float: left;
						padding: 1px;
					}
					&.has-02-items{
						.single-item{
							width: 50%;
						}
					}
					&.has-03-items{
						.single-item{
							width: 33.3333%;
							&:first-child{
								width: 66.6666%;
							}
						}

					}
					&.has-04-items{
						.single-item{
							width: 33.3333%;
							&:first-child{
								width: 100%;
							}
						}
					}
					&.has-05-items{
						.single-item{
							width: 33.3333%;
							&:first-child,
							&:nth-child(2){
								width: 50%;
							}
						}
					}
					&.has-06-items{
						.single-item{
							width: 33.3333%;
						}
					}
					&.has-07-items{
						.single-item{
							width: 25%;
							&:first-child,
							&:nth-child(2),
							&:nth-child(3){
								width: 33.3333%;
							}
						}
					}
				}
			}
			.post-action-count{
				margin-top: 12px;
				line-height: 16px;
				font-size: 0;
				color: material-color('grey','600');
				span, a{
					display: inline-block;
					font-size: 12px;
					vertical-align: top;
					line-height: 16px;
				}
				.like-count{
					i{
						display: inline-block;
						vertical-align: top;
						line-height: 15px;
						margin-right: 5px;
						width: 15px;
						font-size: 8px;
						text-align: center;
						color: #fff;
						background-color: material-color('blue','500');
						border-radius: 7px;
					}
				}
				.comment-share-count{
					span{
						&:after{
							content: "\2022";
							display: inline-block;
							vertical-align: top;
							padding: 2px 4px 0;
							line-height: 14px;
							font-size: 10px;
							color: material-color('grey','400');
						}
						a{
							color: material-color('grey','600');
						}
						&:last-child{
							&:after{
								display: none;
							}
						}
					}
				}
			}
		}
		.card-footer{
			margin-top: 10px;
			margin-bottom: -8px;
			padding: 4px 0 0;
			border-top: $ht-border;
			@include display-flex;
			.single-action{
				@include flex-grow(1);
				@include flex-basis(0);
				i{
					color: material-color('grey','500');
				}
			}
			.post-action{
				display: block;
				padding: 4px 0;
				height: 28px;
				font-size: 13px;
				font-weight: 600;
				text-align: center;
				color: material-color('grey','600');
				i{
					display: inline-block;
					position: relative;
					top: 0;
					margin: 0 6px 0 0;
					font-size: 14px;
				}
				&.active{
					box-shadow: 0 0 0;
					&,i{
						color: material-color('blue','500');
					}
				}
			}
		}
		.post-comments{
			margin: 12px -12px 0;
			padding: 12px 0 0;
			border-top: $ht-border;
			.single-comment{
				position: relative;
				padding: 0 0 0 40px;
				min-height: 32px;
				.user-avatar{
					position: absolute;
					top: 0; left: 0;
					width: 32px;
					height: 32px;
					background-color: material-color('grey','300');
					border-radius: 50%;
				}
				.comment-main{
					padding: 6px 10px;
					background-color: material-color('grey','100');
					border-radius: 12px;
					.user-title{
						margin: 0 0 3px;
						font-size: 12px;
						font-weight: 600;
						line-height: 16px;
						color: material-color('grey','900');
					}
					.comment-content{
						font-size: 13px;
						line-height: 18px;
						color: material-color('grey','700');
					}
				}
				.comment-meta{
					margin-top: 2px;
					padding: 3px 10px;
					line-height: 16px;
					font-size: 0;
					span{
						display: inline-block;
						vertical-align: top;
						line-height: 16px;
						font-size: 11px;
						color: material-color('grey','500');
						&:after{
							content: "\2022";
							padding: 2px 5px 0;
							line-height: 14px;
							font-size: 8px;
							line-height: 14px;
							color: material-color('grey','300');
						}
						&:last-child:after{
							display: none;
						}
						a{
							font-weight: 600;
							color: material-color('grey','600');
						}	
					}
				}
				.comment-attachment{
					margin-top: 3px;
					a{
						display: inline-block;
						vertical-align: top;
					}
					img{
						display: inline-block;
						vertical-align: top;
						max-width: 100%;
						max-height: 128px;
						border-radius: 12px;
						overflow: hidden;
						border: 1px solid #eee;

					}
				}
				.add-comment-form{
					position: relative;
					.form-group{
						position: relative;
						margin: 0 32px 0 0;
						.form-control{
							padding: 6px 12px;
							padding-right: 38px;
							line-height: 18px;
							font-size: 13px;
							border-color: #ddd;
							resize: none;
							background-color: material-color('grey','50');
							border-radius: 12px;
							overflow: hidden;
							&:focus{
								background-color: #fff;
								border-color: #ddd;
							}
						}
					}
					.reply-add-file{
						display: block;
						position: absolute;
						bottom: 0; right: 0;
						margin: 0;
						height: 32px;
						width: 36px;
						text-align: center;
						border-radius: 12px;
						cursor: pointer;
						i{
							display: inline-block;
							vertical-align: top;
							font-size: 14px;
							line-height: 32px;
							color: material-color('grey','500');
						}
					}
					.reply-submit{
						display: block;
						position: absolute;
						top: 0; right: -36px;
						height: 32px; width: 32px;
						font-size: 18px;
						text-align: center;
						background-color: transparent;
						border: 0;
						i{
							display: inline-block;
							line-height: 32px;
							vertical-align: top;
							color: material-color('blue','500');
						}
					}
					.image-preview{
						margin-top: 5px;
						border-radius: 12px;
						.single-image{
							display: inline-block;
							vertical-align: top;
							position: relative;
							border-radius: 8px;
							overflow: hidden;
							img{
								display: block;
								max-width: 100%;
								max-height: 96px;
							}
							.delete-file{
								display: block;
								position: absolute;
								top: 0; right: 0;
								line-height: 22px;
								width: 24px;
								text-align: center;
								color: material-color('grey','50');
	        			text-shadow: 0 1px 2px rgba(#000,.24);
								i{
									display: inline-block;
									vertical-align: top;
									line-height: 22px;
								}
							}
						}
					}
					&.small-size{
						.form-control{
							padding: 5px 10px;
							font-size: 13px;
						}
						.reply-add-file{
							height: 30px;
							width: 32px;
							i{
								line-height: 30px;
							}
						}
						.reply-submit{
							top: 0; right: -34px;
							height: 30px; width: 30px;
							font-size: 15px;
							i{
								line-height: 30px;
							}
						}
						.image-preview{
							margin-top: 3px;
							border-radius: 12px;
							.single-image{
								img{
									max-height: 80px;
								}
							}
						}
					}
				}
			}
			.load-more-reply{
				margin: 4px 0 8px 50px;
				font-size: 12px;
				a{
					color: material-color('blue','500');
				}
			}
			.load-reply{
				margin-top: 4px;
				padding-top: 2px;
				a{
					line-height: 20px;
					font-size: 12px;
					color: material-color('grey','600');
				}
			}
			hr{
				margin: 12px;
			}
			ul{
				list-style: none;
				margin: 0;
				padding: 0;
				&.main-ul{
					margin: 0 12px ;
					// padding: 12px 0 0;
					// border-top: $ht-border;
					& > li{
						margin-bottom: 12px;
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
				&.inner-ul{
					margin-left: 40px;
					& > li{
						margin-bottom: 8px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					.single-comment{
						padding: 0 0 0 32px;
						min-height: 24px;
						.user-avatar{
							width: 24px;
							height: 24px;
						}
						&.has-reply-form{
							.user-avatar{
								top: 3px;
							}
						}
					}
				}
			}
		}
	}

	.social-post-form{
	  hr{
	    margin: 8px 0;
	  }
	  .form-group{
	    margin-bottom: 8px;
	    position: relative;
	    .user-avatar{
	      position: absolute;
	      top: 0; left: 0;
	      width: 44px;
	      height: 44px;
	      background-color: material-color('grey','300');
	      border-radius: 50%;
	    }
	    .post-content-input{
	      margin: 0 0 12px;
	      padding: 0 0 0 56px;
	      width: 100%;
	      min-height: 48px;
	      line-height: 19px;
	      font-size: 14px;
	      border-color: transparent;
	      resize: none;
	    }
	  }
	  .attachment-preview{
	    padding: 2px 0;
	    margin: 12px 0 4px;
	    font-size: 0;
	    .single-item{
	      display: inline-block;
	      vertical-align: top;
	      position: relative;
	      width: 96px; height: 96px;
	      margin: 0 8px 8px 0;
	      background-color: material-color('grey','300');
	      border: $ht-border;
	      .delete-item-btn{
	        display: block;
	        position: absolute;
	        top: 0; right: 0;
	        height: 20px;
	        width: 20px;
	        line-height: 20px;
	        text-align: center;
	        color: material-color('grey','50');
	         text-shadow: 0 1px 2px rgba(#000,.24);
	        i{
	          display: inline-block;
	          vertical-align: top;
	          line-height: 20px;
	          font-size: 16px;
	        }
	        &:active{
	          background-color: material-color('red','500');
	        }
	      }
	    }
	  }
	  .add-attachment-btn{
	    margin-top: 6px;
	    border-radius: 14px;
	  }
	}

	.on-loading-content{
		height: 120px;
		&:after{
			background-color: transparent;
		}
	}
}