1）cmd進入Java 安裝目錄，查詢jfxrt.jar檔案目錄

cd C:\Program Files\Java\jdk1.8.0_131\jre\lib\ext

2）執行

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css

3）樣式檔案

/*
 * Copyright (c) 2009, 2015, Oracle and/or its affiliates. All rights reserved.
 * ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 */

/*
 *  Modena
 *
 *  This is the second generation theme for JavaFX after Caspian.
 */

/*******************************************************************************
 *                                                                             *
 * THEMING INSTRUCTIONS                                                       *
 *                                                                             *
 *******************************************************************************

TODO: Explain here how theming works:

     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar

RESIZING FOR DIFFERENT SCREEN DPI
-------------------------------

When the screen DPI changes Windows will use a different font size by default.
The default is 12px and can change to 15px or 18px depending on user
preference or screen DPI. On Mac the default is 13px and embedded will depend
on hardware. To make UI controls scale and be the right proportions for each of
these font sizes we base the padding (which controls size of control) on the
font size. This is done using the CSS measurement unit of a "em" where
(1em = font size). The default sizes are based on Windows default of 12px, as
a quick reference here are common px sizes in em units on windows.

Windows 12px -> em units    -> Mac 13px      |
----------------------------------------
     1px     -> 0.083333em  -> 1.08px ~ 2px
     2px     -> 0.166667em  -> 2.16px ~ 3px
     3px  = 0.25em
     4px  = 0.333333em
     5px  = 0.416667em
     6px  = 0.5em
     7px  = 0.583333em
     8px  = 0.666667em
     9px  = 0.75em
    10px  = 0.833333em
    11px  = 0.916667em
    12px  = 1em

IMPORTANT: Not all sizes are scaled with em units only padding. All borders and
background insets are still in pixels. Also any padding where it has to match up
is being used to size a border should also be in pixels.

 ******************************************************************************/

/*******************************************************************************
 *                                                                             *
 * CSS Styles for core infrastructure bits.  The .root section provides the    *
 * overall default colors used by the rest of the sections.                    *
 *                                                                             *
 ******************************************************************************/

