.mensagem-erro {

    position: relative;
    background-color: red;
    color: #ffffff; /* Cor do texto branco */
    border-radius: 10px; /* Cantos arredondados */
    top: 20px;
    padding: 10px; /* Espaçamento interno */
    width: 200px; /* Largura do balão */
    margin-bottom: 30px; /* Espaçamento externo */
  }

  .mensagem-erro::before {

    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent red transparent; /* Triângulo azul apontando para baixo */
    transform: translateX(-50%);
  }