@media (min-width: 992px){
	.ht-staff-manager-content{
		//
	}
	.page-content-wrapper .ht-staff-manager-content{
		position: fixed;
    left: 235px;
    top: $navbar-height;
    right: 0;
	}
	.page-sidebar-closed .page-content-wrapper .ht-staff-manager-content{
	  left: 45px !important;
	}
}
$manager-nav-tabs-height: 44px;
$filter-input-height: 80px;
$filter-info-height: 55px;
$manager-staff-margin-top: 4px;
$manager-staff-border-top: 1px;
$manager-list-header-height: 44px + 43px;
.ht-staff-manager-content{
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	min-width: 720px !important;
	background-color: #fff;
	overflow-x: auto;
	overflow-x: overlay;
	& > .ht-inner{
		height: calc(100vh - $navbar-height);
		z-index: 990;
	}	
	b{
		font-weight: 600;
	}
	.manager-nav-tabs{
		position: relative;
		width: 100%;
		z-index: 991;
		@include box-shadow(0 1px 2px 0 rgba(#000,.12));
		ul{
			width: 100%;
			li{
				display: table-cell;
    		width: 1%;
				a{
					display: block;
					position: relative;
					padding: 12px 8px;
					line-height: 20px;
					font-size: 15px;
					font-weight: 600;
					text-align: center;
					color: $grey700;
					border-right: $border;
					&:hover,
					&:active,
					&:focus{
						text-decoration: none;
					}
					&:hover{
						background-color: $grey50;
					}
				}
				&:last-child{
					a{
						border-right: 0;
					}
				}
				&.active{
					a{
						color: material-color('blue','600');
						&:hover{
							background-color: #fff;
						}
						&:after{
							content: "";
							display: block;
							position: absolute;
							bottom: -3px; left: 50%;
							margin-left: -8px;
							width: 16px;
							height: 10px;
							background-image: url("../img/kLNmEEoD.png");
							background-repeat: no-repeat;
							background-attachment: 12px 8px;
						}
					}
				}
			}
		}
	}
	
	.manager-content{
		height: calc(100vh - $navbar-height - 52px);
		background-color: $grey100;
	}
	.ht-filter-input{
		background-color: $grey100;
		padding: 12px 20px;
		.row {
		  margin-left: -12px;
		  margin-right: -12px;
		}
		div[class^="col"]{
			padding-left: 12px;
		  padding-right: 12px;
		}
		.form-group{
			margin: 0;
		}
		.ht-label{
			margin: 0 0 4px;
			padding: 0 2px;
			line-height: 16px;
			font-size: 13px;
			color: $grey600;
		}
		.form-control{
			&,&:focus{
				border-color: #ccc;
			}
		}
	}
	.ht-filter-info{
		.ht-wrapper{
			margin: 0 20px;
			padding: 8px 0;
			border-top: $border;
		}
		.single-info{
			position: relative;
			padding-right: 36px;
			max-width: 33.3333%;
			&:last-child{
				padding-right: 0;
			}
			p,
			.info-title,
			.user-title{
				margin: 2px 0;
				line-height: 16px;
				font-size: 13px;
				@extend .ht-oneline;
				max-width: 300px;
				// @media (min-width: 1200px){
				// 	max-width: 400px;
				// }
				// @media (min-width: 1200px){
				// 	max-width: 400px;
				// }
			}
			&.has-user-avatar{
				padding-left: 48px;
				.user-avatar{
					position: absolute;
					top: 0; left: 0;
					width: 40px;
					height: 40px;
					background-color: $grey300;
					border-radius: 50%;
				}
			}
		}
	}

	.ht-filter-input + .ht-content-main{
		height: calc(100vh - $navbar-height - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top});
		.ht-list-column{
			.ht-list-tasks{
				height: calc(100vh - $navbar-height - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top} - #{$manager-list-header-height});
			}
		}
		.ht-content-column{
			.task-main-content{
				height: calc(100vh - $navbar-height - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top});
			}
		}
	}
	.ht-filter-info + .ht-content-main{
		height: calc(100vh - 50px - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top});
		.ht-list-column{
			.ht-list-tasks{
				height: calc(100vh - 50px - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top} - #{$manager-list-header-height});
			}
		}
		.ht-content-column{
			.task-main-content{
				height: calc(100vh - 50px - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top});
			}
		}
	}
	.ht-content-main{
		display: flex;
    align-items: stretch;
		margin-top: 4px;
		min-height: 300px;
		background-color: #fff;
		border-top: 1px solid #ddd;
		.ht-list-column{
			position: relative;
			flex: 0 0 280px;
			border-right: 1px solid $grey300;
			.ht-list-header{
				padding: 12px 16px;
				.list-title{
					line-height: 20px;
					font-size: 15px;
					font-weight: 600;
					color: material-color('green','700');
				}
				.list-date{
					padding-top: 2px;
					font-size: 12px;
					line-height: 17px;
					color: $grey500;
				}
			}
			.ht-list-search{
				padding: 0 16px 12px;
				border-bottom: 1px solid $grey300;
				.form-group{
					position: relative;
					margin: 0;
				}
				.form-control{
					height: 30px;
					padding: 4px 12px;
					padding-left: 34px;
					font-size: 13px;
					border-color: #ccc;
					// border-radius: 0;
					&:focus{
						border-color: #ccc;
					}
				}
				.form-icon{
					display: block;
					position: absolute;
					top: 0; left: 0;
					padding-left: 3px;
					width: 30px;
					height: 30px;
					line-height: 30px;
					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{
							position: relative;
							display: block;
							padding: 10px 16px;
							color: $grey900;
							background-color: #fff;
							border-bottom: 1px solid #eee;
							&:hover, &:active, &:focus{
								text-decoration: none;
							}
							&:hover{
								background-color: $grey100;
							}
							&.has-avatar{
								padding-left: 70px;
								.task-avatar{
									width: 44px;
									height: 44px;
									position: absolute;
									top: 8px; left: 16px;
								}
							}
							.task-title{
								margin: 0;
								padding: 0;
								line-height: 20px;
								font-size: 14px;
								font-weight: 600;
							}
							.task-meta{
								margin-top: 4px;
								font-size: 0;
								span{
									display: inline-block;
									vertical-align: top;
									font-size: 12px;
									line-height: 16px;
									color: $grey600;
									&: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: 48px;
					background-image: url("../img/spinner.svg");
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: 48px 48px;
				}
			}
		}
		.ht-content-column{	
			position: relative;
			flex: 1 1 auto;
			.task-main-content{
				padding: 0 36px 48px;
				overflow-y: auto;
				@include scrollbar(8px, material-color('grey','400'), material-color('grey','200'));
				@media (min-width: 1200px){
					padding: 0 56px 48px;
				}
				@media (min-width: 1440px){
					padding: 0 128px 48px;
				}
				@media (min-width: 1800px){
					padding: 0 216px 48px;
				}
				& > .ht-inner{
					// min-width: 480px;
					// max-width: 960px;
					// margin: 0 auto;
					// min-width: 480px;
				}
				.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','700');
						}
					}
				}
				.task-detail-section{
					.task-descr{
						.single-info{
							margin-bottom: 5px;
						}
						.descr-label{
							flex: 0 0 140px;
						}
					}
				}
				.task-discussion-section{
					.task-discusssion-list{
						// padding: 4px 0;
						.single-comment{
							display: flex;
							align-items: flex-start;
							margin: 0 0 8px;
							padding: 0;							
							min-height: 40px;
							.user-avatar{
								flex: 0 0 40px;
								min-width: 0;
								width: 40px;
								height: 40px;
								background-color: $grey200;
								border-radius: 20px;
							}
							.center-content{
								flex: 1 1 auto;
								min-width: 0;
								padding: 0 8px;
							}
							.main-comment{
								.comment-content{
									line-height: 18px;
									font-size: 13px;
									color: $grey800;	
								}
								.comment-attachment{
									margin: 7px 0 5px;
									img{
										display: block;
										max-width: 100%;
										max-height: 80px;
										border: 1px solid #eee;
									}
									a{
										display: inline-block;
										vertical-align: top;
										&:hover{
											opacity: .9;
										}
									}
								}
								.comment-meta{
									margin: 2px 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;
										}
									}
								}
							}
							.comment-checkin-info{
								margin-top: 1px;
								flex: 0 0 auto;
								padding: 3px 5px;
								font-size: 12px;
								color: #fff;
								background-color: material-color('blue','500');
								border-radius: 4px;
								.check-in-location{
									margin: 0;
									line-height: 16px;
									font-size: 13px;
									font-weight: 600;
									.ht-oneline{
										vertical-align: top;
										line-height: 16px;
										max-width: 156px;
									}
								}
								.check-in-meta{
									margin-top: 2px;
									font-size: 10px;
									color: $grey200;
									span{
										display: inline-block;
										vertical-align: top;
										line-height: 14px;
										i{
											margin-right: 2px;
										}
										&:after{
											content: "\2022";
											line-height: 12px;
											padding: 2px 5px 0;
											font-size: 10px;
											color: material-color('grey','400');
										}
										&:last-child{
											&:after{
												display: none;
											}
										}
									}
								}
							}
						}
						& > ul{
							margin: 12px 0 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: 4px;
								&, &:focus{
									border-color: #ccc;
								}
								&.no-resize{
									resize: none;
								}
							}
							.more-options{
								position: absolute;
								height: 32px;
								bottom: 0; left: 0; right: 0;
								border-top: 1px solid #eaeaea;
								&:before{
									content: "";
									display: block;
									top: -1px;
									left: 0; right: 0;
									height: 1px;
								}
							}
							.add-attachment{
								position: absolute;
								bottom: 0; right: 0px;
								label{
									display: inline-block;
									padding: 3px 8px;
									margin: 0;
									line-height: 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: -36px;
								height: 32px;
								width: 32px;
								padding: 5px 0;
								text-align: center;
								color: material-color('blue','500');
								background-color: transparent;
								border: 0;
								&:hover{
									color: material-color('blue','700');
								}
							}
							&.add-new-comment{
								.form-control{
									&.sale-point-comment{
										min-height: 80px;
										padding-bottom: 40px;
										resize: none;
										&.has-more-lines{
											height: auto !important;
										}
									}
									&.sale-point-select{
										position: absolute;
										bottom: 0; left: 0;
										width: auto;
										border: 0;
										background-color: transparent;
										padding-left: 8px;
										padding-right: 8px;
									}
								}
							}
						}
						.attachment-preview{
							position: relative;
							margin-top: 7px;
							.single-attachment{
								position: relative;
								display: inline-block;
								border: 1px solid #eee;
								img{
									max-width: 100%;
									max-height: 96px;
								}
								.delete-attachment{
									display: block;
									position: absolute;
									top: 0; right: 0;
									line-height: 18px;
									width: 18px;
									color: #fff;
									font-size: 18px;
									text-align: center;
									background-color: rgba(material-color('red','500'),.4);
									&:hover{
										background-color: rgba(material-color('red','500'),.6);
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.tab-pane{
		.ht-tab-loading{
			color: $grey400;
			height: 180px;
			background-image: url("../img/spinner.svg");
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 96px 96px;
		}
	}
	.content-on-load{
		position: relative;
		&:after{
			z-index: 999;
			content: "";
			display: block;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-image: url("../img/spinner.svg");
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 72px 72px;
			background-color: rgba(#fff,.6);
		}
	}
}

// @media (min-width: 992px){
// 	.page-sidebar-closed .page-content-wrapper .ht-staff-manager-content{
// 	  top: $navbar-height + $ht-page-title-height !important;
// 	}
// }
.ht-page-title + .ht-staff-manager-content{
	margin-top: $ht-page-title-height;
	& > .ht-inner{
		height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height});
	}	
	.ht-filter-input + .ht-content-main{
		height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top});
		.ht-list-column{
			.ht-list-tasks{
				height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top} - #{$manager-list-header-height});
			}
		}
		.ht-content-column{
			.task-main-content{
				height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top});
			}
		}
	}
	.ht-filter-info + .ht-content-main{
		height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top});
		.ht-list-column{
			.ht-list-tasks{
				height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top} - #{$manager-list-header-height});
			}
		}
		.ht-content-column{
			.task-main-content{
				height: calc(100vh - #{$navbar-height} - #{$ht-page-title-height} - #{$manager-nav-tabs-height} - #{$filter-input-height} - #{$filter-info-height} - #{$manager-staff-margin-top} - #{$manager-staff-border-top});
			}
		}
	}
	
}