#page input {
	background-color: #FFFFFF;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	color: #000000;
	font-size: 12px;
	font-family: Verdana;
	height: 15px;
	width: 140px;
	padding-top: 2px;
	padding-left: 3px;
	padding-right: 3px;
	background-attachment:fixed;
		text-align: justify;
}

#page textarea {
	background-color: #FFFFFF;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	color: #000000;
	font-size: 10px;
	font-family: Verdana;
	padding-top: 2px;
	padding-left: 3px;
	padding-right: 3px;
	background-attachment:fixed;
		text-align: justify;
}

/* #page input.button{
	background-image:url('../images/button.jpg');
	background-repeat:repeat-x;
	background-color: #EEEEEE;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	font-weight: bold;
	color: #000000;
	font-size: 12px;
	font-family: Helvetica, sans-serif, Verdana, Arial;
	height: 20px;
	padding-top: 1px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
}

#page button{
	background-image:url('../images/button.jpg');
	background-repeat:repeat-x;
	background-color: #EEEEEE;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	font-weight: bold;
	color: #000000;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	height: 20px;
	padding-top: 1px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
}*/

/* Maria's buttons */
#page input.button, 
#page button {
	display: flex; /* Center content horizontally */
	justify-content: center;
	align-items: center;
	margin: 10px auto; /* Center button block horizontally */
	padding: 5px 20px; /* Increase padding for better visuals */
	border-radius: 10px; /* Rounded corners */
	border: none; /* Remove the border */
	background-color: #F2791A; /* Match your specified color */
	color: #fff; /* White text */
	font-size: 1.2em; /* Slightly larger font size */
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
	transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

/* Hover effect for button */
#page input.button:hover,
#page button:hover {
	transform: scale(1.05); /* Slightly enlarge on hover */
	background-color: #EA5E00; /* Darker shade for hover */
}

#page input.checkbox{
	background-color: #FFFFFF;
	border-width: 0px;
}

.page {	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; line-height:140%; }

#page h1{
  font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:18px; 
	color:#020492; 
	font-weight: bold; 
	margin-top: 0px; 
	margin-bottom: 12px;
position: relative;/* Ensure the pseudo-element is positioned relative to the h1 */}

#page h1::after {
    content: "";
    display: block;
    width: 20%;
    height: 2px;
    background-color: #DC143C;
    margin-left: 0;
    margin-top: 12px; /* Adjust this value if needed */
}

#page h2{
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; 
	color:#EA5E00; 
	font-weight: bold; 
	margin-top: 25px; 
	margin-bottom: 4px;
}
#page h3{
  font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#020492; 
	font-weight: bold; 
	margin-top: 10px;
	margin-bottom: 2px;
}

/* Vlasiou added*/
#page h4 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #4B0082; /* Indigo */
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #DC143C; /* Crimson */
  padding-bottom: 4px;
}

#page p {
	text-align: justify;
}
#page a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#000000; text-decoration: underline; } /*text-decoration: underline;*/
#page a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#000000; text-decoration: none; } /*text-decoration: underline;*/
#page a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#DC143C; text-decoration: none; font-weight: normal; }/*font-weight: bold; */
#page a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#000000; text-decoration: none; font-weight: normal; }



#page table {
border-collapse:collapse;
font-family: Verdana, Helvetica, "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
/* margin:20px; */
text-align:left;
width: 100%; /* Ensure the table takes up the full width */
border: 1px solid black;
}

#page th {
/* Vlasiou commented out: vbackground:url("../images/th.png") repeat-x scroll 0 0 #B9C9FE;*/
background-color: #020492;
border-bottom:1px solid #F1E3D3;
border-top:2px solid #D3DDFF;
color:#F1E3D3;
font-size:13px;
font-weight:bold;
padding:8px;
}

 #page tr:nth-child(even) {
            background-color: #E1E9F3; /* Light blue background for even rows */
        }

        #page tr:nth-child(odd) {
            background-color: #FFFFFF; /* White background for odd rows */
        }

#page td {
/* Vlasiou commented out: background:url("../images/td.png") repeat-x scroll 0 0 #E8EDFF;  */
border-bottom:1px solid #000000;
border-top:1px solid #000000;
color:#000000; /* Vlasiou changed it from #666699 */
padding:8px;
}

/* Vlasiou added the code below */
#page td div {
  text-align: justify;
}
#page ul, #page ol {
  list-style-position: outside; /* Keeps bullets/numbers outside the border. having it inside was causing a slight indentation on Edge for items longer than a line */
	margin: 0;
 padding-left: 1.5em;
}

#page ul li, #page ol li {
  text-align: justify;
  margin: 0; /*between items */
  padding: 0;
  text-indent: 0;
  }



/* Mobile adjustments for small screens */
@media only screen and (max-width: 959px) {

    /* Ensure inputs, buttons, and text areas are responsive */
    #page input, #page textarea, #page input.button, #page button {
        width: 100%; /* Full width to fit the screen */
        font-size: 14px; /* Slightly larger font size for readability on small screens */
    }

    /* Adjust font sizes for headings */
    #page h1 {
        font-size: 16px;
    }

    #page h2 {
        font-size: 14px;
    }

    #page h3 {
        font-size: 13px;
    }

    /* Adjust padding for table cells to make content fit better */
    #page td, #page th {
        padding: 10px;
        font-size: 14px; /* font size influences fit */
    }

    /* Table should scroll horizontally on small screens */
	
	#page table {
width: 100%; /* Ensures the table fits within the container */
		min-width: 100%;
		max-width: 100%;
    table-layout: fixed; /* Ensures consistent column widths */
    overflow-x: auto; /* Adds horizontal scrolling for small screens */
    display: block; /* Maintains block behavior for responsiveness */
    font-size: 16px; /* Default font size */
    border-collapse: collapse; /* Optional: improves the table's visual appearance */
    margin-bottom: 20px; /* Adds spacing below the table */
}

#page table th,
#page table td {
    padding: 8px; /* Adds padding for better readability */
    text-align: left; /* Ensures a consistent alignment */
    /* white-space: nowrap; */ /* Prevents text wrapping */
}
/* suggestion if you want to dont want the time to wrap */
/* #page table.first-td-is-time td:first-child{
	white-space: nowrap;
}*/
}