/* Estilos básicos para o navbar */
#navbar {
    z-index: 1;
    position: fixed;
    bottom: 0px;
   
    /* max-width: 100%; */
    width: 98%;
    /* width: 100%; */
    /* Borda inferior */

    /* Ocupará 100% da largura */

    display: none;
    visibility: hidden;
    /* Organiza os itens na horizontal */
    justify-content: space-around;
    /* Distribui os itens horizontalmente */
    align-items: center;
    /* Alinha os itens verticalmente */
}






/* Estilos da lista de navegação */
.main-navbar {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: row;
    background-color: var(--bg-color);
    /* Cor de fundo */

    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;

    border-radius: 12px;

    margin: 8px;
    padding: 8px;


    /* Organiza os itens na horizontal */
    justify-content: space-around;
    /* Distribui uniformemente os itens */
    width: 100%;
    /* Ocupará 100% da largura do navbar */

    display: flex;

    transition: all 0.4s;

    height: 50px;
}


.main-navbar div.active {
    background: #eee;
    /* border-radius: 8px; */

}

.main-navbar div.active a,
.main-navbar div.active a:hover {
    color: #000;
}

.main-navbar .nav-item {
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;

    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;

    
}

.main-navbar .nav-item a {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

/* Estilos para o navbar */
.main-navbar .nav-item {
    /* Posição relativa para gerenciar a expansão */
    background-color: transparent;
    transition: background-color 0.4s ease-in-out;
}

/* Estilos para esconder o texto no span inicialmente */
.main-navbar .nav-item span {
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    /* Evita quebra de linha no texto */
    width: 0;
    display: none;
    overflow: hidden;
    transition: width 0.4s ease-in-out, visibility 0s 0.4s, opacity 0.4s;
}

/* Quando o item estiver ativo ou o mouse passar por cima */
.main-navbar .nav-item.active,
.main-navbar .nav-item:hover {
    background-color: #eee;
    /* Cor de fundo ao ativar ou passar o mouse */
    transition: background-color 0.4s ease-in-out;

    border: 2px solid white;
}

/* Mostrar o texto com efeito de expansão */
.main-navbar .nav-item.active span,
.main-navbar .nav-item:hover span {
    visibility: visible;
    display: block;
    opacity: 1;
    width: auto;
    /* Permite que o texto se expanda totalmente */
    transition: width 0.4s ease-in-out, opacity 0.4s;
}

@media (max-width: 768px) {
    #navbar {
        display: flex;
        visibility: visible;
    }


    .content {
        margin-bottom: 32px;
    }


}