JavaFX - Add space between buttons via CSS

I am trying to add some space between buttons in JavaFX using CSS. I know that separator element can do that, but I prefer to use it to separate logical groups of buttons.

I have tried:

<HBox id="buttonPanel" prefHeight="400.0" prefWidth="600.0" styleClass="buttonPanel" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.chart.buttons.ButtonPanelController">
    <stylesheets>
        <URL value="@buttonpanel.css"/>
    </stylesheets>

    <Button text="INSTRUMENT"/>
    <Separator/>        
    <Button text="F"/>
    <Button text="T"/>
    <Button text="SR"/>
    <Separator/>

</HBox>

.buttonPanel .button {

    -fx-spacing: 5;
    -fx-border-width: 0;
    -fx-padding: 1 2 1 2;   /* Top Right Bottom Left */

}

But I do not get any result:

If you give an ID then try #

#buttonPanel {
  -fx-spacing: 5;
  -fx-border-width: 0;
  -fx-padding: 1 2 1 2;   /* Top Right Bottom Left */
}