@mixin border-color-9($color) {
	border-top-color: $color \9;
	border-right-color: $color \9;
	border-bottom-color: $color \9;
	border-left-color: $color \9;
}
@mixin border-color-9-0($color) {
	border-top-color: $color \9\0;
	border-right-color: $color \9\0;
	border-bottom-color: $color \9\0;
	border-left-color: $color \9\0;
}
.tag-add-dialog-container {
	position: absolute;
	left: 0px;
	top: 36px;
	z-index: 1300;
	width: 460px;
	padding: 0 20px 16px;
	font-size: 12px;
	background: #fff;
	border: 1px solid #fff;
	border-color: #f0f7fc;
	@include border-color-9(#acb7bf);
	@include border-color-9-0(#f0f7fc);
	@include box-shadow(0px 2px 6px rgba(0, 0, 0, 0.3));
	
	
	.input-container {
		position: relative;
		padding-top: 12px;
		.check-color-btn {
			position: absolute;
			left: 0;
			top: 20px;
			z-index: 1000;
			cursor: pointer;
		}
		.check-color-btn span {
			width: 16px;
			height: 16px;
		}
		.check-color-box {
			height: 33px;
			border-bottom: 1px solid #dae1e6;
			margin-bottom: 20px;
		}
		.check-color-box span {
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			color: #fff;
			margin: 5px 13px 0 0;
			vertical-align: middle;
			cursor: pointer;
			@include transition(all 0.2s ease-in-out);
			&:hover {
				@include box-shadow(0px 2px 6px rgba(0, 0, 0, 0.3));
				@include scale(1.3);
			}
		}
		.check-color-btn span, .check-color-box span {
			display: inline-block;
			@include border-radius(100%);
			&.color0 {
				background-color: #dae1e6;
			}
			&.color1 {
				background-color: #f04d4d;
			}
			&.color2 {
				background-color: #ff670f;
			}
			&.color3 {
				background-color: #f99c19;
			}
			&.color4 {
				background-color: #36b39e;
			}
			&.color5 {
				background-color: #3699e0;
			}
			&.color6 {
				background-color: #8f84db;
			}
		}
		.tag-input-add {
			position: absolute;
			right: 0;
			top: 12px;
			padding: 0 15px;
			height: 26px;
			line-height: 26px;
			background-color: #1687d9;
			border: 0 none;
			color: #fff;
			z-index: 1000;
			cursor: pointer;
			&.tu-button-disabled {
				background-color: #dae1e6;
				color: #acb7bf;
				cursor: default;
			}
		}

		.tu-input-default {
			position: relative;
			padding-left: 20px;
			padding-bottom: 1px;
			border-bottom: 1px solid #dae1e6;
			color: #005999;
			input {
				width: 380px;
				height: 32px;
				line-height: 32px;
				border: 0 none;
				padding: 0;
			}
			&.focusIn {
				padding-bottom: 0px;
				border-bottom: 2px solid #1687d9;
			}
			.placeholder {
				position: absolute;
				left: 20px;
				top: 0;
				color: #acb7bf;
				height: 32px;
				line-height: 32px;
				cursor: text;
			}
			&.error {
				padding-bottom: 0px;
				border-bottom: 2px solid #cc2929;
			}
		}
		.input-tip {
			height: 20px;
			line-height: 20px;
			color: #1687d9;
			&.error {
				color: #cc2929;
			}
		}
	}

	.share-title {
		line-height: 40px;
		color: #555;
	}

	.tag-cont {
		max-height: 240px;
		overflow: auto;
		.tt_common_emptyinit {
			margin: 0
		}
		.content_emptyinit {
			border: 0 none;
			padding: 0;
			padding-bottom: 14px;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
		}
	}
	.tag-add-box {
		.tt-tag-container {
			padding-bottom: 10px;
		}
	}
}

.tt-tag-add-loading {
	position: absolute;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	text-align: center;
	color: #555;
	padding: 10px 15px 10px 45px;
	background: #fff url(#{$baseImgUrl}/loading_v1.gif) no-repeat 15px 10px;
	z-index: 1000;
	@include box-shadow(1px 2px 3px rgba(0,0,0,0.25));
}

.tt-tag-container {
	display: inline-block;
	margin-right: 4px;
	@include user-select(none);
	.tag-box {
		cursor: default;
		height: 24px;
		border-radius: 24px;	
		&:hover {
			@include box-shadow(1px 2px 3px rgba(0,0,0,0.25));
			transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}
	.be-check {
		cursor: pointer;
	}
	.beDel {
		margin-right: 13px;
	}
	.tag-wrap {
		display: inline-block;
		height: 24px;
		border-radius: 24px;
		background: #E6EDF2;
		font-size: 12px;
	}
	.tag-main, .tag-other {
		float: left;
		line-height: 18px;
	}
	.tag-main {
		padding: 3px 12px 3px 3px;
		.text {
			color: #667580;
		}
		.color1 {
			color: #f04d4d;
		}
		.color2 {
			color: #ff670f;
		}
		.color3 {
			color: #f99c19;
		}
		.color4 {
			color: #36b39e;
		}
		.color5 {
			color: #3699e0;
		}
		.color6 {
			color: #8f84db;
		}
		.gray {
			color: #ACB7BF;
		}
	}
	.tag-main span, .tag-other span{
		float: left;
	}
	.checked, .del {
		display: none;
		font-size: 18px;
	}
	.del {
		color: #C7CFD5;
		&:hover {
			color:#EB4447;
			transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}
	.tag-color-wrap {
		padding: 5px;
		width: 8px;
		height: 8px;
		span {
			display: inline-block;
			border-radius: 50%;
			width: 100%;
			height: 100%;
			&.color1 {
				background-color: #f04d4d;
			}
			&.color2 {
				background-color: #ff670f;
			}
			&.color3 {
				background-color: #f99c19;
			}
			&.color4 {
				background-color: #36b39e;
			}
			&.color5 {
				background-color: #3699e0;
			}
			&.color6 {
				background-color: #8f84db;
			}
			&.gray {
				background-color: #ACB7BF;
			}
		}
	}
	.tag-other {
		padding: 3px 10px 3px 2px;
	}
	.tag-other span {
		padding: 0 2px;
		color: #7E8C97;
		line-height: 18px;
		text-align: center;
		&.count {
			color: #667580;
		}
		&.share-in, &.share-out {
			cursor: pointer;
		}
	}
	&.del-hover {
		margin-right: 4px;
	}
	&.active .tag-main {
		padding-left: 3px;
		padding-right: 8px;
		.text {
			padding-left: 4px;
		}
	}
	&.active .tag-wrap{
		background: #DCE3E8;
	}
	&.del-hover .tag-main {
		padding-right: 3px;
		.text {
			padding-right: 4px;
		}
	}
	&.active .checked, &.del-hover .del {
		display: inline-block;
	}
	&.active {
		.tag-color-wrap {
			display: none;
		}
	}
}


.tt-tag-add{
	margin-top: 5px;
	min-height:30px;
	position: relative;
	.tag-label{
		display:inline-block;
		float:left;
		width: 50px;
		height: 24px;
		font-size: 12px;
		color: #5B6A75;
		line-height: 24px;
		text-align:right;
		margin-right: 15px;
	}
	.add-tag:hover {
	    border-top-color: #acb7bf \9;
	    border-right-color: #acb7bf \9;
	    border-bottom-color: #acb7bf \9;
	    border-left-color: #acb7bf \9;
	    border-top-color: #f0f7fc \9\0;
	    border-right-color: #f0f7fc \9\0;
	    border-bottom-color: #f0f7fc \9\0;
	    border-left-color: #f0f7fc \9\0;
	}
	.add-tag {
		font-size: 14px;
		color: #2FAA93;
		font-weight: bolder;
		line-height: 24px;
		text-align: center;
		float:left;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		margin: 0 6px 11px 0;
		// box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.15);
		background-color: #E6EDF2;
		display: inline-block;
		cursor: pointer;
		border-top-color: #dae1e6 \9;
		border-right-color: #dae1e6 \9;
		border-bottom-color: #dae1e6 \9;
		border-left-color: #dae1e6 \9;
	}
	.add-tag:hover {
	    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.26);
	    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.tag-box {
		margin-bottom: 10px;
	}
	.click-to-add{
		color:#ACB7BF;
		line-height:28px;
		font-size:12px;
	}
}