#table-controls-top,
#table-controls-bottom {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #dddddd;
    padding: 10px 0;
    margin-bottom: 10px;
    margin-left: 1px;
    z-index: 100;
    width: 100%;
}

/* Hide default DataTables wrapper controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    display: none !important;
}

/* Only table scrolls */
.table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Ensure table keeps borders and styling */
#myTable {

    border-collapse: collapse !important;
    width: 100% !important;
   
}

#myTable th,
#myTable td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
}

#myTable thead th {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
}

#myTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#myTable tbody tr:hover {
    background-color: #f0f0f0;
}

/* Mobile fixes */
@media (max-width: 768px) {
    #manual-search {
        width: 100%;
        margin-top: 10px;
    }
    
    #manual-length {
        width: auto;
    }
    
    #table-controls-top .row > div,
    #table-controls-bottom .row > div {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
}