// Advance color popup

.advance-color{
	width:525px;
		.restore-color {
			position: absolute;
			padding: 10px 0 11px;
			right: 35px;
			background-color: #a9aaaa;
			width: 35px;
			text-align: center;
			color: #fff;
			font-size: 25px;
			transition: 0.3s ease 0s;
			-moz-transition: 0.3s ease 0s;
			-webkit-transition: 0.3s ease 0s;
				&:hover{
					background-color: #666766;
					cursor: pointer;
				}
		}
		.color-top{
			width:111px;
			float:left;
			font-size:12px;
			color:#000;
			text-transform:uppercase;
			margin-right:20px;
				.color{
					width:100%;
					border:1px solid $main-blue;
					height:30px;
					margin:10px 0 30px;
					position:relative;
					cursor: pointer;
						.picker-icon{
							position:absolute;
							top:10px;
							right:10px;
							background-image:url("../img/sprite.svg");
							width:12px;
							height:12px;
							background-position:-163px -77px;
							cursor:pointer;
						}
						&.start{
							background-color:#9ce7f9;
						}
						&.end{
							background-color:#225f8a;
						}
				}
		}
		.accordian-arrow {
			border-right: 1px solid;
			padding: 6px;
			margin-right: 10px;
		}
		.color-bottom{
			width:111px;
			float:left;
			font-size:12px;
			color:#000;
			text-transform:uppercase;
			margin-right:20px;				
				input[type="text"]{
					color:#000000;
					font-size:11px;
					width:100%;
					height:30px;
					padding:0 10px;
					margin:3px 0;
				}
				span{
					float:left;
					height:30px;
					margin:3px 0;
					border:1px solid #FFF;
					width:70px;
					position:relative;
					cursor: pointer;
						.picker-icon{
							position:absolute;
							top:7px;
							right:7px;
							background-image:url("../img/sprite.svg");
							width:12px;
							height:12px;
							background-position:-163px -77px;
							cursor:pointer;
						}
						&.one{							
							background-color:#9ce7f9;
						}
						&.two{						
							background-color:#88d0e7;
						}
						&.three{							
							background-color:#73bad4;
						}
						&.four{							
							background-color:#5fa3c2;
						}
						&.five{							
							background-color:#4b8caf;
						}
						&.six{							
							background-color:#36769d;
						}
						&.seven{							
							background-color:#225f8a;
						}
				}
		}
}