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

/*
 * Copyright (c) 2009, 2011, Oracle and/or its affiliates. All rights reserved. 
 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. 
 *  
 * This code is free software; you can redistribute it and/or modify it 
 * under the terms of the GNU General Public License version 2 only, as 
 * published by the Free Software Foundation.  Oracle designates this 
 * particular file as subject to the "Classpath" exception as provided 
 * by Oracle in the LICENSE file that accompanied this code. 
 *  
 * This code is distributed in the hope that it will be useful, but WITHOUT 
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or 
 * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License 
 * version 2 for more details (a copy is included in the LICENSE file that 
 * accompanied this code). 
 *  
 * You should have received a copy of the GNU General Public License version 
 * 2 along with this work; if not, write to the Free Software Foundation, 
 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. 
 *  
 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA 
 * or visit www.oracle.com if you need additional information or have any 
 * questions.
 *                                                                              
 */

/*******************************************************************************
 *                                                                             *
 * THEMEING INSTRUCTIONS                                                       *
 *                                                                             *
 *******************************************************************************

TODO: Explain here how themeing 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 DIFFERNT SCEEN DPI
-------------------------------

When the screen DPI changes Windows will use a differnt font size be default. 
The default is 12px and the can change to 15px or 18px depending on user 
preference or screen DPI. On Mac the default is 13px and embbeded will depend 
on hardware. To make UI controls scale and be the right proportions of each of 
these font sizes we base the padding (which controls size of control) on the 
font size. This is done using the CSS measument 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: #292929;
    -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: #4fb6d6;

    /* 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: #f25f29;
    -fx-faint-focus-color: #f25f2933;

    /* 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;

    /* The opacity level to use for the "disabled" pseudoclass.
     */
    -fx-disabled-opacity: 0.4;
    
    /* 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;

    /***************************************************************************
     *                                                                         *
     * 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 ontop of -fx-background. This is never a shadow in Modena but
     * keep -fx-shadow-highlight-color name to be compatable with Caspian.
     */
    -fx-shadow-highlight-color: ladder(
        -fx-background,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.2) 20%,
        rgba(255,255,255,0.2) 70%,
        rgba(255,255,255,1) 90%,
        rgba(255,255,255,1) 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, derive(-fx-color,75%), derive(-fx-color,2%));

    -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,75%), derive(-fx-color,2%));
/*    -fx-inner-border-horizontal: linear-gradient(
        to right,
        ladder(-fx-color, 
               derive(-fx-color,80%) 60%, 
               white 82%) 0%,
        ladder(-fx-color, 
               derive(-fx-color,20%) 10%, 
               derive(-fx-color,-10%) 80%) 100%
    );*/

    -fx-inner-border-bottomup: linear-gradient(
        to top,
        ladder(-fx-color, 
               derive(-fx-color,80%) 60%, 
               white 82%) 0%,
        ladder(-fx-color, 
               derive(-fx-color,20%) 10%, 
               derive(-fx-color,-10%) 80%) 100%);

    /* 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.  Typically is the fourth color
     * in the -fx-background-color list and represents main body of the control.
     * Insets are typically 2.
     */
    -fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%));
    -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.
     *
     * TODO: it seems like this should be based upon -fx-accent and we should
     * remove the setting -fx-background in all the sections that use
     * -fx-selection-bar.
     */
    -fx-selection-bar: -fx-accent;

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-selection-bar.
     *
     * TODO: it seems like this should be derived from -fx-selection-bar.
     */
    -fx-selection-bar-text: ladder(
        -fx-background,
        -fx-light-text-color 50%,
        -fx-mid-text-color   51%
    );

    /* 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;
    
    -fx-cell-focus-inner-border: #85b9de;
    
    /* The colors to use in Pagination */
    -fx-page-bullet-border: #acacac;    
    -fx-page-indicator-hover-border: #accee5;

    /***************************************************************************
     *                                                                         *
     * Set the default background color for the scene                          *
     *                                                                         *
     **************************************************************************/
    
    -fx-background-color: -fx-background;
}

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

/* ====   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 > .arrow-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5, 4, 3;
    -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */
    -fx-text-fill: -fx-text-base-color;
}
.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,
.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,
.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 {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: -2, -0.3, 1, 2;
    -fx-background-radius: 7, 6, 4, 3;
}

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

.button:disabled,
.toggle-button:disabled,
.radio-button:disabled,
.check-box:disabled,
.hyperlink:disabled,
.menu-button:disabled,
.split-menu-button:disabled,
.slider:disabled,
.scroll-pane:disabled,
.progress-bar:disabled,
.progress-indicator:disabled,
.text-input:disabled,
.choice-box:disabled,
.combo-box-base:disabled,
.list-view:disabled,
.tree-view:disabled,
.table-view:disabled,
.tree-table-view:disabled,
.tab-pane:disabled,
.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

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

.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 !important;
    -fx-background-insets: 0 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.416667em 0.666667em; /* 4 8 5 8 */
    -fx-text-fill: -fx-text-base-color;
}
.choice-box > .open-button,
.menu-button > .arrow-button {
    -fx-padding: 0.5em 0.833333em 0.5em 0.0em; /* 6 10 6 0 */
}

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

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view, 
.tree-table-view {
    -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,
.tree-table-view:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
    -fx-background-insets: -2, -0.3, 1;
}
/* 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: 5 0 0 5, 4 0 0 4, 3 0 0 3;
    -fx-background-insets: 0, 1 0 1 1, 2 1 2 2;
}
.button.center-pill,
.toggle-button.center-pill {
    -fx-background-radius: 0;
    -fx-background-insets: 0, 1 0 1 1, 2 1 2 2;
}
.button.right-pill,
.toggle-button.right-pill {
    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
}
.button.left-pill:focused,
.toggle-button.left-pill:focused {
    -fx-background-radius: 7 0 0 7, 6 0 0 6, 4 0 0 4, 3 0 0 3;
    -fx-background-insets: -2 0 -2 -2, -0.3 0 -0.3 -0.3, 1, 2;
}
.button.center-pill:focused,
.toggle-button.center-pill:focused {
    -fx-background-radius: 0;
    -fx-background-insets: -2 0 -1 0, -0.3 0 -0.3 0, 1, 2;
}
.button.right-pill:focused,
.toggle-button.right-pill:focused {
    -fx-background-radius: 0 7 7 0, 0 6 6 0, 0 4 4 0, 0 3 3 0;
    -fx-background-insets: -2 -2 -2 0, -0.3 -0.3 -0.3 0, 1, 2;
}

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

.toggle-button:selected {
        -fx-background-color: 
            linear-gradient(to bottom, derive(-fx-outer-border, -20%), -fx-outer-border),
            linear-gradient(to bottom, 
                    derive(-fx-text-box-border, -10%) 0%, 
                    derive(-fx-text-box-border, -2%) 20%,
                    derive(-fx-text-box-border, 5%) 50%);
    -fx-background-insets: 0, 1;
}
.toggle-button:selected:focused {
    -fx-background-color: 
        -fx-faint-focus-color, -fx-focus-color, 
            linear-gradient(to bottom, 
                    derive(-fx-text-box-border, -10%) 0%, 
                    derive(-fx-text-box-border, -2%) 20%,
                    derive(-fx-text-box-border, 5%) 50%);
    -fx-background-insets: -2, -0.3, 1;
    -fx-background-radius: 7, 6, 4;
}

/*******************************************************************************
 *                                                                             *
 * 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  {
   -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.666667em; /* 16x16 = 8+8 */
}
.check-box:focused > .box {
    -fx-background-radius: 5, 3, 2, 1;
}
.check-box:selected > .box {
    /* Carefully picked numbers to remain square as scalling */
/**/    -fx-padding: -0.208333em 0 0.208333em 0.23em; /* -2.5 0 2.5 2.76 */
/**/    -fx-padding: -0.208333em 0.083333em 0.208333em 0.23em; /* -1.5 0 2.5 2.76 */
    -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
}
.check-box:selected > .box > .mark {
    -fx-background-color: transparent;
/**/    -fx-padding: 0.666667em 0.583333em 0.666667em 0.5em; /* 7 7 6 5 */
    -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; /* 2 */
    -fx-cursor: hand;
    -fx-content-display: LEFT;
    -fx-text-fill: -fx-text-background-color;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
}
.hyperlink:visited {
    -fx-text-fill: -fx-accent;
}
.hyperlink:focused {
    -fx-border-color: -fx-focus-color;
    -fx-border-style: segments(0.166667em, 0.166667em);
    -fx-border-width: 1px;
}
.hyperlink:hover {
    -fx-underline: true;
}
.hyperlink:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

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

