@border-color:#444;

.settings-container{
	height: 100%;
	display: flex;
	flex-direction: column;
	
	.settings-header{
		height: 70px;
		border-bottom: 1px solid @border-color;
		
		&-item{
			display: inline-block;
			height: 40px;
			line-height: 40px;
			margin-top: 15px;
			margin-left: 50px;
			color:@label-textColor;
			cursor: pointer;
			
			&:first-child{
				margin-left: 20px;
			}
		}
		
		.active-item{
			font-size: 14px;
			color:#fff;
			border-bottom: 2px solid @primary-color;
		}
	}
	
	.settings-body{
		height: calc(100% - 70px);
		
		.normal-settings{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			&-item{
				padding: 50px 0;
				display: flex;
				align-items: center;
				
				.item-title{
					font-size: 18px;
					font-weight: bold;
					color:#fff;
					margin-left: 10%;
					min-width: 10%;
				}
				
				.item-description{
					color:#a7a7a7;
					min-width: 30%;
					margin-left: 10%;
				}
				
				.item-content{
					margin-left: 5%;
					display: flex;
					min-width: 30%;
					
					.color-item{
						position: relative;
						display: flex;
						width: 85px;
						height: 35px;
						background: #000;
						border: 3px solid #2b2b2e;
						cursor: pointer;
						
						&:last-child{
							margin-left: 20px;
							background: #fff;
						}
						
						&-active{
							border: 3px solid @primary-color;
							
							&::after{
								position:absolute;
								content:'';
								display:block;
								width:0;
								height:0;
								right: -10px;
								top:-10px;
								transform:rotate(135deg);
								border-width:10px;
								border-style:solid;
								border-color: transparent @primary-color transparent  transparent;
							}
							
							&::before{
								content:'';
								display:block;
								width:5px;
								height:8px;
								border-right:#ffffff solid 2px;
								border-bottom:#ffffff solid 2px;
								transform:rotate(35deg);
								position:absolute;
								top:0;
								right:0;
								z-index:2;
							}
						}
					}
				}
				
				.ivu-btn{
					width: 300px;
					height: 45px;
					background: @primary-color;
					color:#fff;
					border: none;
					margin: 0 auto;
					border-radius: 0;
				}
			}
		}
	}
}