#navbar {
    background-color: #F9FAFB;
}

#bottom-nav i {
    font-size: 20px;
}

#sidebar::-webkit-scrollbar {
    width: 8px;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 6px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db;
}

#sidebar footer {
    margin-top: 360px;
}

.animate-fadeIn {
    animation: fadeIn .5s ease-out forwards;
}

.animate-slideIn {
    animation: slideIn .4s ease-out forwards;
}

@media (max-width: 1100px) {
    #sidebar {
        display: none !important;
    }

    #bottom-nav {
        display: flex !important;
    }
}

@media (min-width: 1101px) {
    #bottom-nav {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    #sidebar {
        display: none !important;
    }

    #bottom-nav {
        display: flex !important;
    }
}

@media (min-width: 1101px) {
    #bottom-nav {
        display: none !important;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    0% {
        width: 0;
    }

    100% {
        width: 40px;
    }
}