@media (min-width: 992px){
	.task-manager-content{
		//
	}
	.page-content-wrapper .task-manager-content{
		position: fixed;
    left: 235px;
    top: $navbar-height;
    right: 0;
	}
	.page-sidebar-closed .page-content-wrapper .task-manager-content{
	  left: 45px !important;
	}
}

.task-manager-content{
	// position: fixed;
	// top: 50px; right: 0; left: 0;
	min-width: 900px;
	height: calc(100vh - 50px);
	padding: 0 !important;
	display: flex;
	align-items: stretch;
	// min-width: 960px;
	padding: 0;
	background-color: #fff;
	z-index: 990;
	overflow-x: auto;
	@media (min-width: $screen-md-min){
		top: 50px; right: 0; left: 235px;
	}
	b{
		font-weight: 600;
	}
	.ht-list-column{
		position: relative;
		flex: 0 0 360px;
		min-width: 0;
		border-right: 1px solid $grey300;
		.ht-list-header{
			display: flex;
			justify-content: space-between;
			padding: 16px;
			border-bottom: 1px solid $grey300;
			.list-title{
				padding: 4px 152px 4px 0;
				line-height: 20px;
				font-size: 16px;
				font-weight: 600;
			}
			.list-actions{
				// flex: 0 0 auto;
			}
			ul.deleted-task-menu{
				max-height: 420px;
				overflow-y: auto;
				@include scrollbar(2px, material-color('grey','400'), material-color('grey','200'));
				li{
					a{
						max-width: 400px;
					}
					span{
						display: block;
						max-width: 400px;
					}
				}
				li{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 400px;
					padding: 4px 16px 4px 12px;
					&:not(.dropdown-title):not(.input-search):hover{
						background-color: $grey100;
					}
					.task-title{
						flex: 1 1 auto;
						padding-right: 16px;
						line-height: 17px;
						font-size: 13px;
						cursor: default;
					}
					.task-action{
						flex: 0 0 auto; 
					}
					&.input-search{
						padding-top: 4px;
						padding-bottom: 8px;
						.form-group{
							width: 100%;
							position: relative;
						}
						.form-control{
							width: 100%;
							height: 28px;
							line-height: 20px;
    					padding: 4px 12px 4px 30px;
    					font-size: 13px;
    					border-color: #e0e0e0;
    					border-radius: 0;
						}
						.form-icon{
							position: absolute;
							top: 0; left: 0;
							width: 28px;
							height: 28px;
							line-height: 28px;
							text-align: center;
							color: $grey400;
							background-color: transparent;

						}
					}
				}
			}
		}
		.ht-list-filter{
			padding: 8px 16px 0;
			.row{
				margin-left: -8px;
				margin-right: -8px;
			}
			div[class^="col"]{
				padding-left: 8px;
				padding-right: 8px;
			}
			.form-group{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 0;
			}
			.form-control{
				height: 28px;
    		padding: 3px 16px 3px 8px;
    		font-size: 13px;
				// background-color: $grey50;
				border: 1px solid #ccc;
				border-radius: 0;
			}
			select{
				background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
				-moz-appearance: none; 
				-webkit-appearance: none; 
				appearance: none;
			}
			.add-more-task{
				padding: 6px 12px;
			}
			.list-filter-dropdown{
				.dropdown-toggle{
					background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
				}
				.dropdown-menu{
					padding: 5px 0;
					border: 1px solid #eee !important;
					border-radius: 0;
					.single-option{
						display: flex;
						align-items: center;
						padding: 8px 12px;
						border-top: 1px solid #eee;
						.single-option_label{
							flex: 1 1 auto;
							min-width: 0;
							padding: 0 48px 0 0;
							line-height: 18px;
							font-size: 14px;
							a{
								display: block;
								white-space: nowrap;
								max-width: 200px;
								text-overflow: ellipsis;
								white-space: nowrap;
								color: $grey800;
								&:hover{
									text-decoration: none;
									color: material-color('blue','600');
								}
							}
						}
						.single-option_actions{
							flex: 0 0 auto;
							min-width: 0;
							text-align: right;
							white-space: nowrap;
							line-height: 16px;
							.single-action{
								display: inline-block;
								vertical-align: top;
								line-height: 16px;
								padding: 0 4px;
								font-size: 11px;
								font-weight: 600;
								color: material-color('blue','500');
								i{
									margin-right: 2px;
								}
								&:hover{
									text-decoration: none;
									color: material-color('blue','800');
								}
							}
						}
					}
				}
			}
			.selected-option-label{
				display: block;
				width: 100%;
				height: 28px;
    		padding: 3px 16px 3px 8px;
				line-height: 20px;
    		font-size: 13px;
    		font-weight: 400;
				border: 1px solid #ccc;
				border-radius: 0;
			}
		}
		.ht-list-search{
			padding: 12px 16px;
			border-bottom: 1px solid $grey300;
			.form-group{
				position: relative;
				margin: 0;
			}
			.form-control{
				padding-left: 38px;
				border-color: #ccc;
				border-radius: 0;
				&:focus{
					border-color: #ccc;
				}
			}
			.form-icon{
				display: block;
				position: absolute;
				top: 0; left: 0;
				padding-left: 3px;
				width: 34px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				color: $grey400;
				background-color: transparent;
			}
		}
		.ht-list-tasks{
			height: calc(100vh - 50px - 61px - 58px - 59px);
			overflow-y: auto;
			@include scrollbar(4px, material-color('grey','400'), material-color('grey','200'));
			ul{
				margin: 0;
				padding: 0;
				li{
					a{
						display: block;
						padding: 16px;
						color: $grey900;
						background-color: #fff;
						border-bottom: 1px solid #eee;
						&:hover, &:active, &:focus{
							text-decoration: none;
						}
						&:hover{
							background-color: $grey100;
						}
						.task-title{
							margin: 0 0 6px;
							padding: 0;
							line-height: 19px;
							font-size: 14px;
							font-weight: 600;
						}
						.su_tags{
							margin-top: 5px;
							font-size: 0;
							.su_single-tag{
								display: inline-block;
								vertical-align: top;
								margin: 0 0 2px 0;
								line-height: 16px;
								font-size: 12px;
								font-weight: 400;
								color: $grey600;				
								border-radius: 2px;
								& + span:before{
									content: "\2022";
									display: inline-block;
									vertical-align: top;
									padding: 0 4px;
									line-height: 16px;
									font-size: 8px;
									color: $grey500;
								}
							}
						}
						.task-meta{
							margin-top: 3px;
							font-size: 0;
							span{
								display: inline-block;
								vertical-align: top;
								font-size: 12px;
								line-height: 16px;
								color: $grey500;
								&:after{
									content: "\2022";
									display: inline-block;
									vertical-align: top;
									padding: 0 7px;
									line-height: 16px;
									font-size: 10px;
									color: $grey400;
								}
								&:last-child{
									&:after{
										display: none;
									}
								}
								&.task-new-acts{
									color: $blue500;
								}
							}
						}
						.task-status{
							margin-top: 7px;
							text-align: right;
							.ht-badge{
								display: inline-block;
								padding: 3px 8px;
								line-height: 16px;
								font-size: 11px;
								font-weight: 600;
								border-radius: 2px;
							}
						}
					}
					&.active{
						a{
							background-color: material-color('light-blue','50');
						}
					}
				}
			}
			.ht-loading{
				color: $grey400;
				height: 56px;
				background-image: url("../img/spinner.svg");
				background-repeat: no-repeat;
				background-position: 50% 50%;
			}
		}
	}
	.ht-content-column{	
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		.task-main-content{
			padding: 0 48px 48px 48px;
			height: calc(100vh - 50px);
			overflow-y: auto;
			@include scrollbar(8px, material-color('grey','400'), material-color('grey','200'));
			& > .ht-inner{
				// min-width: 480px;
				// max-width: 960px;
				// margin: 0 auto;
				min-width: 480px;
			}
			textarea.watched-textarea{
				//
			}
			.content-header{
				// position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px 0;
				border-bottom: 1px solid #e0e0e0;
				.task-title{
					margin: 0;
					padding: 10px 24px 10px 0;
					line-height: 24px;
					font-size: 18px;
					font-weight: 600;
					color: $grey900;
				}
				.task-actions{
					// position: absolute;
					// top: 8px; right: 0;
					padding: 8px 0;
				}
			}
			.content-main{
				//
			}
			.section-wrap{
				border-bottom: 1px solid #eee;
				&:last-child{
					border-bottom: 0;
				}
			}
			.single-section{
				padding: 24px 0;
				border-bottom: 1px solid #eee;
				&:last-child{
					border-bottom: 0;
				}
				.section-header{
					margin-bottom: 12px;
					.section-title{
						margin: 0;
						padding: 4px 0;
						line-height: 16px;
						font-size: 14px;
						font-weight: 600;
						color: material-color('green','800');
					}
				}
			}
			.task-detail-section{
				.task-descr{
					p{
					  margin: 0 0 8px;
					  &:last-child{
					  	margin: 0;
					  }
					}
					hr{
						margin: 12px 0;
					}
					ul{
						padding-left: 20px;
						margin-bottom: 12px;
						&:last-child{
					  	margin: 0;
					  }
					}
					&.show-all{
						max-height: none;
					}
					&.content-collapse{
						position: relative;
						max-height: 76px;
						overflow: hidden;
						&:after{
							position: absolute;
							content: "";
							bottom: 0; left: 0; right: 0;
							height: 40px;
							background: rgba(255,255,255,0);
							background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
							background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
						}
					}
						
				}
				.view-all-descr-btn{
					display: inline-block;
					margin-top: 8px;
					padding: 4px 12px;
					font-size: 12px;
					background-color: $grey100;
					border-radius: 2px;
					&:hover,
					&:focus,
					&:active{
						text-decoration: none;
					}
					&:hover{
						background-color: $grey200;
					}
				}
			}
			.task-assign-section{
				.list-task-assigns{
					//
				}
				.single-task-assign{
					display: block;
					display: flex;
					align-items: center;
					border: $border;
					@include clearfix();
					margin-bottom: 12px;
					.assign-member-info{
						flex: 0 0 240px;
						display: flex;
						align-items: center;
						width: 240px;
						padding: 8px 12px;
						.member-avatar{
							flex: 0 0 36px;
							min-width: 0;
							width: 36px;
							height: 36px;
							border-radius: 50%;
							background-color: $grey100;
						}
						.member-title{
							flex: 1 1 auto;
							min-width: 0;
							margin: 0;
							padding: 0 0 1px 8px;
							font-size: 13px;
							font-weight: 600;
							color: material-color('blue','800');
						}
					}
					.assign-task-detail{
						padding: 10px 12px;
						flex: 1 1 auto;
						// min-height: 64px;
						border-left: $border;
						.task-title{
							margin: 0;
							line-height: 24px;
							font-size: 16px;
							font-weight: 600;
						}
						.task-descr{
							margin: 4px 0 0;
							font-size: 13px;
							color: $grey700;
						}
					}
				}
			}
			.task-kpi-section{
				.task-kpi-table-flex{
				  display: flex;
				  flex-flow: column nowrap;
				  justify-content: space-between;
				  font-size: 12px;
				  border: $border;
				  border-right: 0;
					min-width: 600px;
					overflow-x: auto;
				  
				  // .Table-row
				  .table-header{
				  	border-bottom: $border;
				  }
				  .table-row {
				    width: 100%;
				    display: flex;
				    flex-flow: row nowrap;
				    border-bottom: $border;
				    &:last-child{
				    	border-bottom: 0;
				    }
				    .table-row-item {
				      display: flex;
				      flex-flow: row nowrap;
				      flex-grow: 1;
				      flex-basis: 0;
				      padding: 8px 4px;
				      word-break: break-word;
				      border-right: $border;
				      &.unit-count-item{
				      	flex: 0 0 60px;
				      }
				      &.unit-among-item{
				      	flex: 0 0 65px;
				      }
				      &.plan-number-item{
				      	flex: 0 0 70px;
				      }
				      &.progress-work-item{
				      	flex: 0 0 75px;
				      }
				      &.percent-done-item{
				      	flex: 0 0 45px;
				      }
				      &.user-note-item{
				      	flex: 0 0 129px;
				      }
				    }
				  }
				  .form-group{
						position: relative;
						margin: 0;
						max-width: 150px;
					}
					.form-control{
						height: 24px;
    				padding: 2px 27px 2px 3px;
    				font-size: 12px;
						border-radius: 0;
						border-color: #ccc;
						&:focus{
							border-color: #ccc;
						}
					}
					textarea{
						height: auto !important;
						width: 100% !important;
					}
					.edit-content-btn{
						position: absolute;
						top: 0; right: 0;
						height: 24px;
						width: 24px;
						padding: 0;
						line-height: 22px;
						text-align: center;
						font-size: 12px;
						font-weight: 400;
						border-radius: 0;
						i{
							display: inline-block;
							line-height: 22px;
							vertical-align: top;
						}
					}
				}
			}
			.task-info-section{
				.single-info{
					margin-bottom: 6px;
					display: flex;
					align-items: center;
					font-size: 14px;
					&:last-child{
						margin-bottom: 0;
					}
					& > div:first-child{
						flex: 0 0 120px;
						padding-right: 8px;
					}
					& > div:last-child{
						flex: 1 1 auto;
						padding-left: 8px;
					}
	
				}
			}
			.task-assign-member{
				display: flex;
				align-items: center;
				.member-avatar{
					width: 40px; height: 40px;
					background-color: $grey200;
					border-radius: 20px;
					&.not-rounded{
						border-radius: 0;
					}
				}
				.member-info{
					padding-left: 8px;
					.task-label{
						line-height: 15px;
						font-size: 12px;
						color: $grey500;
					}
					.task-member-name{
						padding: 2px 0;
						margin: 0;
						font-size: 14px;
						font-weight: 600;
					}
				}
			}
			.task-member-section{
				.list-joined-member{
					ul{
						li{
							float: left;
							width: 20%;
							padding: 8px;
							text-align: center;
							@media (min-width: 1440px){
								width: 14%;
							}
							.member-avatar{
								position: relative;
								.ht-bgcover{
									display: inline-block;
									vertical-align: top;
									width: 40px;
									height: 40px;
									background-color: $grey100;
									border-radius: 20px;
								}							
								.delete-member-btn{
									display: block;
									position: absolute;
									top: -4px; left: 50%;
									margin-left: 6px;
									height: 16px;
									width: 16px;
									line-height: 15px;
									font-size: 9px;
									text-align: center;
									border-radius: 50%;
									color: #fff;
									background-color: material-color('red','400');
									&:hover{
										text-decoration: none;
										background-color: material-color('red','600');
									}
								}
							}
							.member-name{
								margin: 4px 0 0;
								font-size: 12px;
								font-weight: 600;
								color: $grey700;
							}
							.add-member{
								display: inline-block;
								width: 40px;
								height: 40px;
								text-align: center;
								color: $grey400;
								background-color: $grey50;
								border: 2px solid $grey300;
								border-radius: 50%;
								i{
									padding-top: 0;
									font-size: 14px;
									line-height: 36px;
								}
								&:hover{
									background-color: $grey100;
								}
							}
						}
					}
					.view-more-member{
						font-weight: 400;
						color: material-color('blue','700');
					}
				}
			}
			.task-discussion-section{
				.task-discusssion-list{
					margin-top: 8px;
					padding: 8px 0;
					.single-comment{
						position: relative;
						margin: 0 0 8px;
						padding: 0 0 0 48px;
						display: block;
						min-height: 40px;
						.user-avatar{
							position: absolute;
							top: 0; left: 0;
							width: 40px;
							height: 40px;
							background-color: $grey200;
							border-radius: 20px;
						}
						.main-comment{
							.comment-content{
								line-height: 18px;
								font-size: 13px;
								color: $grey800;	
							}
							.comment-attachment{
								margin: 5px 0 0;
								img{
									max-width: 100%;
									max-height: 96px;
								}
							}
							.comment-meta{
								margin: 3px 0 0;
								color: $grey500;
								font-size: 0;
								span{
									display: inline-block;
									line-height: 16px;
									font-size: 11px;
									&:after{
										display: inline-block;
										content:"\2022";
										font-size: 10px;
										padding: 0 4px;
									}
									&:last-child:after{
										display: none;
									}
								}
							}
						}
					}
					& > ul{
						margin: 0;
						padding: 0;
						li{
							&:last-child{
								.single-comment{
									margin: 0;
								}
							}
						}
						ul{
							margin: 12px 0 20px 48px;
							padding: 0 0 0 12px;
							border-left: 3px solid #eee;
						}
					}
					form.add-comment-form{
						margin-top: 16px;
						.form-group{
							position: relative;
						}
						.form-control{
							height: 32px;
							padding: 5px 12px 5px 12px ;
							font-size: 13px;
							border-radius: 0;
							&, &:focus{
								border-color: #ccc;
							}
							&.has-more-lines{
								height: auto !important;
							}
						}
						.add-attachment{
							position: absolute;
							bottom: 2px; right: 32px;
							padding: 3px 5px;
							label{
								display: inline-block;
								margin: 0;
								line-height: 24px;
								width: 24px;
								text-align: center;
								color: $grey500;
								cursor: pointer;
								input{
									display: none;
								}
								i{
									display: inline-block;
									line-height: 24px;
									vertical-align: top;
								}
							}
						}
						.comment-submit{
							display: block;
							position: absolute;
							bottom: 0; right: 0;
							height: 32px;
							width: 32px;
							padding: 5px 0;
							text-align: center;
							border-radius: 0;
						}
					}
					.attachment-preview{
						position: relative;
						margin-top: 4px;
						padding: 4px;
						background-color: $grey50;
						border: 1px solid #eee;
						.single-attachment{
							display: inline-block;
							vertical-align: top;
							position: relative;						
							img{
								max-width: 100%;
								max-height: 96px;
							}
							.delete-attachment{
								display: block;
								position: absolute;
								top: 1px; right: 1px;
								padding: 0 3px;
								color: #fff;
								font-size: 14px;
								text-shadow: 1px 2px 0 rgba(#000,.2);
							}
						}
					}
				}
			}
			.task-report-section{
				.section-content{
					border-radius: 2px;
					.list-task-reports{
						background-color: $grey100;
						padding: 16px;
						.single-report{
							.report-info{
								position: relative;
								padding: 1px 0 0 48px;
								.user-avatar{
									position: absolute;
									top: 0; left: 0;
									width: 40px;
									height: 40px;
									border-radius: 20px;
									background-color: $grey300;
								}
								.user-name{
									margin: 0 0 2px;
									line-height: 18px;
									font-size: 14px;
									font-weight: 600;
									color: material-color('blue','700');
								}
								.report-meta{
									margin: 3px 0 0;
									color: $grey500;
									font-size: 0;
									span{
										display: inline-block;
										line-height: 16px;
										font-size: 12px;
										&:after{
											display: inline-block;
											content:"\2022";
											font-size: 10px;
											padding: 0 5px;
											color: $grey400;
										}
										&:last-child:after{
											display: none;
										}
									}
								}
							}
							.report-content{
								margin-top: 0;
								// padding: 0 0 0 48px;
								color: $grey700;
								line-height: 18px;
							}
							.report-attachment{
								margin: 8px 0 0;
								padding: 0 0 0 48px;
								img{
									max-width: 100%;
									max-height: 128px;
								}
							}
						}
						ul{
							li{
								margin: 0 0 16px;
								padding: 0;
								border-bottom: 1px solid #e0e0e0;
								&:last-child{
									margin: 0;
									border-bottom: 0;
								}
							}
							ul{
								margin: 12px 0 20px 48px;
								padding: 0 0 0 12px;
								border-left: 3px solid #e0e0e0;
								li{
									border: 0;
								}
							}
						}
						form.add-report-reply-form{
							&:first-child{
								margin-bottom: 16px;
							}
							&:last-child{
								margin-top: 16px;
							}
							.form-group{
								position: relative;
							}
							.form-control{
								height: 40px;
								padding: 9px 12px 9px 12px ;
								font-size: 14px;
								border-radius: 0;
								&, &:focus{
									border-color: #ccc;
								}
								&.has-more-lines{
									height: auto !important;
								}
							}

							.add-attachment{
								position: absolute;
								bottom: 2px; right: 40px;
								padding: 3px 8px;
								label{
									display: inline-block;
									margin: 0;
									line-height: 28px;
									width: 28px;
									text-align: center;
									color: $grey500;
									cursor: pointer;
									input{
										display: none;
									}
									i{
										display: inline-block;
										line-height: 28px;
										vertical-align: top;
									}
								}
							}
							.reply-submit{
								display: block;
								position: absolute;
								bottom: 0; right: 0;
								height: 40px;
								width: 40px;
								padding: 0;
								text-align: center;
								border-radius: 0;
							}
							.attachment-preview{
								position: relative;
								margin-top: 4px;
								padding: 8px;
								background-color: $grey50;
								border: 1px solid #eee;
								img{
									max-width: 100%;
									max-height: 96px;
								}
								.delete-attachment{
									i{
										line-height: 16px;
										vertical-align: top;
									}
								}
								.single-image{
									position: relative;
									float: left;
									height: 96px;
									margin-right: 8px;
									img{
										height: 96px;
										width: auto;
										max-width: 100%;
									}
									.delete-attachment{
										display: block;
										position: absolute;
										top: 0; right: 0;
										padding: 2px 3px;
										color: $grey200;
										&:hover{
											color: material-color('blue','200');
										}
									}
								}
								.single-file{
									position: relative;
									padding-right: 36px;
									margin-bottom: 8px;
									&:last-child{
										margin-bottom: 0;
									}
									.file-name{
										line-height: 16px;
										font-size: 12px;
										font-weight: 600;
										word-break: break-all;
									}
									.delete-attachment{
										display: block;
										position: absolute;
										top: 0; right: 0;
										padding: 0 2px;
										color: $grey400;
										&:hover{
											color: material-color('blue','400');
										}
									}
									&:hover{
										.file-name{
											color: $grey600;
										}
									}
								}
							}
						}
					}
				}
			}
			.task-rating-section{
				.task-rating-list{
					.single-rating{
						position: relative;
						padding: 0 0 0 56px;
						min-height: 56px;
						.user-avatar{
							position: absolute;
							top: 0; left: 0;
							width: 56px;
							height: 56px;
							border-radius: 28px;
							background-color: $grey300;
						}
						.main-ratings{
							padding: 0 0 0 12px;
							.user-name{
								margin: 0;
								font-size: 16px;
								font-weight: 600;
							}
							.post-meta{
								margin: 4px 0 0;
								color: $grey500;
								font-size: 0;
								span{
									display: inline-block;
									line-height: 16px;
									font-size: 12px;
									&:after{
										display: inline-block;
										content:"\2022";
										font-size: 10px;
										padding: 0 4px;
									}
									&:last-child:after{
										display: none;
									}
								}
							}
							.jq-ry-container {
    						padding: 0;
    					}
							.rating-stars{
								margin: 0 0 4px;
								padding: 4px 0;
								font-size: 0;
								i{
									width: auto;
									display: inline-block;
									padding: 1px;
									font-size: 18px;
									color: material-color('orange','500');
								}
							}
							.rating-stars-input{
								margin: 4px 0;
								padding: 4px 0;
								// position:relative; 
								// float:left;
								// .counter {
								//   background-color: rgba(0, 0, 0, 0.8);
								//   color: white;
								//   font-size: 15px;
								//   height: 20px;
								// 	display:none;
								//   line-height: 12px;
								// 	text-align:center;
								//   margin-top: -10px;
								//   min-width: 20px;
								//   padding: 5px;
								//   position: absolute;
								//   right: -36px;
								//   top: 50%;
								// }
							}
							.rating-comment{
								margin-top: 8px;
								font-size: 14px;
								.form-group{
									//
								}
								.form-control{
									border-radius: 0;
									&, &:focus{
										border-color: #ccc;
									}
								}
							}
						}
					}
					ul{
						margin: 0;
						padding: 8px 0 16px 0;
						li{
							//
						}
					}
				}
			}
		}
	}
	.tooltip{
		.tooltip-inner{
			border-radius: 2px;
			white-space: nowrap;
			font-size: 11px;
		}
	}
}


.task-attachment-section{
	.attachment-wrap{
		margin-top: 8px;
		max-width: 800px;
		.row{
			margin-left: -8px;
			margin-right: -8px;
		}
		div[class^='col']{
			padding-left: 8px;
			padding-right: 8px;
		}
		.single-attachment{
			// position: relative;
			// display: inline-block;
			display: block;
			vertical-align: top;
			// width: 150px;
			// height: 100px;
			margin: 8px 8px 0 0;
			border: 1px solid #e0e0e0;
			border-radius: 2px;
			.info-view{
				position: absolute;
				left: 0; right: 0; bottom: 0;
			}
			.file-type{
				position: absolute;
				top: 8px; left: 8px;
				width: 16px;
				height: 16px;;
			}
			.file-name{
				display: block;
				margin: 0;
				padding: 0 12px 0 0;
				line-height: 16px;
				font-size: 12px;
				font-weight: 600;
				color: $grey900;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
			.file-size{
				margin-top: 3px;
				display: none;
				line-height: 14px;
				font-size: 11px;
				color: $grey500;
			}
			.file-action{
				display: none;
				margin-top: 4px;
				padding-top: 6px;
				border-top: 1px solid #e0e0e0;
			}
			&:hover{
				.file-name{
					white-space: normal;
					max-height: 30px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 15px;
				}
				.file-size{
					display: block;
				}
				.file-action{
					display: block;
				}
			}
			&.image-type{
				.info-view{
					display: none;
					background-color: rgba(#000,.4);
					padding: 8px 8px 8px 32px;
				}
				&:hover{
					.info-view{
						top: 0;
						display: block;
					}
					.file-name{
						color: #fff;
					}
					.file-size{
						color: $grey100;
					}
				}
			}
			&.file-type{
				.info-view{
					background-color: $grey100;
					border-top: 1px solid #e0e0e0;
					padding: 8px 8px 8px 32px;
				}
				&:hover{
					.info-view{
						top: 0;
						border-top: 0;
					}
				}
			}

			// upload card
			.upload-label{
				position: absolute;
				top: 50%; left: 0; right: 0;
				margin-top: -24px;
				color: $grey500;
				.label-icon{
					i{
						display: inline-block;
						line-height: 28px;
					}
				}
				.label-text{
					margin-top: 6px;
					line-height: 16px;
				}
			}
			&:hover{
				.upload-label{
					color: $grey700;
				}
			}


			// triangle effect
			&:before{
				z-index: 234;
				content: "";
				display: block;
				position: absolute;
				bottom: -1px; right: -1px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 0 16px 16px;
				border-color: transparent transparent #fff transparent;
			}
			.paper-effect{
				display: block;
				position: absolute;
				bottom: -1px; right: -1px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 16px 16px 0 0;
				border-color: rgba(#fff,.6) transparent transparent transparent;
				&.paper-blue{
					border-color: material-color('blue','500') transparent transparent transparent;
				}
				&.paper-red{
					border-color: material-color('red','500') transparent transparent transparent;
				}
				&.paper-grey{
					border-color: material-color('grey','500') transparent transparent transparent;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					bottom: 0; right: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 0 16px 16px;
					border-color: transparent transparent $grey300 transparent;
				}
			}
			&.image-type{
				.paper-effect{
					&:after{
						border-color: transparent transparent rgba(#000,.12) transparent;
					}
				}
			}
		}
	}
}

.ht-page-title + .task-manager-content{
	height: calc(100vh - $navbar-height - $ht-page-title-height);
	@media (min-width: $screen-md-min){
		top: $navbar-height + $ht-page-title-height; right: 0; left: 235px;
	}
	.ht-list-column{
		.ht-list-header{
			//
		}
		.ht-list-filter{
			// 
		}
		.ht-list-search{
			//
		}
		.ht-list-tasks{
			height: calc(100vh - $navbar-height - $ht-page-title-height - 61px - 58px - 59px);
		}
	}
	.ht-content-column{	
		.task-main-content{
			height: calc(100vh - $navbar-height - $ht-page-title-height);
		}
	}
}