mensagem de notificação movida para fora do card de formulario de login

templates/login.html

@@ -5,13 +5,7 @@
 {% block navbar %}{% endblock %}
 
 {% block content %}
-<div class="login-container">
-    <div class="login-content">
-        <div class="login-header">
-            <img src="{{ url_for('static', filename='img/logo001-alpha.png') }}" alt="Logo OCI" class="login-logo">
-            <h4 class="login-title">Controles OCI</h4>
-        </div>
-
+<div class="alert-container">
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
@@ -21,11 +15,17 @@
                     </div>
                 {% endfor %}
             {% endif %}
-        {% endwith %}
+                </div>
+
+<div class="login-container">
+    <div class="login-content">
+        <div class="login-header">
+            <img src="{{ url_for('static', filename='img/logo001-alpha.png') }}" alt="Logo OCI" class="login-logo">
+            <h4 class="login-title">Controles OCI</h4>
+            </div>
 
         <form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            
             <div class="form-floating mb-3">
                 <input type="text" class="form-control" id="email" name="email" placeholder="Email ou Usuário" required>
                 <label for="email">Email ou Usuário</label>
@@ -50,8 +50,8 @@
                 <label for="otp">Código OTP</label>
                 <div class="invalid-feedback">
                     Por favor, informe o código OTP.
-                </div>
-            </div>
+    </div>
+</div>
 
             <div class="d-grid">
                 <button type="submit" class="btn btn-lg login-button">
@@ -198,6 +198,26 @@ form {
     }
 }
 
+@media (max-width: 767px) {
+    .login-container {
+        margin: 1rem;
+    }
+
+    .login-content {
+        padding: 1.5rem;
+    }
+}
+</style>
+{% endblock %} 
+    .login-content {
+        padding: 1.5rem;
+    }
+}
+</style>
+{% endblock %} 
+    }
+}
+
 @media (max-width: 767px) {
     .login-container {
         margin: 1rem;