#fundo-sidebar {
    background: var();
    height: 100vh;
}
.nav-item i {
    color:var(--cor-fundo-btn-primary) !important;
    font-size: var(--font-size-padrao) !important;
}
#sidebar {
    min-width: 300px;
    max-width: 300px;
    background: var(--cor-fundo-sidebar);
    color: var(--cor-texto-sidebar) !important;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    height: 100vh;
    top: 1px;
    margin-bottom: 50px;
    padding-top: 20px;
    z-index: 20;
    height: 100vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

#sidebar.active {
    margin-left: -280px;
    z-index: 20;
}

#sidebar ul.components {
    padding: 0;
    z-index: 20;
}

#sidebar ul li {
    font-size: var(--font-sidebar)!important;
    z-index: 20;
    font-family: var(--font-padrao)!important;
}

#sidebar ul li > ul {
    margin-left: 10px;
    z-index: 20;
    font-family: var(--font-padrao)!important;
}

#sidebar ul li > ul li {
    font-size: var(--font-sidebar);
    z-index: 20;
}

#sidebar ul li a {
    padding: 10px 0;
    display: block;
    color: var(--cor-texto-sidebar);
    /*  border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
    text-decoration: none;
    z-index: 20;
    font-family: var(--font-padrao)!important;
}

#sidebar ul li a span {
    color: var(--cor-fundo-sidebar);
    font-size: var(--font-sidebar);
    z-index: 20;
    font-family: var(--font-padrao)!important;
}

#sidebar ul li a:hover {
    color: var(--cor-texto-hover-sidebar);
    font-size: var(--font-sidebar);
    text-decoration: none;
    background-color: var(--cor-hover-sidebar);
    border-radius: 0px;
    z-index: 20;
    font-family: var(--font-padrao)!important;
}

#sidebar ul li.active > a {
    /* background-color: var(--cor-hover-sidebar); */
    color: var(--cor-texto-hover-sidebar);
    font-size: var(--font-sidebar);
}
#sidebar .custom-menu {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 1px;
    margin-right: -15px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 9999;
}

#sidebar .custom-menu .btn {
    width: 28px !important;  /* Tamanho do botão */
    height: 40px !important; /* Tamanho do botão */
    border-radius: 30% !important; /* Botão arredondado */
    opacity: 0.9;
    border: 0px solid silver !important; /* Removendo borda */
    background-color: transparent; /* Fundo transparente */
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o ícone dentro do botão */
    box-sizing: border-box; /* Inclui a borda no cálculo do tamanho total */
    box-shadow: 5px 0 2px rgba(0, 0, 0, 0.1); /* Somente na borda direita */
}


#sidebar .custom-menu .btn i {
    font-size: 14px; /* Ícone menor para caber no tamanho do botão */
    color: gray; /* Cor do ícone */
}

.btn-sidebar {
    background-color: var(--cor-fundo-sidebar) !important;
    color: #ffffff !important;
    border-radius: 0px !important;

    padding: 10px !important;
}

[data-toggle='collapse']:not(.collapsed) .if-collapsed {
    display: none;
}
[data-toggle='collapse'].collapsed .if-not-collapsed {
    display: none;
}


#content {
    width: 100%;
    padding: 10;
    min-height: 100vh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.8s;
    background-color: var(--cor-content);
}
.submenu {
    display: none; /* Esconde os submenus inicialmente */
    padding-left: 20px; /* Recuo para subníveis */
    background: var(--cor-fundo-sidebar); /* Mesma cor do sidebar */
    transition: background-color 0.3s ease;
}

.submenu.show {
    display: block; /* Mostra o submenu quando a classe 'show' é aplicada */
}

.custom-menu {
    display: none !important;
}


.nav-link {
  display: flex; /* Torna o container flexível */
  justify-content: space-between; /* Alinha os elementos com espaço entre eles */
  align-items: center; /* Alinha os elementos verticalmente ao centro */
  text-decoration: none; /* Remove sublinhado */
  color: #333; /* Define cor do texto */

}

.nav-link i:first-child {
  margin-right: 8px; /* Espaço entre o ícone e o texto */
}

.nav-link i.submenu-toggle {
  position: absolute!important; /* Para posicionamento livre */
  right: 15px!important; /* Ajuste de espaço para o limite direito */
  margin-left: auto; /* Empurra o ícone final para a direita */
  font-size: 12px; /* Ajusta o tamanho da seta */
  text-align: right; /* Garante que a seta esteja alinhada */
  transition: transform 0.3s ease; /* Transição para animação (opcional) */
}

.submenu-toggle {
  font-size: 12px; /* Tamanho da seta */
  transition: transform 0.3s ease;
  text-align: right!important;
}

/* Rotaciona a seta quando o submenu está aberto */
.nav-item.active .submenu-toggle {
  transform: rotate(90deg);
}

/* Para dispositivos móveis, podemos ocultar a seta e ter um comportamento diferente */
@media (max-width: 768px) {
  .submenu-toggle {
      display: inline-block;
  }
}




@media (max-width: 991.98px) {
    .custom-menu {
        display: block !important;
    }

    #sidebar{
      height: 100vh;
    }
}

/* Responsivo para dispositivos móveis e tablets */
@media (max-width: 1024px) {
    #sidebar {
        margin-left: -285px; /* Esconde o sidebar em telas menores */
    }

    #sidebar.active {
        margin-left: 0; /* Exibe o sidebar ao clicar */
    }
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -285px; /* Esconde o sidebar em telas menores (mobile) */
    }

    #sidebar.active {
        margin-left: 0; /* Exibe o sidebar quando ativo */
    }

    /* Opcional: Adicionar um botão de abrir o sidebar para mobile */
    .sidebar-toggle-btn {
        display: block; /* Exibe o botão de abrir o sidebar */
    }
}