Изменить стиль тех же элементов управления по отдельности в JavaFX до CSS

Question

У меня есть макет JavaFX и два TabPanes (tabpane_outer и tabpane_inner) с вложенными вкладками. Я хочу изменить стиль каждой вкладки отдельно. Как этого добиться, если я установлю стиль класса на каждой панели?

Прикрепленный образец. xml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SeparatorMenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.171" styleClass="sample.css" xmlns:fx="http://javafx.com/fxml/1">
  <children>
    <MenuBar VBox.vgrow="NEVER">
      <menus>
        <Menu mnemonicParsing="false" text="File">
          <items>
            <MenuItem mnemonicParsing="false" text="New" />
            <MenuItem mnemonicParsing="false" text="Open…" />
            <Menu mnemonicParsing="false" text="Open Recent" />
            <SeparatorMenuItem mnemonicParsing="false" />
            <MenuItem mnemonicParsing="false" text="Close" />
            <MenuItem mnemonicParsing="false" text="Save" />
            <MenuItem mnemonicParsing="false" text="Save As…" />
            <MenuItem mnemonicParsing="false" text="Revert" />
            <SeparatorMenuItem mnemonicParsing="false" />
            <MenuItem mnemonicParsing="false" text="Preferences…" />
            <SeparatorMenuItem mnemonicParsing="false" />
            <MenuItem mnemonicParsing="false" text="Quit" />
          </items>
        </Menu>
        <Menu mnemonicParsing="false" text="Edit">
          <items>
            <MenuItem mnemonicParsing="false" text="Undo" />
            <MenuItem mnemonicParsing="false" text="Redo" />
            <SeparatorMenuItem mnemonicParsing="false" />
            <MenuItem mnemonicParsing="false" text="Cut" />
            <MenuItem mnemonicParsing="false" text="Copy" />
            <MenuItem mnemonicParsing="false" text="Paste" />
            <MenuItem mnemonicParsing="false" text="Delete" />
            <SeparatorMenuItem mnemonicParsing="false" />
            <MenuItem mnemonicParsing="false" text="Select All" />
            <MenuItem mnemonicParsing="false" text="Unselect All" />
          </items>
        </Menu>
        <Menu mnemonicParsing="false" text="Help">
          <items>
            <MenuItem mnemonicParsing="false" text="About MyHelloApp" />
          </items>
        </Menu>
      </menus>
    </MenuBar>
    <AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
      <children>
            <TabPane layoutX="6.0" layoutY="14.0" side="LEFT" tabClosingPolicy="UNAVAILABLE" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" styleClass="tabpane_outer">
              <tabs>
                <Tab fx:id="tabpane_out" text="External Tab 1">
                  <content>
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="276.0">
                           <children>
                              <TabPane fx:id="tabpane_in" prefHeight="325.0" prefWidth="364.0" side="LEFT" styleClass="tabpane_inner" tabClosingPolicy="UNAVAILABLE" AnchorPane.leftAnchor="0.0">
                                <tabs>
                                  <Tab text="Untitled Internal Tab 1">
                                    <content>
                                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                                    </content>
                                  </Tab>
                                  <Tab text="Untitled Internal Tab 2">
                                    <content>
                                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                                    </content>
                                  </Tab>
                                </tabs>
                              </TabPane>
                           </children>
                        </AnchorPane>
                  </content>
                </Tab>
                <Tab text="External Tab 2">
                  <content>
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                  </content>
                </Tab>
              </tabs>
            </TabPane>
      </children>
    </AnchorPane>
  </children>
</VBox>

и образец. css

.tab-pane .tab-header-area .tab {
    -fx-pref-height: 80;
    -fx-pref-width: 100;
}


.tabpane_inner .tab .tab-label {
    -fx-rotate: 90;
}

Я хочу добиться следующего

Заранее спасибо.