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

			}
			.extra {
				width:.2rem;
			}
		}
		.arrow-content {
			width: 100%;
			min-height:.19rem;
			font-size: .16rem;
			line-height: 1.6;
			color: #36434d;
			box-sizing: border-box;
			word-break: break-all;
			padding-right: .16rem;
		}
		.arrow-line {
			height: 1px;
			width: 100%;
			position: absolute;
			bottom: 0;
			z-index: 2;
			background-color: #e4ebf0;
			&.line-fff {
				background: #fff;		
			}
		}
		.arrow-btn {
			position:absolute;
			right:0rem;
			top:50%;
			transform: translateY(-50%);
		}
	}

	.arrow-item {
		&.active {
			padding-top: .12rem;
			.arrow-title {
				height: .14rem;
				font-size: .12rem;
				color: #667580;
				.arrow-placeholder {
					font-size: 0;
				}
			}
			.arrow-content {
				min-height: .23rem;
				margin-top: .02rem;
				padding-bottom: .08rem;
			}
		}
		&.error {
			.arrow-title {
				.arrow-label {
					color: #f20000;
				}
				.arrow-placeholder {
						font-size: .12rem;
				}
			}
			.arrow-line {
				background-color: #f20000;
				height: 1px;
			}
		}
	}
}
.error-msg {
	line-height: 1.5;
	color: #f20000;
	height: .18rem;
	font-size: .12rem;
	margin-left: .12rem;
}