How to customize DataTable custom button collection menu?

I am using the custom buttons for the dataTable located here: https://datatables.net/reference/button/collection

I am using two of the collection buttons, but I need the menus to be a different size. I am having trouble adding in css code that customizes the dropdown menus for the button collections. Here is the code here for the dataTable.

var selectedExcelButtonText = "Excel";
  $('#TableTeamGrid').DataTable( {
buttons: [{ extend: 'collection', text: selectedButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataSortBy' }, buttons: [{ text: 'Alphabetical A to Z', action: function(e, dt, node, config) { dt.order( [2, 'asc'] ).draw(); selectedButtonText = "Alphabetical A to Z "; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>');}}, { text: 'Alphabetical Z to A', action: function(e, dt, node, config) { dt.order( [2, 'desc'] ).draw(); selectedButtonText = "Alphabetical Z to A"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Newest Hire to Oldest', action: function(e, dt, node, config) { dt.order( [9, 'desc'] ).draw(); selectedButtonText = "Newest Hire to Oldest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Oldest Hire to Newest', action: function(e, dt, node, config) { dt.order( [9, 'asc'] ).draw(); selectedButtonText = "Oldest Hire to Newest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Highest to Lowest', action: function(e, dt, node, config) { dt.order( [8, 'desc'] ).draw(); selectedButtonText = "Score Highest to Lowest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Lowest to Highest', action: function(e, dt, node, config) { dt.order( [8, 'asc'] ).draw(); selectedButtonText = "Score Lowest to Highest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } } ]
},
buttons: [{ extend: 'collection', className: 'stylExportMenu', text: selectedExcelButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataExportCollection' }, buttons: [{text:'Export Excel', attr: { id: 'dataExcelBtn' }, action: function(e, dt, node, config) { document.getElementById('btnExcel').click(); } }, {text:'Export CSV', attr: { id: 'dataCSVBtn' }, action: function(e, dt, node, config) { document.getElementById('btnCSV').click(); }}],
});

Select all Open in new window

I tried to remove the information that wasn't relevant to the question, so in my removal of code I might have accidentally taken out a bracket or parenthesis that was needed, but the buttons themselves are working.I just need to style the dt-button-collection menu.

I just need help figuring out how to customize the width of the menu for the second collection #dataExportCollection. It needs to be a smaller menu size than the #dataSortBy collection. I have tried:

.dt-button-collection:nth-child(1) {
     width: 100px !important;
}

Select all Open in new window

and

.dt-button-collection:nth-of-type(1) {
     width: 100px !important;
}

Select all Open in new window

The first one didn't work at all and the second one applied it to both menus. I think because only one menu is ever showing at a time.

I also can't target the button collection like this:

#dataExportCollection > .dt-button-collection {
width: 100px !important;
}

Select all Open in new window

because the .dt-button-collection menu is not inside the same container as the button or inside any type of container that I can assign a different id to than the other collection menu. Does anyone know of a way that I can customize this second menu so it doesn't have the same long width of the first menu?