/* Layout principal */
body, .wrapper {
    display: flex;
    flex-direction: row;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #043c74 !important;
  z-index: 1000;
}

/* Ajusta o tamanho do campo de busca na navbar */
.navbar .form-control {
    width: 350px; /* Define um tamanho */
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: clamp(110px, 7vw, 200px);
  background-color: #46acf0;
  overflow-y: auto;
  padding-top: 0.3rem;
  z-index: 999;
}

/* Links da sidebar */
.sidebar a {
    color: white;
    padding: 15px;
    text-decoration: none;
    display: block;
    text-align: center ;
    border-bottom: 1px solid white; /* Adiciona um divisor branco */
}

/* Estilo dos ícones na sidebar */
.sidebar i {
    font-size: 24px; /* Ajuste o tamanho do ícone */
    display: block; /* Faz o ícone ficar acima do texto */
    margin-bottom: 5px; /* Dá espaço entre o ícone e o texto */
}

/* Estilo para o link ativo e hover */
.sidebar a.active,
.sidebar a:hover {
    background-color: #043c74 !important;
    color: #fff !important;
}

/* Conteúdo principal */
.content {
    flex-grow: 1; /* O conteúdo se ajusta automaticamente */
    margin-left: 15vw; /* Mantém espaço da sidebar */
    padding: 20px;
    padding-top: 70px;
}

/* Estilo do botão personalizado */
.btn-custom {
    background-color: #15b32a; /* Cor personalizada */
    border-color: #868584;
    color: rgb(0, 0, 0);
}

/* Estilo do botão ao passar o mouse */
.btn-custom:hover {
    background-color: #1e7543;
}

@media (max-width: 768px) {
  .sidebar {
    width: 60px !important;
  }

  .content {
    margin-left: 60px !important;
  }

  .sidebar-label {
    display: none;
  }

  .sidebar a {
    padding: 12px 5px;
    font-size: 0.8rem;
  }

  .sidebar i {
    font-size: 20px;
    margin-bottom: 0;
  }
}