.split-menu-button {
    -fx-background-color: -fx-outer-border; 
    -fx-background-insets: 0;
    -fx-background-radius: 5;
    -fx-padding: 0;
}
.split-menu-button:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color; 
    -fx-background-insets: -2, -0.3;
    -fx-background-radius: 7, 6;
}
.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: 4 0 0 4, 3 0 0 3;
    -fx-padding: 0.333333em 0.667em 0.416667em 0.667em; /* 4 8 5 8 */
}
.split-menu-button > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 1, 2;
    -fx-background-radius: 4, 3;
    -fx-background-radius: 0 4 4 0, 0 3 3 0;
    -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */
}

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

.tool-bar:vertical {
    -fx-background: derive(-fx-base,-20%);
    -fx-background-color:
        linear-gradient(to right, derive(-fx-base,0%) 0%, derive(-fx-base,10%) 50%, derive(-fx-base,0%) 100%);
    -fx-background-insets: 0;
    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
    -fx-spacing: 0.333em; /* 4 */
    -fx-alignment: CENTER-LEFT;
}
.tool-bar:horizontal {
    -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-padding: 0.416667em 0.5em 0.416667em 0.5em; /* 5 6  5 6 */
    -fx-spacing: 0.333em; /* 4 */
    -fx-alignment: CENTER_LEFT;
}
.tool-bar:horizontal > .container > .separator {
    -fx-orientation: vertical;
}
.tool-bar:vertical > .container > .separator {
    -fx-orientation: horizontal;    
}

.tool-bar.list-related-toolbar {
	-fx-background-color: transparent;
    -fx-padding: 0.1em 0;
    -fx-spacing: 0;
    -fx-alignment: CENTER_LEFT;
}

/*******************************************************************************
 *                                                                             *
 * 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-color:
        -fx-focus-color,
        derive(-fx-color,-36%),
        derive(-fx-color,73%),
        linear-gradient(to top, derive(-fx-color, -19%),derive(-fx-color, -5%));
    -fx-background-insets: -1.4, 0, 1, 2;
    -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: 5, 4, 3;
    -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: linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
}
.scroll-bar:vertical {
    -fx-background-color: linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
}
.scroll-bar:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.scroll-bar > .thumb {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 1, 2, 3;
    -fx-background-radius: 5, 4, 3;
}
.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-background-insets: 0, 1, 2;
    -fx-color: transparent;
    -fx-padding: 3px;
}
.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: derive(-fx-base,-35%);
}
.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
    -fx-background-color: derive(-fx-base,-40%);
}
.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
    -fx-background-color: derive(-fx-base,-45%);
}
.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-padding: 7 5 0 0;
    -fx-shape: "M0.315,1.457l1.414-1.414L5.686,4L1.729,7.957L0.315,6.543L2.857,4L0.315,1.457z";
}
.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-padding: 5 7 0 0 ;
    -fx-shape: "M6.543,0.315l1.414,1.414L4,5.686L0.043,1.729l1.414-1.414L4,2.858L6.543,0.315z";
}
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 7 5 0 0;
    -fx-shape: "M5.686,6.543L4.271,7.957L0.314,4l3.957-3.957l1.414,1.414L3.143,4L5.686,6.543z";
}
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 5 7 0 0;
    -fx-shape: "M1.457,5.563L0.042,4.149L4,0.193l3.957,3.957L6.543,5.563L4,3.021L1.457,5.563z";
}

/*******************************************************************************
 *                                                                             *
 * ScrollPane                                                                  *
 *                                                                             *
 ******************************************************************************/

