.tasks__wrapper{
	&>h2{
		margin-top:0px;
		margin-bottom: 24px;
		font-size: 28px;
		line-height: 125%;
		font-weight: 600;
		color:#111928;
	}
	& .tasks__box{
		background-color:#fff;
		border-radius: 8px;
		border:1px solid #E5E7EB;
		& .task__filter{
			padding:16px;
			display: flex;
			align-items:center;
			justify-content:space-between;
			& .right{
				display: flex;
				align-items:center;
				justify-content:flex-end;
				& .filter__btn{

					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;

						min-width: 37px;
						max-width: 37px;
						min-height: 37px;
						max-height: 37px;
						border-radius: 8px;
						transition:.4s ease all;
						&:hover{
							background-color:#F9F9F9;
						}
						border:1px solid #D1D5DB;
					}
				}
				& .filter__switcher{
					margin-right: 8px;
					border:1px solid #D1D5DB;
					border-radius: 8px;
					overflow:hidden;
					& ul{
						padding:0px;
						list-style-type: none;
						margin:0px;
						display: flex;
						&>li{
							&>a{
								&.current{
									background-color:#F9F9F9;
									color:#111928;
								}
								padding-left: 24px;
								padding-right: 24px;
								min-height: 37px;
								display: flex;
								align-items:center;
								justify-content:center;
								font-size: 14px;
								line-height: 130%;
								color:#6B7280;
								font-weight: 400;
								transition:.4s ease all;
								&:hover{
									background-color: #F9F9F9;
								}
								text-decoration: none;
							}
						}
						align-items:center;
						justify-content:center;

					}
				}
				& .dropdown__filter{
					margin-right: 8px;
					&>.group__dropdown{
						&>a{
							min-width: 125px;
						}
					}
				}
				& .btn{
					display: inline-flex;
					margin-right: 8px;
					
				}
			}
			& .left{
				width: 100%;
				max-width: 490px;
				& form{
					width: 100%;
					position: relative;
					display: flex;
					align-items:center;
					& button{
						display: inline-flex;
						background-color:transparent;
						padding:0px;
						outline:none;
						border:0px;
						position: absolute;
						left: 10px;
						& svg path{
							fill:#6B7280;
						}
					}
					&>input{
						width: 100%;
						height: 36px;
						border-radius: 8px;
						border:1px solid #D1D5DB;
						background-color:#F9FAFB;
						outline:none;
						padding-left: 34px;
						padding-right: 10px;
					}
				}
			}
			border-bottom:1px solid #E5E7EB;
		}
	}
}

.task__list{
	&>.elem{
		width: 100%;
		padding:17px;
		border:1px solid #E5E7EB;
		border-radius: 8px;
		margin-bottom: 8px;
		& .details__task{
			& .el{
				display: flex;
				align-items:center;
				margin-bottom: 7px;

				&:last-child{
					margin-bottom: 0px;
				}
				justify-content:flex-start;
				& .task__author{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#111928;
					}
					&>span{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						min-width: 24px;
						max-width: 24px;
						min-height: 24px;
						margin-right: 4px;
						max-height: 24px;
						border-radius: 250px;
						background-color:#E9ECFB;
						font-size: 12px;
						font-weight: 600;
					}
				}
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					color:#111928;
					font-weight: 400;
				}
				&>span{
					display: inline-flex;
					align-items:center;
					justify-content:center;
					margin-right: 8px;
					font-size: 14px;
					line-height: 150%;
					color:#4B5563;
					font-weight: 500;
				}
			}
		}
		& .top__task--checkbox{
			margin-bottom: 12px;
			&>label{
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
				}
			}
		}
		&:last-child{
			margin-bottom: 0px;
		}
	}
}


