.inbox .inbox__side{
	padding-bottom: 0px!important;
}
.elements__list{
	overflow-y:auto;
	width: calc(100% + 48px);
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 24px;
	margin-left: -24px;
	&::-webkit-scrollbar {
	  width: 4px;
	  height: 4px;
	}
	 
	&::-webkit-scrollbar-track {

	}
	 
	&::-webkit-scrollbar-thumb {
		border-radius: 250px;
	  background-color:rgb(28,69,194);
	}
}
.inbox{
	min-height: 100vh;
	padding-top: 52.8px;
	padding-left: 56px;
	padding-right: 0px;
	padding-bottom: 0px;
	display: flex;
	justify-content:space-between;
	& .elem__chat{
		margin-bottom: 24px;
		display: flex;
		align-items:flex-start;
		justify-content:flex-start;
		& .message{
			width: 100%;
			& .desc{
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 130%;
					font-weight: 400;
					color:#1F2A37;
					margin-bottom: 15px;
					&:last-child{
						margin-bottom: 0px;
					}
				}
			}
			&>.title{
				display: flex;
				align-items:center;
				justify-content:flex-start;
				flex-wrap:wrap;
				margin-bottom: 2px;
				&>span{
					display: inline-flex;
					font-size: 12px;
					line-height: 150%;
					font-weight: 400;
					color:#6B7280;
					padding-top: 4px;
				}
				&>p{
					margin:0px;
					margin-right: 4px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
		& .author{
			display: flex;
			align-items:center;
			justify-content:center;
			margin-right: 8px;
			&.logo{
				&>span{
					&>img{
						max-width: 24px;
						max-height: 24px;
					}
				}
			}
			&>span{
				display: flex;
				align-items:center;
				justify-content:center;
				min-width: 45px;
				max-width: 45px;
				min-height: 45px;
				max-height: 45px;
				border-radius: 250px;
			}
		}
	}
	& .chat__list{
		padding:16px;
		&.no__controls{
			height: calc(100% - 78px);
		}
		& .day__mark{
			display: flex;
			align-items:center;
			justify-content:center;
			margin:24px 0px;
			&:nth-child(1){
				margin-top: 0px;
			}
			&>span{
				display: inline-flex;
				width: 100%;
				min-height: 1px;
				background-color:#E5E7EB;
			}
			&>p{
				margin:0px;
				margin:0px 15px;
				white-space: nowrap;
				font-size: 14px;
				line-height: 20px;
				color:#6B7280;
				font-weight: 400;
			}
		}
		width: 100%;
		height: calc(100% - 403px);
		overflow-y:auto;
		&::-webkit-scrollbar {
		  width: 4px;
		  height: 4px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
	}
	& .chat__wrapper{
		width: 100%;
		min-height: 100%;
		& .chat__controls{
			width: 100%;
			padding-left: 16px;
			padding-bottom: 24px;
			padding-top: 30px;
			padding-right: 16px;
			& .bottom__buttons{
				display: flex;
				align-items:center;
				justify-content:space-between;
				padding:12px 20px;
				border-left: 1px solid #E5E7EB;
				border-right: 1px solid #E5E7EB;
				border-bottom:1px solid #E5E7EB;
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;
				& .right{
					display: flex;
					align-items:center;
					justify-content:flex-end;
					&>button{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						padding-left: 27px;
						padding-right: 27px;
						background-color:#111928;
						transition:.3s ease all;
						&:hover{
							background-color:#1C45C2;
						}
						&:active{
							background-color:#1C45C2;
						}
					}
					&>span{
						display: block;
						margin-right: 24px;
						font-size: 12px;
						line-height: 150%;
						font-weight: 400;
						color:#4B5563;
						& span{
							color:#111928;
						}
					}
				}
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>li{
						margin-right: 15px;
						&>a{
							display: inline-flex;
							align-items:center;
							justify-content:center;
							text-decoration: none;
							&.opened{
								&.stroke{
									& svg path{
										fill:none;
										stroke:#1C45C2;
									}
								}
								& svg path{
									fill:#1C45C2;
								}
							}
							&:hover{
								&.stroke{
									& svg path{
										fill:none;
										stroke:#1C45C2;
									}
								}
								& svg path{
									fill:#1C45C2;
								}
							}
							& svg path{
								transition:.3s ease all;
							}
						}
						&:last-child{
							margin-right: 0px;
						}
					}
				}
			}
			&>textarea{
				width: 100%;
				height: 115px;
				background-color:#fff;
				border:0px;
				outline:none;
				border-left: 1px solid #E5E7EB;
				border-right: 1px solid #E5E7EB;
				border-bottom:1px solid #E5E7EB;
				padding:15px 20px;
				font-size: 14px;
				color:#000;
			}
			& .top__buttons{
				border:1px solid #E5E7EB;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				overflow-x:auto;
				overflow-y:hidden;
				background-color:#fff;
				position: relative;
				height: 36px;
				&::-webkit-scrollbar {
				  width: 4px;
				  height: 4px;
				}
				 
				&::-webkit-scrollbar-track {

				}
				 
				&::-webkit-scrollbar-thumb {
					border-radius: 250px;
				  background-color:rgb(28,69,194);
				}
				& ul{
					position: absolute;
					left: 0px;
					top:0px;
					width: 100%;
					padding:0px;
					list-style-type: none;
					margin:0px;
					display: flex;
					align-items:center;
					justify-content:center;
					&>li{
						display: flex;
						width: 100%;
						align-items:center;
						justify-content:center;
						border-right:1px solid #E5E7EB;
						&:last-child{
							border-right:0px;
						}
						&>a{
							&.current{
								background-color:#F9FAFB;
							}
							display: inline-flex;
							width: 100%;
							align-items:center;
							justify-content:center;
							font-size: 12px;
							line-height: 18px;
							color:#4B5563;
							font-weight: 500;
							text-decoration: none;
							padding:7px 15px;
							transition:.3s ease all;
							&:hover{
								background-color:#F9FAFB;
							}
							& span{
								display: inline-flex;
								margin-right: 4px;
								& img{
									min-width: 16px;
									max-width: 16px;
								}
							}
						}
					}
				}
			}
		}
		& .chat__members{
			width: 100%;
			padding:10px 16px;
			border-bottom:1px solid #E5E7EB;
			background-color:#fff;
			display: flex;
			align-items:center;
			justify-content:flex-start;
			&::-webkit-scrollbar {
			  width: 4px;
			  height: 4px;
			}
			 
			&::-webkit-scrollbar-track {

			}
			 
			&::-webkit-scrollbar-thumb {
				border-radius: 250px;
			  background-color:rgb(28,69,194);
			}
			&>.elem{
				display: flex;
				align-items:center;
				padding:8px 12px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				justify-content:flex-start;
				margin-right: 7px;
				&>p{
					margin:0px;
					font-size: 12px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
					white-space: nowrap;
				}
				&>span{
					display: inline-flex;
					& img{
						max-width: 12px;
						min-width: 12px;
					}
					align-items:center;
					justify-content:center;
					min-width: 18px;
					max-width: 18px;
					min-height: 18px;
					max-height: 18px;
					border-radius: 250px;
					background-color:#F0EFFE;
					margin-right: 10px;
					font-size: 8px;
					line-height: 150%;
					font-weight: 500;
					color:#1C45C2;
				}
				&:last-child{
					margin-right: 0px;
				}
			}
		}
		& .chat__top{
			width: 100%;
			padding:20px 16px;
			background-color:#fff;
			border-bottom:1px solid #E5E7EB;
			display: flex;
			align-items:center;
			justify-content:space-between;
			&>.right{
				display: flex;
				align-items:center;
				justify-content:flex-end;
				& .btns{
					display: flex;
					align-items:center;
					justify-content:flex-end;
					&>a{
						display: inline-flex;
						margin-right: 8px;
						min-height: 37px;
						&:last-child{
							margin-right: 0px;
						}
					}
				}
			}
			&>.left{
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& .type{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>img{
						min-width: 20px;
						max-width: 20px;
						margin-right: 4px;
					}
					&>span{
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#4B5563;
					}
				}
				&>h6{
					margin:0px;
					margin-right: 15px;
					font-size: 18px;
					line-height: 150%;
					font-weight: bold;
					color:#111928;
				}
			}
		}
	}
	& .contacts__list{
		min-width: 320px;
		max-width: 320px;
		margin-right: auto;
		background-color:#fff;
		position: relative;
		border-right:1px solid #E5E7EB;

		& .contacts__list--box{
			height: calc(100% - 132px);
			position: absolute;
			left: 0px;
			top:132px;
			overflow-y:auto;
			width: 100%;
			&>.contact__element{
				padding-top: 20px;
				padding-bottom: 20px;
				padding-right: 20px;
				padding-left: 40px;
				text-decoration: none;
				display:flex;
				flex-direction:column;
				transition:.3s ease all;
				border-bottom:1px solid #E5E7EB;
				position: relative;
				&.new{
					&:before{
						content:"";
						position: absolute;
						top:27px;
						left: 19px;
						min-width: 8px;
						max-width: 8px;
						min-height: 8px;
						max-height: 8px;
						border-radius: 250px;
						background-color:#EB903A;
					}
				}
				&:last-child{
					border-bottom:0px;
				}
				&.current{
					background-color:#F9FAFB;
				}
				&:hover{
					background-color:#F9FAFB;
				}
				& .desc{
					& p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#374151;
						overflow: hidden;
					    display: -webkit-box;
					    -webkit-line-clamp: 2;
					    -webkit-box-orient: vertical;
					}
				}
				& .request{
					margin-bottom: 4px;
					&>span{
						display: inline-flex;
						align-items:center;
						justify-content:flex-start;
						font-size: 14px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
						&>img{
							min-width: 16px;
							max-width: 16px;
							margin-right: 3px;
						}
					}
				}
				&>.top{
					display: flex;
					align-items:center;
					justify-content:space-between;
					margin-bottom: 4px;
					& .time{
						display: flex;
						align-items:center;
						justify-content:flex-end;
						& .star{
							cursor:pointer;
							display: inline-flex;
							align-items:center;
							justify-content:center;
						}
						&>span{
							display: inline-flex;
							margin-right: 8px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#6B7280;
						}
					}
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 140%;
						font-weight: 600;
						color:#111928;
					}
				}
			}
			&::-webkit-scrollbar {
			  width: 4px;
			  height: 4px;
			}
			 
			&::-webkit-scrollbar-track {

			}
			 
			&::-webkit-scrollbar-thumb {
				border-radius: 250px;
			  background-color:rgb(28,69,194);
			}
		}
		& .switcher{
			& ul{
				padding:0px;
				list-style-type: none;
				margin:0px;
				display: flex;
				align-items:center;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				justify-content:center;
				overflow:hidden;
				&>li{
					border-right:1px solid #E5E7EB;
					&:last-child{
						border-right: 0px;
					}
					width: 100%;
					&>a{
						display: flex;
						align-items:center;
						justify-content:center;
						text-decoration: none;
						min-height: 34px;
						&.current{
							color:#111928;
							background-color:#F9F9F9;
						}
						transition:.3s ease all;
						&:hover{
							color:#111928;
							background-color:#F9F9F9;
						}
						font-size: 14px;
						line-height: 130%;
						font-weight: 400;
						color:#374151;
					}
				}
			}
		}
		& .top__contacts{
			padding-top: 24px;
			padding-left: 16px;
			padding-right: 16px;
			padding-bottom: 4px;
			position: relative;
			& .filter__contacts{
				position: absolute;
				width: 100%;
				border-radius: 6px;
				border:1px solid #E5E7EB;
				background-color:#fff;
				z-index: 3;
				left: 0px;
				top:70px;
				box-shadow:0px 8px 12px rgba(0,0,0,.04);
				& form{
					display: flex;
					flex-direction:column;
					width: 100%;
					margin:0px;
					padding:0px;
					& .controls{
						padding:16px;
						display: flex;
						align-items:center;
						justify-content:space-between;
						width: 100%;
						border-bottom:0px;
						&>button{
							display: inline-flex;
							align-items:center;
							justify-content:center;
							min-height: 36px;
							border-radius: 100px;
							cursor:pointer;
							padding-left: 16px;
							padding-right: 16px;
							background-color:#111928;
							outline:none;
							cursor:pointer;
							border:0px;
							font-size: 14px;
							line-height: 140%;
							font-weight: 600;
							transition:.3s ease all;
							&:hover{
								background-color:#1C45C2;
							}
							color:#FFFFFF;
						}
						&>a{
							font-size: 14px;
							line-height: 140%;
							font-weight: 600;
							color:#111928;
							text-decoration: none;
							border-radius: 38px;
							background-color:#F3F3F3;
							display: inline-flex;
							align-items:center;
							justify-content:center;
							min-height: 36px;
							padding-left: 16px;
							padding-right: 16px;
							transition:.3s ease all;
							&:hover{
								background-color:#1C45C2;
								color:#fff;
							}
						}
					}
					&>.field{
						width: 100%;
						padding:16px;
						padding-bottom: 10px;
						border-bottom:1px solid #E5E7EB;
						& .checks{
							&>.group__checkbox{
								margin-bottom: 14px;
								& label{
									cursor:pointer;
								}
								&:last-child{
									margin-bottom: 0px;
								}
							}
						}
						&>.top{
							display: flex;
							align-items:center;
							justify-content:space-between;
							margin-bottom: 12px;
							&>a{
								display: inline-flex;
								font-size: 14px;
								line-height: 150%;
								font-weight: 400;
								color:#1C45C2;
								text-decoration: none;
								transition:.3s ease all;
								&:hover{
									opacity:.7;
								}
							}
							&>p{
								margin:0px;
								font-size: 14px;
								line-height: 150%;
								margin-right: 12px;
								font-weight: 400;
								color:#1F2A37;
							}
						}
					}
				}
				& .title{
					padding:16px;
					border-bottom:1px solid #E5E7EB;
					&>p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
				}
			}
			& form{
				display: flex;
				align-items:center;
				justify-content:space-between;
				padding-bottom: 16px;
				margin-bottom: 16px;
				border-bottom:1px solid #E5E7EB;
				& .buttons{
					display: flex;
					align-items:center;
					margin-left: 9px;
					justify-content:flex-start;
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						text-decoration: none;
						min-width: 52px;
						margin-right: 9px;
						&:last-child{
							margin-right: 0px;
						}
						min-height: 36px;
						border-radius: 8px;
					}
				}
				&>.search{
					width: 100%;
					display: inline-flex;
					align-items:center;
					position: relative;
					& button{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						cursor:pointer;
						border:0px;
						outline:none;
						background-color:transparent;
						position: absolute;
						left: 10px;
						& svg path{
							transition:.3s ease all;
						}
					}
					&>input{
						width: 100%;
						height: 36px;
						border:1px solid #E5E7EB;
						border-radius: 8px;
						background-color:#F9FAFB;
						outline:none;
						padding-left: 42px;
						padding-right: 15px;
					}
				}
			}
		}
	}
	& .inbox__side{
		min-width: 220px;
		& .elements__wrapper{
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom:1px solid #E5E7EB;
			&:last-child{
				border-bottom:0px;
			}
			& .channels__wrapper{
				& .connect{
					display: inline-flex;
					align-items:center;
					justify-content:flex-start;
					padding:8px;
					border-radius: 8px;
					text-decoration: none;

					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					color:#1F2A37;
					transition:.3s ease all;
					&:hover{
						background-color:#F9FAFB;
					}
					& span{
						display: inline-flex;
						margin-right: 8px;
					}
				}
			}
			& .tags__wrapper{
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					&>li{
						margin-bottom: 4px;
						&>a{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							text-decoration: none;
							padding:8px;
							font-size: 14px;
							line-height: 150%;
							border-radius: 8px;
							font-weight: 500;
							color:#1F2A37;
							transition:.3s ease all;
							&.current{
								background-color:#F9FAFB;
							}
							&:hover{
								background-color:#F9FAFB;
							}
							& span{
								display: inline-flex;
								margin-right: 8px;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
			}
			& .folders__wrapper{
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					&>li{
						margin-bottom: 4px;
						&>a{
							display: flex;
							align-items:center;
							justify-content:space-between;
							text-decoration: none;
							padding:8px;
							transition:.3s ease all;
							&.current{
								background-color:#F9FAFB;
							}
							&:hover{
								background-color:#F9FAFB;
							}
							border-radius: 8px;
							&>p{
								font-size: 14px;
								line-height: 150%;
								font-weight: 500;
								color:#1F2A37;
								margin:0px;
								display: flex;
								align-items:center;
								justify-content:flex-start;
								& span{
									display: inline-flex;
									margin-right: 8px;
								}
							}
							&>span{
								display: inline-flex;
								margin-left: 6px;
								font-size: 14px;
								line-height: 150%;
								font-weight: 400;
								color:#6B7280;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
			}
			& .title{
				display: flex;
				align-items:center;
				justify-content:space-between;
				margin-bottom: 16px;
				&>p{
					margin:0px;
					font-size: 12px;
					line-height: 150%;
					font-weight: 500;
					color:#6B7280;
				}
				&>a{
					display: inline-flex;
					align-items:center;
					justify-content:center;
				}
			}
			&:last-child{
				margin-bottom: 0px;
				padding-bottom: 0px;
			}
		}
		& .inbox__top{
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom:1px solid #E5E7EB;
			& .controls{
				display: flex;
				align-items:center;
				justify-content:space-between;
				& .compose{
					display: inline-flex;
					position: relative;
					& .compose__dropdown{
						position: absolute;
						top:44px;
						left: 0px;
						min-width: 175px;
						max-width: 175px;
						background-color:#FFFFFF;
						padding:4px 0px;
						box-shadow:0px 4px 6px rgba(0,0,0,.1);
						& ul{
							&>li{
								display: flex;
								justify-content:flex-start;
								width: 100%;
								&>a{
									display: flex;
									align-items:center;
									justify-content:flex-start;
									text-decoration: none;
									padding:10px 15px;
									width: 100%;
									font-size: 14px;
									line-height: 130%;
									font-weight: 400;
									transition:.3s ease all;
									color:#4B5563;
									&:hover{
										background-color:#F9FAFB;
										color:#111928;
									}
									&:hover span svg path{
										fill:#111928;
									}
									& span{
										align-items:center;
										justify-content:center;
										& svg path{
											transition:.3s ease all;
										}
										display: inline-flex;
										margin-right: 4px;
									}
								}
							}
							padding:0px;
							list-style-type: none;
							margin:0px;
						}
					}
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						min-height: 36px;
						min-width: 132px;
						background-color:#111928;
						font-size: 14px;
						line-height: 150%;
						font-weight: 500;
						color:#FFFFFF;
						border-radius: 8px;
						text-decoration: none;
						transition:.3s ease all;
						& svg{
							transition:.3s ease all;
						}
						&.active{
							& svg{
								transform:rotate(180deg);
							}
							background-color:#1C45C2;
							box-shadow:0px 4px 6px rgba(0,0,0,.1);
						}
						&:hover{
							background-color:#1C45C2;
						}
						& svg{
							& path{
								transition:.4s ease all;
							}
						}
						& span{
							display: inline-flex;
							margin-right: 8px;
						}
					}
				}
				& .settings{
					display: inline-flex;
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						margin-left: 16px;
						&.active{
							& svg path{
								fill:#1C45C2;
							}
						}
					}
				}
			}
			&>h2{
				margin:0px;
				margin-bottom: 12px;
				font-size: 28px;
				line-height: 150%;
				font-weight: bold;
				color:#111928;
			}
		}
		max-width: 220px;
		padding:24px;
		border-right:1px  solid #E5E7EB;
		background-color:#fff;
	}
}

.contact__element{
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 40px;
	padding-bottom: 20px;
}


.elements__wrapper .title>a svg path{
	transition:.3s ease all;
}
.inbox .inbox__side .inbox__top .controls .settings>a svg path{
	transition:.3s ease all;
}
.inbox .inbox__side .inbox__top .controls .settings>a:hover svg path{
	fill:#1C45C2;	
}
.elements__wrapper .title>a:hover svg path{
	fill:#1C45C2;
}
.inbox .chat__wrapper .chat__controls .top__buttons ul{
	justify-content:flex-start;
}




.inner__profile{
	min-width: 320px;
	max-width: 320px;
	border-left: 1px solid #E5E7EB;
	background-color: #fff;
	position: relative;
	padding-top: 45px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;
	max-height: 100%;
	overflow-y:auto;
	&::-webkit-scrollbar {
	  width: 4px;
	  height: 4px;
	}
	 
	&::-webkit-scrollbar-track {

	}
	 
	&::-webkit-scrollbar-thumb {
		border-radius: 250px;
	  background-color:rgb(28,69,194);
	}
	& .accordions__wrapper{
		& .elem__accordion{
			padding:20px;
			border:1px solid #E5E7EB;
			border-radius: 12px;
			margin-bottom: 12px;
			cursor:pointer;
			&.opened{
				&>.title.stroke >p>span svg path{
					stroke:none;
					fill:#1C45C2;
				}
				&>.title>p>span svg path{
					stroke:#1C45C2;
				}
			}
			&:last-child{
				margin-bottom: 0px;
			}
			&>.content{
				display: none;
				margin-top: 16px;
				& .contact__info{
					&>.elem{
						display: flex;
						flex-direction:column;
						margin-bottom: 16px;
						&:last-child{
							margin-bottom: 0px;
						}
						align-items:flex-start;
						&>span{

							font-size: 16px;
							line-height: 140%;
							font-weight: 500;
							color:#374151;
						}
						&>p{
							margin-top: 0px;
							margin-bottom: 4px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#4B5563;
						}
					}
				}
			}
			&>.title{
				display: flex;
				align-items:center;
				justify-content:space-between;
				&>span{
					display: inline-flex;

				}
				&>p{
					margin:0px;
					display: flex;
					align-items:center;
					font-size: 16px;
					line-height: 140%;
					font-weight: 500;
					color:#111928;
					margin-right: 12px;
					justify-content:flex-start;
					& span{
						display: inline-flex;
						align-items:center;
						margin-right: 12px;
					}
				}
			}
		}
	}
	& .profile__main{
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom:1px solid #E5E7EB;
		& .btns{
			display: flex;
			flex-direction:column;

			&>a{
				font-size: 12px;
				margin-bottom: 12px;
				&:last-child{
					margin-bottom: 0px;
				}
				display: inline-flex;
				align-items:center;
				justify-content:center;
				text-decoration: none;
				min-height: 37px;
			}
		}
		& .desc{
			text-align:center;
			display: flex;
			flex-direction:column;
			align-items:center;
			margin-bottom: 16px;
			&>span{

				font-size: 14px;
				line-height: 150%;
				font-weight: 400;
				color:#1F2A37;
			}
			&>p{
				margin-top: 0px;
				margin-bottom: 4px;
				font-size: 16px;
				line-height: 140%;
				font-weight: 600;
				color:#111928;
			}
		}
		&>span{
			display: flex;
			justify-content:center;
			align-items:center;
			margin-bottom: 8px;
			&>img{
				min-width: 80px;
				max-width: 80px;
				min-height: 80px;
				max-height: 80px;
				border-radius: 250px;
				object-fit:cover;
			}
		}
	}
	&>.close__button{
		display: inline-flex;
		position: absolute;
		top:24px;
		left: 24px;
		align-items:center;
		justify-content:center;
		&:hover{
			& svg path{
				stroke:#1C45C2;
			}
		}
		& svg path{
			transition:.3s ease all;
		}
	}
}

.settings__dropdown{
	& .setting__switcher{
		display: flex;
		align-items:flex-start;
		justify-content:flex-start;
		&>label{
			margin-right: 8px;
		}
		& .desc{
			display: flex;
			flex-direction:column;
			align-items:flex-start;
			&>p{
				margin-top: 0px;
				margin-bottom: 0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 500;
				color:#0E1217;
			}
			&>span{
				font-size: 12px;
				line-height: 150%;
				font-weight: 400;
				color:#56595D;
			}
		}
	}
	min-width: 290px;
	max-width: 290px;
	padding:16px;
	background-color:#FFFFFF;
	border:1px solid #F3F3F3;
	border-radius: 6px;
	box-shadow:0px 8px 12px rgba(0,0,0,.04);
	position: absolute;
	z-index: 10;
	& .radios{
		padding-top: 15px;
		margin-top: 15px;
		border-top:1px solid #E7E7E8;
		& .elem{
			cursor:pointer;
			display: flex;
			margin-bottom: 15px;
			&:last-child{
				margin-bottom: 0px;
			}
			align-items:center;
			justify-content:flex-start;
			& label{
				cursor:pointer;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& input:checked + span + p{
					color:#111928;
					font-weight: 500;
				}
				&>p{
					margin:0px;
					margin-left: 8px;
					font-size: 14px;
					line-height: 130%;
					font-weight: 400;
					color:#4B5563;
				}
			}
		}
	}
}




.contacts__form{
	& .filter__btn{
		& svg path{
			transition:.3s ease all;
		}
		&.active{
			& svg path{
				fill:#1C45C2;
			}
		}
	}
}
.contacts__form .buttons{
	position: relative;
	& .sort__wrapper{
		position: absolute;

		min-width: 220px;
		max-width: 220px;
		position: absolute;
		top:40px;
		right: 0px;
		border:1px solid #E5E7EB;
		border-radius: 6px;
		background-color:#fff;
		z-index: 3;
		box-shadow:0px 8px 12px rgba(0,0,0,.04);
		& .sort__list{
			&>.elem__sort{
				padding-left: 16px;
				padding-top: 16px;
				padding-right: 16px;
				padding-bottom: 28px;
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					&>li{
						margin-bottom: 2px;
						&>a{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							padding:8px 16px;
							font-size: 14px;
							line-height: 130%;
							border-radius: 8px;
							font-weight: 400;
							color:#0E1217;
							text-decoration: none;
							transition:.3s ease all;
							position: relative;
							&:before{
								content:"";
								position: absolute;
								width: 18px;
								height: 18px;
								top:50%;
								transform:translateY(-50%);
								right: 16px;
								background:url('../img/checkblue.svg');
								background-repeat: no-repeat;
								background-size: contain;
								background-position:center;
								opacity:0;
								transition:.3s ease all;
							}
							&.current{
								&:before{
									opacity:1;
								}
							}
							&:hover{
								background-color:#F9FAFB;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				&>p{
					margin-top: 0px;
					text-transform: uppercase;
					margin-bottom: 8px;
					font-size: 12px;
					line-height: 150%;
					font-weight: 500;
					color:#6E7174;
				}
			}
		}
		& .title{
			padding:16px;
			border-bottom:1px solid #E7E7E8;
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 500;
				color:#0E1217;
			}
		}
	}
}



.sort__inbox{
	& svg path{
		transition:.3s ease all;
	}
	&.active{
		& svg path{
			fill:#1C45C2;
		}
	}
}
.inbox .contacts__list .contacts__list--box>.contact__element>.top .time{
	margin-left: 12px;
}
.inbox .contacts__list .contacts__list--box>.contact__element>.top .time{
	margin-bottom: auto;
	padding-top: 2px;
}




.inbox .chat__wrapper .chat__top>.left{
	margin-right: 8px;
}
.select__template--wrapper{
	position: absolute;
	z-index: 10;
	border-radius: 6px;
	border:1px solid #E5E7EB;
	background-color:#fff;
	max-width: 335px;
	box-shadow:0px 8px 12px rgba(0,0,0,.04);
	& .inner{
		& .list{
			max-height: 195px;
			overflow-y:auto;
			&::-webkit-scrollbar {
			  width: 4px;
			  height: 4px;
			}
			 
			&::-webkit-scrollbar-track {

			}
			 
			&::-webkit-scrollbar-thumb {
				border-radius: 250px;
			  background-color:rgb(28,69,194);
			}
			&>.elem{
				display: flex;
				flex-direction:column;
				align-items:flex-start;
				padding:14px 15px;
				text-decoration: none;
				border-bottom: 1px solid #E5E7EB;
				transition:.3s ease all;
				&:hover{
					background-color:#F9FAFB;
				}
				&:last-child{
					border-bottom:0px;
				}
				&>p{
					font-size: 12px;
					line-height: 150%;
					font-weight: 400;
					color:#4B5563;
					overflow: hidden;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;
				    -webkit-box-orient: vertical;
					margin:0px;
				}
				&>.top{
					display: flex;
					align-items:center;
					margin-bottom: 4px;
					justify-content:flex-start;
					&>p{
						margin:0px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
					&>span{
						display: inline-flex;
						margin-right: 4px;
						& img{
							min-width: 16px;
							max-width: 16px;
						}
					}
				}
			}
		}
		& .search{

			padding:12px 16px;
			border-bottom:1px solid #E5E7EB;
			&>input{
				width: 100%;
				height: 40px;
				padding-left: 12px;
				padding-right: 12px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
			}
		}
		&>.title{

			padding:12px 16px;
			border-bottom:1px solid #E5E7EB;

			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 600;
				color:#111928;
			}
		}
	}
}
.select__tags{
	width: 100%;
	max-width: 335px;
	background-color:#FFFFFF;
	border-radius: 6px;
	border:1px solid #E5E7EB;
	box-shadow:0px 8px 12px rgba(0,0,0,.04);
	z-index: 10;
	position: absolute;
	& .workroom{
		& ul{
			padding:0px;
			list-style-type: none;
			margin:0px;
			max-height: 150px;
			overflow-y:auto;
			&::-webkit-scrollbar {
			  width: 4px;
			  height: 4px;
			}
			 
			&::-webkit-scrollbar-track {

			}
			 
			&::-webkit-scrollbar-thumb {
				border-radius: 250px;
			  background-color:rgb(28,69,194);
			}
			&>li{
				&>a{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					padding:8px 16px;
					text-decoration: none;
					font-size: 14px;
					line-height: 150%;
					color:#0E1217;
					font-weight: 400;
					transition:.4s ease all;
					&:hover{
						background-color:#F3F3F3;
					}
				}
			}
		}
		&>p{
			margin-top: 0px;
			margin-bottom: 4px;
			font-size: 14px;
			line-height: 150%;
			font-weight: 500;
			color:#0E1217;
			padding-left: 16px;
			padding-right: 16px;
		}
	}
	& .search__tags{
		padding:12px 16px;
		& form{
			width: 100%;
			&>input{
				width: 100%;
				height: 40px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				padding-left: 12px;
				padding-right: 12px;
				outline:none;
				color:#000;
			}
		}
	}
	& .title{
		padding:12px 16px;
		border-bottom:1px solid #E5E7EB;
		&>p{
			margin:0px;
			font-size: 14px;
			line-height: 150%;
			font-weight: 600;
			color:#0E1217;
		}
	}
}
.choose__time>a.active svg path{
	fill:#1C45C2;
}
.choose__template--box{
	min-width: 335px;
	max-width: 335px;
	box-shadow:0px 8px 12px rgba(0,0,0,.04);
	position: absolute;
	left: 50%;
	transform:translateX(-50%);
	background-color:#fff;
	border-radius: 6px;
	border:1px solid #E5E7EB;
	z-index: 9;
	& .schedule{
		border-top:1px solid #E5E7EB;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:flex-start;
			text-decoration: none;
			& span{
				display: inline-flex;
				margin-right: 4px;
			}

			font-size: 14px;
			line-height: 150%;
			font-weight: 600;
			color:#111928;
			padding:13px 16px;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
		}
	}
	& .list{
		padding:8px 0px;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:flex-start;
			text-decoration: none;
			padding:8px 16px;
			font-size: 14px;
			line-height: 150%;
			width: 100%;
			font-weight: 400;
			color:#111928;
			transition:.3s ease all;
			&:hover{
				background-color:#F9FAFB;
			}
		}
	}
	&>.head{
		&>p{
			margin:0px;
			font-size: 14px;
			line-height: 150%;
			font-weight: 500;
			color:#111928;
		}
		padding:12px 16px;
		border-bottom:1px solid #E5E7EB;
	}
	bottom:100%;
	top:auto;
	margin-bottom: 18px;
}
.choose__time{
	position: relative;
}
.inbox .elem__chat:last-child{
	margin-bottom: 0px;
}
.scheduled__message{
	width: calc(100% - 53px);
	margin-left: auto;
	margin-bottom: 16px;
	&:last-child{
		margin-bottom: 0px;
	}
	& .inner{
		display: flex;
		align-items:center;
		justify-content:space-between;
		padding:8px 12px;
		border-radius: 6px;
		background-color:#E5E7EB;
		& .right{
			display: flex;
			align-items:center;
			justify-content:flex-end;
			&>a{
				display: inline-flex;
				margin-right: 8px;

				&:last-child{
					margin-right: 0px;
				}
			}
		}
		& .left{
			margin-right: 12px;
			&>p{
				margin:0px;
				display: flex;
				align-items:center;

				font-size: 14px;
				color:rgba(17,25,40,.7);
				justify-content:flex-start;
				&>span{
					display: inline-flex;
					margin-right: 8px;
				}
			}
		}
	}
}
.top__buttons{
	position: relative;
	& .main__button{
		position: relative;
		&>span{
			display: inline-flex;
			position: absolute;
			top:50%;
			right: 10px;
			transform:translateY(-50%);
		}
		&>a{
			height: 36px;
			display: flex;
			align-items:center;
			justify-content:center;
			text-decoration: none;
			font-size: 12px;
			line-height: 16px;
			color:#4B5563;
			font-weight: 500;
			justify-content:flex-start;
			padding-left: 15px;
			& span{
				display: inline-flex;
				margin-right: 4px;
			}
		}
	}
}
.inbox .chat__wrapper .chat__controls .top__buttons ul{
	flex-direction:column;
}
.inbox .chat__wrapper .chat__controls .top__buttons{
	position: relative;
}
.inbox .chat__wrapper .chat__controls .top__buttons{
	overflow-x:visible;
	overflow-y:visible;
}
.inbox .chat__wrapper .chat__controls .top__buttons ul{
	bottom:100%;
	top:auto;
	border:1px solid #E5E7EB;
	background-color:#fff;
	max-height: 180px;
	overflow-y:auto;
	border-radius: 6px;
	&::-webkit-scrollbar {
	  width: 4px;
	  height: 4px;
	}
	 
	&::-webkit-scrollbar-track {

	}
	 
	&::-webkit-scrollbar-thumb {
		border-radius: 250px;
	  background-color:rgb(28,69,194);
	}
}
.inbox .chat__wrapper .chat__controls .top__buttons ul>li>a{

	align-items:flex-start;
	justify-content:flex-start;
}
.inbox .contacts__list .contacts__list--box>.contact__element>.top>p{
	width: calc(100% - 100px);
	 overflow:hidden;
	  display:inline-block;
	  text-overflow: ellipsis;
	  white-space: nowrap;
}
.inbox .contacts__list .contacts__list--box>.contact__element.smaller{

	padding-left: 20px;
}
.owned{
	display: flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom: 4px;
	& .controls{
		display: flex;
		align-items:center;
		justify-content:flex-end;
		&>span{
			display: inline-flex;
			margin-right: 8px;
			&:last-child{
				margin-right: 0px;
			}
		}
	}
	&>.left{
		display: flex;
		align-items:center;
		justify-content:flex-start;
		width: calc(100% - 60px);
		&>span{
			display: inline-flex;
			align-items:center;
			margin-right: 8px;
		}
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 140%;
			font-weight: 600;
			color:#111928;
			
			 overflow:hidden;
			  display:inline-block;
			  text-overflow: ellipsis;
			  white-space: nowrap;
		}
	}
}
.chat__wrapper .right .btns .square{
	min-height: 37px;
	padding:0px;
	min-width: 37px;
	align-items:center;
	justify-content:center;
}
@media (max-width: 1440px){
	.inbox .chat__wrapper .chat__top>.left>h6{
		font-size: 17px;
	}
}
@media (max-width: 1400px){
	.inner__profile{
		min-width: 280px;
		max-width: 280px;
	}
}
@media (max-width: 1360px){
	.inbox .chat__wrapper .chat__top{
		padding:12px 16px;
	}
	.inbox .chat__wrapper .chat__controls>textarea{
		height: 80px;
	}
	.inbox .chat__wrapper .chat__controls{
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons{
		padding:7px 20px;
	}
}
@media (max-width: 1280px){
	.choose__template--box{
		margin-left: 70px;	
	}
	.choose__template--box{
		min-width: 240px;
		max-width: 240px;
	}
	.select__template--wrapper{
		max-width: 280px;
		margin-left: 42px;
		margin-top: 10px;
	}
	.inbox .chat__wrapper{
		display: none;
	}

	.inbox .contacts__list .top__contacts .filter__contacts{
		max-height: 480px;
		overflow-y:auto;
		&::-webkit-scrollbar {
		  width: 4px;
		  height: 4px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
	}
	.inner__profile{
		position: absolute;
		right: 0px;
		top:53px;
		max-height: calc(100% - 53px);
	}
	
	
	
	.inbox .inbox__side{
		position: absolute;
		top:53px;
		left: -220px;
		height: calc(100% - 53px);
		z-index: 8;
		transition:.4s ease all;
	}

	.inbox .contacts__list{
		width: 100%;
		min-width: 0px;
		max-width: 100%;
	}
	

}

.inbox .contacts__list .top__contacts form .buttons>a:nth-child(2){
	margin-right: 0px;
}
@media (max-width: 767px){
	.scheduled__message .inner{
		flex-direction:column;
	}
	.scheduled__message .inner .left{
		margin-right: 0px;
		margin-bottom: 8px;
	}
	.scheduled__message .inner .right{
		width: 100%;
	}
	.inbox .inbox__side.opened{
		left: 44px;
	}

	.inbox .chat__list .day__mark{
		margin:15px 0px;
	}
	.inbox .chat__wrapper .chat__controls>textarea{
		height: 65px;
	}
	.inbox .chat__wrapper .chat__top{
		padding:8px 16px;
	}
	.inbox .chat__wrapper .chat__top>.left>h6{
		font-size: 15px;
		line-height: 20px;
	}
	.inbox .chat__wrapper .chat__top>.left .type>span{
		font-size: 12px;
	}
	.inbox .chat__wrapper .chat__top>.left .type>img{
		min-width: 15px;
		max-width: 15px;
	}
	.inbox .chat__wrapper .chat__top>.left{
		flex-direction:column;
		align-items:flex-start;
	}
	.inbox .chat__wrapper .chat__top>.left>h6{
		margin-right: 0px;
		margin-bottom: 5px;
	}
	.inbox .contacts__list .top__contacts{
		padding-top: 16px;
	}
	.inbox .contacts__list .contacts__list--box>.contact__element.new:before{
		top:21px;
		left: 11px;
	}
	.inbox .contacts__list .contacts__list--box>.contact__element{
		padding-right: 14px;
		padding-top: 14px;
		padding-bottom: 14px;
		padding-left: 25px;
	}
	.inbox .inbox__side{
		left: -220px;
	}

	.inbox .chat__wrapper .chat__controls .bottom__buttons .right>button{
		padding-left: 11px;
		padding-right: 11px;
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons .right>span{
		margin-right: 8px;
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons ul>li{
		margin-right: 8px;
	}
	.inbox .chat__wrapper .chat__top{
		padding:8px 10px;
	}
	.inbox .chat__wrapper .chat__members{
		padding:8px 10px;
	}
	.inbox .chat__list{
		padding:10px;
	}
	.inbox .chat__wrapper .chat__controls{
		padding:10px;
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons{
		padding:7px 12px;
	}
}
@media (max-width: 640px){
	.inbox .chat__wrapper .chat__top>.right .btns span{
		margin-right: 0px!important;
	}
	.inbox .chat__wrapper .chat__top>.right .btns>a{
		min-height: 30px;
		min-width: 30px;
		padding-left: 0px;
		padding-right: 0px;
		justify-content:center;
		align-items:center;
		& svg{
			width:13px;
		}
	}
	.inbox .chat__wrapper .chat__top>.right .btns>a{
		font-size: 0px;
	}
	.inbox .chat__wrapper .chat__top>.right .btns>a{
		margin-right: 5px;
	}
}
@media (max-width: 480px){
	.inner__profile{
		min-width: 0px;
		max-width: 100%;
		width: calc(100% - 44px);
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons .right>span{
		font-size: 11px;
	}
	.inbox .chat__wrapper .chat__controls .bottom__buttons ul>li{
		margin-right: 6px;
	}
	.inbox .chat__wrapper .chat__top>.left>h6{
		font-size: 14px;
		line-height: 19px;
		margin-bottom: 2px;
	}
}