.root {
    /***************************************************************************
     *                                                                         *
     * The main color palette from which the rest of the colors are derived.   *
     *                                                                         *
     **************************************************************************/

    /* A light grey that is the base color for objects.  Instead of using
     * -fx-base directly, the sections in this file will typically use -fx-color.
     */
    -fx-base: #ececec;

    /* A very light grey used for the background of windows.  See also
     * -fx-text-background-color, which should be used as the -fx-text-fill
     * value for text painted on top of backgrounds colored with -fx-background.
     */
    -fx-background: derive(-fx-base,26.4%);

    /* Used for the inside of text boxes, password boxes, lists, trees, and
     * tables.  See also -fx-text-inner-color, which should be used as the
     * -fx-text-fill value for text painted on top of backgrounds colored
     * with -fx-control-inner-background.
     */
    -fx-control-inner-background: derive(-fx-base,80%);
    /* Version of -fx-control-inner-background for alternative rows */
    -fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);

    /* One of these colors will be chosen based upon a ladder calculation
     * that uses the brightness of a background color.  Instead of using these
     * colors directly as -fx-text-fill values, the sections in this file should
     * use a derived color to match the background in use.  See also:
     *
     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar
     */
    -fx-dark-text-color: black;
    -fx-mid-text-color: #333;
    -fx-light-text-color: white;

    /* A bright blue for highlighting/accenting objects.  For example: selected
     * text; selected items in menus, lists, trees, and tables; progress bars */
    -fx-accent: #0096C9;

    /* Default buttons color, this is similar to accent but more subtle */
    -fx-default-button: #ABD8ED;

    /* A bright blue for the focus indicator of objects. Typically used as the
     * first color in -fx-background-color for the "focused" pseudo-class. Also
     * typically used with insets of -1.4 to provide a glowing effect.
     */
    -fx-focus-color: #039ED3;
    -fx-faint-focus-color: #039ED322;

    /* The color that is used in styling controls. The default value is based
     * on -fx-base, but is changed by pseudoclasses to change the base color.
     * For example, the "hover" pseudoclass will typically set -fx-color to
     * -fx-hover-base (see below) and the "armed" pseudoclass will typically
     * set -fx-color to -fx-pressed-base.
     */
    -fx-color: -fx-base;

    /* Chart Color Palette */
    CHART_COLOR_1: #f3622d;
    CHART_COLOR_2: #fba71b;
    CHART_COLOR_3: #57b757;
    CHART_COLOR_4: #41a9c9;
    CHART_COLOR_5: #4258c9;
    CHART_COLOR_6: #9a42c8;
    CHART_COLOR_7: #c84164;
    CHART_COLOR_8: #888888;
    /* Chart Color Palette Semi-Transparent
     * These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They
     * are exactly the same colors as above just with alpha
     *
     * 20% opacity
     */
    CHART_COLOR_1_TRANS_20: #f3622d33;
    CHART_COLOR_2_TRANS_20: #fba71b33;
    CHART_COLOR_3_TRANS_20: #57b75733;
    CHART_COLOR_4_TRANS_20: #41a9c933;
    CHART_COLOR_5_TRANS_20: #4258c933;
    CHART_COLOR_6_TRANS_20: #9a42c833;
    CHART_COLOR_7_TRANS_20: #c8416433;
    CHART_COLOR_8_TRANS_20: #88888833;
    /* 70% opacity */
    CHART_COLOR_1_TRANS_70: #f3622db3;
    CHART_COLOR_2_TRANS_70: #fba71bb3;
    CHART_COLOR_3_TRANS_70: #57b757b3;
    CHART_COLOR_4_TRANS_70: #41a9c9b3;
    CHART_COLOR_5_TRANS_70: #4258c9b3;
    CHART_COLOR_6_TRANS_70: #9a42c8b3;
    CHART_COLOR_7_TRANS_70: #c84164b3;
    CHART_COLOR_8_TRANS_70: #888888b3;

    /***************************************************************************
     *                                                                         *
     * Colors that are derived from the main color palette.                    *
     *                                                                         *
     **************************************************************************/

    /* A little lighter than -fx-base and used as the -fx-color for the
     * "hovered" pseudoclass state.
     */
    -fx-hover-base: ladder(
        -fx-base,
        derive(-fx-base,20%) 20%,
        derive(-fx-base,30%) 35%,
        derive(-fx-base,40%) 50%
     );

    /* A little darker than -fx-base and used as the -fx-color for the
     * "armed" pseudoclass state.
     *
     * TODO: should this be renamed to -fx-armed-base?
     */
    -fx-pressed-base: derive(-fx-base,-6%);

    /* The color to use for -fx-text-fill when text is to be painted on top of
     * a background filled with the -fx-background color.
     */
    -fx-text-background-color: ladder(
        -fx-background,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* A little darker than -fx-color and used to draw boxes around objects such
     * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
     */
    -fx-box-border: ladder(
        -fx-color,
        black 20%,
        derive(-fx-color,-15%) 30%
    );

    /* Darker than -fx-background and used to draw boxes around text boxes and
     * password boxes.
     */
    -fx-text-box-border: ladder(
        -fx-background,
        black 10%,
        derive(-fx-background, -15%) 30%
    );

    /* Lighter than -fx-background and used to provide a small highlight when
     * needed on top of -fx-background. This is never a shadow in Modena but
     * keep -fx-shadow-highlight-color name to be compatible with Caspian.
     */
    -fx-shadow-highlight-color: ladder(
        -fx-background,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.07) 20%,
        rgba(255,255,255,0.07) 70%,
        rgba(255,255,255,0.7) 90%,
        rgba(255,255,255,0.75) 100%
      );

    /* A gradient that goes from a little darker than -fx-color on the top to
     * even more darker than -fx-color on the bottom.  Typically is the second
     * color in the -fx-background-color list as the small thin border around
     * a control. It is typically the same size as the control (i.e., insets
     * are 0).
     */
    -fx-outer-border: derive(-fx-color,-23%);

    /* A gradient that goes from a bit lighter than -fx-color on the top to
     * a little darker at the bottom.  Typically is the third color in the
     * -fx-background-color list as a thin highlight inside the outer border.
     * Insets are typically 1.
     */
    -fx-inner-border: linear-gradient(to bottom,
                ladder(
                    -fx-color,
                    derive(-fx-color,30%) 0%,
                    derive(-fx-color,20%) 40%,
                    derive(-fx-color,25%) 60%,
                    derive(-fx-color,55%) 80%,
                    derive(-fx-color,55%) 90%,
                    derive(-fx-color,75%) 100%
                ),
                ladder(
                    -fx-color,
                    derive(-fx-color,20%) 0%,
                    derive(-fx-color,10%) 20%,
                    derive(-fx-color,5%) 40%,
                    derive(-fx-color,-2%) 60%,
                    derive(-fx-color,-5%) 100%
                ));
    -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,55%), derive(-fx-color,-5%));
    -fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color,55%), derive(-fx-color,-5%));

    /* A gradient that goes from a little lighter than -fx-color at the top to
     * a little darker than -fx-color at the bottom and is used to fill the
     * body of many controls such as buttons.
     */
    -fx-body-color: linear-gradient(to bottom,
            ladder(
                -fx-color,
                derive(-fx-color,8%) 75%,
                derive(-fx-color,10%) 80%
            ),
            derive(-fx-color,-8%));
    -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
    -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
     */
    -fx-text-base-color: ladder(
        -fx-color,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-control-inner-background.
     */
    -fx-text-inner-color: ladder(
        -fx-control-inner-background,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* The color to use for small mark-like objects such as checks on check
     * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
     */
    -fx-mark-color: ladder(
        -fx-color,
        white 30%,
        derive(-fx-color,-63%) 31%
    );

    /* The small thin light "shadow" for mark-like objects. Typically used in
     * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
    -fx-mark-highlight-color: ladder(
        -fx-color,
        derive(-fx-color,80%) 60%,
        white 70%
    );

    /* Background for items in list like things such as menus, lists, trees,
     * and tables. */
    -fx-selection-bar: -fx-accent;

    /* Background color to use for selection of list cells etc. This is when
     * the control doesn't have focus or the row of a previously selected item. */
    -fx-selection-bar-non-focused: lightgrey;

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-selection-bar.
     *
     * TODO: this can be removed
     */
    -fx-selection-bar-text: -fx-text-background-color;

    /* These are needed for Popup */
    -fx-background-color: inherit;
    -fx-background-radius: inherit;
    -fx-background-insets: inherit;
    -fx-padding: inherit;

    /* The color to use in ListView/TreeView/TableView to indicate hover. */
    -fx-cell-hover-color: #cce3f4;

    /** Focus line for keyboard focus traversal on cell based controls */
    -fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);

    /* The colors to use in Pagination */
    -fx-page-bullet-border: #acacac;
    -fx-page-indicator-hover-border: #accee5;

    -fx-focused-text-base-color : ladder(
        -fx-selection-bar,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%
    );
    -fx-focused-mark-color : -fx-focused-text-base-color ;

    /***************************************************************************
     *                                                                         *
     * Set the default background color for the scene                          *
     *                                                                         *
     **************************************************************************/

    -fx-background-color: -fx-background;
}

