.aloha-ui .aloha-color-picker .aloha-color-picker-grid {
	display: flex;
	max-width: 400px;
	flex-direction: row;
	flex-wrap: wrap;
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #000;
	background: var(--aloha-color-palette-item);
	transition: 200ms;
	margin: 8px;
	box-shadow: 0px 1px 3px #9e9e9e;
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.active {
	border-color: #3B73D7;
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.color-palette-item:hover {
	border-color: var(--aloha-color-palette-item);
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value {
	display: none;
}

.aloha-ui .aloha-color-picker.with-clear .aloha-color-picker-grid .color-picker-item.clear-value {
	display: block;
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value::after {
	display: block;
	content: '';
	width: 100%;
	transform: rotate(-45deg);
	height: 2px;
	background: #f00;
}

.aloha-ui .aloha-color-picker .aloha-color-picker-grid .color-picker-item.clear-value:hover {
	border-color: #f00;
}

.aloha-ui .aloha-color-picker .color-picker-custom {
	display: none;
	flex-direction: row;
	flex-wrap: nowrap;
}

.aloha-ui .aloha-color-picker.with-custom-colors .color-picker-custom {
	display: flex;
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-input-container {
	flex: 1 1 auto;
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-red .ui-slider-range {
	background-color: rgb(206, 15, 15);
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-green .ui-slider-range {
	background-color: rgb(24, 221, 6);
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-blue .ui-slider-range {
	background-color: rgb(48, 30, 207);
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color.color-transparency {
	display: none;
}

.aloha-ui .aloha-color-picker.with-transparency .color-picker-custom .custom-color.color-transparency {
	display: block
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-preview-container {
	flex: 0 0 auto;
	min-height: 1px;
	margin: 6px 6px 0;
	display: flex;
  	flex-direction: column;
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-preview {
	width: 60px;
	height: 60px;
	border: 1px solid #000;
	box-shadow: 2px 2px 2px #c5c5c5;
	margin: 0 auto auto;
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-input {
	box-sizing: border-box;
	height: 24px;
	font-size: 14px;
	border-radius: 2px;
	border: 1px solid #aeaeae;
}

.aloha-ui .aloha-color-picker .color-picker-custom .custom-color-confirm {
	flex: 0 0 auto;
	font-size: 13px;
	display: block;
	box-sizing: border-box;
	margin: auto auto 1px;
	border: 1px solid #aeaeae;
	padding: 3px 5px;
}
