body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px 0; text-align: center; } header nav ul { list-style: none; padding: 0; } header nav ul li { display: inline; margin: 0 10px; } header nav ul li a { color: #fff; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; } .sidebar-sticky { background-color: #0a661f; } .sidebar-sticky .nav-link { color: #fff; } .sidebar-sticky .nav-link.active { background-color: #1c7430; } .sidebar-sticky .nav-link:hover { background-color: #1e7e34; } .navbar { background-color: #333; color: #fff; padding: 10px 0; } .navbar a { color: #fff; text-decoration: none; } .sidebar-sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; padding-top: 20px; background-color: #0a661f; } .sidebar-sticky .nav-link { color: #fff; } .sidebar-sticky .nav-link.active { background-color: #1c7430; } .sidebar-sticky .nav-link:hover { background-color: #1e7e34; } .main-content { padding: 20px; } .table-responsive { margin-top: 20px; max-width: 900px; margin: auto; } .table { width: 100%; table-layout: fixed; } .table th, .table td { padding: 8px; } .table th { width: auto; } /* Optional: Ensure the sidebar stays aligned to the left */ .sidebar { position: fixed; left: 0; height: 100%; top: 3.2em; /* Move down by approximately 3 lines (1.2em * 3) */ padding-top: 20px; background-color: #f8f9fa; width: 200px; /* Adjust the width as necessary */ } .content { margin-left: 220px; /* Add margin to the main content to avoid overlap with sidebar */ padding: 20px; } /* Adjust the container to prevent horizontal scroll */ .container-fluid { padding-left: 0; }