html {
   scroll-behavior: smooth;
}

/* ===================== Dropdown open animation ===================== */
.animate-fadeIn {
   animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(6px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Pulse for the notification badge */
@keyframes pulse {
   0%, 100% {
      opacity: 1;
   }
   50% {
      opacity: 0.5;
   }
}

#notificationBtn .bg-red-500 {
   animation: pulse 2s infinite;
}

/* ===================== Vue-Multiselect Customize ===================== */
.multiselect__input:focus {
   outline: none !important;
   box-shadow: none !important;
   border-color: transparent !important;
}

.multiselect {
   border: 1px solid #d1d5db;
}

.multiselect:focus-within {
   border-color: var(--color-primary, #4f39f6);
   box-shadow: 0 0 0 1px var(--color-primary, #4f39f6);
}