/* Custom Alert Styles */

/* Changed background color and opacity */
#modalContainer {
  background-color: rgba(120, 145, 155, 0.2); /* changed color and added opacity */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10000;
}

/* Changed border color, width, and box shadow */
#alertBox {
  position: relative;
  width: 340px; /* changed width */
  min-height: 120px; /* changed min height */
  margin-top: 75px;  /* changed margin */
  border: 3px solid #2C3E50; /* changed border color & width */
  background-color: #ECF0F1; /* changed background */
  box-shadow: 0 0 15px #34495E; /* added box shadow */
  border-radius: 10px; /* added rounded corners */
}

/* Ensure position:fixed for overlay */
#modalContainer > #alertBox {
  position: fixed;
}

/* Changed font and color for title bar */
#alertBox h1 {
  margin: 0;
  font: bold 1.2em 'Segoe UI', Arial, sans-serif; /* changed font & size */
  background-color: #2C3E50; /* changed background */
  color: #F9E79F; /* changed color */
  border-bottom: 2px solid #78919B; /* changed border */
  padding: 10px 0 10px 15px; /* changed padding */
  text-transform: capitalize; /* changed text-transform */
  letter-spacing: 1px; /* added letter spacing */
}

/* Changed font, color and padding for message */
#alertBox p {
  font: 1em 'Segoe UI', Arial, sans-serif; /* changed font & size */
  color: #34495E; /* changed color */
  height: auto; /* allow variable content */
  padding: 10px 15px; /* changed padding */
  margin: 0; /* changed margin */
}

/* Custom button style */
#alertBox #closeBtn {
  display: block;
  position: relative;
  margin: 15px auto; /* changed margin */
  padding: 7px 0; /* changed padding */
  border: 2px solid #2C3E50; /* changed border */
  width: 80px; /* changed width */
  font: bold 1em 'Segoe UI', Arial, sans-serif; /* changed font */
  text-transform: capitalize; /* changed text-transform */
  text-align: center;
  color: #F2F2F2; /* changed color */
  background-color: #2980B9; /* changed background */
  text-decoration: none;
  border-radius: 5px; /* rounded button */
  box-shadow: 0 2px 6px #34495E; /* added button shadow */
  transition: background 0.2s, color 0.2s;
}

/* Button hover effect */
#alertBox #closeBtn:hover {
  background-color: #1ABC9C; /* added hover */
  color: #34495E;
}