@import 'common.scss';
@import 'add-employee.scss';
%display {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.wrapper {
	width: 1210px;
	height: auto;
	// margin: 0 auto;
	text-align: center;
	// margin-top: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 1px 0px rgba(238,238,238,1);
	color: #333;
	.mc1,.mc2 {
		float: left;
		min-height: 610px;
	}
	.mc1 {
		width: 250px;
		padding-top: 20px;
		border-right: 1px solid #f6f6f6;
	}
	.mc2 {
		width: 958px;
		.m-title {
			width: 95%;
			padding: 20px 25px;
			border-bottom: 1px solid rgba(238,238,238,1);
			overflow: hidden;
		}
		.title {
			float: left;
			font-size: 20px;
		}
		.btn-groups {
			float: right;
			a {
				padding: 8px 25px;
				color: #333;
				background: rgba(248,248,248,1);
				border-radius: 2px;
				border: 1px solid rgba(153,153,153,1);
				margin-right: 10px;
				text-align: center;
				font-size: 14px;
				&.cur, &:hover {
					background: #ed322a;
					color: #fff;
					border: 1px solid transparent;
				}
			}
			a:last-child {
				margin-right: 0;
			}
		}
		.m-tb {
			width: 95%;
			margin: 25px 25px 0 25px;
			border-collapse: collapse;
			th,td {
				padding: 15px 40px;
				input[type='checkbox'] {
					margin-right: 10px;
					outline: none;
					vertical-align: bottom;
					&:after {
						content: '';
						@extend %display;
						width: 14px;
						height: 14px;
						background: url(i/table-no-selected.png) no-repeat;
						background-size: 14px 14px;
					}
					&.selected:after {
						background: url(i/table-selected.png) no-repeat;
						background-size: 14px 14px;
					}
				}
			}
			tr:hover {
				background: #e6e6e6;
			}
			th {
				background: rgba(248,248,248,1);
				border: solid rgba(230,230,230,1);
				border-width: 1px 0 0 0;
			}
			th:first-child {
				border-left-width: 1px;
				text-align: left;
			}
			th:last-child {
				border-right-width: 1px;
			}
			td {
				border: 1px solid rgba(230,230,230,1);
				a {
					color: #0066cc;
				}
				span {
					@extend %display;
					width: 2px;
					height: 10px;
					background: #dadada;
					margin: 0 10px;
				}
			}
			td:first-child {
				text-align: left;
			}
		}
	}
	.data-content {
		position: relative;
	}
	.data-cls {
		padding: 15px 10px 10px 15px;
		overflow: hidden;
		li {
			float: left;
			padding-bottom: 5px;
			font-size: 14px;
			font-weight: 700;
			margin-right: 40px;
			&.cur {
				border-bottom: 2px solid #ed322a;
			}
		}
		a {
			color: #333;
		}
	}
	.btn-add {
		position: absolute;
		top: 20px;
		right: 15px;
		width: 10px;
		height: 10px;
		background: url(i/add.png) no-repeat;
	}
	.m1-info,.label-info {
		li {
			position: relative;
			a {
				color: #333;
			}
			.setting {
			    position: relative;
			    float: right;
			    .btn-set {
			    	@extend %display;
			    	width: 13px;
			    	height: 10px;
			    	background: url(i/more.png) no-repeat;
			    }
				.s-set {
					display: none;
					position: absolute;
					top: 18px;
					left: 0;
					border-radius: 2px;
				    background-color: #fff;
				    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
				    border: solid 1px #f0f0f0;
				    z-index: 1;
				    .el {
				    	height: 30px;
				    	line-height: 30px;
				    	padding: 0 10px;
				    	white-space: nowrap;
				    	color: #333;
				    	font-size: 12px;
				    	&:hover {
				    		cursor: pointer;
				    		background-color: #f6f6f6;
				    		color: #333;
				    		font-weight: 700;
				    	}
				    }
				}
				&:hover {
					.s-set {
						display: block;
					}
					.btn-set {
						background: url(i/more-selected.png) no-repeat;
					}
				}
			}
		}
	}
	.label-info {
		li {
			height: 30px;
			line-height: 30px;
			padding: 0 10px 0 20px;
			text-align: left;
			cursor: pointer;
			i {
				@extend %display;
				width: 13px;
				height: 14px;
				margin-right: 10px;
				background: url(i/label.png) no-repeat;
				background-size: 13px 14px;
				vertical-align: sub;
			}
			&:hover {
				background: #f6f6f6;
			}
			&.hover {
				background: #f6f6f6;
			}
		}
	}
	.s-content {
		display: none;
		padding: 5px  20px 0 20px;
		text-align: left;
		font-size: 14px;
		i {
			@extend %display;
			width: 20px;
			height: 20px;
			margin-right: 10px;
			vertical-align: text-bottom;
		}
		ul {
			margin: 15px 0;
			li {
				line-height: 25px;
				cursor: pointer;
				&:hover {
					background: rgba(246,246,246,1);
				}
				&.cur {
					background: rgba(246,246,246,1);
				}
			}
			.cmp {
				@extend %display;
				width: 170px;
				margin-left: 5px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: #999;
				vertical-align: bottom;
			}
		}
		.level {
			color: #333;
			font-weight: 700;
			margin-bottom: 20px;
		}
		.emp {
			i {
				background: url(i/icon-employee.png) no-repeat;
				background-size: 20px 20px;
			}
		}
		.dep {
			i {
				background: url(i/icon_section.png) no-repeat;
				background-size: 20px 20px;
			}
			ul li {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}
	.mc2-member {
		.info {
			padding: 30px 0 30px 75px;
			text-align: left;
			font-size: 14px;
			p {
				line-height: 45px;
			}
			label {
				@extend %display;
				width: 60px;
				font-weight: 700;
				text-align: right;
				margin-right: 30px;
			}
			i {
				@extend %display;
				width: 13px;
				height: 14px;
				margin-right: 10px;
				background: url(i/label.png) no-repeat;
				background-size: 13px 14px;
				vertical-align: middle;
			}
			&.border-bottom {
				border-bottom: 1px solid rgba(218,218,218,0.5);
			}
		}
	}
}
.link {
    float: right;
    margin-top: 30px;
    .pagination {
      float: left;
      .prev, .next {
        width: 28px;
        height: 28px;
      }
      .current {
        color: #ffffff;
        background: #ED322A;
        border-radius: 2px;
        width: 30px;
        height: 28px;
        display: inline-block;
        margin: 0 3px;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        border: 1px solid transparent;
        &.next, &.prev {
          width: 28px;
        }
      }
    }
    select,input {
        outline: none;
    }
    select {
      float: left;
      width: 100px;
      height: 30px;
      line-height: 20px;
      border: 1px solid #D9D9D9;
      text-align: center;
      margin-left: 16px;
      padding: 5px 5px 5px 15px;
    }
    .goto {
      float: left;
      margin-left: 17px;
      height: 30px;
      line-height: 30px;
      input {
        width: 48px;
        height: 28px;
        border: 1px solid #D9D9D9;
        padding: 0;
        margin: 0 8px;
        text-align: center;
        position: relative;
        // top: -5px\0;
      }
    }
  }