.text-purple-300 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity));
}


:is(.dark .hover\:dark\:text-purple-300):hover{
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity));
}






.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}


.focus-within\:border-purple-300:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}


.focus\:border-purple-300:focus{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}

/* bg purple */
.bg-purple-50 {
  background-color: #faf5ff;
}
.bg-purple-50:hover {
  background-color: #f3e8ff;
}

.bg-purple-100 {
  background-color: #f3e8ff;
}
.bg-purple-100:hover {
  background-color: #e9d5ff;
}

.bg-purple-200 {
  background-color: #e9d5ff;
}
.bg-purple-200:hover {
  background-color: #d8b4fe;
}

.bg-purple-300 {
  background-color: #d8b4fe;
}
.bg-purple-300:hover {
  background-color: #c084fc;
}

.bg-purple-400 {
  background-color: #c084fc;
}
.bg-purple-400:hover {
  background-color: #a855f7;
}

.bg-purple-500 {
  background-color: #a855f7;
}
.bg-purple-500:hover {
  background-color: #9333ea;
}

.bg-purple-600 {
  background-color: #9333ea;
}
.bg-purple-600:hover {
  background-color: #7e22ce;
}

.bg-purple-700 {
  background-color: #7e22ce;
}
.bg-purple-700:hover {
  background-color: #6b21a8;
}

.bg-purple-800 {
  background-color: #6b21a8;
}
.bg-purple-800:hover {
  background-color: #581c87;
}

.bg-purple-900 {
  background-color: #581c87;
}
.bg-purple-900:hover {
  background-color: #3b0764;
}


.active{
  fill: #6A0DAD  !important;
  color: #6A0DAD !important;
}

/* bg-red */
.bg-red-50 {
  background-color: #fef2f2;
}
.bg-red-50:hover {
  background-color: #fee2e2;
}

.bg-red-100 {
  background-color: #fee2e2;
}
.bg-red-100:hover {
  background-color: #fecaca;
}

.bg-red-200 {
  background-color: #fecaca;
}
.bg-red-200:hover {
  background-color: #fca5a5;
}

.bg-red-300 {
  background-color: #fca5a5;
}
.bg-red-300:hover {
  background-color: #f87171;
}

.bg-red-400 {
  background-color: #f87171;
}
.bg-red-400:hover {
  background-color: #ef4444;
}

.bg-red-500 {
  background-color: #ef4444;
}
.bg-red-500:hover {
  background-color: #dc2626;
}

.bg-red-600 {
  background-color: #dc2626;
}
.bg-red-600:hover {
  background-color: #b91c1c;
}

.bg-red-700 {
  background-color: #b91c1c;
}
.bg-red-700:hover {
  background-color: #991b1b;
}

.bg-red-800 {
  background-color: #991b1b;
}
.bg-red-800:hover {
  background-color: #7f1d1d;
}

.bg-red-900 {
  background-color: #7f1d1d;
}
.bg-red-900:hover {
  background-color: #581c1c;
}


/* bg-green */
.bg-green-50 {
  background-color: #f0fdf4;
}
.bg-green-50:hover {
  background-color: #dcfce7;
}

.bg-green-100 {
  background-color: #dcfce7;
}
.bg-green-100:hover {
  background-color: #bbf7d0;
}

.bg-green-200 {
  background-color: #bbf7d0;
}
.bg-green-200:hover {
  background-color: #86efac;
}

.bg-green-300 {
  background-color: #86efac;
}
.bg-green-300:hover {
  background-color: #4ade80;
}

.bg-green-400 {
  background-color: #4ade80;
}
.bg-green-400:hover {
  background-color: #22c55e;
}

.bg-green-500 {
  background-color: #22c55e;
}
.bg-green-500:hover {
  background-color: #16a34a;
}

.bg-green-600 {
  background-color: #16a34a;
}
.bg-green-600:hover {
  background-color: #15803d;
}

.bg-green-700 {
  background-color: #15803d;
}
.bg-green-700:hover {
  background-color: #166534;
}

.bg-green-800 {
  background-color: #166534;
}
.bg-green-800:hover {
  background-color: #14532d;
}

.bg-green-900 {
  background-color: #14532d;
}
.bg-green-900:hover {
  background-color: #0f3f23;
}

