.customize {
	// height: 200px;
	width: 100%;
	color: rgba(255, 255, 255, 0.5);
	padding: 5px 15px;
	text-align: center;

	.customize-header{
		margin-bottom: 10px;
	}
}

#customize-menu {
	position: fixed;
	bottom: 0;
	left: 0;
	width: $sidebar-width;

	@include media-down(sm) {
		
	}

	.sidebar-open & {
		@include media-down(md) {
			left: 0;
		}
	}

	@include media-down(md) {
		// position: absolute;
		transition: left 0.3s ease;
		left: -$sidebar-width;
	}

	& > li {
		& > a {
			background-color: $sidebar-color-primary;
			border-top: 1px solid fade-out($sidebar-color-secondary, 0.5);
		}

		& > a:hover,
		&.open > a {
			background-color: $sidebar-color-secondary;
		}
	}

	.customize {	
		width: $sidebar-width;
		color: fade-out($color-text-inverse, 0.5);
		background-color: $sidebar-color-secondary;
		text-align: center;
		padding: 10px 15px;
		border-top: 2px solid $color-primary;

		.customize-item {
			margin-bottom: 15px;

			.customize-header {
				margin-bottom: 10px;
			}

			label {
				font-weight: 400;
				

				&.title  {
					font-size: 14px;
				}
			}

			.radio {

				& + span {
					padding: 0;
					padding-left: 5px
				}

				& + span:before {
					font-size: 17px;
					color: #546273;
					cursor: pointer;
				}

				&:checked + span:before{
					color: $color-primary;
				}
			}

			.customize-colors {
				list-style: none;

				li {
					display: inline-block;
					margin-left: 5px;
					margin-right: 5px;

					.color-item {
						display: block;
						height: 20px;
						width: 20px;
						border: 1px solid;
						cursor: pointer;

						&.color-red {
							background-color: #FB494D;
							border-color: #FB494D;
						}

						&.color-orange {
							background-color: #FE7A0E;
							border-color: #FE7A0E;
						}

						&.color-green {
							background-color: #8CDE33;
							border-color: #8CDE33;
						}

						&.color-seagreen {
							background-color: #4bcf99;
							border-color: #4bcf99;
						}

						&.color-blue {
							background-color: #52BCD3;
							border-color: #52BCD3;
						}

						&.color-purple {
							background-color: #7867A7;
							border-color: #7867A7;
						}

						&.active {
							position: relative;
							font-family: FontAwesome;
							font-size: 17px;
							line-height: 17px;

							&:before {
								content: "\f00c";
								position: absolute;
								top: 0;
								left: 0;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}



	
}
