/*Developer Notes -sig blue #004E98 -- sig orange #F25C05 -- compli blue #548DBF -- comli orange #F28D52 -- compli white #F2F2F2*/
body {
    display: flex; /* Enables flexbox layout */
    margin: 0; /* Remove default body margins */
}
@media (max-width: 768px) {
            .main-content-wrapper {
                flex-direction: column; /* Stack sidebar and content vertically on small screens */
            }
            .main-nav { /* Use .main-nav to target the navigation bar */
                width: 100% !important; /* Sidebar takes full width on small screens */
                height: auto !important; /* Height adjusts to content */
                position: relative !important; /* Remove fixed/sticky positioning for stacking */
                top: auto !important; /* Remove top offset */
                border-bottom: 1px solid #e2e8f0; /* Add a bottom border */
            }
            .content-area {
                padding-top: 0; /* Adjust padding for stacked layout */
                margin-left: 0 !important; /* Remove margin-left on small screens */
            }
        }
nav {
    height: 100vh; /* Changed to 100vh to fit the viewport height */
            width: 200px; /* Set a width for the navigation bar */
            background-color: #014c93; /* Light gray background */
            padding: 20px;
            position: sticky; /* Make nav sticky */
            top: 0; /* Stick to the top of the viewport */
            flex-shrink: 0; /* Prevent shrinking on larger screens */
            border-top-right-radius: 0.5rem; /* Retained from previous Tailwind-like styles */
            border-bottom-right-radius: 0.5rem; /* Retained from previous Tailwind-like styles */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Retained from previous Tailwind-like styles */
            z-index: 10; /* Retained from previous Tailwind-like styles */
        }
nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
}

nav li {
    margin-bottom: 10px; /* Add spacing between list items */
}

nav a {
    text-decoration: none; /* Remove underlines from links */
    color: #ffffff; /* Dark gray link color */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    padding: 5px 5px; /* Add some padding around the link text */
    display: block; /* Make links take up full width of list item */
}

nav a:hover {
    background-color: #0b3262; /* Slightly darker background on hover */
    border-radius: 10px;
    padding: 5px;
}
nav p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 10px;
    color: #ffffff;
}
header {
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    background-color: #014c93; /* Or a more specific light gray like #D3D3D3 */
    padding: 2px;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    position: sticky; /* Make nav sticky */
    top: 0; /* Stick to the top of the viewport */
}
main {
    flex: 1; /* Make the main content area take up remaining space */
    color: #151a29;
    padding-top: 0;
    padding: 5px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: auto;
    margin-bottom: 4em;
    margin-top: 0;
   
}
main a{
    text-decoration: none; /* Remove underlines from links */
    color: #01498d;
    font-weight: bold;
}
main a:hover{
    color: #cb4e06;
    text-decoration: underline;
}
main h2{
    padding: 20px 24px;
    margin: auto;
}
main h3{
    font-size: 20px;
    padding: 20px 24px;
}
main p{
    font-size: 18px;
    padding: 0 20px;
  }
main ul{
    list-style: circle;
    font-size: 18px; 
}
main ul li::marker{
    color: #014c93; 
}
main hr {
    border: 1px solid rgba(163, 167, 196, 0.269); /* Sets the border to a light grey color */
} 
table {
  border-collapse: collapse;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

th, td {
  border: 2px solid rgba(163, 167, 196, 0.269);
  padding: 8px 10px 10px;
  background-color: rgba(163, 167, 196, 0.269);
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
td{
text-align: left;
font-size: 19px;
padding: 10px 20px;
}

th {
  background-color: #ffffff;
	text-align: left;
	color: #151a29;
  border: 2px solid rgba(163, 167, 196, 0.269);
  padding: 20px 15px 15px;
  font-size: 20px; 
}
table img{
	padding: 2px;
}

  footer {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #151a29;
    background-color: rgb(223, 224, 232); /* Or a more specific light gray like #D3D3D3 */
    border-radius: 5px;
    text-align: center; /* Center the content horizontally */
    padding: 10px 0; /* Add some padding for better visual spacing */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-left:150px ;
    
  }
 footer a{
    font-size: 20px;
    color: #151a29;
    padding: 6px 4px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(3, 3, 3, 0.338); /* Horizontal offset, vertical offset, blur radius, color */
    
     
 }
 footer a:hover{
    color: #ffffff;
    background-color: #F25C05;
    border-radius: 10px;
    padding: 6px 4px;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(3, 3, 3, 0.279); /* Horizontal offset, vertical offset, blur radius, color */
}
footer a, footer img {
  margin: 0 10px; /* Add horizontal spacing between elements */
  vertical-align: middle;/* align images to the middle of the text */
}
.collapsible {
  background-color: #b5ceff;
  color: #020202;
  border-radius: 5px;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 1s background-color;
}

.collapsible:hover {
  background-color: #014c93;
  color:  white;
  transition-delay:.05s;
}

.content {
  padding: 0 18px;
  border-radius: 5px;
  display: none;
  overflow: hidden;
  color: #353536;
  border: 1px solid #42428b;
  
  
}
  .content p {
    text-align: left;
    font-size: 18px;
  }
  .content ul {
    text-align: left;
    font-size: 18px;
}
  .content ol {
    text-align: left;
    font-size: 18px;
}