/* bg-yellow */
.bg-yellow-50 {
  background-color: #fefce8;
}
.bg-yellow-50:hover {
  background-color: #fef9c3;
}

.bg-yellow-100 {
  background-color: #fef9c3;
}
.bg-yellow-100:hover {
  background-color: #fef08a;
}

.bg-yellow-200 {
  background-color: #fef08a;
}
.bg-yellow-200:hover {
  background-color: #fde047;
}

.bg-yellow-300 {
  background-color: #fde047;
}
.bg-yellow-300:hover {
  background-color: #facc15;
}

.bg-yellow-400 {
  background-color: #facc15;
}
.bg-yellow-400:hover {
  background-color: #eab308;
}

.bg-yellow-500 {
  background-color: #eab308;
}
.bg-yellow-500:hover {
  background-color: #ca8a04;
}

.bg-yellow-600 {
  background-color: #ca8a04;
}
.bg-yellow-600:hover {
  background-color: #a16207;
}

.bg-yellow-700 {
  background-color: #a16207;
}
.bg-yellow-700:hover {
  background-color: #854d0e;
}

.bg-yellow-800 {
  background-color: #854d0e;
}
.bg-yellow-800:hover {
  background-color: #713f12;
}

.bg-yellow-900 {
  background-color: #713f12;
}
.bg-yellow-900:hover {
  background-color: #5a330e;
}



/* bg-gray */
.bg-gray-50 {
  background-color: #f9fafb;
}
/* .bg-gray-50:hover {
  background-color: #f3f4f6;
  color:#0b0f19
} */

.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-100:hover {
  background-color: #e5e7eb;
}

.bg-gray-200 {
  background-color: #e5e7eb;
}
.bg-gray-200:hover {
  background-color: #d1d5db;
}

.bg-gray-300 {
  background-color: #d1d5db;
}
.bg-gray-300:hover {
  background-color: #9ca3af;
}

.bg-gray-400 {
  background-color: #9ca3af;
}
.bg-gray-400:hover {
  background-color: #6b7280;
}

.bg-gray-500 {
  background-color: #6b7280;
}
.bg-gray-500:hover {
  background-color: #4b5563;
}

.bg-gray-600 {
  background-color: #4b5563;
}
.bg-gray-600:hover {
  background-color: #374151;
}

.bg-gray-700 {
  background-color: #374151;
}
.bg-gray-700:hover {
  background-color: #1f2937;
}

.bg-gray-800 {
  background-color: #1f2937;
}
.bg-gray-800:hover {
  background-color: #111827;
}

.bg-gray-900 {
  background-color: #111827;
}
.bg-gray-900:hover {
  background-color: #0b0f19;
}

/* bg-blue */
.bg-blue-50 {
  background-color: #eff6ff;
}
.bg-blue-50:hover {
  background-color: #dbeafe;
}

.bg-blue-100 {
  background-color: #dbeafe;
}
.bg-blue-100:hover {
  background-color: #bfdbfe;
}

.bg-blue-200 {
  background-color: #bfdbfe;
}
.bg-blue-200:hover {
  background-color: #93c5fd;
}

.bg-blue-300 {
  background-color: #93c5fd;
}
.bg-blue-300:hover {
  background-color: #60a5fa;
}

.bg-blue-400 {
  background-color: #60a5fa;
}
.bg-blue-400:hover {
  background-color: #3b82f6;
}

.bg-blue-500 {
  background-color: #3b82f6;
}
.bg-blue-500:hover {
  background-color: #2563eb;
}

.bg-blue-600 {
  background-color: #2563eb;
}
.bg-blue-600:hover {
  background-color: #1d4ed8;
}

.bg-blue-700 {
  background-color: #1d4ed8;
}
.bg-blue-700:hover {
  background-color: #1e40af;
}

.bg-blue-800 {
  background-color: #1e40af;
}
.bg-blue-800:hover {
  background-color: #1e3a8a;
}

.bg-blue-900 {
  background-color: #1e3a8a;
}
.bg-blue-900:hover {
  background-color: #172e71;
}


/* text */
.text-center{
  text-align: center;
}

/* text green */
.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-950 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}
/* text red */
.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-950 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

/* text yellow */
.text-yellow-100 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-yellow-950 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
/* text blue */
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}   
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-blue-950 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}


/* grid */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}