#modalContainer {
	background-color: transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 10000;
}

/* Changed border color from black to dark blue */
#alertBox {
	position: fixed; /* Keep alert box fixed on screen */
	top: 50%;        /* Move down to 50% of viewport height */
	left: 50%;       /* Move right to 50% of viewport width */
	transform: translate(-50%, -50%); /* Perfectly center the box */
	min-height: 100px;
	margin-top: 50px;
	border: 2px solid #003366; /* changed to dark blue */
	background-color: #E6F0FA; /* light blue background for alert box */
}


#modalContainer > #alertBox {
	position: fixed;
}

/* Changed title bar background color to darker blue and text color to white */
#alertBox h1 {
	margin: 0;
	font: bold 0.9em verdana, arial;
	background-color: #004C8C; /* title background changed to strong blue */
	color: #FFFFFF; 
	border-bottom: 1px solid #003366; /* changed bottom border to dark blue */
	padding: 2px 0 2px 5px;
	text-transform: uppercase;
}

/* Changed font color to deep blue and background to very light blue */
#alertBox p {
	font: 0.7em verdana, arial;
	height: 50px;
	padding-left: 5px;
	margin-left: 55px;
	color: #003366; /* changed paragraph text color */
	background-color: #F0F7FF; /* added light blue background */
}

/* Changed button colors to blue theme */
#alertBox #closeBtn {
	display: block;
	position: relative;
	margin: 5px auto;
	padding: 3px;
	border: 1px solid #003366; /* changed border color to dark blue */
	width: 70px;
	font: 0.7em verdana, arial;
	text-transform: uppercase;
	text-align: center;
	color: #FFFFFF; /* button text color is white */
	background-color: #005B9A; /* button background changed to blue */
	text-decoration: none;
}

/* Center and enlarge input box */
#gradeInput {
  width: 280px;          /* increase width */
  height: 35px;          /* increase height */
  font-size: 1rem;       /* larger font */
  padding: 5px;
  display: block;        /* allows margin auto */
  margin: 20px auto;     /* center horizontally */
  border: 2px solid #004C8C;  /* blue border to match theme */
  border-radius: 5px;    /* add slight rounding */
}

/* Style the button */
button {
  display: block;
  margin: 10px auto;
  padding: 8px 16px;
  font-size: 1rem;
  background-color: #005B9A;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Button hover effect */
button:hover {
  background-color: #003f6e;
}