.scroll-pane > .scroll-bar:horizontal {
    -fx-background-insets: 0 1 1 1;
    -fx-padding: 0 1 1 1;
}
.scroll-pane > .scroll-bar:horizontal > .increment-button, 
.scroll-pane > .scroll-bar:horizontal > .decrement-button {
    -fx-padding: 3 3 2 3;
}
.scroll-pane > .scroll-bar:vertical > .increment-button, 
.scroll-pane > .scroll-bar:vertical > .decrement-button {
    -fx-padding: 3 2 3 3;
}
.scroll-pane > .scroll-bar:vertical {
    -fx-background-insets: 1 1 1 0;
    -fx-padding: 1 1 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 {
    -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 {
    -fx-padding: 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: -fx-box-border,-fx-accent;
    -fx-background-insets: 2, 3;
    -fx-background-radius: 0.25em, 0.166667em;  3 , 2 
    -fx-padding: 0.416667em;  5 
}*/
/*.progress-bar > .bar {
    -fx-background-color: -fx-accent;
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 0.167em;  2 
    -fx-padding: 0.416667em;  5 
}*/
.progress-bar > .bar {
    /*-fx-background-color: -fx-accent;*/
    -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.25em; /* 3px */
    -fx-padding: 1em; /* 12 */
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
/*.progress-bar > .track {
    -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: 0.416667em, 0.416667em;  5 
}*/
/*.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, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 0.417em, 0.333em, 0.25em;   5, 4, 3 
}*/
.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: 0.417em, 0.333em, 0.25em;  /* 5, 4, 3 */
}

/*******************************************************************************
 *                                                                             *
 * 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: 1;
}
.progress-indicator > .determinate-indicator > .progress {
    -fx-background-color: -fx-accent;
    -fx-background-insets: 2;
    -fx-padding: 1em; /* 9 */
}
/* TODO: scaling the shape seems to make it disappear */
.progress-indicator > .determinate-indicator > .tick {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-padding: 0.416667em; /* 5 */
    -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";
    -fx-scale-shape: false;
}
.progress-indicator:indeterminate > .spinner {
    -fx-padding: 0.833333em; /* 10 */
}
.progress-indicator > .percentage {
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
    -fx-fill: -fx-text-background-color;
}
.progress-indicator:indeterminate .segment {
    -fx-background-color: -fx-accent;
}
.progress-indicator:indeterminate .segment0 {
    -fx-shape:"M10,0C9.998,0,9.995,0,9.992,0C9.991,0,9.991,0,9.99,0C9.988,0,9.986,0,9.985,0S9.982,0,9.981,0S9.979,0,9.978,0S9.975,0,9.974,0S9.972,0,9.971,0C9.969,0,9.968,0,9.966,0H9.965c-0.007,0-0.014,0-0.02,0C9.944,0,9.944,0,9.944,0C9.941,0,9.939,0,9.937,0c-0.77,0.007-1.389,0.634-1.384,1.404C8.557,2.176,9.185,2.8,9.956,2.8c0.001,0,0.003,0,0.004,0H10c0.773-0.002,1.4-0.63,1.4-1.404c0-0.77-0.622-1.393-1.392-1.396C10.006,0,10.003,0,10,0L10,0z";
}
.progress-indicator:indeterminate .segment1 {
    -fx-shape:"M5.688,1.156c-0.236,0-0.476,0.06-0.696,0.187C4.98,1.349,4.969,1.356,4.958,1.363c0,0-0.001,0-0.001,0C4.955,1.364,4.954,1.365,4.952,1.366c-0.001,0-0.002,0.001-0.004,0.002c0,0,0,0-0.001,0C4.944,1.371,4.94,1.373,4.936,1.375c0,0,0,0-0.001,0C4.933,1.377,4.931,1.378,4.929,1.38C4.267,1.772,4.046,2.624,4.438,3.288c0.261,0.444,0.73,0.692,1.212,0.692c0.24,0,0.484-0.062,0.706-0.192l0.034-0.02C7.058,3.378,7.283,2.52,6.896,1.851C6.636,1.405,6.168,1.156,5.688,1.156L5.688,1.156z";
}
.progress-indicator:indeterminate .segment2 {
    -fx-shape:"M2.534,4.326c-0.482,0-0.951,0.25-1.209,0.697C1.323,5.027,1.321,5.029,1.32,5.031l0,0C1.319,5.033,1.318,5.034,1.317,5.036S1.315,5.039,1.314,5.04c0,0.001,0,0.002-0.001,0.002C1.312,5.044,1.311,5.046,1.31,5.048c0,0,0,0,0,0.001C1.309,5.051,1.308,5.053,1.307,5.055C1.302,5.063,1.297,5.071,1.292,5.079l0,0C1.291,5.082,1.29,5.084,1.288,5.087c-0.376,0.67-0.141,1.519,0.529,1.898c0.218,0.123,0.456,0.182,0.69,0.182c0.488,0,0.963-0.255,1.222-0.708l0.02-0.035c0.383-0.671,0.149-1.527-0.521-1.912C3.008,4.386,2.769,4.326,2.534,4.326L2.534,4.326z";
}
.progress-indicator:indeterminate .segment3 {
    -fx-shape:"M1.396,8.648c-0.002,0-0.005,0-0.008,0C0.619,8.652-0.001,9.278,0,10.047c0,0.002,0,0.006,0,0.008l0,0c0,0.019,0,0.037,0,0.056c0,0.001,0,0.002,0,0.003s0,0.003,0,0.004c0.01,0.765,0.632,1.378,1.396,1.378c0.005,0,0.01,0,0.015,0c0.773-0.009,1.395-0.642,1.389-1.415v-0.04C2.794,9.27,2.166,8.648,1.396,8.648L1.396,8.648z";
}
.progress-indicator:indeterminate .segment4 {
    -fx-shape:"M2.579,12.955c-0.242,0-0.487,0.062-0.71,0.194c-0.664,0.391-0.885,1.242-0.499,1.906c0.013,0.021,0.025,0.043,0.038,0.063c0.262,0.436,0.724,0.678,1.197,0.678c0.243,0,0.49-0.063,0.714-0.197c0.665-0.396,0.883-1.257,0.489-1.922l-0.02-0.034C3.526,13.201,3.059,12.955,2.579,12.955L2.579,12.955z";
}
.progress-indicator:indeterminate .segment5 {
    -fx-shape:"M5.772,16.09c-0.489,0-0.965,0.257-1.223,0.712c-0.38,0.671-0.146,1.52,0.523,1.901c0.002,0.001,0.004,0.002,0.007,0.004h0c0.004,0.002,0.008,0.004,0.012,0.007c0,0,0,0,0.001,0c0.001,0.001,0.002,0.002,0.004,0.002c0.001,0.001,0.003,0.002,0.004,0.003c0,0,0.001,0,0.001,0.001c0.012,0.006,0.023,0.013,0.035,0.019c0.214,0.119,0.446,0.176,0.675,0.176c0.489,0,0.963-0.258,1.22-0.716c0.377-0.675,0.137-1.529-0.537-1.908l-0.035-0.02C6.242,16.149,6.006,16.09,5.772,16.09L5.772,16.09z";
}
.progress-indicator:indeterminate .segment6 {
    -fx-shape:"M10.14,17.198c-0.006,0-0.013,0-0.02,0h-0.039c-0.773,0.011-1.394,0.646-1.385,1.419c0.008,0.767,0.631,1.382,1.396,1.382c0.003,0,0.006,0,0.009-0.001c0.024,0,0.051,0,0.075-0.001c0.769-0.016,1.38-0.648,1.367-1.418C11.53,17.813,10.904,17.198,10.14,17.198L10.14,17.198z";
}
.progress-indicator:indeterminate .segment7 {
    -fx-shape:"M14.433,15.97c-0.245,0-0.494,0.064-0.72,0.2l-0.034,0.021c-0.663,0.397-0.88,1.258-0.483,1.922c0.261,0.439,0.725,0.683,1.2,0.683c0.24,0,0.484-0.062,0.707-0.194c0.022-0.013,0.044-0.025,0.065-0.039c0.656-0.399,0.866-1.254,0.469-1.913C15.373,16.212,14.909,15.97,14.433,15.97L14.433,15.97z";
}
.progress-indicator:indeterminate .segment8 {
    -fx-shape:"M17.539,12.748c-0.493,0-0.973,0.261-1.229,0.723l-0.02,0.034c-0.376,0.676-0.133,1.53,0.542,1.907c0.216,0.121,0.45,0.178,0.681,0.178c0.487,0,0.96-0.256,1.217-0.71c0.003-0.006,0.007-0.012,0.01-0.019c0.007-0.013,0.015-0.025,0.021-0.038l0,0c0.002-0.003,0.003-0.005,0.004-0.008c0.369-0.675,0.124-1.521-0.55-1.893C18.001,12.805,17.769,12.748,17.539,12.748L17.539,12.748z";
}
.progress-indicator:indeterminate .segment9 {
    -fx-shape:"M18.603,8.408c-0.011,0-0.021,0-0.031,0c-0.773,0.018-1.388,0.657-1.373,1.431l0.001,0.04c0.015,0.765,0.641,1.377,1.403,1.377c0.008,0,0.016,0,0.023,0c0.77-0.013,1.383-0.646,1.373-1.414c0-0.003,0-0.006,0-0.009l0,0c-0.001-0.019-0.001-0.037-0.001-0.055c0-0.001,0-0.001-0.001-0.002c0-0.002,0-0.004,0-0.006C19.979,9.012,19.358,8.408,18.603,8.408L18.603,8.408z";
}
.progress-indicator:indeterminate .segment10 {
    -fx-shape:"M17.345,4.121c-0.248,0-0.5,0.066-0.728,0.205c-0.659,0.403-0.869,1.266-0.468,1.927l0.021,0.034c0.265,0.435,0.728,0.675,1.202,0.675c0.247,0,0.497-0.065,0.724-0.202c0.659-0.397,0.871-1.252,0.477-1.912c-0.007-0.011-0.013-0.021-0.02-0.032c-0.001-0.002-0.002-0.003-0.002-0.004c-0.001,0-0.001-0.001-0.001-0.002c-0.004-0.005-0.008-0.011-0.011-0.017c0-0.001,0-0.001-0.001-0.001c-0.001-0.002-0.002-0.004-0.004-0.007C18.271,4.358,17.813,4.121,17.345,4.121L17.345,4.121z";
}
.progress-indicator:indeterminate .segment11 {
    -fx-shape:"M14.104,1.039c-0.494,0-0.974,0.264-1.227,0.729c-0.37,0.679-0.12,1.531,0.559,1.903l0.034,0.019c0.214,0.117,0.445,0.173,0.673,0.173c0.495,0,0.976-0.262,1.231-0.726c0.371-0.674,0.129-1.519-0.542-1.894c-0.012-0.006-0.024-0.013-0.036-0.02c-0.007-0.004-0.014-0.008-0.021-0.012c-0.003-0.001-0.006-0.003-0.009-0.005C14.556,1.094,14.329,1.039,14.104,1.039L14.104,1.039z";
}

/*******************************************************************************
 *                                                                             *
 * 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: 4, 3;
    -fx-cursor: text;
    -fx-padding: 0.416667em 0.583em 0.416667em 0.583em; /* 5 7 5 7 */
}
.text-input:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, 
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 
    -fx-background-insets: -2, -0.3, 1;
    -fx-background-radius: 6, 3.4, 2, 2;
    -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 3 3;
}
.text-area > .scroll-pane > .scroll-bar:vertical {
    -fx-background-radius: 0 3 3 0;
}
.text-area > .scroll-pane > .corner {
    -fx-background-radius: 0 0 3 0;
}
.text-area .content {
    -fx-padding: 0.333em 0.583em 0.333em 0.583em; /* 4 7 4 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: 3;
}

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

.context-menu {
    -fx-background-color:
        -fx-box-border,
        -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( three-pass-box , rgba(0,0,0,0.5) , 8, 0.0 , 0 , 8 );*/
}
.context-menu > .separator {
    -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
}
.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-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.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:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.menu:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}
/* This hides the down arrow that would show on a menu placed in a menubar */
.menu-bar > .container > .menu > .arrow-button > .arrow {
    -fx-padding: 0;
    -fx-background-color: transparent;
    -fx-shape: null;
}
.menu-bar > .container > .menu > .arrow-button {
    -fx-padding: 0;
}
.menu > .arrow {
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M0,-4L4,0L0,4Z";
    -fx-scale-shape: false;
}
.menu:focused:showing > .arrow, .menu:hover:showing > .arrow, .menu:focused > .arrow, .menu:showing > .arrow {
    -fx-background-color: white;
}
.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-base: derive(#d0d0d0,-70%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-color,50%), derive(-fx-color,-30%)), -fx-body-color;
    -fx-background-insets: 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;
}
.menu-bar > .container > .menu-button:hover, .menu-bar > .container > .menu-button:focused, .menu-bar > .container > .menu-button:showing {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.menu-bar > .container > .menu-button:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.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:disabled > .label {
    -fx-opacity: -fx-disabled-opacity;
}
.menu-item:focused {
     -fx-background: -fx-accent;
     -fx-background-color: -fx-selection-bar;
     -fx-text-fill: -fx-selection-bar-text;
}
.menu-item:focused > .label {
    -fx-text-fill: white;
}
.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: white;
}
.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: white;
}
.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:selected > .right-container > .arrow {
    -fx-background-color: white;
}
.menu-item:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

