body {
    font-family: 'Arial', sans-serif;
    margin: 20px;
    background-color: #f9f9f9; /* Light gray background */
    color: #333333; /* Dark gray text color */
}

h1 {
    text-align: center;
    color: #333333; /* Dark gray text color */
}

/* Responsive styles using media queries */
@media screen and (max-width: 600px) {
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th, td {
        display: table-cell;
        box-sizing: border-box;
    }

    th {
        display: table-cell;
        width: auto;
    }

    td:before {
        content: attr(data-title);
        font-weight: bold;
    }

    #ntrans {
        white-space: normal;
        word-break: keep-all;
    }
}




.pagination a {
    color: white !important;
    background-color: black !important;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 4px;
}

.pagination a.active {
    color: white !important;
    background-color: gray !important;
}

.pagination a:hover {
    background-color: gray !important;
    color: black !important;
}

.details {
    display: none;
    background-color: #ffffff; /* White background */
    padding: 10px;
    border: 1px solid #dddddd; /* Light gray border */
}

.row:hover .details {
    display: block;
}

/* Logo styling */
.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.logo-container img {
    max-width: 100%;
    height: auto;
}

/* Add this to your existing CSS */
.toggled-data {
    font-size: inherit !important;
}

/* Additional media query for smaller screens if needed */
@media only screen and (max-width: 600px) {
    .toggled-data {
        font-size: inherit !important;
    }
}

table { box-shadow: 15px 2px 20px #999; }