/* * Start of Top Menubar **/

#topMenu {
    /* @apply bg-white border-b border-gray-200; */
}

#topMenu > div  {
    /* @apply relative rounded-md mr-1 text-base bg-white; */
}

#topMenu > div > div > button {
	@apply px-1 py-1 text-sm font-medium text-gray-500 bg-blue-100 hover:text-gray-700 rounded-md;
}

#topMenu > div > div > button:hover {
    @apply outline-none  !bg-gray-100;
}

/* #topMenu > div > div > button:focus {
    @apply outline-none ring-2 ring-offset-2 !bg-gray-100;
} */

#topMenu > div > div > div {
    @apply rounded-md border border-gray-200 bg-white shadow-lg z-[1000];
}

#topMenu > div > div > div > div > div > a {
    @apply block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 whitespace-nowrap w-full;
}

#topMenu > div > div > div > div > div> a > svg {
    @apply mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500;
}


/* Additional styles for active/selected states */
#topMenu > div.active > button {
    @apply bg-gray-100 text-gray-900;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #topMenu {
        @apply flex-wrap;
    }

    #topMenu > div {
        @apply w-full;
    }

    #topMenu > div > div {
        @apply w-full left-0 right-0;
    }
}

/** End of Top Menubar * */