/* Add these styles for the tableS */
table {
    border-collapse: collapse;
    margin-bottom: 20px;
}

table,
th,
td {
    border: 1px solid #ddd;
}

th {
	background-color: #4caf5044;
	color: white;
}

th,
td {
    padding: 10px;
    text-align: left;
	border: 1px solid #ddd;
    padding: 8px;
}

tr:hover {
	background-color: #00000033;
}

.fortable {
	max-width:100%;
	}
	
div.dt-container select.dt-input {
	margin-right:  8px;
}

.dt-container div.dt-search label {
	margin-right:8px;
}

div.dt-container .dt-search input {
	background-color: #ddd;
	opacity:0.4;
}

table a {
	color: #28579b;
	text-decoration: none;
}


/* Add these styles for pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #4caf50;
    color: white;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.buttonbox {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

/* Responsive styling */
@media screen and (max-width: 1440px) {
    .buttontxt, .headertxt, .alias-header, .alias-field {
        display: none;
    }

    .dataTable thead tr th span.dt-column-title i.bi {
        font-size: 120%;
    }

}


/* Responsive styling */
@media screen and (max-width: 600px) {

    /* Hide the ID column on smaller screens */
    th:first-child,
    td:first-child {
        display: none;
    }

    /* Add a horizontal scrollbar for the table on smaller screens */
    table {
        overflow-x: auto;
    }

    /* Adjust padding for the remaining columns */
    th,
    td {
        padding: 8px;
    }
}