#flash-container {
    position: fixed;
    top: 2vh;
    right: 2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1000;
    max-width: 90vw; /* Responsivo */
}

.flash-message {
    max-width: 17vw;
    color: black;
    font-family: 'Averta', sans-serif;
    padding: 1vh 2vw;
    margin: 0.5vh 0;
    border-radius: 0.5vw;
    font-family: 'Averta', sans-serif;
    font-size: 1vw;
    opacity: 1; /* Valor inicial */
    transform: translateX(0); /* Valor inicial */
    position: relative;
    overflow: hidden;
    transition: opacity 1.5s ease, transform 1.5s ease; /* Transição para movimentação e desaparecimento */
}

.flash-message-animation {
    animation: slideIn 1.5s forwards;
}

@keyframes slideIn {
    from {
        opacity: 0; /* Valor inicial */
        transform: translateX(100%); /* Valor inicial */
    }
    to {
        opacity: 1; /* Valor inicial */
        transform: translateX(0); /* Valor inicial */
    }
}

.error {
    background-color: #FCDE7D;
}

.info {
    background-color: #FFBD8E;
}

.success {
    background-color: #B0EB98;
}

/* A primeira fase de desaparecimento: mover para fora da tela */
.closing {
    opacity: 0;
    transform: translateX(100%); /* Mover para fora da tela */
}

/* A segunda fase: depois de mover, reduzir a altura e remover a margem */
.shrink {
    height: 0;
    margin: 0;
    padding: 0;
    transition: height 0.5s ease, margin 0.5s ease, padding 0.5s ease; /* Suavizar a altura e margens */
}

.close-button {
    position: absolute;
    top: 5px;
    right: 10px;
    color: black;
    font-size: 1.5em;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-weight: bold;
    transition: 0.5s;
}

.close-button:hover {
    opacity: 0.7;
    transition: 0.5s;
}

.flash-bar {
    position: absolute;
    bottom: 0; /* Posicionar no fundo da flash-message */
    left: 1%; /* Garantir que a barra ocupe toda a largura */
    height: 15%; /* Defina a altura da barra */
    width: 100%; /* Ocupa a largura total da flash-message */
    background-color: black; /* Cor preta */
    opacity: 0.2;
    animation: resizeflashbar 6s forwards;
}

@keyframes resizeflashbar {
    0% {
      width: 100%;
    }
  
    100% {
      width: 0%;
    }
}