/* Make popups transparent */
.root.popup {
    -fx-background-color: transparent;
}

/*******************************************************************************
 *                                                                             *
 * Common Styles                                                               *
 *                                                                             *
 * These are styles that give a standard look to a whole range of controls     *
 *                                                                             *
 ******************************************************************************/

/* ====   TEXT NODES IN CONTROLS   ========================================== */

.text {
    /* This adjusts text alignment within the bounds of text nodes so that
       the text is always vertically centered within the bounds. Based on
       the cap height of the text. */
    -fx-bounds-type: logical_vertical_center;
    /* Enable LCD text rendering */
    -fx-font-smoothing-type: lcd;
}

/* ====   BUTTON LIKE THINGS   ============================================== */

.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base:editable > .arrow-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}
.menu-button > .label {
    -fx-alignment: CENTER_LEFT;
}
.button:hover,
.toggle-button:hover,
.radio-button:hover > .radio,
.check-box:hover > .box,
.menu-button:hover,
.split-menu-button > .label:hover,
.split-menu-button > .arrow-button:hover,
.slider .thumb:hover,
.scroll-bar > .thumb:hover,
.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover,
.choice-box:hover,
.color-picker.split-button > .arrow-button:hover,
.color-picker.split-button > .color-picker-label:hover,
.combo-box-base:hover,
.combo-box-base:editable > .arrow-button:hover,
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
    -fx-color: -fx-hover-base;
}
.button:armed,
.toggle-button:armed,
.radio-button:armed > .radio,
.check-box:armed .box,
.menu-button:armed,
.split-menu-button:armed > .label,
.split-menu-button > .arrow-button:pressed,
.split-menu-button:showing > .arrow-button,
.slider .thumb:pressed,
.scroll-bar > .thumb:pressed,
.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed,
.choice-box:showing,
.combo-box-base:showing,
.combo-box-base:editable:showing > .arrow-button,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
    -fx-color: -fx-pressed-base;
}
.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
    -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
    -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
    -fx-background-radius: 3, 2, 1, 4, 1;
}

/* ====   DISABLED THINGS   ================================================= */

.label:disabled,
.button:disabled,
.toggle-button:disabled,
.radio-button:disabled,
.check-box:disabled,
.hyperlink:disabled,
.menu-button:disabled,
.split-menu-button:disabled,
.slider:disabled,
.scroll-bar:disabled,
.scroll-pane:disabled,
.progress-bar:disabled,
.progress-indicator:disabled,
.text-input:disabled,
.choice-box:disabled,
.combo-box-base:disabled,
.date-cell:disabled > *, /* This is set on children so border is not affected. */
.list-view:disabled,
.tree-view:disabled,
.table-view:disabled,
.tree-table-view:disabled,
.tab-pane:disabled,
.titled-pane:disabled > .title,
.accordion:disabled > .titled-pane > .title,
.tab-pane > .tab-header-area > .headers-region > .tab:disabled,
.menu:disabled,
.menu-item:disabled > .label,
.menu-item:disabled,
.list-cell:filled:selected:focused:disabled,
.list-cell:filled:selected:disabled,
.tree-cell:filled:selected:focused:disabled,
.tree-cell:filled:selected:disabled,
.tree-cell > .tree-disclosure-node:disabled,
.tree-table-row-cell > .tree-disclosure-node:disabled,
.table-row-cell:selected:disabled,
.tree-table-row-cell:selected:disabled,
.table-cell:selected:disabled,
.tree-table-cell:selected:disabled,
.spinner:disabled {
    -fx-opacity: 0.4;
}

/* ====   MNEMONIC THINGS   ================================================= */

.mnemonic-underline {
    -fx-stroke: transparent;
}

.titled-pane:show-mnemonics > .mnemonic-underline,
.label:show-mnemonics > .mnemonic-underline,
.context-menu:show-mnemonics > .mnemonic-underline,
.menu:show-mnemonics > .mnemonic-underline,
.menu-bar:show-mnemonics > .mnemonic-underline,
.menu-item:show-mnemonics > .mnemonic-underline,
.button:show-mnemonics > .mnemonic-underline,
.toggle-button:show-mnemonics > .mnemonic-underline,
.radio-button:show-mnemonics > .mnemonic-underline,
.check-box:show-mnemonics > .mnemonic-underline,
.hyperlink:show-mnemonics > .mnemonic-underline,
.split-menu-button:show-mnemonics > .mnemonic-underline,
.menu-button:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-base-color;
}

/* ====   MARKS   =========================================================== */

.radio-button:selected > .radio > .dot,
.check-box:selected > .box > .mark,
.check-box:indeterminate  > .box > .mark {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
}

/* ====   ARROWS   ========================================================== */

.menu-button > .arrow-button > .arrow,
.split-menu-button > .arrow-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.25em;
    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}