.opened__task--main{
	height: 100%;
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	& .small__information{
		margin-bottom: 20px;
		& .task__switcher{
			margin-top: 24px;
			& ul{
				& li{
					&>a{
						&.current{
							background-color:#F9F9F9;
							color:#000000;
							font-weight: 500;
							& svg path{
								fill:#000000;
							}
						}
						min-height: 42px;
						display: flex;
						align-items:center;
						justify-content:center;
						font-size: 14px;
						line-height: 130%;
						font-weight: 500;
						&:hover{
							background-color:#F9F9F9;
							color:#000000;
							& svg path{
								fill:#000;
							}
						}
						& span{
							display: inline-flex;
							margin-right: 10px;
							& svg path{
								fill:#6B7280;
								transition:.3s ease all;
							}
						}
					}
				}
			}
		}
		&>p{
			margin:0px;
			font-size: 14px;
			line-height: 150%;
			color:#111928;
			font-weight: 400;
		}
		&>h6{
			margin-bottom: 16px;
			font-size: 24px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
			margin-top: 0px;
		}
	}
	& .btns{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:8px;
		padding-bottom: 32px;
		margin-top: 20px;
		& .mark{
			cursor:pointer;
			& label{
				display: flex;
				align-items:center;
				justify-content:center;
				min-height: 41px;
				border:1px solid #D1D5DB;
				border-radius: 8px;
				font-size: 14px;
				line-height: 150%;
				cursor:pointer;
				color:#111928;
				font-weight: 500;
				width: 100%;
				& p{
					margin:0px;
				}
			}
		}
		&>.edit__task{
			display: flex;
			justify-content:center;
			align-items:center;
			font-size: 14px;
			font-weight: 500;
			min-height: 41px;
			color:#111928;
		}
	}
}

