/* 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;
}
}