.choice-box > .open-button > .arrow,
.menu-button:openvertically > .arrow-button > .arrow,
.split-menu-button:openvertically > .arrow-button > .arrow,
.combo-box-base > .arrow-button > .arrow,
.web-view .form-select-button .arrow,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow  {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

/* ====   CHOICE BOX LIKE THINGS   ========================================== */

.choice-box,
.menu-button,
.combo-box-base {
    -fx-padding: 0;
}
.choice-box > .label,
.menu-button > .label,
.color-picker > .label {
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-text-fill: -fx-text-base-color;
}
.choice-box > .open-button,
.menu-button > .arrow-button {
    -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
}

/* ====   BOX LIKE THINGS   ================================================= */

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view,
.html-editor {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}
.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:focused,
.tree-table-view:focused,
.html-editor:contains-focus {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: -1.4, -0.3, 1;
    -fx-background-radius: 2, 0, 0;
}
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane {
    -fx-background-color: -fx-box-border, -fx-background;
}
.scroll-pane:focused,
.split-pane:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background;
}

/*******************************************************************************
 *                                                                             *
 * Label                                                                       *
 *                                                                             *
 ******************************************************************************/

.label {
    -fx-text-fill: -fx-text-background-color;
}

/*******************************************************************************
 *                                                                             *
 * Button & ToggleButton                                                       *
 *                                                                             *
 ******************************************************************************/

/* ====   DEFAULT   ========================================================= */

.button:default {
    -fx-base: -fx-default-button;
}

/* ====   WEB BUTTONS   ===================================================== */

.web-view .form-select-button {
    -fx-background-radius: 2, 2, 1, 0;
    -fx-background-insets: 2 2 1 2, 2, 3, 4;
}

/* ====   PILL BUTTONS   ==================================================== */

.button.left-pill,
.toggle-button.left-pill {
    -fx-background-radius: 3 0 0 3, 3 0 0 3, 2 0 0 2, 1 0 0 1;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.75em; /* 4 8 4 9 */
}
.button.center-pill,
.toggle-button.center-pill {
    -fx-background-radius: 0;
    -fx-background-insets: 0 0 -1 0, 0 0 0 0, 1 1 1 0, 2 2 2 1 ;
}
.button.right-pill,
.toggle-button.right-pill {
    -fx-background-radius: 0 3 3 0, 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 1 ;
}
.button.left-pill:focused,
.toggle-button.left-pill:focused {
    -fx-background-insets: -0.2 0 -0.2 -0.2, 1, 2, -1.4 0 -1.4 -1.4, 2.6;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1, 4 0 0 4, 1 0 0 1;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
    -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
    -fx-background-radius: 0, 0, 0, 0, 0;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
    -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, 2 2 2 1, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0, 0 4 4 0, 0 1 1 0;
}
.toggle-button:selected.left-pill:focused {
    -fx-background-insets: -0.2 0 -0.2 -0.2, 1, -1.4 0 -1.4 -1.4, 2.6;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 4 0 0 4, 0;
}
.toggle-button:selected.center-pill:focused {
    -fx-background-insets: -0.2 0 -0.2 -1, 1 1 1 0, -1.4 0 -1.4 -1, 2.6 2.6 2.6 1.6;
    -fx-background-radius: 0, 0, 0, 0;
}
.toggle-button:selected.right-pill:focused {
    -fx-background-insets: -0.2 -0.2 -0.2 -1, 1 1 1 0, -1.4 -1.4 -1.4 -1, 2.6 2.6 2.6 1.6;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 4 4 0, 0;
}

/* ====   SELECTED TOGGLE   ================================================= */

.toggle-button:selected {
        -fx-background-color:
            -fx-shadow-highlight-color,
            linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
            linear-gradient(to bottom,
                    derive(-fx-color, -22%) 0%,
                    derive(-fx-color, -13%) 20%,
                    derive(-fx-color, -11%) 50%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
}
.toggle-button:selected:focused {
    -fx-background-color:
        -fx-focus-color,
        linear-gradient(to bottom,
            derive(-fx-color, -22%) 0%,
            derive(-fx-color, -13%) 20%,
            derive(-fx-color, -11%) 50%),
        -fx-faint-focus-color,
        linear-gradient(to bottom,
            derive(-fx-color, -22%) 0%,
            derive(-fx-color, -13%) 20%,
            derive(-fx-color, -11%) 50%);
    -fx-background-insets: -0.2, 1, -1.4, 2.6;
    -fx-background-radius: 3, 2, 4, 0;
}

/*******************************************************************************
 *                                                                             *
 * RadioButton                                                                 *
 *                                                                             *
 ******************************************************************************/

.radio-button {
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
    -fx-text-fill: -fx-text-background-color;
}
.radio-button > .radio,
.radio-button:focused > .radio  {
   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
   -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */
}
.radio-button > .radio > .dot {
   -fx-background-color: transparent;
   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
   -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */
}

/*******************************************************************************
 *                                                                             *
 * CheckBox                                                                    *
 *                                                                             *
 ******************************************************************************/

.check-box {
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
    -fx-text-fill: -fx-text-background-color;
}
.check-box > .box {
    -fx-background-radius: 3, 2, 1;
    -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
}
.check-box > .box > .mark {
    -fx-background-color: null;
    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
    -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}
.check-box:indeterminate > .box {
    -fx-padding: 0;
}
.check-box:indeterminate  > .box > .mark {
    -fx-shape: "M0,0H10V2H0Z";
    -fx-scale-shape: false;
    -fx-padding: 0.666667em; /* 16x16 = 8+8 */
}

/*******************************************************************************
 *                                                                             *
 * Hyperlink                                                                   *
 *                                                                             *
 ******************************************************************************/

.hyperlink {
    -fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */
    -fx-cursor: hand;
    -fx-content-display: LEFT;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
}
.hyperlink,
.hyperlink:hover,
.hyperlink:hover:visited {
    -fx-text-fill: -fx-accent;
}
.hyperlink:armed,
.hyperlink:visited,
.hyperlink:hover:armed {
    -fx-text-fill: -fx-text-background-color;
}
.hyperlink:hover,
.hyperlink:visited,
.hyperlink:hover:visited {
    -fx-underline: true;
}
.hyperlink:visited:armed {
    -fx-underline: false;
}
.hyperlink:focused {
    -fx-border-color: -fx-focus-color;
    -fx-border-style: segments(0.166667em, 0.166667em);
    -fx-border-width: 1px;
}
.hyperlink:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

/* Fix for RT-37971 */
.cell:selected .hyperlink,
.cell:selected .hyperlink:hover,
.cell:selected .hyperlink:hover:visited {
    -fx-text-fill: -fx-text-background-color;
}

/*******************************************************************************
 *                                                                             *
 * SplitMenuButton                                                             *
 *                                                                             *
 ******************************************************************************/

.split-menu-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-radius: 3, 3;
    -fx-padding: 0;
}
.split-menu-button > .label {
    -fx-text-fill: -fx-text-base-color;
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 0 1 1, 2 1 2 2;
    -fx-background-radius: 2 0 0 2, 1 0 0 1;
    -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
}
.split-menu-button > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1, 2;
    -fx-background-radius: 0 2 2 0, 0 1 1 0;
    -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}
