body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
header, footer, h1, h2, h3, p, a, li {
    font-family: 'Roboto', sans-serif;
}
#content {
    flex: 1;
}
main {
    flex: 1; /* This will allow the main content to take up available space */
    padding: 1rem; /* Add some padding to main content */
}
footer {
    background-color: #042e3d; /* Dark teal color */
    color: black;
    padding: 1rem;
    font-size: smaller;
    width: 100%;
    margin-top: auto; /* Pushes the footer to the bottom when content is smaller */
}
header {
    background-color: #FF8C00; /* Deep orange color */
    color: #ffffff; /* White text for contrast */
}
.footer-teal {
    background-color: #042e3d;
    color: black;
}
#serials-table_wrapper {
    margin: 20px auto; /* Adds a margin of 20px and centers the table */
    width: auto;       /* Adjust width to fit content and not occupy the full screen */
}
/* Hide the table initially */
#serials-table {
    display: none;
}
/* Customizing the odd and even rows for DataTables */
#serials-table tbody tr.odd {
    background-color: #f9f9f9; /* Faint grey color for odd rows */
}

#serials-table tbody tr.even {
    background-color: #ffffff; /* White for even rows */
}
/* Highlight table row on mouse hover or touch */
#serials-table tbody tr:hover {
    background-color: #e0e0e0; /* Light grey color on hover */
    cursor: pointer;           /* Change cursor to pointer for better UX */
}
/* Override Materialize CSS that hides the DataTables dropdown */
.dataTables_length select {
    display: inline-block !important;
    visibility: visible !important;
}
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    display: none;
}
#refresh-table-button {
    display: none;
}
.actions-column {
    white-space: nowrap;
}
.small-text-column {
    font-size: 0.85em; /* Adjust this value as needed */
}
.dataTables_wrapper .dataTables_filter input {
    width: 200px;
    height: 50px;
    margin: 20px;
}
.dataTables_wrapper .dataTables_length select {
    margin: 20px;
}
.dataTables_wrapper .dataTables_length label {
    margin-left: 40px;
}
.dataTables_length {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.dataTables_length label {
    display: flex;
    gap: 20px; /* Adds some spacing between elements */
    margin-left: auto; /* Moves the text to the right */
}
#loader {
    position: fixed; /* Position relative to the viewport */
    top: 30%; /* Center vertically */
    left: 50%; /* Center horizontally */
    /*transform: translate(-50%, -50%); /* Adjust the position to account for loader size */
    z-index: 9999; /* Make sure the loader is on top of everything */
}
.redirectButton {
    cursor:pointer;
}