.position-relative {
    position: relative;
}

th {
    background-color: hsl(var(--p)/var(--tw-bg-opacity));
    color: white;
}

.hover\:text-secondary-content:hover {
    --tw-text-opacity: 1;
    color: rgb(0 181 240);
}

@media (hover:hover) {
    .menu li > :not(ul):not(details).active, .menu li > :not(ul):not(details):active, .menu li > details > summary:active {
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        background-color: hsl(var(--p)/var(--tw-bg-opacity));
        color: hsl(var(--pc)/var(--tw-text-opacity));
    }
}

.menu :where(li ul) {
    position: relative;
    white-space: normal;
    margin-left: 1rem;
    padding-left: 0.5rem;
}

.spinner-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsl(var(--s) / .5);
    z-index: 999;
}

.loading-section {
    text-align: center;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loading-section h2 {
    color: hsl(var(--p) / 1);
}

.loader-dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: hsl(var(--p) / 1);
    display: inline-block;
    -webkit-animation: loading-grow 2.1s infinite ease-in-out both;
    animation: loading-grow 2.1s infinite ease-in-out both;
}

.loader-dot.dot1 {
    -webkit-animation-delay: -0.96s;
    animation-delay: -0.96s;
}

.loader-dot.dot2 {
    -webkit-animation-delay: -0.48s;
    animation-delay: -0.48s;
}

@-webkit-keyframes loading-grow {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes loading-grow {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

/* YourComponent.razor.css or in a general styles.css file */
@font-face {
    font-family: 'Batenburg';
    src: url('./Font/Mic32New-Bd.otf') format('opentype');
    /* Add other font properties if needed */
}

h4 {
    font-family: 'Batenburg', sans-serif;
}

.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}