.split-menu-button:focused {
    -fx-background-color: -fx-focus-color;
    -fx-background-insets: -0.2;
    -fx-background-radius: 3;
}
.split-menu-button:focused > .label {
    -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
    -fx-background-insets: 1 0 1 1, 2 1 2 2, -1.4 0 -1.4 -1.4, 2.6 1.6 2.6 2.6;
    -fx-background-radius: 2 0 0 2, 1 0 0 1, 4 0 0 4, 0;
}
.split-menu-button:focused > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
    -fx-background-insets: 1, 2, -1.4, 2.6;
    -fx-background-radius: 0 2 2 0, 0 1 1 0, 0 4 4 0, 0;
}

/*******************************************************************************
 *                                                                             *
 * ToolBar                                                                     *
 *                                                                             *
 ******************************************************************************/

.tool-bar:vertical { /* left */
    -fx-background-color:
        -fx-outer-border,
        linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
    -fx-background-insets: 0, 0 0 0 1;
    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
    -fx-spacing: 0.333em; /* 4 */
    -fx-alignment: TOP_LEFT;
}
.tool-bar { /* top */
    TOP-COLOR: ladder(
        -fx-base,
        derive(-fx-base,0%) 0%,
        derive(-fx-base,46%) 100%
    );
    -fx-background-color:
        linear-gradient(to bottom, derive(TOP-COLOR,25%) 0%, -fx-outer-border 90%),
        linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
    -fx-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6  5 6 */
    -fx-spacing: 0.333em; /* 4 */
    -fx-alignment: CENTER_LEFT;
}
.tool-bar:vertical.right {
    -fx-background-insets: 0, 0 1 0 0;
}
.tool-bar.bottom {
    -fx-background-color:
        -fx-outer-border,
        derive(TOP-COLOR,25%),
        linear-gradient(to bottom, TOP-COLOR 2%, derive(-fx-base,-2.1%) 95%);
    -fx-background-insets: 0, 1 0 0 0, 2 0 0 0;
}
.tool-bar > .container > .separator {
    -fx-orientation: vertical;
}
.tool-bar:vertical > .container > .separator {
    -fx-orientation: horizontal;
}
.tool-bar-overflow-button {
    -fx-padding: 0 0.75em 0 0 ;
}
.tool-bar:vertical > .tool-bar-overflow-button {
    -fx-padding: 0 0 0.75em 0 ;
}
.tool-bar-overflow-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
    -fx-shape: "M337.273,297.622l-0.016,1.069l2.724,2.639l-2.723,2.628l0.015,1.048h0.881l3.81-3.685l-3.788-3.699H337.273z M343.783,297.622h-0.902l-0.015,1.069l2.724,2.639l-2.724,2.628l0.015,1.048h0.882l3.809-3.685L343.783,297.622z" ;
}

.tool-bar-overflow-button:focused > .arrow {
    -fx-background-color: -fx-mark-highlight-color, derive(-fx-accent, -15%);
    -fx-background-insets: 1 0 -1 0, 0;
}

