.imagecontour {
 padding: 10px; 
 border: solid 1px #EFEFEF;
 background-color: #FFFFFF;
 }

/* 1. Reset do container para não prender o alerta */
.container:has(.alert) {
    position: static !important;
}

/* 2. O Alerta Individual: Aqui criamos o efeito flutuante */
/* Usamos fixed para ele se soltar do <div class="container"> */
.alert.alert-danger, 
.alert.alert-success, 
.alert.alert-warning {
    position: fixed !important;
    top: 110px;            /* Posição no ecrã */
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;        /* À frente de tudo */
    width: 90%;
    max-width: 600px;
    
    /* Visual de Popup "no ar" */
    padding: 15px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    
    /* Animação vinda do topo */
    animation: alertPopIn 0.5s ease-out forwards;
}

/* 3. Lógica para empilhar se existirem vários (CSS dinâmico) */
/* Se houver mais do que um alerta, o segundo desce automaticamente */
.alert + .alert {
    top: 190px !important; /* Ajusta este valor conforme a altura do primeiro */
}
.alert + .alert + .alert {
    top: 270px !important;
}

/* 4. Cores das bordas laterais para manter a identidade */
.alert-danger { border-left: 5px solid #dc3545 !important; color: #721c24; }
.alert-success { border-left: 5px solid #03d3f8 !important; color: #155724; }
.alert-warning { border-left: 5px solid #ffc107 !important; color: #856404; }

@keyframes alertPopIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
 
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}