/*******************************************************************************
 *                                                                             *
 * 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: 5 5 0 0, 4 4 0 0, 3 3 0 0;
    -fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 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-style: segments(0.166667em, 0.166667em);
    -fx-border-width: 1;
    -fx-border-color: -fx-focus-color;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
    -fx-opacity: -fx-disabled-opacity;
}
.tab-pane > .tab-header-area > .tab-header-background {
    /* TODO should not be using text-box-border I tink? */
    -fx-background-color:  
        -fx-outer-border,
        -fx-text-box-border, 
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
}
.tab-pane:top > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 1 0, 1;
}
.tab-pane:bottom > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 1 0 0 0, 1;
}
.tab-pane:left > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 1 0 0, 1;
}
.tab-pane:right > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 0 1, 1;
}
.tab-pane:top > .tab-header-area {
    -fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; /* 5 2 0 5 */
    -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
}
.tab-pane:bottom > .tab-header-area {
    -fx-padding: 0 0.166667em 0.416667em 0.416667em; /* 0 2 5 5 */
}
.tab-pane:left > .tab-header-area {
    -fx-padding: 0.416667em 0.0em 0.166667em 0.416667em; /* 5 0 2 5 */
}
.tab-pane:right > .tab-header-area {
    -fx-padding: 0.416667em 0.416667em 0.166667em 0.0em; /* 5 5 2 0 */
}
/* TODO: scaling the shape seems to make it way too large */
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
    -fx-background-color: -fx-mark-color;
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-scale-shape: false;
    -fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
    -fx-background-color: derive(-fx-mark-color, -30%);
}
/* CONTROL BUTTONS */
.tab-pane > .tab-header-area > .control-buttons-tab > .container {
    -fx-padding: 3 0 0 0; 
}
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
    -fx-padding: 4 4 9 4; /* TODO convert to ems */
    /*-fx-padding: 0.416667em 0.416667em 0.833333em 0.416667em;*/ 
    -fx-background-radius: 10;
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-header-area {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-content-area {
    -fx-background-color: -fx-outer-border, -fx-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-padding: 2;
}

/*******************************************************************************
 *                                                                             *
 * ComboBox                                                                    *
 *                                                                             *
 ******************************************************************************/

/* Customie the ListCell that appears in the ComboBox button itself */
.combo-box > .list-cell {
    -fx-background: transparent;
    -fx-background-color: transparent;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */
}
.combo-box-base > .arrow-button  {
    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
    -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */
    -fx-background-insets: 1 1 1 0, 1, 2;
}
.combo-box-base:focused > .arrow-button {
    -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color; 
}

/*******************************************************************************
 *                                                                             *
 * Editable ComboBox                                                           *
 *                                                                             *
 * The editable ComboBox TextBox inherits its properties from the TextBox      *
 * Control. Only the properties with values that are different from the        *
 * TextBox are specified here.                                                 *
 *                                                                             *
 ******************************************************************************/

.combo-box-base:editable > .text-field {
    -fx-background-radius: 3 4 4 3, 2 3 3 2;
}
.combo-box-base:editable:focused > .text-field {
    -fx-background-color: -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3 4 4 3, 2 3 3 2;
}
.combo-box-base:editable > .text-field:focused  {
    -fx-background-radius: 7, 3 4 4 3, 2 3 3 2;
}

/* -------------- STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX ------------- */

.combo-box-popup > .list-view {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 4 0 4 5;
    /* No alternate highlighting */
    -fx-background-color: -fx-control-inner-background;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, 
.combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.combo-box-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
}

/*******************************************************************************
 *                                                                             *
 * TitledPane                                                                  *
 *                                                                             *
 ******************************************************************************/

.titled-pane {
    -fx-text-fill: -fx-text-base-color;
}
.titled-pane:focused {
    -fx-text-fill: white;
}
.titled-pane > .title {
    -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
    -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */
}
.titled-pane:focused > .title {
    -fx-color: -fx-focus-color;
}
.titled-pane > .title > .arrow-button {
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */
}
.titled-pane > .title > .arrow-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
.titled-pane:collapsed > .title > .arrow-button > .arrow {
    -fx-rotate: -90;
}
.titled-pane > *.content {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%, derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border);
    -fx-background-insets: 0, 0 1 1 1;
    -fx-padding: 0.167em;
}
.titled-pane:focused > .title > .arrow-button > .arrow {
    -fx-background-color: white;
}

/*******************************************************************************
 *                                                                             *
 * Accordion                                                                   *
 *                                                                             *
 ******************************************************************************/

.accordion > .titled-pane > .title {
    -fx-background-color:
        -fx-box-border,
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
    -fx-background-radius: 0, 0, 0;
}
.accordion > .first-titled-pane > .title {
    -fx-background-insets: 0, 1, 2;
}
.accordion > .titled-pane:focused > .title {
    -fx-color: -fx-focus-color;
}
.accordion > .titled-pane:focused {
    -fx-text-fill: white;
}
.accordion > .titled-pane:focused > .title > .arrow-button > .arrow {
    -fx-background-color: white;
}
.accordion > .titled-pane:focused > .titled-pane:collapsed > .title > .arrow-button > .arrow {
    -fx-background-color: white;
}
.accordion > .titled-pane:collapsed:focused > .title {
    -fx-color: -fx-focus-color;
}
.accordion > .titled-pane:expanded:focused > .title {
    -fx-color: -fx-focus-color;
}
.accordion > .titled-pane:hover > .title {
    -fx-color: -fx-hover-base;
}

/*******************************************************************************
 *                                                                             *
 * SplitPane                                                                   *
 *                                                                             *
 ******************************************************************************/

.split-pane > .split-pane-divider {
    -fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
}
/* horizontal the two nodes are placed to the left/right of each other. */
.split-pane:horizontal > .split-pane-divider {
   -fx-background-color: -fx-box-border, -fx-inner-border-horizontal;
   -fx-background-insets: 0, 0 1 0 1;
}
/* vertical the two nodes are placed on top of each other. */
.split-pane:vertical > .split-pane-divider {
   -fx-background-color: -fx-box-border, -fx-inner-border;
   -fx-background-insets: 0, 1 0 1 0;
}

/*******************************************************************************
 *                                                                             *
 * ColorPicker                                                                 *
 *                                                                             *
 ******************************************************************************/

.color-picker > .arrow-button {
    -fx-background-color: null;
    -fx-padding: 0.5em 0.833333em 0.5em 0; /* 6 10 6 0 */
}
.color-picker.split-button {
    -fx-background-color: null;
}
.color-picker.split-button > .arrow-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
    -fx-padding: 0.5em 0.833333em 0.5em 0.833333em; /* 6 10 6 10 */
}
.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: -fx-box-border;
}

.color-palette {
     -fx-background-color:
        derive(-fx-color,-40%),
        derive(-fx-color,100%),
        linear-gradient(to bottom, 
        derive(-fx-color,100%) 0%, 
        derive(-fx-color,50%) 12%, 
        derive(-fx-color,65%) 88%, 
        derive(-fx-color,23%) 100%);
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
    -fx-padding: 15 15 15 15;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}