.tool-bar-overflow-button:hover > .arrow {
    -fx-background-color: -fx-mark-highlight-color, derive(-fx-hover-base, -35%);
    -fx-background-insets: 1 0 -1 0, 0;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider .thumb {
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 1.0em; /* makes sure this remains circular */
    -fx-padding: 0.583333em;  /* 7 */
    -fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
}
.slider:focused .thumb {
    -fx-background-radius: 1.0em; /* makes sure this remains circular */
}
.slider .track {
      -fx-background-color:
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom,
            derive(-fx-control-inner-background, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
    -fx-padding: 0.25em; /* 3 */
}
.slider:vertical .track {
    -fx-background-color:
          -fx-shadow-highlight-color,
          -fx-text-box-border,
          linear-gradient(to right,
            derive(-fx-control-inner-background, -9%),
            -fx-control-inner-background,
            derive(-fx-control-inner-background, -9%)
          );
}
.slider .axis {
    -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
    -fx-tick-length: 5px;
    -fx-minor-tick-length: 3px;
    -fx-border-color: null;
}

/*******************************************************************************
 *                                                                             *
 * ScrollBar                                                                   *
 *                                                                             *
 ******************************************************************************/

.scroll-bar:horizontal {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 0 1 0 1;
}
.scroll-bar:focused {
    -fx-background-color:
        -fx-focus-color,
        linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
        -fx-faint-focus-color,
        linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: -0.2, 1, -1.4, 2.6;
}
.scroll-bar:vertical:focused {
    -fx-background-color:
        -fx-focus-color,
        linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%)),
        -fx-faint-focus-color,
        linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
}
.scroll-bar > .thumb {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    /*-fx-background-insets: 1, 2, 3;*/
    -fx-background-insets: 2, 3, 4;
    /*-fx-background-radius: 0.416667em, 0.333333em, 0.25em; *//* 5, 4,3 */
    -fx-background-radius: 3, 2, 1;
}
.scroll-bar:vertical > .thumb {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color-to-right;
}
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-color: transparent;
    -fx-padding: 0.25em; /* 3px */
}
.scroll-bar:horizontal > .increment-button,
.scroll-bar:horizontal > .decrement-button {
    -fx-background-insets: 2 1 2 1, 3 2 3 2, 4 3 4 3;
}
.scroll-bar:vertical > .increment-button,
.scroll-bar:vertical > .decrement-button {
    -fx-background-insets: 1 2 1 2, 2 3 2 3, 3 4 3 4;
}
.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-45%);
}
.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-50%);
}
.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
    -fx-background-color: -fx-mark-highlight-color,derive(-fx-base,-55%);
}
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
    -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
    -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
    /*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */
    -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
    -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
    /*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
    -fx-shape: "M1.929,4L0.5,3.998L4.5,1l4,2.998L7.07,4L4.5,2.024L1.929,4z";
    -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
    /*-fx-background-insets: 2 0 -2 0, 0;*/
}
.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
    -fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z";
    -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
    /*-fx-background-insets: 2 0 -2 0, 0;*/
}

/*******************************************************************************
 *                                                                             *
 * ScrollPane                                                                  *
 *                                                                             *
 ******************************************************************************/
.scroll-pane > .viewport {
    -fx-background-color: -fx-background;
}
.scroll-pane > .scroll-bar:horizontal {
    -fx-background-insets: 0 1 1 1, 1;
    -fx-padding: 0 1 0 1;
}
.scroll-pane > .scroll-bar:horizontal > .increment-button,
.scroll-pane > .scroll-bar:horizontal > .decrement-button {
    -fx-padding: 0.166667em 0.25em 0.25em  0.25em; /* 2 3 3 3 */
}
.scroll-pane > .scroll-bar:vertical > .increment-button,
.scroll-pane > .scroll-bar:vertical > .decrement-button {
    -fx-padding: 0.25em 0.25em 0.25em 0.166667em; /* 3 3 3 2 */
}
.scroll-pane > .scroll-bar:vertical {
    -fx-background-insets: 1 1 1 0, 1;
    -fx-padding: 1 0 1 0;
}
.scroll-pane > .corner {
    -fx-background-color: derive(-fx-base,-1%);
    -fx-background-insets: 0 1 1 0;
}
/* new styleclass for edge to edge scrollpanes that don't want to draw a border */
.scroll-pane.edge-to-edge,
.tab-pane > * > .scroll-pane {
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.scroll-pane.edge-to-edge > .scroll-bar,
.tab-pane > * > .scroll-pane > .scroll-bar,
.titled-pane > .content > .scroll-pane > .scroll-bar {
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.scroll-pane.edge-to-edge > .scroll-bar > .increment-button,
.scroll-pane.edge-to-edge > .scroll-bar > .decrement-button,
.tab-pane > * > .scroll-pane > .scroll-bar > .increment-button,
.tab-pane > * > .scroll-pane > .scroll-bar > .decrement-button,
.titled-pane > .content > .scroll-pane > .scroll-bar > .increment-button,
.titled-pane > .content > .scroll-pane > .scroll-bar > .decrement-button {
    -fx-padding: 0.25em; /* 3px */
}

/*******************************************************************************
 *                                                                             *
 * Separator                                                                   *
 *                                                                             *
 ******************************************************************************/

.separator:horizontal .line {
    -fx-border-color: -fx-text-box-border transparent transparent transparent,
        -fx-shadow-highlight-color transparent transparent transparent;
    -fx-border-insets: 0, 1 0 0 0;
}
.separator:vertical .line {
    -fx-border-color: transparent transparent transparent -fx-shadow-highlight-color,
        transparent transparent transparent -fx-text-box-border;
    -fx-border-width: 3, 1;
    -fx-border-insets: 0, 0 0 0 1;
}

/*******************************************************************************
 *                                                                             *
 * ProgressBar                                                                 *
 *                                                                             *
 ******************************************************************************/

.progress-bar {
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    /*-fx-background-radius: 0.583em; *//* 7 */
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
      -fx-background-color:
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom,
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

/*******************************************************************************
 *                                                                             *
 * ProgressIndicator                                                           *
 *                                                                             *
 ******************************************************************************/

.progress-indicator {
    -fx-indeterminate-segment-count: 12;
    -fx-spin-enabled: true;
}
.progress-indicator > .determinate-indicator > .indicator {
    -fx-background-color: -fx-box-border,
        radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%),
        -fx-control-inner-background;
    -fx-background-insets: 0, 1, 5 2 1 2;
    -fx-padding: 0.166667em; /* 2px */
}
.progress-indicator > .determinate-indicator > .progress {
    -fx-background-color: -fx-accent;
    -fx-padding: 0.083333em; /* 1px */
}
.progress-indicator > .determinate-indicator > .tick {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-padding: 0.666667em; /* 8 */
    -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}
.progress-indicator > .percentage {
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
    -fx-fill: -fx-text-background-color;
}
.progress-indicator:indeterminate > .spinner {
    /** Applying to undo styling from .spinner, reported in RT-37965 */
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}
.progress-indicator:indeterminate .segment {
    -fx-background-color: -fx-accent;
}
.progress-indicator:indeterminate .segment0 {
    -fx-shape:"M41.98 14.74 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment1 {
    -fx-shape:"M33.75 6.51 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment2 {
    -fx-shape:"M22.49 3.5 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment3 {
    -fx-shape:"M11.24 6.51 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment4 {
    -fx-shape:"M3.01 14.74 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment5 {
    -fx-shape:"M0.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment6 {
    -fx-shape:"M3.01 37.25 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment7 {
    -fx-shape:"M11.25 45.48 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment8 {
    -fx-shape:"M22.5 48.5 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment9 {
    -fx-shape:"M33.75 45.48 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment10 {
    -fx-shape:"M41.98 37.25 a3.5,3.5 0 1,1 0,1 Z";
}
.progress-indicator:indeterminate .segment11 {
     -fx-shape:"M45.0 26.0 a3.5,3.5 0 1,1 0,1 Z";
}

/*******************************************************************************
 *                                                                             *
 * Text COMMON                                                                 *
 *                                                                             *
 ******************************************************************************/

.text-input {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.text-input:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}

/*******************************************************************************
 *                                                                             *
 * TextArea                                                                    *
 *                                                                             *
 ******************************************************************************/

.text-area {
    -fx-padding: 0;
    -fx-cursor: default;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        derive(-fx-base,-1%);
}
.text-area > .scroll-pane {
    -fx-background-color: null;
}
.text-area > .scroll-pane > .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;
}
.text-area > .scroll-pane > .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;
}
.text-area > .scroll-pane > .corner {
    -fx-background-radius: 0 0 2 0;
}
.text-area .content {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-radius: 2;
}
.text-area:focused .content {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 0, 2;
    -fx-background-radius: 2, 1, 0;
}

