Customizing Tabs In TabPane

I'm doing a little practice and working with designing an interface that will consists of tabs, each containing its own set of data charts. I've done a lot of research online and for the most part its been very helpful; however, when its comes to modifying and customizing tabs, I am running into some issues. Firstly, I want to change the tab background color to match the background color of the tab content, so essentially, each tab will have it own custom color. I've setup a CSS file to keep all of my custom styles organized. I setup the following in my .css file:

Java FX Code:

.root {
    -fx-font-family: "Charter";
    -fx-font-size: 15;
}

.solartab .tab:selected  {
    -fx-background-color: #FFB84D;
}

.tab:selected .tab-label {
    -fx-font-weight: bold;
}

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #BDBDBD;
}

Within my JavaFX code :

Java FX Code:

Tab solarTab = new Tab("Solar Panel");       
        BorderPane solarPane = new BorderPane();
        //Solar Bar Chart
        CategoryAxis xHoursAxis = new CategoryAxis();
        xHoursAxis.setLabel("Hours");
        xHoursAxis.setCategories(FXCollections.<String>observableArrayList(time));
        NumberAxis yPowerAxis = new NumberAxis();
        yPowerAxis.setAutoRanging(true);
        yPowerAxis.setLabel("Power");
        BarChart solarChart = new BarChart(xHoursAxis, yPowerAxis);
        solarPane.setCenter(solarChart);
        solarTab.setStyle("-fx-background-color: #FFB84D");
        solarTab.setContent(solarPane);

If I use the .setStyle() (above), the tab contains the custom color, all the time, but I would prefer it to change color only when selected as the .css file represents. When I try to use the custom tab from the css file, the code does not work and remains the default color.

Java FX Code:

solarTab.getStyleClass().add("solartab");

Also, I've tried to set the background for each tab differently, but it too remains the default color (grey).