/* Base styles */ html, body { height: 100%; /* Ensure the body and html elements fill the viewport height */ margin: 0; /* Remove default margin */ display: flex; flex-direction: column; } body { font-family: Arial, sans-serif; } header { background-color: #4CAF50; color: white; padding: 1em; text-align: center; } main { flex: 1; /* Make the main content area grow to fill the available space */ padding: 1em; } footer { background-color: #333; color: white; text-align: center; padding: 1em; } /* Awesomplete and Bootstrap integration fix */ div.awesomplete { display: block; width: 100%; } /* Responsive table styles */ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { background-color: #337ab7; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 3px #444; box-sizing: content-box; content: '+'; color: white; display: block; height: 16px; left: 4px; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; font-size: 14px; line-height: 16px; } table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before { content: '-'; background-color: #d33333; } /* Media query for mobile devices */ @media (max-width: 768px) { .container { margin-top: 1rem !important; } main { padding: 0.5em; } }