/*******************************************************************************
 *                                                                             *
 * HTML Editor                                                                 *
 *                                                                             *
 ******************************************************************************/

.html-editor-foreground {
    -fx-color-label-visible: false;
    -fx-color-rect-x: 1;
    -fx-color-rect-y: 1;
    -fx-color-rect-width: 4;
    -fx-color-rect-height: 3;
    -fx-graphic: url("HTMLEditor-Text-Color.png");
}
.html-editor-background {
    -fx-color-label-visible: false;
    -fx-color-rect-x: 1;
    -fx-color-rect-y: 1;
    -fx-color-rect-width: 4;
    -fx-color-rect-height: 3;
    -fx-graphic: url("HTMLEditor-Background-Color.png");
}
.color-picker.html-editor-foreground > .color-picker-label > .picker-color > .picker-color-rect,
.color-picker.html-editor-background > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: null;
}
.html-editor .button ,
.html-editor .toggle-button {
    -fx-padding: 0.333333em 0.416667em 0.333333em 0.416667em; /* 4 5 4 5 */
}
.html-editor-cut {
    -fx-graphic: url("HTMLEditor-Cut.png");
}
.html-editor-copy {
    -fx-graphic: url("HTMLEditor-Copy.png");
}
.html-editor-paste {
    -fx-graphic: url("HTMLEditor-Paste.png");
}
.html-editor-align-left {
    -fx-graphic: url("HTMLEditor-Left.png");
}
.html-editor-align-center {
    -fx-graphic: url("HTMLEditor-Center.png");
}
.html-editor-align-right {
    -fx-graphic: url("HTMLEditor-Right.png");
}
.html-editor-align-justify {
    -fx-graphic: url("HTMLEditor-Justify.png");
}
.html-editor-outdent {
    -fx-graphic: url("HTMLEditor-Outdent.png");
}
.html-editor-outdent:dir(rtl) {
    -fx-graphic: url("HTMLEditor-Outdent-rtl.png");
}
.html-editor-indent {
    -fx-graphic: url("HTMLEditor-Indent.png");
}
.html-editor-indent:dir(rtl) {
    -fx-graphic: url("HTMLEditor-Indent-rtl.png");
}
.html-editor-bullets {
    -fx-graphic: url("HTMLEditor-Bullets.png");
}
.html-editor-bullets:dir(rtl) {
    -fx-graphic: url("HTMLEditor-Bullets-rtl.png");
}
.html-editor-numbers {
    -fx-graphic: url("HTMLEditor-Numbered.png");
}
.html-editor-numbers:dir(rtl) {
    -fx-graphic: url("HTMLEditor-Numbered-rtl.png");
}
.html-editor-bold {
    -fx-graphic: url("HTMLEditor-Bold.png");
}
.html-editor-italic {
    -fx-graphic: url("HTMLEditor-Italic.png");
}
.html-editor-underline {
    -fx-graphic: url("HTMLEditor-Underline.png");
}
.html-editor-strike {
    -fx-graphic: url("HTMLEditor-Strikethrough.png");
}
.html-editor-hr {
    -fx-graphic: url("HTMLEditor-Break.png");
}

