/* Estilo de cores personalizadas para o topo e barra principal */

:root {
  --topo-background: #252526;
  --topo-text: white;
  --barra-background: #252526;
  --barra-text-color: white;
  --barra-border-color: #ffffff;  /* Cor da linha de borda */
  --barra-border-hover-color: #D90D1E; /* Cor para o hover da borda */
  --barra-selected-border-color: #ffffff; /* Cor da linha para o item selecionado */
}

div.topo-color, span.topo-color {
  background-color: #252526;
  color: var(--topo-text) !important;
}

a.topo-color {
  color: var(--topo-text) !important;
}

div.barra {
  color: #fff;
  background-color: var(--barra-background);
  /* Remover as bordas da barra inteira */
  border: none; /* Garantindo que não haja borda na barra */
  padding: 0; /* Remover qualquer padding adicional */
}

.td-barra {
  position: relative;
  left: 20px;
  top: -13px;
  padding: 10px 5px; /* Padding lateral e superior */
  padding-bottom: 5px; /* Aumenta a distância da borda */
  color: var(--barra-text-color) !important;
  display: inline-block; /* Garante que os itens fiquem na mesma linha */
  margin-right: 15px; /* Espaço entre os itens */
  border-bottom: none; /* Remover a borda inicial */
  transition: all 0.3s ease-in-out; /* Transição para todos os efeitos */
}

/* Criando a animação da borda da esquerda para a direita no hover */
.td-barra::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--barra-border-hover-color);
  transition: width 0.3s ease-in-out;
}

.td-barra-right{
  position: absolute;
  top: 30px;
  right: -12px;
  font-size: 10px;
}

.td-barra:hover::before {
  width: 100%; /* A largura da borda se expande quando o hover ocorre */
}

/* Efeito de borda para o item selecionado */
.td-barra.barra-selected::before {
  width: 100%; /* A linha aparece da esquerda para a direita */
  background-color: var(--barra-selected-border-color); /* Cor da linha para o item selecionado */
}

.td-barra:last-child {
  margin-right: 0; /* Remove o espaço do último item */
}

a.barra-selected {
  color: var(--barra-text-color) !important; /* Mantém a cor do texto */
  background-color: transparent !important; /* Mantém o fundo transparente */
}

/* Removendo o efeito de hover quando o item está selecionado */
.td-barra.barra-selected:hover::before {
  width: 100%; /* A linha continua visível no hover do item selecionado */
}

.td-barra-right {
  color: var(--barra-text-color) !important;
}

.login-screen {
  background-image: url('../imgs/login-background.jpg') !important;
  background-size: cover !important;
}