a.head-link-arrow.picker {
	font-size: 14px;
	color: #1E1E1E;	
	gap: 4px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
   display: flex;
   align-items: center;
}
a.head-link-arrow.picker::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(/assets/img/icons/CaretUP.svg) no-repeat left center;
    background-position: 0px 0px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
a.head-link-arrow.picker.active::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    background: url(/assets/img/icons/CaretUP.svg) no-repeat left center;
    background-position: 0px 0px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.color-picker {
	position: absolute;	
	display: none;
	flex-direction: column;  
	width: 400px;
	gap: 4px;  
   bottom: 0px;
   margin-left: 16px;
   margin-bottom: 16px;
}

.color-picker .picker-title {
	color: #333;
	font-size: 16px;
	padding: 0px 8px;	  
}
.color-picker.oscuro .picker-title{
	color: var(--gris-1);	
}
.picker-card {
	display: flex;
	flex-direction: column;  	
	background: #EDEFF2;
	border-radius: 8px;
	padding: 10px 10px;	
	border: 2px solid #F42F1C;
	gap: 8px;
}
.picker-card .container-component {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.picker-col1{
	display: flex;
	width: 78;
	height: 78;  
}
.picker-col2{
	display: flex;
	flex-direction: column;  	
	width: -webkit-fill-available;  
}

.selected-info {
	font-size: 14px;
	color: #1E1E1E;	
	gap: 4px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}
.picker-grp{
	display: flex;
	gap: 12px;
    align-items: center;
}

.picker-grp.foot{
    justify-content: space-between;
}

.color-preview {
  width: 78px;
  height: 78px;
  border-radius: 8px;
  border: none;
}

.picker-grp .sliders {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sliders h4 {
  margin: 6px 0;
  font-size: 14px;
  color: #444;
}

.slider-group {
  display: flex;
}

.slider-group label {
  width: 40px;
  color: #555;
  font-size: 13px;
}

.slider-group input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 12px;
  border-radius: 100px;
  background: #ccc;
  outline: none;
  cursor: pointer;
}

/* Barras RGB */
.slider-group input.red {
  background: linear-gradient(to right, rgb(0,0,0), rgb(255,0,0))!important;  
}
.slider-group input.green {
  background: linear-gradient(to right, rgb(0,0,0), rgb(0,255,0))!important;
}
.slider-group input.blue {
  background: linear-gradient(to right, rgb(0,0,0), rgb(0,0,255))!important;
}

.slider-group input.hue {
  background: linear-gradient(to right,
    #ff0000 0%,
    #ffff00 17%,
    #00ff00 33%,
    #00ffff 50%,
    #0000ff 67%,
    #ff00ff 83%,
    #ff0000 100%)!important;
	background: linear-gradient(90deg, #FF0000 0%, #FF4E00 8%, #FFC400 17%, #EAF900 21.1%, #8CFF00 25.6%, #2FFF00 31.1%, #00FFB3 44.1%, #00BBFF 54.1%, #0037FF 70%, #6A00F5 70.01%, #FE00D4 83%, #FD007F 88.6%, #FF002B 95.5%, #FF0030 100%)!important;
    
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EDEFF2;
  border: 3px solid #1E1E1E;
  cursor: pointer;
}
.slider-group input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid #888;
  cursor: pointer;
}

.hex-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hex-input label {
	color: #1E1E1E;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
  
}

.hex-input input {
	width: -webkit-fill-available;
	border: none;
	background: #fff;
	border-radius: 6px;
	text-align: center;
	padding: 2px 0px;
	text-transform: uppercase;	
	color: #1E1E1E;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
  
}

.recent-colors span{
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: #1E1E1E;
}

.color-history {
  display: flex;
  gap: 6px;
}

.color-history div {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

button#confirmBtn {
	background: transparent;
	color: #F42F1C;
	border: none;
	padding: 10px 12px;
	width: min-content;
    height: min-content;	
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	gap: 10px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;	
}

button#confirmBtn:hover {
  background: #F42F1C;
  color: #fff;
}

@media screen and (min-width: 1400px) and (max-width: 1760px) {
	.color-picker {
		width: 390px;
	}
	.color-preview {
		 width: 72px;
		 height: 72px;
	}
	.picker-grp .sliders {
		 gap: 6px;
	}
	.button#confirmBtn{
    padding: 6px 8px;	
	}
	
}	

@media screen and (min-width: 701px) and (max-width: 1399px) {	
	.color-picker {
		width: 270px;
	}
	.color-preview {
		 width: 50px;
		 height: 50px;
	}
	.picker-grp .sliders {
		 gap: 3px;
	}
	.button#confirmBtn{
    padding: 5px 6px;	
	}

}
@media screen and (min-width: 60px) and (max-width: 700px) {
}