.color-palette > .color-picker-grid > .color-square > .color-rect {
    -fx-stroke: black;
    -fx-stroke-width: 0.4;
    -fx-border-color: black;
}
.color-palette > .color-picker-grid {
    -fx-border-color: black;
}
.color-palette > .color-picker-grid > .color-square {
    -fx-background-color: transparent;
    -fx-background-insets: -1, 0;   
    -fx-padding: 0.5;
    -fx-border: black;
}
/* the color over which the user is hovering */
.color-palette > .color-picker-grid > .color-square:focused, 
.color-palette > .color-picker-grid > .color-square:selected:focused {
    -fx-background-color: -fx-focus-color;
}
/* the currently selected color */
.color-palette > .color-picker-grid > .color-square:selected {
/*    -fx-background-color: derive(-fx-base, -27%)  #989898 , white, derive(-fx-base, -59%)  #555555 ;*/
    -fx-background-color: black;
} 
.color-palette > .separator > .line {
    -fx-background-color: -fx-pressed-base;
/*    -fx-background-color: white;*/
    -fx-padding: 6 0 0 0;
    -fx-background-insets: 4 -10 0 -10,5 -10 0 -10;
    -fx-border-style: none;
    -fx-border-color: null;
}
.custom-color-dialog > .color-rect-pane {
    -fx-padding: 15 8 15 15;
/*    -fx-background-color: -fx-background;*/
}
.custom-color-dialog > .controls-pane {
    -fx-padding: 15 15 15 0;
/*    -fx-background-color: -fx-background;*/
}
.custom-color-dialog  {
    -fx-background-color: -fx-background;
}
/* -------- Toggle Button ---------------- */
.custom-color-dialog .controls-pane .toggle-button {
    -fx-background-radius: 4, 4, 3, 2;
    -fx-padding: 3 6 3 6;
}
.custom-color-dialog .controls-pane .toggle-button:focused {
    -fx-background-color:
        rgba(23,134,248,0.2),
        -fx-focus-color,
        -fx-inner-border,
        -fx-body-color;
}
.custom-color-dialog .controls-pane .toggle-button:selected Text {
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 2, 0.0 , 0 , 1 );
}
.custom-color-dialog .controls-pane .toggle-button:selected {
    -fx-background-color:
        linear-gradient( to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100% ),        
        linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),    
        linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% );
    -fx-background-insets: 0, 1, 1;
    -fx-text-fill: -fx-light-text-color;
}
.custom-color-dialog .controls-pane #toggle-button-left {
    -fx-background-radius: 3 0 0 3;
    -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 2 0 2 2;
    -fx-border-color: transparent -fx-outer-border transparent transparent;
    -fx-border-insets: 4 0 4 0;
    -fx-padding: -2 8 -2 8;
}
.custom-color-dialog .controls-pane #toggle-button-left:focused {
	-fx-background-radius: 3 0 0 3;
	-fx-background-insets: -1.4 0 -1.4 -1.4, 0 0 0 0, 1, 2;
	-fx-border-color: transparent;
}
.custom-color-dialog .controls-pane #toggle-button-left:selected, .controls-pane #toggle-button-left:selected:focused {
        -fx-background-insets: 0 0 -1 0, 0, 1 0 1 1, 1 0 1 1;
	-fx-border-color: transparent;
}
.custom-color-dialog .controls-pane #toggle-button-center {
	-fx-background-radius: 0;
        -fx-background-insets: 0;
	-fx-background-insets: 0 0 -1 0, 0, 1 0 1 0, 2 0 2 0;
	-fx-border-color: transparent -fx-outer-border transparent transparent;
        -fx-border-insets: 4 0 4 0;
	-fx-padding: -2 8 -2 8;
}
.custom-color-dialog .controls-pane #toggle-button-center:focused {
	-fx-background-radius: 0;
	-fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
	-fx-border-color: transparent;
}
.custom-color-dialog .controls-pane #toggle-button-center:selected, .controls-pane #toggle-button-center:selected:focused {
	-fx-background-insets: -1.4 0 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
	-fx-border-color: transparent;
}
.custom-color-dialog .controls-pane #toggle-button-right {
	-fx-background-radius: 0 3 3 0;
    -fx-background-insets: 0 0 -1 0, 0, 1 1 1 0, 2 2 2 0;
	-fx-padding: 3 8 3 8;
}
.custom-color-dialog .controls-pane #toggle-button-right:focused {
	-fx-background-radius: 0 3 3 0;
	-fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 2 2 2 1;
}
.custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused {
	-fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
}
.custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new {
    -fx-background-image: url("pattern-transparent.png"); 
    -fx-background-repeat: repeat;
    -fx-background-size: auto;
    -fx-padding: 9 64 9 64;
}
.custom-color-dialog .controls-pane .customcolor-controls-background {
    -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 3, 2, 2;
    -fx-padding: 3 5 3 5;
}
.custom-color-dialog .controls-pane .alpha-settings .text-field {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-padding: 3 5 3 5;
    -fx-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}
.custom-color-dialog .controls-pane .current-new-color-grid .label {
    -fx-padding: 0 0 0 5;
}
.custom-color-dialog .input-field {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 2;
    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}
.custom-color-dialog .input-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
}
.custom-color-dialog .input-field:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.custom-color-dialog .integer-field {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 2;
    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}
.custom-color-dialog .integer-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
}
.custom-color-dialog .double-field {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 2;
    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}
.custom-color-dialog .double-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
}
.custom-color-dialog .double-field:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.custom-color-dialog .webcolor-field {
    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 2;
    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}
.custom-color-dialog .webcolor-field:focused {
    -fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background;
    -fx-background-insets: -0.4, 1, 2;
    -fx-background-radius: 3.4, 2, 2;
}
.custom-color-dialog .webcolor-field:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

/*******************************************************************************
 *                                                                             *
 * Pagination                                                                  *
 *                                                                             *
 ******************************************************************************/

.pagination {
    -fx-padding: 0;        
    -fx-arrows-visible: true;
    -fx-tooltip-visible: true;
    -fx-page-information-visible: true;
    -fx-page-information-alignment: bottom;        
}
.pagination > .page {
    -fx-background-color: transparent;
}
.pagination > .pagination-control {
    -fx-background-color: transparent;    
    -fx-padding: 0.833333em 0em 0.833333em 0em;
}
.pagination > .pagination-control > .control-box {
    -fx-spacing: 4;
    -fx-alignment: center;
}
.pagination > .pagination-control > .control-box > .left-arrow-button{
    -fx-background-radius: 0;
    -fx-padding: 0.166667em 0.416em 0.25em 0.333em;
}
.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-radius: 0;
    -fx-padding: 0.166667em 0.333em 0.25em 0.416em;
}
.pagination > .pagination-control .left-arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
    -fx-shape: "M 0 0 L -13 7 L 0 13 z";
    -fx-scale-shape: true;
}
.pagination > .pagination-control .right-arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.375em 0.291em 0.375em 0.291em;
    -fx-shape: "M 0 0 L 13 7 L 0 13 z";
    -fx-scale-shape: true;
}
.pagination > .pagination-control > .control-box > .bullet-button {   
   -fx-background-radius: 0, 4em, 4em, 4em, 4em;
   -fx-padding: 0.333em;  
   -fx-background-color: transparent, -fx-outer-border, -fx-inner-border, -fx-body-color;
   -fx-background-insets: 0, 5,  6,  7;
}
.pagination > .pagination-control > .control-box > .bullet-button:selected {   
    -fx-base: -fx-accent;
}
.pagination.bullet > .pagination-control > .control-box > .left-arrow-button, 
.pagination.bullet > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-radius: 4em;
}
.pagination > .pagination-control > .control-box > .number-button {
    -fx-background-radius: 0;
    -fx-padding: 0.166667em 0.25em 0.25em 0.333em;
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}
.pagination > .pagination-control > .control-box > .number-button:selected {   
    -fx-base: -fx-accent;
}
.pagination > .pagination-control > .page-information {   
    -fx-padding: 0.416em 0 0 0;
}

/*******************************************************************************
 *                                                                             *
 * Customised CSS for controls placed directly within cells                    *
 *                                                                             *
 ******************************************************************************/

.cell > .choice-box {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
    -fx-alignment: CENTER_LEFT;
    -fx-content-display: LEFT;
}
.cell > .choice-box > .label {
    -fx-padding: 0em 0.333333em 0.0em 0.333333; /* 2 4 3 6 */
}
.cell:focused:selected > .choice-box > .label {
    -fx-text-fill: white;
}
.cell:focused:selected > .choice-box > .open-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, white;
}

/*******************************************************************************
 *                                                                             *
 * ListView and ListCell                                                       *
 *                                                                             *
 ******************************************************************************/

.list-view > .virtual-flow > .scroll-bar:vertical{
    -fx-background-insets: 0, 0 0 0 1;
    -fx-padding: -1 -1 -1 0;
}
.list-view > .virtual-flow > .scroll-bar:horizontal{
    -fx-background-insets: 0, 1 0 0 0;
    -fx-padding: 0 -1 -1 -1;
}
.list-view > .virtual-flow > .corner {
    -fx-background-color: -fx-box-border, -fx-base;
    -fx-background-insets: 0, 1 0 0 1;
}
.list-cell {
    -fx-background-color: -fx-control-inner-background;
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-text-fill: -fx-text-inner-color;
    -fx-opacity: 1;
}
.list-cell:odd {
    -fx-background-color: -fx-control-inner-background-alt;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1, 2;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused:odd {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt;
    -fx-background-insets: 0, 1, 2;
}
/* When the list-cell is selected and focused */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, 
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-selection-bar-text;
}
/* When the ListView is _not_ focused, we show alternate selection colors */
.list-cell:filled:selected:focused,
.list-cell:filled:selected,
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-background-color: lightgray;
    -fx-text-fill: -fx-selection-bar-text;
}
.list-cell:filled:selected:focused:disabled, 
.list-cell:filled:selected:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.list-cell:filled:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:hover {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-text-inner-color;
}
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background-color: -fx-selection-bar;
}

