.avatar-range {
  -webkit-appearance: none;
  @apply w-full h-[5px] m-0 bg-c-gray-200 rounded-md outline-none;
}
.avatar-range:focus {
  @apply outline-none;
}

.tumb-shadow {
  @apply shadow-[0px_2px_3px_0px_#0F62FE0D,_0px_6px_10px_4px_#0F62FE4D];
}

.avatar-range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  @apply w-full h-[5px] rounded-md border-0 cursor-pointer;
}
.avatar-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  @apply 
  w-6 h-6 bg-c-white border-4 border-solid border-c-blue rounded-full -translate-y-2.5 cursor-pointer tumb-shadow;
}
 
.avatar-range::-moz-range-track {
  @apply w-full h-[5px] rounded-md border-0 cursor-pointer;
}
.avatar-range::-moz-range-thumb {
  @apply
  w-4 h-4 bg-c-white border-4 border-c-blue rounded-full cursor-pointer tumb-shadow;
}

.avatar-range::-ms-track {
  @apply w-full h-4 bg-transparent border-transparent border-y-4 text-transparent cursor-pointer;
}
.avatar-range::-ms-thumb {
  @apply 
  w-4 h-4 bg-c-white border-4 border-c-blue rounded-full cursor-pointer tumb-shadow;
}
/* .avatar-range::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.avatar-range::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
} */

.video-range {
  @apply avatar-range !bg-transparent opacity-[0.01];
}
.video-range::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.video-range::-webkit-slider-thumb,
.video-range::-moz-range-thumb,
.video-range::-ms-thumb {
  @apply !border-0 !border-transparent !bg-transparent !shadow-none;
}



.avatar-slider::-webkit-scrollbar {
  @apply hidden delay-150;
}
.avatar-slider:hover::-webkit-scrollbar {
  @apply block;
}
.avatar-slider::-webkit-scrollbar,
.avatar-slider::-webkit-scrollbar:vertical {
  @apply w-1.5 bg-c-gray-200;
}
.avatar-slider::-webkit-scrollbar:horizontal {
  @apply h-1.5 bg-c-gray-200;
}
.avatar-slider::-webkit-scrollbar-button {
  @apply hidden;
}
.avatar-slider::-webkit-scrollbar-track {
  @apply bg-c-gray-200;
}
.avatar-slider::-webkit-scrollbar-thumb {
  @apply w-1.5 bg-c-gray-500;
}


/* DRAG-OVER EFFECT */
.drag-over-blue-border {
  @apply !border-c-blue
}
.drag-over-blue-border .uploader-icon {
  @apply text-c-blue
}