While trying to center my filter bar, which I managed using layout, I found that there are now two. I tried disabling search, but that just makes both of them disappear. I tried searching for something in my CSS/JS that might be creating the extra one at the top right, but I'm not seeing anything. My code is below, and the second filter bar showed up after adding "layout". May I get some help figuring out how to prevent this second filter? Thank you

<script type="text/javascript">
$(document).ready(function(){
 // Initialize the DataTable
  var table = $('#example').DataTable({
    columns: [
      { className: 'dt-control', orderable: false, data: null, defaultContent: '' },
    ],
    columnDefs: [
      {
        targets: 1,
        width: '5'
      },
      {
        targets: 2,
        width: '45%'
      },
      {
        targets: 3,
        width: '35%'
      },
      {
        targets: 4,
        width: '5'
      },
      // Controls alignment of contents of the cells
      {
        targets: '_all',
        className: 'dt-head-center'
      },
      {
        targets:[1,2,3,4,5],
        className: 'dt-body-left'
      },
      {
        targets: [6,7],
        className: 'dt-body-right'
      },
    ],
    layout: {
        top: {
          'search':{
            placeholder: 'Enter a Detail to filter by'
          }
        }
    },
    "oLanguage": {
      "sSearch": "Criteria Filter"
    },
  });
</script>

<style>
/* Image for the icons for the child-row expand button */
td.dt-control {
  background: url('resources/details_open.png') no-repeat center center;
  cursor: pointer;
}
tr.shown td.dt-control {
  background: url('resources/details_close.png') no-repeat center center;
}
table.dataTable thead tr {
  background-color: orange;
}
/* Table header alignment */
thead, th {
  text-align: center;
}
</style>