/*******************************************************************************
 *                                                                             *
 * TreeView and TreeCell                                                       *
 *                                                                             *
 ******************************************************************************/

.tree-view > .virtual-flow > .scroll-bar:vertical{
    -fx-background-insets: 0, 0 0 0 1;
    -fx-padding: -1 -1 -1 0;
}
.tree-view > .virtual-flow > .scroll-bar:horizontal{
    -fx-background-insets: 0, 1 0 0 0;
    -fx-padding: 0 -1 -1 -1;
}
.tree-view > .virtual-flow > .corner {
    -fx-background-color: -fx-box-border, -fx-base;
    -fx-background-insets: 0, 1 0 0 1;
}
.tree-cell {
    -fx-background-color: -fx-control-inner-background;
    -fx-padding: 0.25em; /* 3 */
    -fx-text-fill: -fx-text-inner-color;
    -fx-indent: 80;
}
.tree-cell .label {
    -fx-padding: 0.0em 0.0em 0.0em 0.25em; /* 0 0 0 3 */
}
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1, 2;
}
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, 
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover {
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-selection-bar-text;
}
/* When the TreeView is _not_ focused, we show alternate selection colors */
.tree-cell:filled:selected:focused, 
.tree-cell:filled:selected {
    -fx-background-color: lightgray;
    -fx-text-fill: -fx-selection-bar-text;
}
.tree-cell:filled:selected:focused:disabled, 
.tree-cell:filled:selected:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.tree-cell > .tree-disclosure-node,
.tree-table-row-cell > .tree-disclosure-node {
    /** put a bit of padding around the disclosure node to make the clicking region larger */
    -fx-padding: 4 2 4 8;
    -fx-background-color: transparent;
}
.tree-cell > .tree-disclosure-node:disabled,
.tree-table-row-cell > .tree-disclosure-node:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.tree-cell > .tree-disclosure-node > .arrow,
.tree-table-row-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.333333em; /* 4 */
    -fx-shape: "M 0 -4 L 8 0 L 0 4 z";
}
.tree-cell:expanded > .tree-disclosure-node > .arrow,
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
    -fx-rotate: 90;
}
.tree-cell:filled:selected > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:selected > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-selection-bar-text;
}
.tree-cell:filled:hover,
.tree-table-row-cell:filled:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
}
.tree-cell:filled:hover > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-mark-color;
}
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:hover,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-text-inner-color;
}
.tree-cell:filled:selected:hover > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:selected:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: -fx-selection-bar-text;
}

/*******************************************************************************
 *                                                                             *
 * TableView                                                                   *
 *                                                                             *
 ******************************************************************************/

.table-view,
.tree-table-view {
    /* Constants used throughout the tableview. */
    -fx-table-header-border-color: -fx-box-border;
    -fx-table-cell-border-color: -fx-box-border;
}
/** Draws focus border around tableview */
.table-view:focused,
.tree-table-view:focused {
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color,-fx-control-inner-background;
    -fx-background-insets: -2, -0.3, 1;
    -fx-background-radius: 2, 0, 0;
}
.table-view > .virtual-flow > .scroll-bar:vertical,
.tree-table-view > .virtual-flow > .scroll-bar:vertical {
    -fx-background-insets: 0, 0 0 0 1;
    -fx-padding: -1 -1 -1 0;
}
.table-view > .virtual-flow > .scroll-bar:horizontal,
.tree-table-view > .virtual-flow > .scroll-bar:horizontal {
    -fx-background-insets: 0, 1 0 0 0;
    -fx-padding: 0 -1 -1 -1;
}
.table-view > .virtual-flow > .corner,
.tree-table-view > .virtual-flow > .corner {
    -fx-background-color: -fx-box-border, -fx-base;
    -fx-background-insets: 0, 1 0 0 1;
}
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
   number of table-cell. */
.table-row-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em; /* 0 */
    -fx-text-fill: -fx-text-inner-color;
}
.table-row-cell:odd {
    -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background-alt;
    -fx-background-insets: 0, 0 0 1 0;
}
.table-row-cell:focused,
.tree-table-row-cell:focused {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1, 2;
}
.table-row-cell:focused:odd {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background-alt;
    -fx-background-insets: 0, 1, 2;
}
/* When the table-row-cell is selected and focused */
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .table-cell,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell {
    -fx-text-fill: -fx-selection-bar-text;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected, 
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover,
.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-selection-bar-text;
}
/* When the TableView is _not_ focused, we show alternate selection colors */
.table-row-cell:filled:selected:focused, 
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected:focused, 
.tree-table-row-cell:filled:selected {
    -fx-background-color: lightgray;
    -fx-text-fill: -fx-selection-bar-text;
}
.table-row-cell:selected:disabled,
.tree-table-row-cell:selected:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:hover { 
    -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-text-fill: -fx-text-inner-color;
}
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover {
    /* No 1-pixel bottom border for the TreeTableView (unlike the TableView above) */
    -fx-background-color: -fx-cell-hover-color;
    -fx-background-insets: 0;
    -fx-text-fill: -fx-text-inner-color;
}
.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:hover,
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { 
    -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3;
    -fx-text-fill: -fx-text-inner-color;
}
.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-inner-color;
}
/* When in constrained resize mode, the right-most visible cell should not have
   a right-border, as it is not possible to get this cleanly out of view without
   introducing horizontal scrollbars (see RT-14886). */
