*{
	padding:0;
	margin:0;
	list-style: none;	
}
input,textarea{
	appearance:none;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	border: none;
	&:focus{
		outline: none;
	}
}

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

			}
			.extra {
				width:.2rem;
			}
		}
		.input-content {
			width: 100%;
			height:.2rem;
			font-size: .16rem;
			line-height: 1.6;
			color: #36434d;
			text-overflow: ellipsis;
			white-space: nowrap;
			input {
				height: .15rem;
			}
			&.area-input {
				display: flex;
				.area-clear {
					width:50%;
				}
			}
		}
		.input-line {
			height: 1px;
			width: 100%;
			background-color: #e4ebf0;
			position: absolute;
			bottom: 0;
			z-index: 2;
			&.line-fff {
				background: #fff;		
			}
		}
		.input-btn {
			position:absolute;
			right:0;
			top:50%;
			transform: translateY(-50%);
		}
	}

	.input-item {
		&.active {
			padding-top: .12rem;
			.input-title {
				height: .14rem;
				font-size: .12rem;
				.input-placeholder {
					font-size: 0;
				}
			}
			.input-content {
				height: .24rem;
				margin-top: .02rem;
				margin-bottom: .08rem;
				position: relative;
				&.clear {
					background: url('./close.svg') no-repeat right center;
					background-size: .16rem .16rem;
					padding-right: .32rem;
					box-sizing: border-box;
				}
				&.area-input {
					display: flex;
					.area-clear {
						width:50%;
					}
				}
				.symbol{

				}
				.area-clear {
					height: .24rem;		
					
					&.clear {
						
						background: url('./close.svg') no-repeat right center;
						background-size: .16rem .16rem;
						padding-right: .2rem;
					
					}
				}
			}	
			
		}
		&.focus {
			.input-title{
				color: #007ed9;
			}
			.input-line {
				background-color: #007ed9;
				height: 1px;
			}
		}
		&.error {
			.input-title {
				.input-label {
					color: #f20000;
				}
				.input-placeholder {
						font-size: .12rem;
				}
			}
			.input-line {
				background-color: #f20000;
				height:1px;
			}
		}
	}
}
.error-msg {
	line-height: 1.5;
	color: #f20000;
	height: .18rem;
	font-size: .12rem;
	margin-left: .12rem;
}
.description {
	line-height: 1.5;
	color: #007ed9;
	height: .18rem;
	font-size: .12rem;
	margin-left: .12rem;
}

.symbol {
	width: .32rem;
    height: .01rem;
    border-radius: .1rem;
	background-color: #acb7bf;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}