/* Common Styles for Both Table and Search Container */
body {
    font-family: Arial, sans-serif;
    margin: 0; /* Remove body margin for better alignment */
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
}

.search-container {
    text-align: center; /* Center-align the content within the search container */
    margin: 10px;
    overflow: hidden; /* Hide any overflow content outside the table width */
}
/* Ensuring alignment on the same line */
.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
}


    .page-link, .pagination span {
        margin-right: 10px;
    }

    .page-link {
        cursor: pointer;
        /* Additional styles for the page links */
    }

    .pagination span {
        font-weight: bold;
        /* Additional styles for the current page indicator */
    }



#searchBox, #searchButton {
    height: 40px; /* Set a fixed height */
    padding: 8px 12px; /* Adjust padding as needed */
    font-size: 16px; /* Keep font size consistent */
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 20px; /* Adjust line height for vertical alignment */
}

#searchButton {
    cursor: pointer;
    background-color: #f2f2f2;
    margin-left: 10px;
}


.label-container {
    text-align: center; /* Center-align the content within the label container */
    margin-bottom: 10px; /* Add spacing between label and search box */
}

.label {
    font-size: 18px;
    margin-bottom: 5px;
}

input[type="radio"] {
    margin-right: 5px;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Set the table layout to fixed */
    overflow-x: auto; /* Add horizontal scrolling for the table on mobile */
    margin-top: 20px;
}

th, td {
    border: 1px solid black;
    padding: 4px; /* Reduce padding for table content on mobile */
    text-align: left;
    font-size: 18px; /* Smaller font size for table content on mobile */
    max-width: 150px; /* Limit cell width for better readability on mobile */
    overflow-wrap: break-word; /* Wrap long words to the next line */
}

th {
    background-color: #f2f2f2;
    font-size: 16px; /* Smaller font size for table headers on mobile */
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 600px) {
    /* Search Container Styles for Mobile */
    

    #searchBox {
        font-size: 14px; /* Increase font size for better readability on mobile */
    }

    /* Table Styles for Mobile */
    th, td {
        padding: 1px; /* Further reduce padding for table content on mobile */
        font-size: 14px; /* Increase font size for table content on mobile */
    }

    th {
        font-size: 12px; /* Increase font size for table headers on mobile */
        background-color: #f2f2f2; /* Match background color with table on mobile */
    }

    table {
        table-layout: auto; /* Allow table columns to adjust width on mobile */
    }
    
    .header {
        width: 100%; /* Match header width with table width on mobile */
    }
    
    /* Adjusting styles for mobile */

        #searchBox, #searchButton {
        font-size: 14px;
        height: 36px; /* Adjust height for mobile */
        padding: 6px 10px; /* Adjust padding for mobile */
    }

    #searchButton {
        
        margin-left: 5px;
    }
}


}