.table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
    -fx-border-color: transparent;
}
.table-view:constrained-resize > .column-header:last-visible,
.tree-table-view:constrained-resize > .column-header:last-visible {
    -fx-border-width: 0.083333em 0.0em 0.083333em 0.083333em, 0.083333em 0.0em 0.083333em 0.083333em;
}
.table-view:constrained-resize .filler,
.tree-table-view:constrained-resize .filler {
    -fx-border-color: 
        derive(-fx-base, 80%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
        derive(-fx-base, 10%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* Outer border: */
        transparent -fx-table-header-border-color -fx-table-header-border-color -fx-table-header-border-color;
    -fx-border-insets: 0 1 1 1, 0 0 0 0;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled .table-cell:focused:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:selected, 
.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected, 
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
    -fx-background-insets: 0 0 1 0;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:selected:hover,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{
    -fx-background: -fx-accent;
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
    -fx-text-fill: -fx-selection-bar-text;
}
/* When the TableView is _not_ focused, we show alternate selection colors */
.table-row-cell:filled > .table-cell:selected:focused, 
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected:focused, 
.tree-table-row-cell:filled > .tree-table-cell:selected {
    -fx-background-color: lightgray;
    -fx-text-fill: -fx-selection-bar-text;
}
.table-cell:selected:disabled,
.tree-table-cell:selected:disabled {
    -fx-opacity: -fx-disabled-opacity;
}
.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:hover,
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover {
    -fx-background-color: -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
    -fx-background-insets: 0 0 1 0;
}
.table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled > .table-cell:focused:hover,
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
    -fx-text-fill: -fx-text-inner-color;
}
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}
/* This is the area behind the column headers. An ideal place to specify background
   and border colors for the whole area (not individual column-header's). */
.table-view .column-header-background,
.tree-table-view > .column-header-background {
    -fx-background-color: -fx-body-color;
    -fx-padding: 0;
}
/*.tree-table-view > .column-header-background {
    -fx-background-color: -fx-body-color;
    -fx-padding: 0;
}*/
/* The column header row is made up of a number of column-header, one for each
   TableColumn, and a 'filler' area that extends from the right-most column
   to the edge of the tableview, or up to the 'column control' button. */
.table-view .column-header,
.tree-table-view .column-header {
    -fx-text-fill: -fx-selection-bar-text;
    /* TODO: for some reason, this doesn't scale. */
    -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
    -fx-size: 25;
    -fx-border-style: solid;
    -fx-border-color: 
        /* 
          Inner border: we have different colours along the top, right, bottom and left.
          Refer to RT-12298 for the spec.
        */
        derive(-fx-base, 80%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
        derive(-fx-base, 10%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* Outer border: */
        transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
    -fx-border-insets: 0 1 1 0, 0 0 0 0;
    -fx-border-width: 0.083333em, 0.083333em;
}
.table-view .filler,
.tree-table-view .filler {
    -fx-size: 25;
    -fx-border-style: solid;
    -fx-border-color: 
        /* 
          Inner border: we have different colours along the top, right, bottom and left.
          Refer to RT-12298 for the spec.
        */
        derive(-fx-base, 80%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
        derive(-fx-base, 10%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* Outer border: */
        transparent transparent -fx-table-header-border-color transparent;
    -fx-border-insets: 0 0 1 0, 0 0 0 0;
    -fx-border-width: 0.083333em, 0.083333em 0 0.083333em 0.083333em;
}
.table-view .column-header .sort-order,
.tree-table-view .column-header .sort-order{
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
}
.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button{
    -fx-background-color: -fx-body-color;

    -fx-border-color:
        /* inner border: A copy of the inner border used above in the general column header area. */
        derive(-fx-base, 80%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        derive(-fx-base, 10%) 
        linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
        /* outer border: Slightly different to the above*/
        transparent transparent -fx-table-header-border-color -fx-table-header-border-color;
    -fx-border-insets: 0 0 0 1, 0 0 0 0;
}
.table-view .show-hide-column-image,
.tree-table-view .show-hide-column-image {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;

    -fx-padding: 0.25em; /* 3px */
    -fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z"; 
}
/*.nested-column-header .column-header {
    -fx-background-color: transparent;
}*/
/* When a column is being 'dragged' to be placed in a different position, there
   is a region that follows along the column header area to indicate where the
   column will be dropped. This region can be styled using the .column-drag-header
   name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-border-color: transparent;
    -fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
    -fx-background-color: darkgray;
    -fx-opacity: 0.3;
}
.table-view /*> column-header-background > nested-column-header >*/ .arrow,
.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
/* This is shown when the table has no rows and/or no columns. */
.table-view .empty-table,
.tree-table-view .empty-table {
    -fx-background-color: white;
    -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
}

/*******************************************************************************
 *                                                                             *
 * Table Cells                                                                 *
 *                                                                             *
 ******************************************************************************/
.check-box-table-cell {
    -fx-alignment: center;
}
.check-box-table-cell > .check-box {
    -fx-opacity: 1;
}   
.check-box-table-cell > .check-box > .box {
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-border-color: -fx-outer-border;
    -fx-border-radius: 3;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
    -fx-border-color: derive(-fx-accent,20%);
}
/*******************************************************************************
 *                                                                             *
 * TreeTableView                                                               *
 *                                                                             *
 * Note: A lot of the CSS for TreeTableView is included with the TreeView and  *
 * TableView CSS styles elsewhere in caspian.css (as they are the same, just   *
 * targeting different CSS style classes).                                     *
 ******************************************************************************/

.tree-table-row-cell {
    -fx-background-color: -fx-control-inner-background;
    -fx-padding: 0.0em; /* 0 */
    -fx-text-fill: -fx-text-inner-color;
}
.tree-table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-inner-color;
}

/*******************************************************************************
 *                                                                             *
 * TreeTableView cell spanning                                                 *
 *                                                                             *
 ******************************************************************************/

.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell {
    -fx-background-color: transparent;
} 
/* All table-row-cells - we don't care if they are even or odd */
.cell-span-tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell {
    -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
    -fx-background-insets: 0, 0 1 0 0;
    -fx-alignment: center;
}
/** Selection styles */
/*.cell-span-table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused:selected, */
.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell,
.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected > .tree-table-cell,
.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover > .tree-table-cell,
.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:selected,
.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected,
.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:filled:focused:selected:hover{
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}
/** Hover styles */
/** --- Row selection mode hover */
.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover > .tree-table-cell { 
    -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-text-fill: -fx-text-inner-color;
}
.cell-span-tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover > .tree-table-cell { 
    -fx-background-color: -fx-table-cell-border-color, -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3;
    -fx-text-fill: -fx-text-inner-color;
}
/** --- Cell selection mode hover */
.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover{
    -fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
    -fx-text-fill: -fx-text-inner-color;
    -fx-background-insets: 0, 0 0 1 0;
}
.cell-span-tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover{
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-cell-hover-color;
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
    -fx-text-fill: -fx-text-inner-color;
}
/** End of hover styles */

/*******************************************************************************
 *                                                                             *
 * Tooltip                                                                     *
 *                                                                             *
 ******************************************************************************/

.tooltip {
    -fx-background: rgba(30,30,30);
    -fx-text-fill: white;
    -fx-background-color: rgba(30,30,30,0.8);
    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.833333em; /* 10px */
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 0 );
    -fx-font-size: 0.85em;
}

/*******************************************************************************
 *                                                                             *
 * Charts                                                                      *
 *                                                                             *
 ******************************************************************************/

.chart {
    -fx-padding: 5px;
}
.chart-content {
    -fx-padding: 10px;
}
.chart-title {
    -fx-font-size: 1.4em;
}
.chart-legend {
   -fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%));
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px;
}

/*******************************************************************************
 *                                                                             *
 * Axis                                                                        *
 *                                                                             *
 ******************************************************************************/

.axis {
    AXIS_COLOR: derive(-fx-background,-20%);
    -fx-tick-label-font-size: 0.833333em; /* 10px */
    -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
}
.axis:top {
    -fx-border-color: transparent transparent AXIS_COLOR transparent;
}
.axis:right {
    -fx-border-color: transparent transparent transparent AXIS_COLOR;
}
.axis:bottom {
    -fx-border-color: AXIS_COLOR transparent transparent transparent;
}
.axis:left {
    -fx-border-color: transparent AXIS_COLOR transparent transparent;
}
.axis-tick-mark,
.axis-minor-tick-mark {
    -fx-fill: null;
    -fx-stroke: AXIS_COLOR;
}

/*******************************************************************************
 *                                                                             *
 * ChartPlot                                                                   *
 *                                                                             *
 ******************************************************************************/

.chart-vertical-grid-lines {
    -fx-stroke: derive(-fx-background,-10%);
    -fx-stroke-dash-array: 0.25em, 0.25em;
}
.chart-horizontal-grid-lines {
    -fx-stroke: derive(-fx-background,-10%);
}
.chart-alternative-column-fill {
    -fx-fill: null;
    -fx-stroke: null;
}
.chart-alternative-row-fill {
    -fx-fill: null;
    -fx-stroke: null;
}
.chart-vertical-zero-line,
.chart-horizontal-zero-line {
    -fx-stroke: derive(-fx-text-background-color, 40%);
}

/*******************************************************************************
 *                                                                             *
 * ScatterChart                                                                *
 *                                                                             *
 ******************************************************************************/

.chart-symbol { /* solid circle */
    -fx-background-color: CHART_COLOR_1;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}
.default-color1.chart-symbol { /* solid square */
    -fx-background-color: CHART_COLOR_2;
    -fx-background-radius: 0;
}
.default-color2.chart-symbol { /* solid diamond */
    -fx-background-color: CHART_COLOR_3;
    -fx-background-radius: 0;
    -fx-padding: 7px 5px 7px 5px;
    -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}
.default-color3.chart-symbol { /* cross */
    -fx-background-color: CHART_COLOR_4;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}
.default-color4.chart-symbol { /* solid triangle */
    -fx-background-color: CHART_COLOR_5;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M5,0 L10,8 L0,8 Z";
}
.default-color5.chart-symbol { /* hollow circle */
    -fx-background-color: CHART_COLOR_6, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}
.default-color6.chart-symbol { /* hollow square */
    -fx-background-color: CHART_COLOR_7, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 0;
}
.default-color7.chart-symbol { /* hollow diamond */
    -fx-background-color: CHART_COLOR_8, white;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 2.5;
    -fx-padding: 7px 5px 7px 5px;
    -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z";
}

/*******************************************************************************
 *                                                                             *
 * LineChart                                                                     *
 *                                                                             *
 ******************************************************************************/

.chart-line-symbol {
    -fx-background-color: #f9d900, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}
.chart-series-line {
    -fx-stroke: #f9d900;
    -fx-stroke-width: 3px;
    /*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/
}
.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }

/*******************************************************************************
 *                                                                             *
 * AreaChart                                                                   *
 *                                                                             *
 ******************************************************************************/

.chart-area-symbol {
    -fx-background-color: #f9d900, white;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 4px; /* makes sure this remains circular */
    -fx-padding: 3px;
}
.default-color0.chart-area-symbol { -fx-background-color: CHART_COLOR_1, white; }
.default-color1.chart-area-symbol { -fx-background-color: CHART_COLOR_2, white; }
.default-color2.chart-area-symbol { -fx-background-color: CHART_COLOR_3, white; }
.default-color3.chart-area-symbol { -fx-background-color: CHART_COLOR_4, white; }
.default-color4.chart-area-symbol { -fx-background-color: CHART_COLOR_5, white; }
.default-color5.chart-area-symbol { -fx-background-color: CHART_COLOR_6, white; }
.default-color6.chart-area-symbol { -fx-background-color: CHART_COLOR_7, white; }
.default-color7.chart-area-symbol { -fx-background-color: CHART_COLOR_8, white; }
.chart-series-area-line {
    -fx-stroke: #f9d900;
    -fx-stroke-width: 1px;
}
.default-color0.chart-series-area-line { -fx-stroke: CHART_COLOR_1; }
.default-color1.chart-series-area-line { -fx-stroke: CHART_COLOR_2; }
.default-color2.chart-series-area-line { -fx-stroke: CHART_COLOR_3; }
.default-color3.chart-series-area-line { -fx-stroke: CHART_COLOR_4; }
.default-color4.chart-series-area-line { -fx-stroke: CHART_COLOR_5; }
.default-color5.chart-series-area-line { -fx-stroke: CHART_COLOR_6; }
.default-color6.chart-series-area-line { -fx-stroke: CHART_COLOR_7; }
.default-color7.chart-series-area-line { -fx-stroke: CHART_COLOR_8; }
.chart-series-area-fill {
    -fx-stroke: null;
    -fx-fill: #f9d90044;
}
.default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1; -fx-opacity: 0.2; }
.default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2; -fx-opacity: 0.2; }
.default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3; -fx-opacity: 0.2; }
.default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4; -fx-opacity: 0.2; }
.default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5; -fx-opacity: 0.2; }
.default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6; -fx-opacity: 0.2; }
.default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7; -fx-opacity: 0.2; }
.default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8; -fx-opacity: 0.2; }
.area-legend-symbol {
    -fx-padding: 6px;
    -fx-background-radius: 6px; /* makes sure this remains circular */
    -fx-background-insets: 0, 3;
}

