.picker_wrapper.no_alpha .picker_alpha {
	display: none
}

.picker_wrapper.no_editor .picker_editor {
	position: absolute;
	z-index: -1;
	opacity: 0
}

.picker_wrapper.no_cancel .picker_cancel {
	display: none
}

.layout_default.picker_wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	font-size: 10px;
	width: 25em;
	padding: .5em
}

.layout_default.picker_wrapper input,
.layout_default.picker_wrapper button {
	font-size: 1rem
}

.layout_default.picker_wrapper>* {
	margin: .5em
}

.layout_default.picker_wrapper::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	order: 1
}

.layout_default .picker_slider,
.layout_default .picker_selector {
	padding: 1em
}

.layout_default .picker_hue {
	width: 100%
}

.layout_default .picker_sl {
	flex: 1 1 auto
}

.layout_default .picker_sl::before {
	content: "";
	display: block;
	padding-bottom: 100%
}

.layout_default .picker_editor {
	order: 1;
	width: 6.5rem
}

.layout_default .picker_editor input {
	width: 100%;
	height: 100%
}

.layout_default .picker_sample {
	order: 1;
	flex: 1 1 auto
}

.layout_default .picker_done,
.layout_default .picker_cancel {
	order: 1
}

.picker_wrapper {
	box-sizing: border-box;
	background: #f2f2f2;
	box-shadow: 0 0 0 1px silver;
	cursor: default;
	font-family: sans-serif;
	color: #444;
	pointer-events: auto
}

.picker_wrapper:focus {
	outline: none
}

.picker_wrapper button,
.picker_wrapper input {
	box-sizing: border-box;
	border: none;
	box-shadow: 0 0 0 1px silver;
	outline: none;
	background-color: #f5f5f5;
	color: #444;
}

.picker_wrapper button:focus,
.picker_wrapper button:active,
.picker_wrapper input:focus,
.picker_wrapper input:active {
	box-shadow: 0 0 2px 1px #1e90ff
}

.picker_wrapper button {
	padding: .4em .6em;
	cursor: pointer;
	background-color: #f5f5f5;
	color: #444;
	background-image: linear-gradient(0deg, gainsboro, transparent)
}

.picker_wrapper button:active {
	background-image: linear-gradient(0deg, transparent, gainsboro)
}

.picker_wrapper button:hover {
	background-color: #fff
}

.picker_selector {
	position: absolute;
	z-index: 1;
	display: block;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 2px solid #fff;
	border-radius: 100%;
	box-shadow: 0 0 3px 1px #67b9ff;
	background: currentColor;
	cursor: pointer
}

.picker_slider .picker_selector {
	border-radius: 2px
}

.picker_hue {
	position: relative;
	background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
	box-shadow: 0 0 0 1px silver
}

.picker_sl {
	position: relative;
	box-shadow: 0 0 0 1px silver;
	background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))
}

.picker_alpha,
.picker_sample {
	position: relative;
	background: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em, linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;
	box-shadow: 0 0 0 1px silver
}

.picker_alpha .picker_selector,
.picker_sample .picker_selector {
	background: none
}

.picker_editor input {
	font-family: monospace;
	padding: .2em .4em
}

.picker_sample::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor
}

.picker_arrow {
	position: absolute;
	z-index: -1
}

.picker_wrapper.popup {
	position: absolute;
	z-index: 2;
	margin: 1.5em
}

.picker_wrapper.popup,
.picker_wrapper.popup .picker_arrow::before,
.picker_wrapper.popup .picker_arrow::after {
	background: #eeecec;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, .4);
}

.picker_wrapper.popup .picker_arrow {
	width: 3em;
	height: 3em;
	margin: 0
}

.picker_wrapper.popup .picker_arrow::before,
.picker_wrapper.popup .picker_arrow::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -99
}

.picker_wrapper.popup .picker_arrow::before {
	width: 100%;
	height: 100%;
	-webkit-transform: skew(45deg);
	transform: skew(45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%
}

.picker_wrapper.popup .picker_arrow::after {
	width: 150%;
	height: 150%;
	box-shadow: none
}

.popup.popup_top {
    bottom: 100%;
    left: 0
}
.popup.popup_top .picker_arrow {
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.popup.popup_bottom {
    top: 100%;
    left: 0
}
.popup.popup_bottom .picker_arrow {
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1)
}

.popup.popup_left {
    top: 0;
    right: 100%
}
.popup.popup_left .picker_arrow {
    top: 0;
    right: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.popup.popup_right {
    top: 0;
    left: 100%
}
.popup.popup_right .picker_arrow {
    top: 0;
    left: 0
}

/* Middle positioning */
.popup.popup_middle {
    top: 0;
    right: 50%;
    z-index: 1000; /* Increased z-index */
}
.popup.popup_middle .picker_arrow {
    top: 0;
    right: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.recent-colors {
    display: flex;
    justify-content: space-around; /* Distributes boxes evenly */
    margin-top: 10px; /* Adjust as needed */
    gap: 5px; /* Adds spacing between boxes */
}
.recent-color-box {
    width: 20px; /* Adjust size as needed */
    height: 20px;
    border: 1px solid #ccc; /* Optional border */
    cursor: pointer;
}