.splash-user-att {
  display: none !important;
}


.bem-vindo {
    border:13px solid transparent;
    padding: 22px;
    z-index: 0; /* Garante que o conteúdo fique acima do pseudo-elemento */
}

.bem-vindo::before {
    content: "";
    position: absolute;
    top: -6px; /* Espaço entre a borda transparente e a original */
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid silver; /* Define a borda */
    border-radius: 30px; /* Deve ser maior para acompanhar o border-radius da borda original */
    z-index: -1; /* Fica atrás do conteúdo do elemento */
}

.bem-vindob {
    width: 145px !important; 
    height: 145px !important; 
}

.bem-vindoc {
    width: calc(100% - 145px) !important; 
    height: calc(100% - 145px) !important;  
    margin-bottom: 10px;
}

.bem-vindod {
    width: 100% !important; 
    height: 100% !important;  
    margin-bottom: 10px;
}

.bem-vindoe {
    width: 100% !important; 
    height: 100% !important;  
    margin-bottom: 10px;
    display: grid;
    place-items: center;
}

.foto-com-borda-gradiente {
    width: 60px;
    height: 60px;
    border-radius: 20%;
    object-fit: cover;
    border: 3px solid transparent; /* Define a borda transparente */
    background-image: linear-gradient(225deg, #d3d3d3, #a9a9a9, #808080, #696969, #333333); /* Gradiente de borda */
    background-origin: border-box; /* Aplica o fundo ao redor da borda */
}

/* Classe para sucesso */
.pill-success {
    display: inline-block;
    padding: 2px 10px;
    background-color: green;
    color: white;
    border-radius: 50px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 6px solid transparent; /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para falha */
.pill-failure {
    display: inline-block;
    padding: 2px 10px;
    background-color: red;
    color: white;
    border-radius: 50px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 6px solid transparent; /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para labels */
.label-dados {
    display: inline-block;
    padding: 4px 14px;
    background-color: transparent;
    border-radius: 20px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 1px solid rgba(204,204,204,0.5); /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para labels */
.label-nome {
    display: inline-block;
    padding: 2px 14px;
    background-color: transparent;
    border-radius: 20px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 1px solid rgba(204,204,204,0.5); /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}


/* Estilo geral do container */
.barra-container {
    position: relative; /* Permite posicionamento absoluto do texto e da linha */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 20px; /* Espaçamento */
    width: 30px; /* Mesma largura da barra */
}

/* Texto do nível */
.texto-nivel1 {
    position: absolute;
    bottom: calc(33% + 2px); /* Relativo à altura preenchida (ajustado dinamicamente) */
    left: 50%;                /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a centralização */
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0px 3px rgba(0, 0, 0, 1);
    padding: 1px 2px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)); /* Fundo escuro para contraste */
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;      /* Evita quebra de linha no texto */
    z-index: 2;               /* Fica acima da barra */
}

.texto-nivel2 {
    position: absolute;
    bottom: calc(66% + 2px); /* Relativo à altura preenchida (ajustado dinamicamente) */
    left: 50%;                /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a centralização */
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0px 3px rgba(0, 0, 0, 1);
    padding: 1px 2px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)); /* Fundo escuro para contraste */
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;      /* Evita quebra de linha no texto */
    z-index: 2;               /* Fica acima da barra */
}



/* Barra vertical em formato de pílula */
.barra-vertical {
    position: relative;
    width: 30px;
    height: 200px;
    background: linear-gradient(to bottom, #999999, #1a1a1a); /* Fundo mais escuro com gradiente */
    border-radius: 15px; /* Arredonda as bordas para formar a pílula */
    overflow: visible; /* Permite elementos visuais saírem da barra */
    box-shadow: inset 0px 8px 10px rgba(0, 0, 0, 0.5); /* Efeito de profundidade */
}

/* Porção preenchida da barra */
.nivel {
    position: absolute;
    bottom: 0; /* Começa do fundo para preencher verticalmente */
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #0e69d0, #102c5d 90%, #111111); /* Gradiente moderno */
    border-bottom-left-radius: 15px; /* Mantém o arredondamento na parte de baixo */
    border-bottom-right-radius: 15px; /* Mantém o arredondamento na parte de baixo */
    
    z-index: 1; /* Garante que o preenchimento fique atrás do texto */
}

/* Linha cinza acima da barra preenchida */
.nivel::after {
    content: '';
    position: absolute;
    top: 0; /* Alinha ao topo da porção preenchida */
    left: -35%; /* Faz a linha ultrapassar 25% dos limites da barra */
    width: 170%; /* 100% da largura da barra + 25% para cada lado */
    height: 2px; /* Espessura da linha */
    background-color: white; /* Cor da linha cinza */
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8); /* Efeito de profundidade */
    z-index: 1; /* Garante que a linha esteja acima do preenchimento */
}

/* Nível 1 (33% preenchido) */
.nivel-1 {
    height: 33%;
}

/* Nível 2 (66% preenchido) */
.nivel-2 {
    height: 66%;
}