/* Add here all your CSS customizations */
.edit_btn, .delete_btn {
    margin-right: 15px!important;
}

/* Style for the pagination container */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px; /* Adds space above pagination */
    text-align: right; /* Center-aligns the pagination */
}

/* Style for pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #007bff; /* Default color of the buttons */
    background-color: #f8f9fa; /* Light background color */
    border: 1px solid #ddd; /* Border color */
    padding: 5px 10px; /* Padding inside buttons */
    margin: 2px; /* Spacing between buttons */
    cursor: pointer;
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

/* Style for pagination buttons on hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e2e6ea; /* Hover background color */
    color: #0056b3; /* Hover text color */
}

/* Style for the active pagination button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #007bff; /* Active button background color */
    color: white; /* Active button text color */
    border: 1px solid #007bff; /* Active button border color */
}

/* Disable style for disabled buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #6c757d; /* Disabled text color */
    background-color: #f8f9fa; /* Disabled background color */
    border-color: #ddd;
    cursor: not-allowed; /* No pointer on disabled buttons */
}


/* Style for the wrapper around entries and search controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: inline-block; /* Arrange entries and search side by side */
    vertical-align: middle; /* Align vertically in the middle */
    margin-bottom: 15px; /* Space below controls */
}

/* Style for the entries dropdown */
.dataTables_wrapper .dataTables_length select {
    padding: 8px; /* Padding for the dropdown */
    border: 1px solid #ddd; /* Border color */
    border-radius: 4px; /* Rounded corners */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    background-color: #f9f9f9; /* Light background */
    margin-right: 10px; /* Space between dropdown and other elements */
    cursor: pointer;
    transition: border-color 0.3s ease; /* Smooth transition on focus */
}

/* Style for the search input box */
.dataTables_wrapper .dataTables_filter input[type="search"] {
    width: 250px; /* Width of the search box */
    padding: 8px 12px; /* Padding inside search box */
    border: 1px solid #ddd; /* Border color */
    border-radius: 4px; /* Rounded corners */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    background-color: #f9f9f9; /* Light background */
    transition: border-color 0.3s ease; /* Smooth transition on focus */
}

/* Change border color and shadow on search box focus */
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: #007bff; /* Focus border color */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Soft blue shadow */
    outline: none; /* Remove default outline */
}

/* Placeholder styling */
.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
    color: #aaa; /* Placeholder color */
    font-style: italic; /* Placeholder style */
}

/* Style for the label next to entries dropdown */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-weight: bold;
    color: #333; /* Label text color */
    margin-right: 5px; /* Space between label and control */
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}
.dataTables_wrapper .dataTables_filter label {
    width: unset!important;
}
.dataTables_wrapper .dataTables_filter input {
    width: unset!important;
}