#customize-control-boldgrid_background_color {
	.boldgrid-sticky-customizer & {
		.bgtfw-control-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 15px;
			padding-right: 15px;

			.customize-control-title {
				display: block;
			}

			.customize-control-description {
				display: none;
				text-align: left;
			}

			.colors-wrapper {
				padding: 10px 2px 10px 10px;
			}
		}

		.expanded & label {
			width: 28px !important;
			height: 28px !important;
		}
	}

	.customize-control-title {
		display: none;
	}
}

.customize-control-bgtfw-palette-selector {
	position: relative;

	.customize-control-description {
		text-align: center;
	}

	label {
		position: relative;
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	.colors-wrapper {
		max-height: 300px;
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.color-palette-color {
			color: transparent;
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
			border: 1px solid rgba(0,0,0,.2);
			-webkit-user-select: none; /* Safari */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE10+/Edge */
			user-select: none; /* Standard */
			&.dashicons.dashicons-editor-removeformatting:before {
				color: #555d66;
				content: "\f218";
				display: flex;
				font-size: 1.2em;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}

		&.round {
			label {
				padding: 3px;
			}

			.color-palette-color {
				border-radius: 50%;
			}
		}

		&.box-shadow {
			.color-palette-color {
				box-shadow: inset 3px 3px 13px 2px rgba(0,0,0,.22);
			}
		}

		input:checked + label .color-palette-color {
			border: 0;
			width: 150%;
			height: 150%;
			position: relative;
			left: -25%;
			top: -25%;
			z-index: 1;
			-webkit-user-select: none; /* Safari */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE10+/Edge */
			user-select: none; /* Standard */
			&.dashicons.dashicons-editor-removeformatting:before {
				color: black;
				content: "\f218";
				display: flex;
				font-size: 1.6em;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}

		&.with-margin {
			label {
				margin: 3px;
			}
		}

		input {
			display: none;

			&:checked {
				+ label .color-palette-color {
					box-shadow: 1px 0 3px 0 #333, 0px 0px 0 2px #F44336 inset;
				}
			}
		}
	}
}