html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Remove as setas da barra de rolagem e estiliza para navegadores WebKit (Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px; /* Largura da barra de rolagem vertical */
  height: 12px; /* Largura da barra de rolagem horizontal */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #333; /* Cor de fundo mais escura da área da barra de rolagem */
  border-radius: 10px; /* Arredondamento das bordas do trilho */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #555; /* Cor da barra de rolagem mais escura */
  border-radius: 10px; /* Arredondamento das bordas da parte rolável */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #444; /* Cor da barra de rolagem ao passar o mouse */
}

/* Estiliza a barra de rolagem para Firefox */
.custom-scrollbar {
  scrollbar-width: thin; /* Largura da barra de rolagem */
  scrollbar-color: #555 #333; /* Cor da barra de rolagem e do fundo */
}

/* Remove as setas e estiliza a barra de rolagem no IE e Edge */
.custom-scrollbar {
  -ms-overflow-style: none; /* Remove as setas em navegadores IE e Edge */
}

/* Para ocultar a barra de rolagem nas páginas que não possuem scroll */
body::-webkit-scrollbar {
  display: none; /* Oculta a barra de rolagem */
}