$font-family-H:'Helvetica Neue',Tahoma,'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STHeitiSC, sans-serif;
$font-family-A:"Helvetica Neue",Tahoma,"PingFang SC","Hiragino Sans GB",SimSun,STHeitiSC,sans-serif;
//主色
	$C1:#004170;
	$C2:#005999;
	$C3:#1687d9;
	$C3Hover:#1E7BC0;
	$C4:#8CCCF8;
	$C5:#084E82;
//中性色
	$M1:#36434D;
	$M2:#667580;
	$M3:#ACB7BF;
	$M4:#E4EBF0;
	$M5:#F5F8FA;
	$M6:#ffffff;
//错误色
	$E1:#cc2929;
.textarea-component{
	//line
	.base-input-line{
		height: 2px;
		position: absolute;
		bottom: -1px;
		left: 50%;
		width: 0%;
		background-color: $C3;
		transition-property:width,left;
		transition-duration:0.35s,0.35s;
		transition-timing-function:cubic-bezier(0.66,1.65,0.23,0.87),cubic-bezier(0.66,1.65,0.23,0.87);
	}
	.base-input-line-active{
		width: 100%;
		left:0;
		transition-property:width,left;
		transition-duration:0.35s,0.35s;
		transition-timing-function:cubic-bezier(0.66,1.65,0.23,0.87),cubic-bezier(0.66,1.65,0.23,0.87);
	}
	.base-input-label{
		line-height:24px;
		text-align: right;
		margin-right:25px;
		float:left;
		color: $M2;
		font-size: 14px;
		max-width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		.required-star{
			padding-right: 5px;
			display: inline-block;
		    width: 8px;
		    padding-top: 2px;
		    height: 8px;
		    
		}
		.base-input-text{
			font-family:$font-family-H;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
        	
		}
		.base-textarea-text{
			font-family:$font-family-H;
        	line-height: 24px;
        	height: 48px;
        	margin-top: 2px;
		}
	}
	.ta-area{
		line-height: 24px;
		outline: none;
		resize: vertical; 
		border: none;
		width: 100%;
		height: 32px;
		padding: 0px;
		padding-left: 5px;
		font-size: 14px;
		font-family: $font-family-H;
		color: $M1;//换肤mengshuai
		vertical-align: top;
		margin-bottom: 5px;
		padding-bottom: 14px;
		box-sizing: border-box;
		min-height: 48px;
	}
	.tuozhuai-btn{
		width: 9px;
		height:  9px;
		position: absolute;
		right: 0;
		bottom: 5px;
		background-color: #fff;
	}
	.ta-area-twoline{
		height: 46px;
	}
	textarea::-webkit-input-placeholder{
		line-height: 40px;
		font-size:12px;
		color:#8f9ca6;
		letter-spacing:0;
		line-height:20px;
		text-align:justify;
		padding-left: 10px;
	}
	
	.field-right{
		display: flex;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;
		position: relative;
		border-bottom: 1px solid #e4ebf0;
	}
	.ta-num{
		position: absolute;
		right: 5px;
		bottom: 3px;
		width: auto;
		display: block;
	    color: #acb7bf;
	    text-align: right;
	    font-size: 12px;
	    line-height: 16px;
		font-family: $font-family-H;
		padding: 0 13px 0px 0;	
	}
	.ta-num{
		position: absolute;
		right: 5px;
		bottom: 3px;
		width: auto;
		display: block;
	    color: #acb7bf;
	    text-align: right;
	    font-size: 12px;
	    line-height: 16px;
		font-family: $font-family-H;
		padding: 0 13px 0px 0;	
	}
	.grey-num{
		color: #667580;
	}
	.red-num{
		color: #cc2929;
	}
	.none-num{
		display: none;
	}
	.focus-area{
		.ta-area{
			height: 53px;
			line-height: 24px;
			padding-bottom: 12px;
		}
		.ta-num{
			position: absolute;
			right: 5px;
			bottom: 3px;
			width: auto;
			display: block;
		    color: #acb7bf;
		    text-align: right;
		    font-size: 12px;
		    line-height: 16px;
			font-family: $font-family-H;
			padding: 0 13px 0px 0;	
		}
		.grey-num{
			color: #667580;
		}
		.red-num{
			color: #cc2929;
		}
		.none-num{
			display: none;
		}
	}
  	.ta-area::-webkit-scrollbar {
	    width: 6px;
	    height: 6px;
	    background-color: transparent;
	    padding: 2px;
	}
	.ta-area::-webkit-scrollbar-track {
	    border-radius: 0;
	    background-color: transparent;
	}
	.ta-area::-webkit-scrollbar-thumb {
	    border-radius: 0;
	    background-color: rgba(0, 0, 0, .3);
	    border-radius: 6px;
	}
	.ta-area::-webkit-scrollbar {
	    &:hover{
	      width:10px;
	      height: 10px;
	    }
	}
	.ta-area::-webkit-scrollbar-track {
	    &:hover{
	      background-color: rgba(0, 0, 0, .1);
	    }
	}
	.ta-area::-webkit-scrollbar-thumb {
	    &:hover{
	      padding: 2px;
	      background-color: rgba(0, 0, 0, 0.3);
	    }
	}
	//p标签blur--transform-origin:center;
	.input-pBlur{
		transform:scale(1.5,1.5);
		-moz-transform:scale(1.5,1.5);
		-webkit-transform:scale(1.5,1.5);
		-o-transform:scale(1.5,1.5);
		transform-origin:50% 0%;
		-webkit-transform-origin:50% 0%;
		-moz-transform-origin:50% 0%;
		-o-transform-origin:50% 0%;
		-ms-transform-origin:50% 0%;
		opacity:0;
		font-size:16px;
		transition: opacity .35s ease,font-size .35s ease,transform .35s ease;
	}
	//p标签foucus--transform-origin:center;
	.input-pFoucus{
		-moz-transform:none;
		-webkit-transform:none;
		-o-transform:none;
		transform:none;
		transform-origin:50% 0%;
		-webkit-transform-origin:50% 0%;
		-moz-transform-origin:50% 0%;
		-o-transform-origin:50% 0%;
		-ms-transform-origin:50% 0%;
		opacity:1;
		font-size:12px;
		transition: opacity .35s ease,font-size .35s ease,transform .35s ease;
	}
	//非正常
	.base-input-normal-input{
		border-bottom:2px solid $E1;
	}
	//p验证正确
	.input-pRight{
		color: #0095ff;
	}
	//p验证错误
	.input-pError{
		color:#cc2929 !important;
	}
	//非正常
	.base-input-normal-input{
		width: 100%;
		border-bottom:2px solid $E1;
	}
	.base-input-normal{
		height:39px;
		line-height: 39px;
		width: 100%;
		display: flex;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;
		position: relative;
		border-bottom:1px solid $M4;
	}
	//文字错误样式
	
	.base-input-show{
		display: block;
		position: absolute;
		bottom: -22px;
		left: 0px;
		line-height: 0;
		margin-left: 5px;
	}
	.base-input-show-text{
		line-height:20px;
		font-size: 12px;
		font-family: $font-family-H;
	}
	.base-input-error{
		border-bottom:2px solid $E1;
	}
}
/*编辑态textareaCSS*/
.b02116-textarea-show{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #0a1319;
	letter-spacing: 0;
	line-height: 24px;
	text-align: left;
	border:none;
	width: 100%;
	outline: none;
	resize: none;
	height: 100%;
}
.b02116-span{
	overflow: hidden;
	position: relative;
    display: block;
   	border: 1px solid #e4ebf0;
	border-radius: 5px;	
}
.b02116-span-active{
	background:#ffffff;
	border:1px solid #1687d9;
	box-shadow:0 0 2px 1px #96d0fa;
	&:hover{
		border-color: #1687d9;
	}
}
/*只读态textareaCSS*/
.b02116-textarea-readonly{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #3E4E59;
	letter-spacing: 0;
	line-height: 20px;
	text-align: left;
	border: none;
	width: 100%;
	outline: none;
	resize: none;
	background: #f5f8fa;
}
.b02116-textarea-readonly:hover{
	cursor:no-drop;
}
.b02116-span-readonly:hover{
	cursor:no-drop;
}
.b02116-span-readonly{
	overflow: hidden;
	position: relative;
    display: block;
	border: 1px solid #e4ebf0;
	border-radius: 5px;
	background: #f5f8fa;
}
.b02116-lablePos-left{
	display: table-cell;
	margin: 0 5px 5px 5px;
	width: 1%;
}
.b02116-lableTxt-right{
	text-align: right;
}
.b02116-lablePos-top{
	display: block;
	width: 100%;
}
.b02116-textarea-container{
	display: inline-block;
	width: 100%;
}
.u-textarea__tuozhuai-icon{
	bottom: 0px !important;
	pointer-events: auto;
	cursor: ns-resize;
}
.form-item__title{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #3e4e59;
	line-height: 20px;
	text-align: left;
	vertical-align: top;
}
.form-item__control_has-error{
	.b02116-span-active{
		background:rgba(204,41,41,0.05);
		border:1px solid #cc2929;
		border-radius:5px;
		box-shadow: none;
		textarea{
			background-color: transparent;
		}
	}
}
.form-item__control {
	.u-textarea__num{
		color:#8F9CA6;
		line-height:14px;
		right:10px;
		padding: 0rem 0rem 0rem 0rem;
		.u-textarea-minnum_error{
			color:#3E4E59;
		}
		.u-textarea-minnum_normal{
			color:#8F9CA6;
		}
		.u-textarea__maxNum{
			display:inline-block;
			margin-left:10px;
		}
	}
}