/*******************************************************************************
 *                                                                             *
 * PopupMenu                                                                   *
 *                                                                             *
 ******************************************************************************/

.context-menu {
    -fx-background-color:
        linear-gradient(to bottom,
            derive(-fx-color,-17%),
            derive(-fx-color,-30%)
        ),
        -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 0.333333em 0.083333em 0.333333em 0.083333em; /* 4 1 8 1 */
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.context-menu .separator:horizontal .line {
    -fx-border-color: -fx-box-border transparent transparent transparent;
    -fx-border-insets: 1 0 0 0;
}
.context-menu > .scroll-arrow {
    -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
    -fx-background-color: transparent;
}
.context-menu > .scroll-arrow:hover {
    -fx-background: -fx-selection-bar;
    -fx-background-color: -fx-background;
    -fx-text-fill: -fx-text-background-color;
}
.context-menu:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

/*******************************************************************************
 *                                                                             *
 * Menu                                                                        *
 *                                                                             *
 ******************************************************************************/

.menu {
    -fx-background-color: transparent;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}
.menu:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}
.menu > .right-container > .arrow {
    -fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M0,-4L4,0L0,4Z";
    -fx-scale-shape: false;
}
.menu:focused > .right-container > .arrow {
    -fx-background-color: -fx-focused-mark-color;
}
.menu-up-arrow {
    -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
    -fx-background-color: derive(-fx-color,-2%);
    -fx-shape: "M0 1 L1 1 L.5 0 Z";
    -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
}
.menu-down-arrow {
    -fx-background-color: derive(-fx-color,-2%);
    -fx-padding: 0.666667em 0.416667em 0.0em 0.416667em;  /* 8 5 0 5 */
    -fx-shape: "M0 0 L1 0 L.5 1 Z";
    -fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 1 );
}


/*******************************************************************************
 *                                                                             *
 * MenuBar                                                                     *
 *                                                                             *
 ******************************************************************************/

.menu-bar {
    -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
    -fx-spacing: 0.166667em; /* 2 */
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
        linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
    -fx-background-radius: 0, 0 ;
}
/* Show nothing for background of normal menu button in a menu bar */
.menu-bar > .container > .menu-button {
    -fx-background-radius: 0;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}
/* Change padding of menu buttons when in menu bar */
.menu-bar > .container > .menu-button > .label {
    -fx-padding: 0;
}
/* Hide the down arrow for a menu placed in a menubar */
.menu-bar > .container > .menu-button > .arrow-button > .arrow {
    -fx-padding: 0.167em 0 0.250em 0; /* 2 0 3 0 */
    -fx-background-color: transparent;
    -fx-shape: null;
}
.menu-bar > .container > .menu > .arrow-button {
    -fx-padding: 0.500em 0 0.500em 0; /* 6 0 6 0 */
}
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
    -fx-background: -fx-selection-bar;
    -fx-background-color: -fx-background;
}
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing  > .label {
    -fx-text-fill: -fx-text-background-color;
}
.menu-bar:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

/*******************************************************************************
 *                                                                             *
 * MenuItem                                                                    *
 *                                                                             *
 ******************************************************************************/

.menu-item {
    -fx-background-color: transparent;
    -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em;  /* 4 5 4 5 */
}
.menu-item > .left-container {
    -fx-padding: 0.458em 0.791em 0.458em 0.458em;
}
.menu-item > .graphic-container {
    -fx-padding: 0em 0.333em 0em 0em;
}
.menu-item >.label {
    -fx-padding: 0em 0.5em 0em 0em;
    -fx-text-fill: -fx-text-base-color;
}
.menu-item:focused {
     -fx-background: -fx-selection-bar;
     -fx-background-color: -fx-background;
     -fx-text-fill:  -fx-text-background-color;
}
.menu-item:focused > .label {
    -fx-text-fill: -fx-focused-text-base-color;
}
.menu-item > .right-container {
    -fx-padding: 0em 0em 0em 0.5em;
}
.menu-item:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}
.radio-menu-item:checked > .left-container > .radio {
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
    -fx-scale-shape: false;
}
.radio-menu-item:focused:checked > .left-container > .radio {
    -fx-background-color: -fx-focused-mark-color;
}
.check-menu-item:checked > .left-container > .check {
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
    -fx-scale-shape: false;
}
.check-menu-item:focused:checked > .left-container > .check {
    -fx-background-color: -fx-focused-mark-color;
}
/*******************************************************************************
 *                                                                             *
 * ChoiceBox                                                                   *
 *                                                                             *
 ******************************************************************************/

/*.choice-box > .open-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  2 3.5 2 3.5
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}*/
.choice-box > .context-menu {
    -fx-background-radius: 6, 5, 4;
}

/*******************************************************************************
 *                                                                             *
 * TabPane                                                                     *
 *                                                                             *
 ******************************************************************************/

.tab-pane {
    -fx-tab-min-height: 1.8333em; /* 22 */
    -fx-tab-max-height: 1.8333em; /* 22 */
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}
.tab-pane > .tab-header-area > .headers-region > .tab:top {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:right {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:bottom {
    -fx-background-color: -fx-outer-border, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab-pane > .tab-header-area > .headers-region > .tab:left {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-color: -fx-hover-base;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-background;
    -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
    -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
}
.tab-pane > .tab-header-area > .tab-header-bac