/* Global body styling for fixed header */
body {
    padding-top: 4rem;
}

/* Custom scrollbar that adapts to parent background */
.custom-scrollbar {
    scrollbar-width: thin;
    /* subtle gray thumb on white background */
    scrollbar-color: #9ca3af transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}


.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}


/* scrollbar will be hidden but will work */
.no-scrollbar-to-show {
    scrollbar-width: none;
    /* Firefox */
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.2s ease-out;
}