.email__wrapper{
	padding-top: 32px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 32px;
	&>.top{
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom: 24px;
		&>h6{
			margin:0px;
			font-size: 28px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
	}
	& .double__email{
		display: flex;
		align-items:flex-start;
		justify-content:space-between;
		& .email__details{
			width: 100%;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			&>.content{
				padding:40px 20px;
				display: flex;
				justify-content:center;
				align-items:center;
				& .media{
					width: 100%;
					max-width: 540px;
					display: flex;
					align-items:center;
					justify-content:center;
					border-radius: 4px;
					overflow:hidden;
					border:1px solid rgba(0,0,0,.1);
					box-shadow:0px 4px 4px rgba(0,0,0,.05);
					&>img{
						max-width: 100%;
					}
				}
			}
			&>.head{
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				padding:20px;
				background-color:#fff;
				border-bottom:1px solid #E5E7EB;
				& .tags{
					display: flex;
					align-items:flex-start;
					justify-content:flex-start;
					margin-bottom: 6px;
					&:last-child{
						margin-bottom: -6px;
					}
					& .list{
						display: flex;
						align-items:center;
						justify-content:flex-start;
						flex-wrap:wrap;
						margin-left: -6px;
						margin-top: -6px;
						& .el{
							padding-left: 10px;
							padding-right: 10px;
							margin:6px;
							min-height: 22px;
							display: flex;
							padding-top: 3px;
							padding-bottom: 3px;
							align-items:center;
							justify-content:center;
							border-radius: 6px;
							background-color:#F3F4F6;
							& p{
								margin:0px;
								font-size: 12px;
								word-break:break-all;
								line-height: 14px;
								font-weight: 500;
								color:#111928;
							}
						}
					}
					&>p{
						white-space: nowrap;
						font-size: 14px;
						line-height: 125%;
						font-weight: 500;
						color:#4B5563;
						margin-right: 8px;
						margin-top: 0px;
						margin-bottom: 0px;
					}
				}
				& .subject{
					margin-bottom: 12px;
					&>p{

						font-size: 14px;
						line-height: 130%;
						font-weight: 400;
						color:#6B7280;
						& span{
							color:#4B5563;
							font-weight: 500;
						}
						margin:0px;
					}
				}
			}
		}
		& .email__info{
			min-width: 320px;
			max-width: 320px;
			margin-right: 24px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			background-color:#fff;
			& .target__segment{
				padding:20px;
				border-bottom:1px solid #E5E7EB;
				display: flex;
				align-items:flex-start;
				justify-content:space-between;
				& .right{
					position: relative;
					top:-1px;
					&>span{
						display: inline-flex;
						padding-left: 10px;
						padding-right: 10px;
						white-space: nowrap;
						font-size: 12px;
						line-height: 150%;
						font-weight: 500;
						border-radius: 6px;
					}
				}
				& .left{
					display: flex;
					flex-direction:column;
					align-items:flex-start;
					&>span{

						font-size: 12px;
						line-height: 125%;
						font-weight: 400;
						color:#6B7280;
						& span{
							font-weight: 600;
						}
					}
					&>p{
						margin-top: 0px;
						margin-bottom: 9px;
						font-size: 16px;
						line-height: 125%;
						font-weight: 600;
						color:#111928;
					}
				}
			}
			& .elem__info{
				padding:20px;
				border-bottom:1px solid  #E5E7EB;
				&:last-child{
					border-bottom:0px;
				}
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					display: flex;
					flex-direction:column;
					align-items:flex-start;
					& li{
						&>p{
							margin:0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#6B7280;
							& span{
								font-weight: 500;
							}
						}
						margin-bottom: 8px;
						&:last-child{
							margin-bottom: 0px;
						}
						display: inline-flex;
						align-items:center;
						justify-content:flex-start;
						&>span{
							display: inline-flex;
							margin-right: 9px;
						}
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#6B7280;
					}
				}
				&>p{
					margin-top:0px;
					margin-bottom: 12px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
			& .status{
				display: flex;
				align-items:center;
				justify-content:space-between;
				padding:20px;
				border-bottom:1px solid #E5E7EB;
				&>span{
					display: inline-flex;
					min-height: 22px;
					border-radius: 6px;
					align-items:center;
					justify-content:center;
					padding-left: 10px;
					padding-right: 10px;
					font-size: 12px;
					line-height: 150%;
					font-weight: 500;
				}
				&>p{
					margin:0px;
					margin-right: 12px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
	}
}
@media (max-width: 991px){
	.email__wrapper>.top>h6{
		font-size: 24px;
	}
	.email__wrapper .double__email{
		flex-direction:column;
	}
	.email__wrapper .double__email .email__details>.head{
		padding:15px;
	}
	.email__wrapper .double__email .email__info{
		min-width: 0px;
		max-width: 100%;
		width: 100%;
		margin-right: 0px;
		margin-bottom: 16px;
	}
	.email__wrapper>.top{
		margin-bottom: 15px;
	}
}
@media (max-width: 767px){
	.email__wrapper .double__email .email__details>.head .tags>p{
		font-size: 12px;
	}
	.email__wrapper .double__email .email__info .target__segment ,  .email__wrapper .double__email .email__info .status , .email__wrapper .double__email .email__info .elem__info{
		padding:15px;
	}
	.email__wrapper{
		padding:20px 15px;
	}
	.email__wrapper>.top{
		flex-direction:column;
	}
	.email__wrapper>.top>h6{
		width: 100%;
		margin-bottom: 10px;
	}
	.email__wrapper>.top>a{
		width: 100%;
		align-items:center;
		justify-content:center;
	}
} 
@media (max-width: 480px){
	.email__wrapper .double__email .email__details>.head .tags{
		flex-direction:column;
		align-items:flex-start;
	}
	.email__wrapper .double__email .email__details>.head .tags>p{
		margin-bottom: 5px;
	}
	.email__wrapper .double__email .email__info .status{
		flex-direction:column;
		align-items:flex-start;
	}
	.email__wrapper .double__email .email__info .status>p{
		margin-right: 0px;
		margin-bottom: 5px;
	}
	.email__wrapper .double__email .email__info .target__segment{
		flex-direction:column;
		align-items:flex-start;
	}
	.email__wrapper .double__email .email__info .target__segment .right{
		margin-top: 5px;
	}
	.email__wrapper .double__email .email__info .target__segment .left>p{
		margin-bottom: 2px;
	}
}