*{
	padding:0;
	margin:0;
	list-style: none;	
}
textarea{
	appearance:none;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	border: none;
	&:focus{
		outline: none;
	}
	resize: none;
	line-height: 1.5;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: .16rem;
	color: #36434d；
}


.textarea-container {
	width: 100%;
	height: 1.08rem;
	.textarea-item {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: .2rem 0rem 0rem 0rem;
		.textarea-title {
			height: .2rem;
			font-size: .16rem;
			line-height: 1.2;
			color: #667580; 
			display: flex;
			.textarea-label {
				&.space {
					margin-right: .08rem;
				}
			}
			.required {
				color: #f20000;
				height: 100%;
				line-height: 1.5;
				margin-left: .04rem;
				margin-right: .08rem;
			}
			.textarea-placeholder {
				color: #acb7bf;
				flex:auto;
				text-overflow: ellipsis;
				overflow: auto;
				white-space: nowrap;

			}
			.extra {
				width:.2rem;
			}
		}
		.textarea-content {
			width: 100%;
			height:.68rem;
			font-size: .16rem;
			line-height: 1.6;
			color: #36434d;
			
		}
		.textarea-line {
			height: 1px;
			width: 100%;
			position: absolute;
			bottom: 0;
			z-index: 2;
			background-color: #e4ebf0;
			&.line-fff {
				background: #fff;		
			}
		}
		.textarea-btn {
			position:absolute;
			right:0;
			top:50%;
			transform: translateY(-50%);
		}
	}

	.error-msg {
		line-height: 1.5;
		color: #f20000;
		height: .18rem;
		font-size: .12rem;
	}

	.textarea-item {
		&.active {
			padding-top: .12rem;
			.textarea-title {
				height: .14rem;
				font-size: .12rem;
				.textarea-placeholder {
					font-size: 0;
				}
			}
			.textarea-content {
				height: .72rem;
				margin-top: .02rem;
				&.clear {
					background: url('./close.svg') no-repeat right center;
					background-size: .16rem .16rem;
				}
			}	
			.ellipsis{
				padding-bottom: .08rem;
			}
			
		}
		&.focus {
			.textarea-title{
				color: #007ed9;
			}
			.textarea-line {
				background-color: #007ed9;
				height: 1px;
			}
		}
		&.error {
			.textarea-title {
				.textarea-label {
					color: #f20000;
				}
				.textarea-placeholder {
						font-size: .12rem;
				}
			}
			.textarea-line {
				background-color: #f20000;
				height:1px;
			}
		}
	}
}

.error-msg {
	line-height: 1.5;
	color: #f20000;
	height: .18rem;
	font-size: .12rem;
	margin-left: .12rem;
}

.ellipsis {
	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: .72rem;
}

.readOnly {
	min-height: .72rem;
}