Update style.css

style.css

@@ -16,4 +16,62 @@ button:disabled { background-color: #a0c3e6; cursor: not-allowed; }
 .report-entry h3 { margin: 0; color: #0056b3; }
 .report-entry p { margin: 5px 0 0 0; font-size: 14px; }
 #uploadStatus { margin-top: 15px; font-size: 14px; }
-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid #e0e0e0; font-size: 14px; color: #777; }
+footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid #e0e0e0; font-size: 14px; color: #777; }
+/* ... (all your existing CSS rules) ... */
+
+/* NEW: Styles for the modal pop-up */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1000; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 10% auto; /* 10% from the top and centered */
+  padding: 30px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 700px;
+  border-radius: 10px;
+  position: relative;
+}
+
+.modal-close-button {
+  color: #aaa;
+  position: absolute;
+  top: 15px;
+  right: 25px;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.modal-close-button:hover,
+.modal-close-button:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#modalTitle {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+}
+
+.modal-body-container {
+    background-color: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    padding: 20px;
+    max-height: 50vh; /* Set a max height */
+    overflow-y: auto; /* Add vertical scrollbar if content overflows */
+    white-space: pre-wrap; /* Respects line breaks and spaces */
+    font-family: monospace;
+}