/* Custom scrollbar to match theme */
    
        ::-webkit-scrollbar-track {
            background: transparent;
        }
/* 
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        } */

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .material-symbols-outlined {
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }

         ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #cfe7d7;
            border-radius: 4px;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #2a4535;
        }
        /* quiz style */
         .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .icon-filled {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .active{
            @apply material-symbols-outlined group-hover:text-primary transition-colors
        }
        .hard{
            @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
        }
        .easy{
            @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
        }
        .medium{
            @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
        }