.task__containers{
	& .notes__container{
		& .notes__history{
			&>.elem__history{
				margin-bottom: 16px;
				& .user__notes{
					&>.el__user{
						margin-bottom: 0px;
						padding:15px 32px;
						width: calc(100% + 64px);
						margin-left: -32px;
						display: flex;
						align-items:flex-start;
						justify-content:flex-start;
						transition:.3s ease all;
						&:hover{
							& .controls__btns{
								opacity:1!important;
								pointer-events:initial!important;
							}
							background-color:#F9F9F9;
						}
						& .comment{
							width: 100%;
							padding-top: 0px;
							& .top__comment{
								display: flex;
								align-items:center;
								justify-content:space-between;
								margin-bottom: 4px;
								&>.title{
									display: flex;
									align-items:center;
									justify-content:flex-start;
									
									margin-right: 12px;
									&>p{
										margin-top: 0px;
										margin-right: 4px;
										font-size: 14px;
										font-weight: 600;
										color:#111928;
										margin-bottom: 0px;
									}
									&>span{
										color:#6B7280;
										font-size: 12px;
										line-height: 150%;
										font-weight: 400;
										position: relative;
										top:2px;
									}
								}
								& .controls__btns{
									display: flex;
									align-items:center;
									justify-content:center;
									padding:6px 10px;
									background-color:#FFFFFF;
									border-radius: 4px;
									border:1px solid rgba(156,163,175,.2);
									pointer-events:none;
									opacity:0;
									transition:.3s ease all;
									&>a{
										display: inline-flex;
										align-items:center;
										justify-content:center;
										text-decoration: none;
										margin-right: 12px;
										&:hover{
											& svg path{
												fill:#1C45C2;
											}
										}
										& svg path{
											transition:.3s ease all;
										}
										&:last-child{
											margin-right: 0px;
										}
									}
								}
							}
							&>p{
								margin:0px;
								font-size: 14px;
								line-height: 130%;
								font-weight: 400;
								color:#1F2A37;
							}
							
						}
						&>.avatar{
							display: flex;
							align-items:center;
							justify-content:center;
							margin-right: 8px;
							&>span{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								min-width: 28px;
								max-width: 28px;
								min-height: 28px;
								max-height: 28px;
								border-radius: 95px;
								font-size: 12px;
								line-height: 140%;
								font-weight: 600;
								position: relative;
								& img{
									width: 100%;
									height: 100%;
									object-fit:cover;
								}
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				&>span{
					display: block;
					margin-bottom: 8px;
					text-align:left;
					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					color:#4B5563;
				}
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
		& form{
			width: 100%;
			position: relative;
			margin-bottom: 24px;
			& button{
				position: absolute;
				display: inline-flex;
				align-items:center;
				justify-content:center;
				min-width: 26px;
				max-width: 26px;
				min-height: 26px;
				max-height: 26px;
				right: 8px;
				bottom:12px;
				background-color:#111928;
				border-radius: 250px;
				border:0px;
				outline:none;
			}
			& textarea{
				width: 100%;
				padding:8px 12px;
				border-radius: 8px;
				border:1px solid #E5E7EB;
				resize:none;
				outline:none;
				padding-bottom: 50px;
				font-size: 14px;
				color:#000;
				height: 95px;
				box-shadow:0px 1px 0px 1px #E5E7EB;
			}
		}
	}
	& .details__container{
		& ul{
			padding:0px;
			list-style-type: none;
			margin:0px;
			&>li{
				display: flex;
				align-items:center;
				margin-bottom: 12px;
				&:last-child{
					margin-bottom: 0px;
				}
				justify-content:flex-start;
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#111928;
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>span{
						display: inline-flex;
						margin-right: 5px;
						align-items:center;
						justify-content:center;
					}
				}
				&>span{
					min-width: 120px;
					max-width: 120px;
					display: inline-flex;
					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					color:#4B5563;
				}
			}
		}
	}
}
.task__containers .notes__container form button{
	cursor:pointer;
	transition:.3s ease all;
}
.task__containers .notes__container form button:hover{
	background-color:#1C45C2;
}
.task__containers .notes__container .notes__history>.elem__history .user__notes>.el__user .comment .top__comment>.title{
	flex-wrap:wrap;
}




@media (max-width: 1440px){
	.tasks__wrapper .tasks__box .task__filter .left{
		max-width: 340px;
	}
	
}
@media (max-width: 1280px){
	.task__containers .notes__container .notes__history>.elem__history .user__notes>.el__user .controls__btns{
		opacity:1!important;
		pointer-events:initial!important;
	}
	.tasks__wrapper .tasks__box .task__filter{
		flex-direction:column;
	}
	.tasks__wrapper .tasks__box .task__filter .left{
		max-width: 100%;
		margin-bottom: 10px;
	}
	.tasks__wrapper .tasks__box .task__filter .right{
		width: 100%;
	}
}
.tasks__wrapper .tasks__box .task__filter .right .filter__switcher ul li{
	border-right:1px solid #E5E7EB;
}
@media (max-width: 767px){
	.task__containers .notes__container .notes__history>.elem__history .user__notes>.el__user{
		width: calc(100% + 32px);
		margin-left: -16px;
		padding:15px;
	}
	.tasks__wrapper .tasks__box .task__filter .right .filter__switcher ul>li>a{
		padding-left: 14px;
		padding-right: 14px;
	}
	.tasks__wrapper .tasks__box .task__filter .right .filter__switcher{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 10px;
		& ul>li{
			width: 100%;
		}
	}
	.tasks__wrapper>h2{
		margin-bottom: 15px;
		font-size: 24px;
	}
	.tasks__wrapper .tasks__box .task__filter .right .dropdown__filter{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.tasks__wrapper .tasks__box .task__filter .right .dropdown__filter>.group__dropdown>a{
		width: 100%;
	}
	.tasks__wrapper .tasks__box .task__filter .right{
		flex-wrap:wrap;
		&>.btn{
			width: 100%;
			margin-bottom: 10px;
			margin-right: 0px;
			&>a{
				width: 100%;
			}
		}
	}
}
@media (max-width: 480px){
	.tasks__wrapper .tasks__box .task__filter .right .filter__switcher ul>li a{
		white-space: nowrap;
	}
	.tasks__wrapper .tasks__box .task__filter .right .filter__switcher ul>li>a{
		font-size: 12px;
		padding-left: 7px;
		padding-right: 7px;
	}
	.tasks__wrapper .tasks__box .task__filter{
		padding:12px;
	}
}