/*******************************************************************************
 *                                                                             *
 * BubbleChart                                                                 *
 *                                                                             *
 ******************************************************************************/

.bubble-legend-symbol {
    -fx-background-radius: 8px;
    -fx-padding: 8px;
}
.chart-bubble {
    -fx-bubble-fill: #f9d900;
    -fx-background-color: radial-gradient(center 50% 50%, radius 80%, derive(-fx-bubble-fill,20%), derive(-fx-bubble-fill,-30%));
}
.default-color0.chart-bubble { -fx-bubble-fill: CHART_COLOR_1; -fx-opacity: 0.7; }
.default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2; -fx-opacity: 0.7; }
.default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3; -fx-opacity: 0.7; }
.default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4; -fx-opacity: 0.7; }
.default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5; -fx-opacity: 0.7; }
.default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6; -fx-opacity: 0.7; }
.default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7; -fx-opacity: 0.7; }
.default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8; -fx-opacity: 0.7; }

/*******************************************************************************
 *                                                                             *
 * BarChart                                                                    *
 *                                                                             *
 ******************************************************************************/

/* TODO flip gradient vertical for negative bars */
/*.chart-bar {
    -fx-bar-fill: #22bad9;
    -fx-background-color:   derive(-fx-bar-fill,-30%),
                            linear-gradient(to bottom, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)),
                            linear-gradient(to bottom, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%));
    -fx-background-insets: 0,1 1 0 1,2 2 1 2;
}
.chart-bar.negative {
    -fx-background-color:   derive(-fx-bar-fill,-30%),
                            linear-gradient(to top, derive(-fx-bar-fill,40%), derive(-fx-bar-fill,10%)),
                            linear-gradient(to top, derive(-fx-bar-fill,10%) ,derive(-fx-bar-fill,-6%));
    -fx-background-insets: 1 0 0 0,1,2;
}*/
.chart-bar {
    -fx-bar-fill: #22bad9;
    -fx-background-color:   linear-gradient(to right, 
                                derive(-fx-bar-fill, -7%),
                                derive(-fx-bar-fill, 0%),
                                derive(-fx-bar-fill, -3%),
                                derive(-fx-bar-fill, -9%)
                              );
    -fx-background-insets: 0;
}
.chart-bar.negative {
    -fx-background-insets: 1 0 0 0;
}
.bar-chart:horizontal .chart-bar {
    -fx-background-insets: 0 0 0 1;
}
.bar-chart:horizontal .chart-bar, 
.stacked-bar-chart:horizontal .chart-bar {
    -fx-background-color:   linear-gradient(to bottom, 
                                derive(-fx-bar-fill, -7%),
                                derive(-fx-bar-fill, 0%),
                                derive(-fx-bar-fill, -3%),
                                derive(-fx-bar-fill, -9%)
                              );
}
.default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
.default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
.default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
.default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
.default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
.default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
.default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
.default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }
.bar-legend-symbol {
    -fx-padding: 8px;
}

/*******************************************************************************
 *                                                                             *
 * PieChart                                                                    *
 *                                                                             *
 ******************************************************************************/

.chart-pie {
    -fx-pie-color: #2f357f;
    -fx-background-color: radial-gradient(radius 100%, derive(-fx-pie-color,20%), derive(-fx-pie-color,-10%));
    -fx-background-insets: 1;
    -fx-border-color: -fx-background;
}
.chart-pie-label {
    -fx-padding: 3px;
}
.chart-pie-label-line {
    -fx-stroke: derive(-fx-background,-20%);
}
.default-color0.chart-pie { -fx-pie-color: CHART_COLOR_1; }
.default-color1.chart-pie { -fx-pie-color: CHART_COLOR_2; }
.default-color2.chart-pie { -fx-pie-color: CHART_COLOR_3; }
.default-color3.chart-pie { -fx-pie-color: CHART_COLOR_4; }
.default-color4.chart-pie { -fx-pie-color: CHART_COLOR_5; }
.default-color5.chart-pie { -fx-pie-color: CHART_COLOR_6; }
.default-color6.chart-pie { -fx-pie-color: CHART_COLOR_7; }
.default-color7.chart-pie { -fx-pie-color: CHART_COLOR_8; }
.negative.chart-pie {
    -fx-pie-color: transparent;
    -fx-background-color: white;
}
.pie-legend-symbol.chart-pie {
    -fx-background-radius: 8px;
    -fx-padding: 8px;
    -fx-border-color: null;
}

/*******************************************************************************
 *                                                                             *
 * Combinations                                                                *
 *                                                                             *
 * This section is for special handling of when one control is nested inside   *
 * another control. There are many cases where we would end up with ugly       *
 * double borders that are fixed here.                                         *
 *                                                                             *
 ******************************************************************************/

.split-pane > * > .table-view { -fx-padding: 0px; }
.split-pane > * > .list-view { -fx-padding: 0px; }
.split-pane > * > .tree-view { -fx-padding: 0px; }
.split-pane > * > .scroll-pane { -fx-padding: 0px; }
.split-pane > * > .split-pane {
    -fx-background-insets: 0, 0;
    -fx-padding: 0;
 }
 
 /* ############################################################################
    # Workaround for RT-27627                                                  #
    ############################################################################ */
 
.choice-box > .open-button > .arrow { doh: true; }
.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; }
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; }
.tree-table-view { doh: true; }
.tree-table-view:focused { doh: true; }
.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; }
.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; }
.tree-table-view > .virtual-flow > .corner { doh: true; }
.tree-table-row-cell:focused { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; }
.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; }
.tree-table-row-cell:filled:selected:focused { doh: true; }
.tree-table-row-cell:filled:selected { doh: true; }
.tree-table-row-cell:selected:disabled { doh: true; }
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; }
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; }
.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; }
.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; }
.tree-table-view:constrained-resize .filler { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; }
.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; }
.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
.tree-table-cell:selected:disabled { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; }
.tree-table-view .column-resize-line { doh: true; }
.tree-table-view > .column-header-background { doh: true; }
.tree-table-view .column-header { doh: true; }
.tree-table-view .filler { doh: true; }
.tree-table-view .column-header .sort-order{ doh: true; }
.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; }
.tree-table-view .show-hide-column-image { doh: true; }
.tree-table-view .column-drag-header { doh: true; }
.tree-table-view .column-overlay { doh: true; }
.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; }
.tree-table-view .empty-table { doh: true; }
.axis-minor-tick-mark { doh: true; }
.chart-horizontal-zero-line { doh: true; }
.stacked-bar-chart:horizontal .chart-bar { doh: true; }