transit/src/main/resources/com/pixelduke/transit/base.css
/*
 *  Copyright (c) 2023 Pixel Duke (Pedro Duque Vieira - www.pixelduke.com)
 *  All rights reserved.
 *
 *  Redistribution and use in source and binary forms, with or without
 *  modification, are permitted provided that the following conditions are met:
 *    * Redistributions of source code must retain the above copyright
 *  notice, this list of conditions and the following disclaimer.
 *    * Redistributions in binary form must reproduce the above copyright
 *  notice, this list of conditions and the following disclaimer in the
 *  documentation and/or other materials provided with the distribution.
 *    * Neither the name of Pixel Duke, any associated website, nor the
 *  names of its contributors may be used to endorse or promote products
 *  derived from this software without specific prior written permission.
 *
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 *  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 *  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 *  DISCLAIMED. IN NO EVENT SHALL PIXEL DUKE BE LIABLE FOR ANY
 *  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 *  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 *  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.root {
    /* Root variables */
    accent_color: #0078d7;


    /*******************************************************************************
     *                                                                             *
     * Modena variables                                                            *
     *                                                                             *
     * These are variables that existed in the Modena stylesheet.                  *
     * The main color palette from which the rest of the colors are derived.       *
     *                                                                             *
     ******************************************************************************/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

/* Prevent opacity being applied twice for JDK-8152392 */
.text-input:disabled > .scroll-pane {
    -fx-opacity: 1.0;
}

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

.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base:editable > .arrow-button {
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

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

.color-picker > .label {
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}

/* ====   CONTROLS WITH ARROW BUTTONS ======================================= */

.combo-box-base > .arrow-button > .arrow ,
.choice-box > .open-button > .arrow ,
.menu-button > .arrow-button > .arrow ,
.split-menu-button > .arrow-button > .arrow {
    -fx-padding: 0.208em 0.358em 0.208em 0.358em; /* 2.5px 4.29px 2.5px 4.29px */
    -fx-shape: "M21.361,12.736l0.527,0.527L16,19.152l-5.889-5.889l0.527-0.527L16,18.098L21.361,12.736z";

    -fx-background-color: arrow_color;
}

/*.menu-button:openvertically > .arrow-button {*/
/*    -fx-padding: 0 1em 0 0;          !* 0 12 0 0 *!*/
/*}*/

/*.menu-button > .arrow-button {*/
/*    -fx-padding: 0 1em 0 0.166667em; !* 0 12 0 2 *!*/
/*}*/

.menu-button:openvertically > .arrow-button > .arrow {
    -fx-shape: "M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z ";
}

/* ====   CONTROLS WITH CELLS WITH DISCLOSURE BUTTONS ======================================= */

.tree-cell > .tree-disclosure-node {
    -fx-padding: 0.333333em 0.75em 0.333333em 0.75em; /* 4 9 4 9 */
}

.tree-table-row-cell .arrow ,
.tree-cell > .tree-disclosure-node > .arrow {
    -fx-padding: 0.333333em 0.25em 0.333333em 0.25em; /* 4 3 4 3 */
    -fx-shape: "M8.06,20.938L7,20l8-8L7,4l1.06-0.938L16.917,12L8.06,20.938z";
}

/* ====   CONTROLS WITH CELLS (Tables, Trees, TreeTable, ListView,...) ======= */

/* Alternate row colors style */
.tree-table-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:odd,
.tree-view.alternating-row-colors  .tree-cell:odd,
.table-view.alternating-row-colors .table-row-cell:odd,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:odd {
    -fx-background-color: alternate_row_color;
}

/* ====   TABLE LIKE CONTROLS  (Tables, TreeTables) ======= */

/* Sort Arrow
(There can be nested column headers inside other nested column so this declaration is a bit loose. Not sure we can be
totally specific, always using direct child, and cover all cases, which would be more performant) */
.table-view > .column-header-background .nested-column-header > .column-header > GridPane > .arrow ,
.tree-table-view > .column-header-background .nested-column-header > .column-header > GridPane > .arrow {
    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
    -fx-shape: "M 15 4 L 15 24.0625 L 8.21875 17.28125 L 6.78125 18.71875 L 15.28125 27.21875 L 16 27.90625 L 16.71875 27.21875 L 25.21875 18.71875 L 23.78125 17.28125 L 17 24.0625 L 17 4 Z ";
    -fx-background-color: sort_arrow_color;
}

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

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

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

.menu-button:showing > .label:show-mnemonics > .mnemonic-underline,
.menu-button:hover > .label:show-mnemonics > .mnemonic-underline,
.menu-button:focused > .label:show-mnemonics > .mnemonic-underline,
.menu-item:hover .label:show-mnemonics > .mnemonic-underline,
.menu-item:focused .label:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-focused-text-base-color;
}

.hyperlink:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

/*******************************************************************************
 *                                                                             *
 * Text Nodes                                                                  *
 *                                                                             *
 ******************************************************************************/

/*====================== Label ===========================*/
.label {
    -fx-text-fill: text_color;
    -fx-font-family: "Segoe UI";
}

/*====================== Text ===========================*/
Text {
    -fx-font-family: "Segoe UI";
    -fx-fill: text_color;
}

/*=================== Other styles ======================*/
.label.header {
    -fx-font-size: 3.5em;
    -fx-font-family: "Segoe UI Light";
}

.label.item-title {
    -fx-font-size: 1em;
    -fx-font-family: "Segoe UI";
}

/*******************************************************************************
 *                                                                             *
 * Button and ToggleButton                                                     *
 *                                                                             *
 ******************************************************************************/

.button, .toggle-button {
    -shrink-animate-on-press: true;
}


.button, .toggle-button {
    -fx-border-color: transparent;
    -fx-border-width: 2;

    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-background-color: button_background_color;

    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */
    -fx-text-fill: text_color;
}

.button:hover,
.toggle-button:hover,
.button:focused:hover,
.toggle-button:focused:hover {
    -fx-border-color: border_hover_color;
}

.button:pressed, .toggle-button:pressed
{
    -fx-border-color: background_pressed_color;
    -fx-background-color: background_pressed_color;
}

.button:focused, .toggle-button:focused
{
    -fx-border-color: transparent, focus_ring_border_color;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled, .toggle-button:disabled
{
    -fx-opacity: 0.4;
    -fx-background-color: button_background_color;
    -fx-text-fill: text_color;
}

/****************************** Button ****************************************/

/* We must use the actual Button class instead of the "button" styleclass because ColorPicker also uses
that styleclass but isn't an actual button
*/
Button {
    -fx-skin: "com.pixelduke.control.skin.FXButtonSkin";
}

.button:default
{
    -fx-background-color: accent_color;
    -fx-text-fill: default_button_text_color;
}

.button:default:hover{
    -fx-border-color: border_hover_default_color;
}

.button:default:pressed {
    -fx-background-color: derive(accent_color, -40%);
}

/**************************** Toggle Button ***********************************/

.toggle-button {
    -fx-skin: "com.pixelduke.control.skin.FXToggleButtonSkin";
}

.toggle-button:selected {
    -fx-background-color: accent_color;
    -fx-text-fill: white;
}

.toggle-button:selected:hover {
    -fx-border-color: border_hover_selected_color;
}

.toggle-button:selected:pressed {
    -fx-background-color: derive(accent_color, -40%);
}

/*******************************************************************************
 *                                                                             *
 * Check Box                                                                   *
 *                                                                             *
 ******************************************************************************/

.check-box {
    -fx-text-fill: text_color;
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
}

.check-box > .box > .mark {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-pref-width: 16px;
    -fx-pref-height: 12px;

    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

/* unselected */
.check-box > .box {
    -fx-background-color: box_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-border-color: box_border_color;
    -fx-border-width: 2px;
    -fx-border-style: solid;

    -fx-padding: 0.166667em 0px 0.166667em 0px;     /* 2 0 2 0 */
}

/* hover */
.check-box:hover > .box, .check-box:selected:hover > .box  {
    -fx-border-color: box_border_hover_color;
}

/* selected */
.check-box:selected > .box{
    -fx-background-color: accent_color;
    -fx-border-color: accent_color;
}

.check-box:selected > .box > .mark{
    -fx-background-color: white;
}

/* pressed */
.check-box:pressed > .box, .check-box:selected:pressed > .box
{
    -fx-background-color: #666666;
    -fx-border-color: #666666;
}

/* indeterminate */
.check-box:indeterminate > .box {
    -fx-padding: 3px;

    -fx-border-color: accent_color;
}

.check-box:indeterminate > .box > .mark {
    -fx-shape: null;

    -fx-pref-width: 10px;
    -fx-max-width: 10px;
    -fx-min-width: 10px;
    -fx-pref-height: 10px;
    -fx-max-height: 10px;
    -fx-min-height: 10px;

    -fx-background-color: indeterminate_mark_color;
    /*-fx-background-insets: 3px;*/
}

/* -- indeterminate - pressed */
.check-box:indeterminate:pressed > .box > .mark {
    -fx-background-color: #666666;
}

.check-box:indeterminate:pressed > .box {
    -fx-background-color: indeterminate_box_pressed_color;
    -fx-border-color: #666666;
}

/* focused */

.check-box:focused > .box{
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    /* - first border is focus ring
       - second border is control border */
    -fx-border-color: focus_ring_color, box_border_color;
    -fx-border-width: 1, 2;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: segments(1, 2), solid;
    -fx-border-insets: -3, 0;
}

/* -- focused - selected */
.check-box:focused:selected > .box{
    -fx-border-color: focus_ring_color, accent_color;
}

/* -- focused - selected, hover */
.check-box:focused:selected:hover > .box{
    -fx-border-color: focus_ring_color, box_border_hover_color;
}

/* -- focused - pressed */
.check-box:focused:pressed > .box{
    -fx-border-color: focus_ring_color, #666666;
}

.check-box:focused:selected:pressed > .box{
    -fx-border-color: focus_ring_color, #666666;
}

.check-box:focused:indeterminate:pressed > .box{
    -fx-border-color: focus_ring_color, #666666;
}

/* -- focused - indeterminate*/
.check-box:focused:indeterminate > .box {
    -fx-border-color: white, accent_color;
}

/* disabled */
.check-box:disabled {
    -fx-opacity: 0.4;
}

.check-box:disabled > .box {
    -fx-background-color: #cdcdcd;
    -fx-border-color: #aaa;
}

/*******************************************************************************
 *                                                                             *
 * Hyperlink                                                                  *
 *                                                                             *
 ******************************************************************************/
.hyperlink {
    -fx-padding: 0.166667em 0.25em 0.166667em 0em; /* 2 3 2 3 */

    hyperlink_color: accent_color;
    -fx-text-fill: hyperlink_color;
}

.hyperlink,
.hyperlink:focused,
.hyperlink:hover,
.hyperlink:visited,
.hyperlink:hover:visited,
.hyperlink:visited:armed {
    -fx-underline: true;
}

.hyperlink:hover {
    -fx-text-fill: hyperlink_hover_color;
}

.hyperlink:pressed {
    -fx-text-fill: hyperlink_pressed_color;
}

.hyperlink:disabled {
    -fx-text-fill: hyperlink_disabled_color;
}

/*******************************************************************************
 *                                                                             *
 * Radio Button                                                                *
 *                                                                             *
 ******************************************************************************/

.radio-button {
    -fx-text-fill: text_color;
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
}

.radio-button > .radio  {
    -fx-background-color: radio_background_color;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-background-insets: 0;

    /* Two borders exist because of the focus ring, if they didn't the size of the control would change on focus
       - The first one is the border of the control
       - The second one is the border of the focus ring
       */
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 1.0em, 0;
    -fx-border-color: border_color, transparent;
    -fx-border-insets: 0px, -2px;
    -fx-border-width: 2px, 1px;

    -fx-padding: 3px; /* 4 -- padding from outside edge to the inner black dot */
}

.radio-button > .radio > .dot {
    -fx-background-color: dot_color;
    -fx-background-insets: 0;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */

    -fx-padding: 0.416667em; /* 5px -- radius of the inner black dot when selected */
}

/* hover */
.radio-button:hover > .radio {
    -fx-background-color: radio_background_color;
    -fx-border-color: border_hover_color, transparent;
}

.radio-button:selected:hover > .radio > .dot {
    -fx-background-color: dot_selected_hover_color;
}

/* selected */
.radio-button:selected > .radio {
    -fx-border-color: accent_color, transparent;
}

.radio-button:selected > .radio > .dot {
    -fx-background-color: dot_selected_color;
}

/* pressed */
.radio-button:pressed > .radio
{
    -fx-background-color: background_pressed_color;
    -fx-border-color: #999999, transparent;
}

.radio-button:pressed:selected > .radio > .dot
{
    -fx-background-color: #999999;
}

/* focused */
.radio-button:focused > .radio
{
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 1.0em, 0;
    -fx-border-color: border_color, focus_ring_color;
    -fx-border-insets: 0px, -2px;
    -fx-border-width: 2px, 1px;
}

.radio-button:focused:hover > .radio
{
    -fx-border-color: border_color, focus_ring_color;
}

.radio-button:focused:pressed > .radio, .radio-button:focused:selected:pressed > .radio
{
    -fx-border-color: #999999, focus_ring_color;
    -fx-background-color: background_pressed_color;
}

.radio-button:focused:selected > .radio {
    -fx-border-color: accent_color, focus_ring_color;
}

/* disabled */
.radio-button:disabled
{
    -fx-opacity: 0.4;
}

.radio-button:disabled > .radio
{
    -fx-border-color: border_color, transparent;
}

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

.tooltip {
    -fx-background-color: tooltip_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0 0 0 0;

    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;  /*4 8 4 8 */

    -fx-font-family: "Segoe UI Semilight";
    -fx-text-fill: text_color;
    -fx-font-size: 1.166667em; /* 14 */

    -fx-border-color: border_color;
    -fx-border-width: 1px;

    -fx-effect: null;
}

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

.tool-bar {
    -fx-background-color: background_color;
}

.tool-bar:vertical {
    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
    -fx-spacing: 0.333em; /* 4 */
    -fx-alignment: TOP_LEFT;
}

.tool-bar {
    -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-overflow-button {
    -fx-padding: 0 0.75em 0 0 ;
}

.tool-bar:vertical > .tool-bar-overflow-button {
    -fx-padding: 0 0 0.75em 0 ;
}

.tool-bar-overflow-button > .arrow {
    -fx-padding: 0.666667em 0.916667em 0em 0em; /* 8 11 0 0 */
    -fx-shape: "M337.273,297.622l-0.016,1.069l2.724,2.639l-2.723,2.628l0.015,1.048h0.881l3.81-3.685l-3.788-3.699H337.273z M343.783,297.622h-0.902l-0.015,1.069l2.724,2.639l-2.724,2.628l0.015,1.048h0.882l3.809-3.685L343.783,297.622z" ;
}
/*==================== buttons, toggle buttons, menu button ==================*/

.tool-bar .button,
.tool-bar .toggle-button,
.tool-bar .menu-button,
.tool-bar .split-menu-button, .tool-bar .split-menu-button > .label, .tool-bar .split-menu-button > .arrow-button {
    -fx-background-color: transparent;
}

/* - hover */

.tool-bar .button:hover,
.tool-bar .toggle-button:hover,
.tool-bar .menu-button:hover {
    -fx-background-color: button_hover_color;
}

.tool-bar .button:hover,
.tool-bar .toggle-button:hover {
    -fx-border-color: transparent;
}

.tool-bar .split-menu-button:hover > .label,
.tool-bar .split-menu-button:hover > .arrow-button {
    -fx-background-color: button_hover_color;
}

.tool-bar .split-menu-button > .label:hover {
    -fx-border-color: light_button_hover_color;
    -fx-background-color: light_button_hover_color;
}

.tool-bar .split-menu-button > .arrow-button:hover {
    -fx-border-color: light_button_hover_color;
    -fx-background-color: light_button_hover_color;
}

/* - pressed */
.tool-bar .button:pressed,
.tool-bar .toggle-button:pressed,
.tool-bar .menu-button:pressed {
    -fx-background-color: button_pressed_color;
}

/* - focused */
.tool-bar .button:focused,
.tool-bar .toggle-button:focused {
    -fx-border-color: border_hover_color;
    -fx-border-style: solid;
    -fx-border-width: 2;
    -fx-border-insets: 0;
}

/*============================= toggle buttons ===============================*/

.tool-bar .toggle-button:selected {
    -fx-background-color: accent_color;
    -fx-text-fill: text_color;
}

.tool-bar .toggle-button:selected:hover {
    -fx-background-color: derive(accent_color, 40%);
}

.tool-bar .toggle-button:selected:pressed {
    -fx-background-color: derive(accent_color, -40%);
}

/*============================= Menu Buttons =================================*/
.tool-bar .menu-button {
    -fx-border-color: transparent;
}

.tool-bar .menu-button:showing {
    -fx-background-color: button_pressed_color;
}

/*=========================== Split Menu Button ==============================*/
.tool-bar .split-menu-button > .label {
    -fx-padding: 0.333333em 0.333333em 0.333333em 0.5em; /* 4 4 4 6 */
}

.tool-bar .split-menu-button > .arrow-button {
    -fx-padding: 0.5em 0.583333em 0.5em 0.333333em; /* 6 7 6 4 */
}

.tool-bar .split-menu-button:showing > .arrow-button {
    -fx-background-color: button_pressed_color;
}

.tool-bar .split-menu-button:showing > .label {
    -fx-background-color: button_pressed_color;
}

/*******************************************************************************
 *                                                                             *
 * Scroll Bar, Scroll Pane, Conscious Scroll Pane Skin                         *
 *                                                                             *
 ******************************************************************************/

.scroll-bar > .thumb {
    -fx-background-color: thumb_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.scroll-bar > .thumb:hover {
    -fx-background-color: thumb_hover_color;
}

.scroll-bar > .thumb:pressed {
    -fx-background-color: thumb_pressed_color;
}

.scroll-bar > .track {
    -fx-background-color: track_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}
.scroll-bar > .track-background {
    -fx-background-insets: 0;
}

/* Buttons */
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
    -fx-background-color: inc_dec_button_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.5em 0.25em 0.5em 0.25em; /* 6 3 6 3*/
}

.scroll-bar:horizontal > .increment-button,
.scroll-bar:horizontal > .decrement-button {
    -fx-padding: 0.25em 0.5em 0.25em 0.5em ; /* 3 6 3 6*/
}

.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover  {
    -fx-background-color: inc_dec_button_hover_color;
}

.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed {
    -fx-background-color: inc_dec_button_pressed_color;
}

/* Disabled */
.scroll-bar:disabled {
    -fx-opacity: 0.4;
}

/* ARROW SHAPES */
.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M14.4,18.611l3.633-3.637L14.4,11.338l0.352-0.352l3.992,3.988 l-3.992,3.988L14.4,18.611z";
}

.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M18.393,18.963L14.4,14.975l3.992-3.988l0.352,0.352l-3.633,3.637 l3.633,3.637L18.393,18.963z";
}

.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M20.561,13.154l-3.988,3.992l-3.988-3.992l0.352-0.352 l3.637,3.633l3.637-3.633L20.561,13.154z";
}

.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M20.209,17.146l-3.637-3.633l-3.637,3.633l-0.352-0.352 l3.988-3.992l3.988,3.992L20.209,17.146z";
}

.scroll-bar > .decrement-button:pressed > .decrement-arrow,
.scroll-bar > .increment-button:pressed > .increment-arrow {
    -fx-background-color: transparent, white;
    -fx-effect: null;
}

.scroll-bar:vertical > .increment-button > .increment-arrow,
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 0.208333em 0.333333em 0.208333em 0.333333em; /* 2.5 4 2.5 4*/
}

.scroll-bar:horizontal > .increment-button > .increment-arrow,
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.333333em 0.208333em 0.333333em 0.208333em; /* 4 2.5 4 2.5 */
    -fx-translate-y: -1; /* HACK:  Somehow the arrow is not centered so we add this to center it */
}

.scroll-bar > .decrement-button > .decrement-arrow,
.scroll-bar > .increment-button > .increment-arrow{
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: arrow_color;
    -fx-effect: null;
}

.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
    -fx-background-color: arrow_pressed_color;
}

/**************************** Scroll Pane *************************************/

.scroll-pane {
    -fx-skin: "com.pixelduke.control.skin.ConsciousScrollPaneSkin";

    -fx-background-color: transparent, transparent;
}

.scroll-pane .corner {
    -fx-background-radius: 0 0 0 0;
    -fx-background-color: corner_background_color;
    -fx-background-insets: 0 0 0 0;
}

.scroll-pane > .viewport {
    -fx-background-color: scroll_pane_background_color;
}

/* Corner of "ScrollPane" when in a VirtualFlow (it's not exactly a ScrollPane but has the same appearance) */
.list-view > .virtual-flow > .corner,
.tree-view > .virtual-flow > .corner,
.table-view > .virtual-flow > .corner,
.tree-table-view > .virtual-flow > .corner {
    -fx-background-color: corner_background_color;
}

/*******************************************************************************
 * Conscious Scroll Pane Skin                                                  *
 ******************************************************************************/

/************************   Minimal ScrollBar   ********************************/

.scroll-pane > .minimal-scroll-bar .decrement-arrow,
.scroll-pane > .minimal-scroll-bar .increment-arrow {
    -fx-pref-width: 0;
    -fx-pref-height: 0;
}

.minimal-scroll-bar > .increment-button,
.minimal-scroll-bar > .decrement-button {
    -fx-padding: 0;
    -fx-background-color: transparent;
}

.scroll-pane > .minimal-scroll-bar {
    -fx-background-color: transparent;
    -fx-pref-width: 2;
    -fx-pref-height: 2;
    -fx-padding: 0;
}

.scroll-pane > .minimal-scroll-bar > .track-background,
.minimal-scroll-bar > .track {
    -fx-background-color: transparent;
}

.scroll-pane > .minimal-scroll-bar:vertical > .thumb {
    -fx-background-color: minimal_thumb_color;
}

.scroll-pane > .minimal-scroll-bar:horizontal > .thumb {
    -fx-background-color: minimal_thumb_color;
}

/************************   Normal ScrollBar   *********************************/

.normal-scroll-bar > .thumb {
    -fx-background-color: thumb_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

.normal-scroll-bar > .thumb:hover {
    -fx-background-color: thumb_hover_color;
}

.normal-scroll-bar > .thumb:pressed {
    -fx-background-color: thumb_pressed_color;
}

.normal-scroll-bar > .track {
    -fx-background-color: track_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}
.normal-scroll-bar > .track-background {
    -fx-background-insets: 0;
}

/* Buttons */
.normal-scroll-bar > .increment-button,
.normal-scroll-bar > .decrement-button {
    -fx-background-color: inc_dec_button_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.5em 0.25em 0.5em 0.25em; /* 6 3 6 3*/
}

.normal-scroll-bar:horizontal > .increment-button,
.normal-scroll-bar:horizontal > .decrement-button {
    -fx-padding: 0.25em 0.5em 0.25em 0.5em ; /* 3 6 3 6*/
}

.normal-scroll-bar > .increment-button:hover,
.normal-scroll-bar > .decrement-button:hover  {
    -fx-background-color: inc_dec_button_hover_color;
}

.normal-scroll-bar > .increment-button:pressed,
.normal-scroll-bar > .decrement-button:pressed {
    -fx-background-color: inc_dec_button_pressed_color;
}

/* Disabled */
.normal-scroll-bar:disabled {
    -fx-opacity: 0.4;
}

/* ARROW SHAPES */
.normal-scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M14.4,18.611l3.633-3.637L14.4,11.338l0.352-0.352l3.992,3.988 l-3.992,3.988L14.4,18.611z";
}

.normal-scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M18.393,18.963L14.4,14.975l3.992-3.988l0.352,0.352l-3.633,3.637 l3.633,3.637L18.393,18.963z";
}

.normal-scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M20.561,13.154l-3.988,3.992l-3.988-3.992l0.352-0.352 l3.637,3.633l3.637-3.633L20.561,13.154z";
}

.normal-scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M20.209,17.146l-3.637-3.633l-3.637,3.633l-0.352-0.352 l3.988-3.992l3.988,3.992L20.209,17.146z";
}

.normal-scroll-bar > .decrement-button:pressed > .decrement-arrow,
.normal-scroll-bar > .increment-button:pressed > .increment-arrow {
    -fx-background-color: transparent, white;
    -fx-effect: null;
}

.normal-scroll-bar:vertical > .increment-button > .increment-arrow,
.normal-scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-padding: 0.208333em 0.333333em 0.208333em 0.333333em; /* 2.5 4 2.5 4*/
}

.normal-scroll-bar:horizontal > .increment-button > .increment-arrow,
.normal-scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.333333em 0.208333em 0.333333em 0.208333em; /* 4 2.5 4 2.5 */
    -fx-translate-y: -1; /* HACK:  Somehow the arrow is not centered so we add this to center it */
}

.normal-scroll-bar > .decrement-button > .decrement-arrow,
.normal-scroll-bar > .increment-button > .increment-arrow{
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: arrow_color;
    -fx-effect: null;
}

.normal-scroll-bar > .increment-button:pressed > .increment-arrow,
.normal-scroll-bar > .decrement-button:pressed > .decrement-arrow {
    -fx-background-color: arrow_pressed_color;
}

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

.combo-box-base  {
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-color: transparent, border_color, transparent, combo_box_background_color;
    -fx-background-radius: 0, 0, 0, 0;

    -fx-padding: 0.166667em 0.166667em 0.166667em 0.166667em; /* 2 2px 2 2px*/

    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */

    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

.combo-box-base > .list-cell {
    -fx-text-fill: text_color;
}

/* Customise the ListCell that appears in the ComboBox button itself */
.combo-box > .list-cell {
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}

.combo-box-base:hover {
    -fx-background-color: transparent, border_hover_color, transparent, combo_box_background_color;
}

.combo-box-base:focused {
    -fx-background-color: transparent, border_focused_color, transparent, combo_box_background_color;
    -fx-background-insets: -1.4, 0, 1, 2;

    -fx-background-radius: 0, 0, 0, 0;
}

.combo-box-base:focused:hover {
    -fx-background-color: transparent, border_hover_color, transparent, combo_box_background_color;
}

.combo-box-base:pressed,
.combo-box-base:focused:pressed,
.combo-box-base:showing,
.combo-box-base:showing:hover,
.combo-box-base:editable:showing {
    -fx-background-color: transparent, border_pressed_color, transparent, background_pressed_color;
}

.combo-box-base:disabled {
    -fx-opacity: .4;
}

/* ------- OPEN BUTTON ------- */
.combo-box-base > .arrow-button {
    -fx-background-color: transparent, transparent, transparent;
}

/* Add more space to the inside right part of a ComboBox so that more text fits inside */
.combo-box-base.combo-box > .arrow-button {
    -fx-padding: 0.5em 0.667em 0.5em 0em; /* 6 8 6 0 */
}

/* ------- ARROW ------- */
.combo-box-base > .arrow-button > .arrow {
    -fx-background-insets: 0 0 0 0, 0;
}

/*============================  ListView (Popup)  ============================*/
.combo-box-popup > .list-view {
    -fx-effect: null;

    -fx-background-color: list_cell_color;
    -fx-background: list_cell_color;
    -fx-border-color: list_cell_border_color;

    -fx-background-insets: 0, 1;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em;
    -fx-padding: 0.333333em 0 0.333333em 0.416667em; /* 4 0 4 5 */

    -fx-background-color: list_cell_color;

    -fx-text-fill: text_color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:hover{
    -fx-background-color: cell_hover_color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:pressed{
    -fx-background-color: cell_pressed_color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected{
    -fx-background-color: cell_selected_color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover{
    -fx-background-color: cell_selected_hover_color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:pressed{
    -fx-background-color: cell_selected_pressed_color;
}

/*==========================  Editable ComboBox  =============================*/

.combo-box-base.combo-box:editable > .text-input {
    -fx-skin: "javafx.scene.control.skin.TextFieldSkin"
}

.combo-box-base.combo-box:editable > .text-input {
    -fx-background-color: transparent, transparent;
}

/*===== Arrow Button =====*/
.combo-box-base.combo-box:editable > .arrow-button {
    -fx-background-insets: 0 0 0 -8;
    -fx-background-radius: 0;
}
.combo-box-base.combo-box:editable > .arrow-button:hover {
    -fx-background-color: combo_box_editable_button_hover_color;
}

/*====== Focused =======*/
.combo-box-base.combo-box:editable:focused {
    -fx-background-color: transparent, accent_color, transparent, combo_box_editable_focused_background_color;
}

/* - Arrow Button */
.combo-box-base.combo-box:editable:focused > .arrow-button > .arrow {
    -fx-background-color: combo_box_editable_focused_arrow_color;
}

.combo-box-base.combo-box:editable:focused > .arrow-button:hover {
    -fx-background-color: combo_box_editable_focused_button_hover_color;
}

/*******************************************************************************
 *                                                                             *
 * Text Common (TextField, PasswordField, TextArea)                            *
 *                                                                             *
 ******************************************************************************/

.text-input {
    -fx-background-radius: 0, 0;

    -fx-background-color: border_color, text_input_background_color;
    -fx-background-insets: 0, 2;

    -fx-prompt-text-fill: prompt_text_color;

    -fx-highlight-fill: highlight_color;
    -fx-highlight-text-fill: highlighted_text_color;

    /*-fx-font-size: 1em; /* 12 */

    -fx-text-fill: text_color;

    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}

.text-input.text-field > Pane,
.text-input.password-field > Pane {
    -fx-background-color: transparent;
}

/* hover */
.text-input:hover {
    -fx-background-color: border_hover_color, background_hover_color;
}

/* focused */
.text-input:focused {
    -fx-background-color: accent_color, background_focused_color;

    -fx-text-fill: text_focused_color;
}

/* disabled */
.text-input:disabled {
    -fx-opacity: 1;
    -fx-background-insets: 0, 2;
    -fx-background-color: border_disabled_color, background_disabled_color;
    -fx-text-fill: text_disabled_color;
    -fx-prompt-text-fill: text_disabled_color;
}

/*******************************************************************************
 *                                                                             *
 * Text Field (and PasswordField)                                              *
 *                                                                             *
 ******************************************************************************/

/* Issue #149: Need to use TextField because ColorPicker has custom textfields with "text-field" styleclass that aren't actually of type
   TextField which will cause an IllegalArgumentException when creating the impl.com.pixelduke.transit.TextFieldSkin object and passing it,
   for instance, the WebColorField */
TextField {
    -fx-skin: "com.pixelduke.control.skin.FXTextFieldSkin";

    -right-button-visible: true;
}

TextField:readonly {
    -right-button-visible: false;
}

.text-field > .right-button > .right-button-graphic {
    -fx-shape: "M221.738,305.873l6.135,6.16l-2.875,2.863l-6.135-6.159l-6.263,6.237l-2.864-2.875l6.263-6.238l-6.177-6.202l2.875-2.863l6.177,6.201l6.244-6.22l2.864,2.876L221.738,305.873z";

    -fx-padding: 0.416667em;
    -fx-background-color: graphic_color;
}

.text-field > .right-button {
    -fx-cursor: default;

    -fx-background-insets: -0.1666665em -0.45em -0.1666665em -0.45em; /* 4 7 4 7 -> this values are subtracted by 2px in em because of the border of the textfield */
    -fx-background-color: background_focused_color;  /* We must give it a color so that it reacts to the mouse */
}

.text-field > .right-button:hover > .right-button-graphic {
    -fx-background-color: accent_color;
}

/*******************************************************************************
 *                                                                             *
 * Password Field                                                              *
 *                                                                             *
 ******************************************************************************/

.password-field {
    -fx-skin: "com.pixelduke.control.skin.FXPasswordFieldSkin";

    -right-button-visible: true;
}

.password-field > .right-button {
    -fx-padding: 0 0.166667em 0 0.166667em;
}

.password-field > .right-button > .right-button-graphic {
    -fx-shape            : "M307.688,399.564c0,1.484-1.203,2.688-2.688,2.688c-1.484,0-2.688-1.203-2.688-2.688s1.203-2.688,2.688-2.688C306.484,396.876,307.688,398.08,307.688,399.564z M297.5,399h2.5c0,0,1.063-4,5-4c3.688,0,5,4,5,4h2.5c0,0-2.063-6.5-7.5-6.5C299,392.5,297.5,399,297.5,399z";
    -fx-scale-shape: false;
    -fx-background-color: #111;
}

.password-field > .right-button:pressed {
    -fx-background-color: accent_color;
}

.password-field > .right-button:pressed > .right-button-graphic {
    -fx-background-color: white;
}

/*******************************************************************************
 *                                                                             *
 * Text Area                                                                   *
 *                                                                             *
 ******************************************************************************/
.text-area {
    -fx-padding: 0;
    -fx-cursor: default;
}

.text-area .content {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;

    -fx-background-color: border_color, text_input_background_color;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 2;
}

.text-area:hover .content {
    -fx-background-color: border_color, background_hover_color;
    -fx-background-radius: 0;
}

.text-area:focused .content {
    -fx-background-color: accent_color, background_focused_color;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 2;
}

.text-area:disabled .content {
    -fx-background-color: border_disabled_color, background_disabled_color;
    -fx-background-radius: 0;
}

/* TODO: below not working */
.text-area:disabled .content .text {
    -fx-fill: text_disabled_color;
}

/*******************************************************************************
 *                                                                             *
 * Progress Bar                                                                *
 *                                                                             *
 ******************************************************************************/
.progress-bar {
    track_background_color: progress_background_color;
    bar_color: accent_color;
    dot_color: accent_color;
}

.progress-bar {
    -fx-skin: "com.pixelduke.control.skin.PointsProgressBarSkin";
}

.progress-bar > .bar {
    -fx-background-color: bar_color;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
}

.progress-bar > .track {
    -fx-background-color: track_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-pref-height: 4px;
    -fx-min-height: 4px;
    -fx-max-height: 4px;
}

/* Indeterminate */
.progress-bar:indeterminate > .track {
    -fx-background-color: transparent;
}

.progress-bar:indeterminate .dot {
    -fx-background-radius: 1em;
    -fx-padding: 0.166667em;

    -fx-background-color: dot_color;
}

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

.slider {
    -fx-skin: "com.pixelduke.control.skin.FXSliderSkin";
}

.slider {
    -show-value-on-interaction: true;
}

.slider .thumb {
    -fx-background-color: accent_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0.5em; /* 6 */

    -fx-padding: 1em 0.333333em 1em 0.333333em;  /* 12 4 12 4 */

    -fx-effect: null;
}

.slider:vertical .thumb {
    -fx-padding: 0.333333em 1em 0.333333em 1em; /* 4 12 4 12 */
}

.slider .track {
    -fx-background-color: #c6c6c6;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.083333em; /* 1 */

}

.slider .fill {
    -fx-background-color: accent_color;
    -fx-padding: 0.083333em; /* 1 */
}

/* hover */
.slider:hover .track{
    -fx-background-color: track_hover_color;
}

.slider:hover .thumb{
    -fx-background-color: thumb_hover_color;
}

/* pressed */
.slider .thumb:pressed {
    -fx-background-color: thumb_pressed_color;
}

/* disabled */
.slider:disabled {
    -fx-opacity: 0.2;
}

/* Slider popup showing its value */
.slider-popup .label {
    -fx-background-color: #f2f2f2;
    -fx-border-color: #cccccc;

    -fx-text-fill: #111;

    -fx-padding: 0.5em 0.75em 0.5em 0.75em; /* 6 9 6 9 */
}

/*******************************************************************************
 *                                                                             *
 * Spinner                                                                     *
 *                                                                             *
 ******************************************************************************/

.spinner > .text-field{
    -fx-skin: "javafx.scene.control.skin.TextFieldSkin";
}

.spinner {
    -fx-background-color: spinner_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-border-color: spinner_border_color;
    -fx-border-width: 1px;
}

.spinner > .text-field {
    -fx-background-color: spinner_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

/* TODO: Below doesn't work when spinner is in SPLIT_ARROWS_HORIZONTAL and is not focused
   however it works if you are running with Scenic View attached. Should be a bug in JavaFX 8.
 */
.spinner:focused > .text-field,
.spinner:contains-focus > .text-field,
.spinner > .text-field,
.spinner.split-arrows-horizontal > .text-field {
    -fx-text-fill: text_color;
}

.spinner .increment-arrow-button,
.spinner .decrement-arrow-button  {
    -fx-background-color: spinner_background_color;
    /*Change the two 0's here to -1 to get rid of the horizontal line */
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.333335em 0.666667em 0.333335em 0.666667em;  /* 5 8 3 8 */
}

.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
    -fx-background-color: arrow_button_hover_color;
}

.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
    -fx-background-color: arrow_button_pressed_color;
}

.spinner .increment-arrow-button .increment-arrow {
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;  /* 2 4 2 4 */
    -fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
    -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";
}

.spinner .increment-arrow-button .increment-arrow,
.spinner .decrement-arrow-button .decrement-arrow {
    -fx-background-color: arrow_color;
}

.spinner .increment-arrow-button:pressed .increment-arrow,
.spinner .decrement-arrow-button:pressed .decrement-arrow{
    -fx-background-color: arrow_pressed_color;
}

/* Spinner - Horizontal arrows */
.spinner.split-arrows-horizontal .increment-arrow-button .increment-arrow,
.spinner.arrows-on-right-horizontal .increment-arrow-button .increment-arrow,
.spinner.arrows-on-left-horizontal .increment-arrow-button .increment-arrow {
    -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
    -fx-shape: "M 0 0 v 7 l 3.5 -4 z";
}
.spinner.split-arrows-horizontal .decrement-arrow-button .decrement-arrow,
.spinner.arrows-on-right-horizontal .decrement-arrow-button .decrement-arrow,
.spinner.arrows-on-left-horizontal .decrement-arrow-button .decrement-arrow {
    -fx-padding: 0.333333em 0.166667em 0.333333em 0.166667em; /* 4 2 4 2 */
    -fx-shape: "M 4 0 v 7 l -4 -3.5 z";
}

/*******************************************************************************
 *                                                                             *
 * Date Picker                                                                 *
 *                                                                             *
 ******************************************************************************/

.date-picker.combo-box-base {
    -fx-background-color: border_color, date_picker_background_color;
    -fx-background-insets: 0, 2;
}

.date-picker.combo-box-base:hover {
    -fx-background-color: border_hover_color, background_hover_color;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 0;
}

.date-picker.combo-box-base:pressed {
    -fx-background-color: #666666, date_picker_background_color;
    -fx-background-insets: 0, 2;
}

.date-picker.combo-box-base:focused,
.date-picker.combo-box-base:focused:hover {
    -fx-background-color: accent_color, background_hover_color;
    -fx-background-insets: 0, 2;
}

/* "Textfield"  - most properties will be inherited by what was defined for the textfield */

.date-picker > .text-field {
    -fx-skin: "javafx.scene.control.skin.TextFieldSkin";
}

.date-picker > .text-input {
    -fx-background-radius: 0;
    -fx-background-insets: 0;
}

.date-picker > .text-input > Pane {
    -fx-background-color: transparent;
}

/* Icon */

.date-picker > .arrow-button {
    -fx-background-color: date_picker_background_color;
}

.date-picker > .arrow-button > .arrow {
    -fx-shape: "M24,8.136v14H8v-14h3v-1h1v1h8v-1h1v1H24z M9,9.136v2h14v-2h-2v1h-1v-1h-8v1h-1v-1H9z M23,21.137v-9H9v9H23zM11,15.136h1v1h-1V15.136z M11,17.137h1v1h-1V17.137z M11,19.137h1v1h-1V19.137z M14,13.136h1v1h-1V13.136z M14,15.136h1v1h-1V15.136z M14,17.137h1v1h-1V17.137z M14,19.137h1v1h-1V19.137z M17,13.136h1v1h-1V13.136z M17,15.136h1v1h-1V15.136z M17,17.137h1v1h-1V17.137z M17,19.137h1v1h-1V19.137z M20,13.136h1v1h-1V13.136z M20,15.136h1v1h-1V15.136z M20,17.137h1v1h-1V17.137z";
    -fx-background-color: graphic_color;
    -fx-background-insets: 0;
    -fx-padding: 0.666667em 0.583333em 0.5em 0.416667em; /* 10 10 8 8 */
    -fx-scale-shape: true;
}

.date-picker > .arrow-button:hover > .arrow {
    -fx-background-color: accent_color;
}

.date-picker > .arrow-button:pressed {
    -fx-background-color: accent_color;
}

.date-picker > .arrow-button:pressed > .arrow {
    -fx-background-color: white;
}

/* Disabled */

.date-picker:disabled > .arrow-button {
    -fx-background-color: text_field_disabled_background_color;
}

/***************************** Date Picker popup ********************************/
.date-picker-popup .button {
    -fx-skin: "javafx.scene.control.skin.ButtonSkin"; /* Without also specifying this an exception sometimes happens when opening the DatePicker for the second time */
}

.date-picker-popup {
    -fx-border-color: popup_border_color;
    -fx-border-width: 2px;

    -fx-effect: null;

    -fx-padding: 0.083333em; /* 1 1 1 1 */

    -fx-background-radius: 0;
    -fx-alignment: CENTER; /* VBox */
}

.date-picker-popup {
    -fx-background-color: cell_background_color;
    -fx-background-insets: 0;
}

.date-picker-popup > .month-year-pane {
    -fx-padding: 0.588883em 0.5em 0.666667em 0.5em; /* 7 6 8 6 */

    -fx-background-color: cell_background_color;
    -fx-background-insets: 0;

    -fx-font-family: "Segoe UI Semilight";
    -fx-font-size: 1.083333em;
}

.date-picker-popup > .month-year-pane > .secondary-label {
    -fx-alignment: BASELINE_CENTER;
    -fx-padding: 0.5em 0 0 0; /* 6 0 0 0 */
}

.date-picker-popup > * > .spinner > .button {
    -fx-padding: 0.25em 0.583333em 0.25em 0.583333em; /* 3 7 3 7 */
}

.date-picker-popup > * > .spinner > .button {
    -fx-background-color: cell_background_color;
    -fx-background-insets: 0;
}

.date-picker-popup > * > .spinner {
    -fx-background-color: cell_background_color;
    -fx-background-insets: 0;

    -fx-spacing: 0.25em; /* 3 */
    -fx-alignment: CENTER;
    -fx-fill-height: false;
}

.date-picker-popup > * > .spinner > .spinner-label {
    -fx-text-fill: text_color;
}

.date-picker-popup > * > .spinner > .label {
    -fx-alignment: CENTER;
}

.date-picker-popup > * > .spinner > .button:hover {
    -fx-background-color: spinner_button_hover_color;
}

.date-picker-popup > * > .spinner > .button:armed {
    -fx-background-color: #606060;
}

/***********  Arrows  *************/
.date-picker-popup > * > .spinner > .button > .left-arrow {
    -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
    -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
    -fx-scale-shape: true;
}

.date-picker-popup > * > .spinner > .button > .right-arrow {
    -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
    -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
    -fx-scale-shape: true;
}

.date-picker-popup > * > .spinner > .button > .left-arrow,
.date-picker-popup > * > .spinner > .button > .right-arrow {
    -fx-background-color: text_color;
    -fx-background-insets: 0;
    -fx-effect: null;
}

.date-picker-popup > * > .spinner > .button:pressed > .left-arrow,
.date-picker-popup > * > .spinner > .button:pressed > .right-arrow {
    -fx-background-color: cell_background_color;
    -fx-background-insets: 0;
}

.date-picker-popup > .calendar-grid {
    -fx-background-color: cell_background_color;
    -fx-padding: 0;
}

.date-picker-popup > * > .date-cell {
    -fx-background-color: transparent;
    -fx-background-insets: 1, 2;
    -fx-padding: 0;
    -fx-alignment: BASELINE_CENTER;
    -fx-opacity: 1.0;
}

.date-picker-popup > * > .day-cell.previous-month,
.date-picker-popup > * > .day-cell.next-month {
    -fx-background-color: day_cell_background_days_from_other_months_color;
    -fx-border-color: day_cell_background_color;
    -fx-text-fill: text_days_from_other_months_color;
}

.date-picker-popup > * > .day-cell.previous-month:hover,
.date-picker-popup > * > .day-cell.next-month:hover {
    -fx-background-color: day_cell_border_hover_color, day_cell_border_hover_color, day_cell_background_days_from_other_months_color;
}

.date-picker-popup > * > .day-name-cell,
.date-picker-popup > * > .week-number-cell {
    -fx-font-size: 0.75em;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: text_color;

    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.date-picker-popup > * > .week-number-cell {
    -fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
}

.date-picker-popup > * > .day-name-cell {
    -fx-font-size: 0.833333em; /* 10 */
    -fx-padding: 0 0 0.75em 0;
}

/* Day Cells */
.date-picker-popup > * > .day-cell {
    -fx-background-color: day_cell_background_color;
    -fx-border-color: day_cell_background_color;

    -fx-text-fill: text_color;

    -fx-padding: 0.5em 0.5em 0.5em 0.5em; /* 6 6 6 6 */
}

.date-picker-popup > * > .hijrah-day-cell {
    -fx-alignment: TOP_LEFT;
    -fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
    -fx-cell-size: 2.75em;
}

.date-picker-popup > * > .day-cell:hover {
    -fx-background-color: day_cell_border_hover_color, day_cell_border_hover_color, day_cell_background_color;
    -fx-text-fill: text_hover_color;
}

.date-picker-popup > * > .day-cell.selected {
    -fx-background-color: accent_color;
    -fx-text-fill: text_selected_color;
}

.date-picker-popup > * > .day-cell.selected:hover {
    -fx-background-color: derive(accent_color, 70%);
}

.date-picker-popup > * > .today {
    -fx-background-color: today_border_color, today_border_color, day_cell_background_color;
}

/*******************************************************************************
 *                                                                             *
 * Choice Box                                                                  *
 *                                                                             *
 ******************************************************************************/

.choice-box  {
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-color: transparent, border_color, transparent, choice_box_background_color;
    -fx-background-radius: 0, 0, 0, 0;
    -fx-padding: 0.333333em 0.166667em 0.333333em 0.666667em; /* 4 8 4 8 */

    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */

    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

.choice-box > .open-button {
    -fx-background-color: transparent;

    -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
}

.choice-box > .label {
    -fx-text-fill: text_color;
}

.choice-box:hover {
    -fx-background-color: transparent, border_hover_color, transparent, choice_box_background_color;
}

.choice-box:focused {
    -fx-background-color: transparent, border_focused_color, transparent, choice_box_background_color;
    -fx-background-insets: -1.4, 0, 1, 2;

    -fx-background-radius: 0, 0, 0, 0;
}

.choice-box:focused:hover {
    -fx-background-color: transparent, border_hover_color, transparent, choice_box_background_color;
}

.choice-box:disabled {
    -fx-opacity: .4;
}

/* ARROW */
.choice-box > .open-button > .arrow {
    -fx-background-insets: 0;
    -fx-background-color: arrow_color;

    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
}

/*******************************************************************************
 *                                                                             *
 * List View                                                                   *
 *                                                                             *
 ******************************************************************************/

.list-view {
    -fx-background-color: list_view_background_color;
    -fx-background-insets: 0;
    -fx-padding: 0;

    -fx-border-color: border_color;
    -fx-border-width: 1px;

    -fx-font-size: 1em; /* 12 */
}

.list-view:focused {
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

/********************* ListView List Cells ********************************/

.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 0.666667em 1em 0.666667em 1em; /* 8 12 8 12 */
    -fx-font-family: "Segoe UI";
    -fx-text-fill: text_color;
}

.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-background-color: transparent;
}

/* Hover style */
.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
    -fx-background-color: cell_hover_color;
}

/* Pressed style */
.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:pressed,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:pressed {
    -fx-background-color: cell_pressed_color;
}

/* Selected style */
.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:selected,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:selected {
    -fx-background-color: cell_selected_color;
    -fx-background-insets: 0;

    -fx-text-fill: text_color;
}

/* Selected, Hover style */
.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background-color: cell_selected_hover_color;
}

/* Selected, Hover, Pressed style */
.list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover:pressed,
.list-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover:pressed {
    -fx-background-color: cell_selected_pressed_color;
}

/*******************************************************************************
 *                                                                             *
 * Table View                                                                  *
 *                                                                             *
 ******************************************************************************/

.table-view{
    -fx-cell-focus-inner-border: cell_selected_color; /* focused */

    -fx-background-color: transparent, transparent;

    -fx-border-color: table_view_border_color;

    -fx-padding: 0;
}

.table-view .column-header {
    -fx-padding: 0em 0em 0em 1em;
}

.table-view .column-header .label {
    -fx-padding: 0.666666em 2em 0.666666em 0; /* 8 24 8 0 */
}

.table-cell {
    -fx-padding: 0.833333em 2em 0.5em 1em; /* 10 24 6 12 */
}

/****************************** Column Header ************************************/

.table-view .column-header .label{
    -fx-text-fill: text_color;
    -fx-font-family: "Segoe UI SemiBold";
    -fx-font-size: 1em;  /* 12 */
    -fx-alignment: center-left;
}

.table-view .column-header:hover{
    -fx-background-color: cell_hover_color;
}

.table-view .column-header:hover .label{
    -fx-text-fill: hover_text_color;
}

.table-view .column-header-background {
    -fx-background-color: table_background_color;
}

/* Bottom border on tableview header area */
.table-view > .column-header-background > .nested-column-header,
.table-view > .column-header-background > .filler {
    -fx-background-color: table_background_color;
    -fx-border-insets: 0 0 0 0;
    -fx-border-width: 0 0 1 0;
    -fx-border-color: table_view_border_color;
}

.table-view .column-header {
    -fx-background-color: table_background_color;
}

.table-view .filler {
    -fx-background-color: transparent, table_background_color;
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
}

.table-view .column-header.table-column-selected {
    -fx-background-color: table_background_color;
}

/* Because of Dark style we need to make these panes background color transparent */
.table-view > .column-header-background .nested-column-header > .column-header > GridPane {
    -fx-background-color: transparent;
}

.table-view > .column-header-background .nested-column-header > .column-header > GridPane > .sort-order-dots-container {
    -fx-background-color: transparent;
}

/********************************** Table View "body"  *************************************/

.table-cell {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em;  /* 12 */
    -fx-alignment: center-left;

    -fx-border-width: 0;
}

.table-cell:last-visible {
    -fx-border-color: transparent;
}

.table-cell:filled:hover {
    -fx-background-color: cell_hover_color;
}

.table-cell .text {
    -fx-fill: text_color;
}

.table-cell:hover .text {
    -fx-fill: hover_text_color;
}

/* hover row (row selection mode) */
.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:hover {
    -fx-background-color: cell_hover_color;
}

/* Selected cells and rows */
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected .text,
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected .table-cell .text {
    -fx-fill: selected_text_color;
}

/* - when focused (with cell selection mode) */
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected .table-cell {
    -fx-background-color: cell_selected_color;
    -fx-border-width: 0;
}

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected:hover,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected:hover .table-cell {
    -fx-background-color: cell_selected_hover_color;
}

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected > .text,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected .table-cell > .text {
    -fx-fill: selected_text_color;
}

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected:hover:pressed {
    -fx-background-color: cell_selected_pressed_color;
}

/* -- when row selection mode */

.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected {
    -fx-background-color: cell_selected_color;
}

.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected:hover {
    -fx-background-color: cell_selected_hover_color;
}

/* - when not focused */
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected .table-cell {
    -fx-background-color: cell_selected_unfocused_color;
}

.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected > .text,
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected .table-cell > .text {
    -fx-fill: selected_unfocused_text_color;
}

/* -- when row selection mode */

.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected {
    -fx-background-color: cell_selected_unfocused_color;
}

.table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected:hover:pressed {
    -fx-background-color: cell_selected_pressed_color;
}

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:selected:hover:pressed .table-cell {
    -fx-background-color: cell_selected_pressed_color;
}

.table-row-cell {
    -fx-background-color: table_background_color;
    -fx-background-insets: 0;
}

/*********************** Check box in Table View *****************************/

.check-box-table-cell > .check-box {
    -fx-opacity: 1;
}

.check-box-table-cell > .check-box > .box {
    -fx-background-color: table_check_box_cell_box_background_color;
    -fx-border-color: table_check_box_cell_box_border_color;
    -fx-background-insets: 0;
}

.check-box-table-cell > .check-box:selected > .box > .mark {
    -fx-background-color: table_check_box_cell_mark_color;
}

/********************* Table Menu Button (Plus Symbol)  **********************/

.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button {
    -fx-background-color: table_background_color;
    -fx-background-insets: 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;
}

.table-view > .column-header-background > .show-hide-columns-button:hover,
.tree-table-view > .column-header-background > .show-hide-columns-button:hover {
    -fx-background-color: cell_hover_color;
}

.table-view .show-hide-column-image,
.tree-table-view .show-hide-column-image {
    -fx-background-color: show_hide_image_color;
    -fx-padding: 0.083333em; /* 3px */
    -fx-scale-shape: false;
    -fx-shape: "M33.561,25.389c0,0.828-0.672,1.5-1.5,1.5s-1.5-0.672-1.5-1.5c0-0.828,0.672-1.5,1.5-1.5S33.561,24.561,33.561,25.389z M32.061,30.532c-0.828,0-1.5,0.672-1.5,1.5c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5C33.561,31.204,32.889,30.532,32.061,30.532z M32,37.107c-0.828,0-1.5,0.672-1.5,1.5c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5C33.5,37.779,32.828,37.107,32,37.107z";
}

/********************* TableView with column grid lines  **********************/

/* Increase header bottom border "thickness" */
.table-view.column-grid-lines > .column-header-background > * {
    -fx-border-insets: 0 0 1 0, 0 0 0 0;
    -fx-border-width: 0 0 1 0, 0 0 1 0;
    -fx-border-color: table_view_border_color, derive(table_view_border_color, 20%);
}

/* table body */
.table-view.column-grid-lines > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell {
    -fx-border-color: transparent table_view_border_color transparent transparent;
    -fx-border-width: 1px;
    -fx-border-insets: 0px 0px 0px 0px;
}

/* Header Grid Lines */
.table-view.column-grid-lines > .column-header-background > .nested-column-header > .nested-column-header > .column-header.table-column,
.table-view.column-grid-lines > .column-header-background > .nested-column-header > .column-header.table-column {
    -fx-border-color: table_view_border_color table_view_border_color transparent transparent;
    -fx-border-width: 1px;
    -fx-border-insets: -1 0 0 0;
}

/*******************************************************************************
 *                                                                             *
 * Tree View                                                                   *
 * Note: Also has some common styles that are also present in TreeTableView    *
 *                                                                             *
 ******************************************************************************/

.tree-view {
    -fx-background-color: tree_view_background_color;
    -fx-padding: 0;
    -fx-background-insets: 0;
}

.tree-view .tree-cell {
    -fx-font-size: 1em; /* 12 */
    -fx-padding: 0.5em; /* 6 */
    -fx-background-color: tree_view_background_color;
    -fx-text-fill: text_color;
}

.tree-view .tree-cell > .tree-disclosure-node {
    -fx-background-color: transparent;
}

/********** Label **********/
.tree-view .tree-cell .label{
    -fx-font-family: "Segoe UI";

    -fx-padding: 0 0.25em 0 0; /* 0 3 0 0 */
}

.tree-view .tree-cell {
    -fx-text-fill: text_color;
}

/* Hover */
.tree-view .tree-cell:filled:hover,
.tree-view.alternating-row-colors .tree-cell:filled:hover:odd {
    -fx-background-color: cell_hover_color;

    -fx-text-fill: text_hover_color;
}

.tree-view .tree-cell:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: arrow__hover_color;
}

/* Selected */
.tree-view .tree-cell:filled:selected,
.tree-view.alternating-row-colors .tree-cell:filled:selected:odd {
    -fx-background-color: cell_selected_color;
    -fx-table-cell-border-color: transparent;

    -fx-text-fill: text_selected_color;
}

/* Selected hover */
.tree-view .tree-cell:filled:selected:hover,
.tree-view .tree-cell:selected:hover,
.tree-view.alternating-row-colors .tree-cell:filled:selected:hover:odd,
.tree-view.alternating-row-colors .tree-cell:selected:hover:odd {
    -fx-background-color: cell_selected_hover_color;
    -fx-text-fill: text_selected_color;
}

.tree-view .tree-cell:selected:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: arrow_selected_hover_color;
}


/* Pressed */
.tree-view .tree-cell:filled:pressed,
.tree-view.alternating-row-colors .tree-cell:filled:pressed:odd {
    -fx-background-color: cell_pressed_color;
}

/* Pressed, Selected */
.tree-view .tree-cell:filled:selected:pressed,
.tree-view .tree-cell:selected:pressed,
.tree-view.alternating-row-colors .tree-cell:filled:selected:pressed:odd,
.tree-view.alternating-row-colors .tree-cell:selected:pressed:odd {
    -fx-background-color: cell_selected_pressed_color;
}

/*********** Expand/Collapse icon **********/
.tree-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: text_color;
}

.tree-cell:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: text_hover_color;
}

.tree-cell:selected > .tree-disclosure-node > .arrow {
    -fx-background-color: text_selected_color;
}

.tree-cell:expanded > .tree-disclosure-node > .arrow,
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
    -fx-scale-y: -1;
    -fx-rotate: 90;
}

.tree-cell {
    -fx-background-color: transparent;
}

/*******************************************************************************
 *                                                                             *
 * Tree Table View                                                             *
 *                                                                             *
 ******************************************************************************/

.tree-table-view {
    -fx-font-family: "Segoe UI";
    -fx-background-color: table_border_color;
    -fx-border-color: table_border_color;
    -fx-table-cell-border-color: transparent;
    -fx-border-width: 0;
    -fx-background-radius: 1;
    -fx-background-insets: 0 0 0 0;
    -fx-font-size: 1em; /* 12 */
}

.tree-table-row-cell > .tree-disclosure-node {
    -fx-padding: 4 6 4 8;
}

.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-disclosure-node,
.tree-table-view > .column-header-background > .nested-column-header > .column-header > GridPane {
    -fx-background-color: transparent;
}

.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: collapse_expand_arrow_color;
}

.tree-table-cell {
    -fx-padding: 0.5em 0 0.5em 0.333333em; /* 6 0 6 4 */
}

.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell {
    -fx-background-color: table_background_color;
}

.tree-table-view .column-drag-header {
    -fx-background: accent_color;
    -fx-background-color: accent_color;
    -fx-border-color: transparent;
    -fx-opacity: 0.3;
}

/* Selected */

/* - row selection mode */
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.tree-table-view.alternating-row-colors:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:odd {
    -fx-background-color: cell_selected_unfocused_color;
    -fx-table-cell-border-color: cell_selected_unfocused_color;
}

/* - cell selection mode */
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected,
.tree-table-view.alternating-row-colors:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
    -fx-background-color: cell_selected_unfocused_color;
    -fx-table-cell-border-color: cell_selected_unfocused_color;
}

/* -- When focused */

.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected,
.tree-table-view.alternating-row-colors:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:odd,
.tree-table-view.alternating-row-colors:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected:odd {
    -fx-background-color: cell_selected_color;
    -fx-table-cell-border-color: cell_selected_color;
}

.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > *,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected > * {
    -fx-text-fill: table_text_selected_color;
}

/* Selected - hover */

/* - row selection mode */
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:hover,
.tree-table-view.alternating-row-colors:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:hover {
    -fx-background-color: cell_selected_hover_color;
    -fx-table-cell-border-color: cell_selected_hover_color;
}

/* - cell selection mode */
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:selected:hover,
.tree-table-view.alternating-row-colors:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:selected:hover {
    -fx-background-color: cell_selected_hover_color;
    -fx-table-cell-border-color: cell_selected_hover_color;
}

/* Selected - pressed */

/* - row selection mode */
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:pressed,
.tree-table-view.alternating-row-colors:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected:pressed {
    -fx-background-color: cell_selected_pressed_color;
    -fx-table-cell-border-color: cell_selected_pressed_color;
}

/* - cell selection mode */
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:selected:pressed,
.tree-table-view.alternating-row-colors:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:selected:pressed {
    -fx-background-color: cell_selected_pressed_color;
    -fx-table-cell-border-color: cell_selected_pressed_color;
}

/* Hover */

/* - empty */
.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:empty:hover {
    -fx-background-color: table_background_color;
    -fx-table-cell-border-color: table_background_color;
}

.tree-table-view.alternating-row-colors > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:empty:hover:odd {
    -fx-background-color: alternate_row_color;
    -fx-table-cell-border-color: alternate_row_color;
}

/* - not empty */

/* - row selection mode */
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover,
.tree-table-view.alternating-row-colors:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover {
    -fx-background-color: cell_hover_color;
    -fx-table-cell-border-color: cell_hover_color;
}

/* - cell selection mode */
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:hover,
.tree-table-view.alternating-row-colors:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:filled:hover{
    -fx-background-color: cell_hover_color;
    -fx-table-cell-border-color: cell_hover_color;
}

.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > * {
    -fx-text-fill: table_text_color;
}

.tree-table-view .column-resize-line {
    -fx-background-color: table_column_vline_color;
    -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}

/* Header with bottom border */
.tree-table-view > .column-header-background > .nested-column-header,
.tree-table-view > .column-header-background > .filler {
    -fx-background-color: table_background_color;
    -fx-border-insets: 0 0 0 0;
    -fx-border-width: 0 0 1 0;
    -fx-border-color: table_border_color;
}

.tree-table-view > *,
.tree-table-view > .column-header-background > .nested-column-header > *,
.tree-table-view > .column-header-background > .nested-column-header > .nested-column-header * {
    -fx-background-color: table_background_color;
}

.tree-table-view > .column-header-background > .nested-column-header > .table-column,
.tree-table-view > .column-header-background > .nested-column-header > .nested-column-header > .table-column,
.tree-table-view > .column-header-background > .nested-column-header > .table-column:last-visible,
.tree-table-view > .column-header-background > .nested-column-header > .nested-column-header > .table-column:last-visible {
    -fx-border-insets: 0 0 0 0;
    -fx-border-width: 0 0 0 0;
}

.tree-table-view > .column-header-background > .nested-column-header > .table-column > .label,
.tree-table-view > .column-header-background > .nested-column-header > .nested-column-header > .table-column > .label {
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: table_text_color;
    -fx-padding: 0.666667em; /* 8 */
    -fx-alignment: center-left;
}

/* 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. */
.tree-table-view .column-header,
.tree-table-view .filler,
.tree-table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view:constrained-resize .filler {
    -fx-size: 2em;
    -fx-padding: 0.166667em;
}

.tree-table-view .column-header .sort-order-dots-container{
    -fx-padding: 2 0 2 0;
}

.tree-table-view .column-header .sort-order-dot {
    -fx-padding: 0.115em;
}

/********************* TreeTableView with column grid lines  **********************/

/* Increase header bottom border "thickness" */
.tree-table-view.column-grid-lines > .column-header-background > * {
    -fx-border-insets: 0 0 1 0, 0 0 0 0;
    -fx-border-width: 0 0 1 0, 0 0 1 0;
    -fx-border-color: table_border_color, derive(table_border_color, 20%);
}

/* table body */
.tree-table-view.column-grid-lines > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell {
    -fx-border-color: transparent table_border_color transparent transparent;
    -fx-border-width: 1px;
    -fx-border-insets: 0px 0px 0px 0px;
}

/* Header Grid Lines */
.tree-table-view.column-grid-lines > .column-header-background > .nested-column-header > .nested-column-header > .column-header.table-column,
.tree-table-view.column-grid-lines > .column-header-background > .nested-column-header > .column-header.table-column {
    -fx-border-color: table_border_color table_border_color transparent transparent;
    -fx-border-width: 1px;
    -fx-border-insets: -1 0 0 0;
}

/*******************************************************************************
 *                                                                             *
 * Tab Pane and Tabs                                                           *
 *                                                                             *
 ******************************************************************************/

.tab-pane {
    -fx-tab-min-height: 2.91666375em; /* 34 */
    -fx-tab-max-height: 2.91666375em; /* 34 */
}

.tab-pane > .tab-header-area {
    -fx-padding: 0 0.166667em 0em 0.416667em; /* 0 2 0 5 */
}

.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-color: transparent, transparent, tab_pane_background_color;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
    -fx-padding: 0.083333em 1.5em 0.0769em 1.5em; /* 1 18 0.99 18 */
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
    -fx-background-color: transparent, tab_selected_border_color, tab_selected_background_color;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-text-fill: tab_text_color;
    -fx-font-size: 1em; /* 12 */
    -fx-font-family: "Segoe UI";
}

.tab-pane > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label {
    -fx-text-fill: tab_text_hover_color;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: accent_color;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected:hover > .tab-container > .tab-label {
    -fx-text-fill: tab_text_selected_hover_color;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color:
            tab_pane_bottom_border_color,
            transparent,
            tab_pane_background_color;
    -fx-background-insets: 1 1 0 1, 0 0 1 0, 1;
}

/* 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%);
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 0, 0;
    -fx-border-color: transparent, transparent;
}

/* TabPane button to see more tabs (when space is constricted) */

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0 0 4 0;
    -fx-padding: 4 8 9 8;
    -fx-background-radius: 0;
}

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
    -fx-background-color: more_button_hover_color;
}

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
    -fx-background-color: more_button_pressed_color;
}

.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow {
    -fx-padding: 0.083333em; /* 3px */
    -fx-scale-shape: false;
    -fx-shape: "M13.576,7.495c0,0.829-0.672,1.5-1.5,1.5c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5C12.904,5.995,13.576,6.667,13.576,7.495z M12.076,10.995c-0.828,0-1.5,0.672-1.5,1.5c0,0.829,0.672,1.5,1.5,1.5c0.828,0,1.5-0.672,1.5-1.5C13.576,11.667,12.904,10.995,12.076,10.995z M12.076,15.995c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5c0.828,0,1.5-0.672,1.5-1.5S12.904,15.995,12.076,15.995z";

    -fx-background-insets: 0;
    -fx-background-color: more_button_icon_color;
}

.tab-pane.floating > .tab-content-area {
    -fx-background-color: -fx-outer-border, -fx-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 0;
    -fx-padding: 2;
}

/*******************************************************************************
 *                                                                             *
 * Context Menu, Menus, MenuBar and MenuItem                                   *
 *                                                                             *
 ******************************************************************************/

/****************************** Context Menu **********************************/

.context-menu {
    -fx-background-color: menu_background_color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
    -fx-padding: 0.5em 0em 0.5em 0em; /* 6 0 6 0 */

    -fx-border-color: context_menu_border_color;
    -fx-border-style: solid;
}

.context-menu StackPane {
    -fx-background-color: transparent;
}

/* separator */
.context-menu .separator {
    -fx-padding: 0.58333275em 1em 0.58333275em 1em;  /*7 12 7 12 */
}

.context-menu .separator:horizontal .line {
    -fx-border-color: separator_color transparent transparent transparent;
    -fx-border-insets: 0;
}

/********************************* Menu Bar ************************************/

.menu-bar {
    -fx-background-color: background_color;
    -fx-background-insets: 0 0 0 0;
    -fx-font-family: "Segoe UI";
}

.menu-bar > .container {
    -fx-background-color: transparent;
}

.menu-bar > .container > .menu-button {
    -fx-background-color: transparent;
}

.menu-bar > .container > .menu-button {
    -fx-padding: 0.5em 1em 0.5em 0.666667em; /* 6 12 6 8 */
    -fx-border-width: 0;
}

.menu-bar > .container > .menu-button > .arrow-button > .arrow {
    -fx-padding: 0.167em 0 0.25em 0; /* 2 0 3 0 */
}

.menu-bar > .container > .menu-button > .label {
    -fx-padding: 0;
    -fx-label-padding: 0 0 0 0;
}

.menu-bar > .container > .menu > .arrow-button {
    -fx-padding: 0.5em 0 0.5em 0; /* 6 0 6 0 */
}

.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
    -fx-background-color: menu_button_hover_color;

}

.menu-bar > .container > .menu-button > .label,
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing  > .label {
    -fx-text-fill: text_color;
}

/********************************* Menu Item ***********************************/

.menu-item {
    -fx-text-fill: text_color;
    -fx-background-color: menu_background_color;
    -fx-padding: 0.583333em 1em 0.583333em 1em;   /*7 12 7 12 */
}

.menu-item > .right-container,
.menu-item > .left-container {
    -fx-background-color: menu_background_color;
}

.menu-item .label {
    -fx-padding: 0em 1.333333em 0em 0em; /* 0 16 0 0 */
    -fx-text-fill: text_color;
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */
}

.menu-item > .graphic-container {
    -fx-padding: 0em 0.75em 0em 0em; /* 0 9 0 0 */
}

.radio-menu-item:checked > .left-container > .radio {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-padding: 0.416667em 0.583333em 0.416667em 0.583333em;  /* 5 7 5 7 */
    -fx-scale-shape: true;
}

.check-menu-item:checked > .left-container > .check {
    -fx-shape: "M17.939,5.439L7.5,15.889l-5.439-5.449l0.879-0.879L7.5,14.111 l9.561-9.551L17.939,5.439z";

    -fx-padding: 0.416667em 0.583333em 0.416667em 0.583333em;; /* 5 7 5 7 */
    -fx-scale-shape: true;
}

.check-menu-item:checked > .left-container {
    -fx-padding: 0em 1em 0em 0.5em; /* 0 12 0 6 */
}

.radio-menu-item:checked > .left-container {
    -fx-padding: 0em 1em 0em 0.5em; /* 0 12 0 6 */
}

.menu > .right-container > .arrow {
    -fx-padding: 0.458em 0.333333em 0.458em 0.333333em; /* >5 4 >5 4 */
    -fx-shape: "M8.06,20.938L7,20l8-8L7,4l1.06-0.938L16.917,12L8.06,20.938z";
    -fx-scale-shape: true;
}

.radio-menu-item:checked > .left-container > .radio,
.check-menu-item:checked > .left-container > .check,
.menu > .right-container > .arrow {
    -fx-background-color: graphic_color;
}

/* hover */
.menu-item:hover,
.menu-item:focused,
.menu-item:hover > .right-container,
.menu-item:hover > .left-container,
.menu-item:focused > .right-container,
.menu-item:focused > .left-container {
    -fx-background-color: hover_color;
}

/* pressed */
.menu-item:pressed,
.menu-item:pressed > .right-container,
.menu-item:pressed > .left-container {
    -fx-background-color: pressed_color;
}

/* disabled */
.menu-item:disabled:hover,
.menu-item:disabled:focused,
.menu-item:disabled:pressed {
    -fx-background-color: transparent;
}


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

/* Text inside header area */
.titled-pane > .title > .text {
    -fx-fill: text_color;

    -fx-font-family: "Segoe UI";
    -fx-font-size: 1em; /* 12 */
}

/* Title header area */
.titled-pane > .title {
    -fx-background-color: border_color, title_background_color;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 0;

    -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
}

.titled-pane > .title > .arrow-button {
    -fx-background-color: title_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.0em 0.583em 0.0em 0.0em; /* 0 7 0 0 */
}

.titled-pane > .title:hover {
    -fx-background-color: border_color, title_background_hover_color;
}

.titled-pane > .title:hover > .arrow-button {
    -fx-background-color: title_background_hover_color;
}

/* Arrow (for collapsing/expanding) */
.titled-pane > .title > .arrow-button > .arrow {
    -fx-shape: "M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z";

    -fx-background-color: arrow_color;

    -fx-effect: null;

    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
}

.titled-pane > .title > .arrow-button > .arrow ,
.titled-pane:focused > .title > .arrow-button > .arrow {
    -fx-background-insets: 0, 0;
}

/* Content */
.titled-pane > .content {
    -fx-border-width: 0.083333em; /* 1 */
    -fx-border-color: border_color;

    -fx-background-color: border_color, content_background_color;
    -fx-background-insets: -1 0 0 0, 0 1 1 1;

    -fx-padding: 0.166667em 0 0.166667em 0; /* 2 0 2 0 */
}

/* Disabled */
.titled-pane:disabled,
.titled-pane:disabled > .title,
.titled-pane:disabled > .content {
    -fx-opacity: 0.5;
}

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

.accordion > .titled-pane > .title {
    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
}

.accordion > .first-titled-pane > .title {
    -fx-background-insets: 0, 1;
}

/*******************************************************************************
 *                                                                             *
 * Progress Indicator                                                          *
 *                                                                             *
 ******************************************************************************/

/*
 * For now most of the CSS in this section is equal to modena.css because the changes introduced by JMetro broke the
 * styles of Progress Indicator. Also accent color now changes according to the accent color defined by JMetro.
 */

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

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

.separator:horizontal .line {
    -fx-border-color: transparent transparent transparent transparent,
                      border_color transparent transparent transparent;
    -fx-border-insets: 0, 1 7 0 7;
}
.separator:vertical .line {
    -fx-border-color: transparent transparent transparent border_color,
                      transparent transparent transparent transparent;
    -fx-border-width: 1, 1;
    -fx-border-insets: 7 0 7 0, 0 0 0 1;
}

/*******************************************************************************
 *                                                                             *
 * Menu Button                                                                 *
 *                                                                             *
 ******************************************************************************/

.menu-button {
    -fx-background-color: menu_button_background_color;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0; /* 0 */

    -fx-border-color: transparent;
    -fx-border-width: 2px;
}

.menu-button > .arrow-button {
    -fx-background-color: transparent;
    -fx-padding: 0.5em 0.667em 0.5em 0.0em; /* 6 8 6 0 */
}

.menu-button > .label {
    -fx-font-family: "Segoe UI Semilight";
    -fx-font-size: 1em; /* 12 */

    -fx-text-fill: menu_button_text_color;

    -fx-alignment: CENTER_LEFT;

    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
}

.menu-button:hover {
    -fx-border-color: menu_border_hover_color;
}

.menu-button:pressed {
    -fx-border-color: menu_button_pressed_color;
    -fx-background-color: menu_button_pressed_color;
}

.menu-button:focused {
    -fx-border-color: transparent, white;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.menu-button:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: menu_button_background_color;
    -fx-text-fill: menu_button_text_color;
}

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

.split-menu-button {
    -fx-background-color: button_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-font-family: "Segoe UI";

    -fx-padding: 0;
}

.split-menu-button > .label {
    -fx-border-color: transparent;
    -fx-border-width: 2px;

    -fx-text-fill: text_color;

    -fx-background-color: button_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
}

.split-menu-button > .arrow-button {
    -fx-border-color: transparent;
    -fx-border-width: 2px;

    -fx-background-color: button_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}

/* - hover */
.split-menu-button > .label:hover {
    -fx-border-color: border_hover_color;
}

.split-menu-button > .arrow-button:hover {
    -fx-border-color: border_hover_color;
}

/* - pressed */
.split-menu-button > .label:pressed {
    -fx-border-color: background_pressed_color;
    -fx-background-color: background_pressed_color;
}

.split-menu-button > .arrow-button:pressed {
    -fx-border-color: background_pressed_color;
    -fx-background-color: background_pressed_color;
}

/* - focused */
.split-menu-button:focused {
    -fx-border-color: focus_ring_border_color;
    -fx-border-width: 1px;
    -fx-border-insets: -2;

    -fx-border-style: segments(1, 2) outside;

    -fx-padding: 0px;

    -fx-background-color: button_background_color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

/*******************************************************************************
 *                                                                             *
 * 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: background_color, border_color;
   -fx-background-insets: 0, 0 2 0 2;
}
/* vertical the two nodes are placed on top of each other. */
.split-pane:vertical > .split-pane-divider {
   -fx-background-color: background_color, border_color;
   -fx-background-insets: 0, 2 0 2 0;
}

.split-pane {
    -fx-background-color: background_color, background_color;
}

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

.color-picker > .arrow-button {
    -fx-background-color: null;
    -fx-padding: 0.5em 0.667em 0.5em 0; /*  6 8 6 0 */
}

.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: -fx-box-border;
}

.color-picker.split-button > .arrow-button {
    /*-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color !important;*/
    -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}

.color-palette {
    -fx-spacing: 0.833333em; /* 10px */
    -fx-padding: 1em; /* 12 */

    -fx-background-radius: 0;

    -fx-background-color: popup_background_color;
    -fx-border-color: popup_border_color;

    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}

.color-palette > .color-picker-grid {
    -fx-padding: 0.5px;
    -fx-snap-to-pixel: false;
}

.color-palette > .color-picker-grid > .color-square {
    -fx-background-color: transparent;
    -fx-padding: 0.5px;
}
/* the color over which the user is hovering */
.color-palette-region > .color-square.hover-square {
    -fx-background-color: -fx-faint-focus-color, white;
    -fx-background-insets: -3,-1;
    -fx-background-radius: 5,0;
    -fx-scale-x: 1.5;
    -fx-scale-y: 1.5;
    -fx-border-color: -fx-focus-color;
    -fx-border-insets: -1, -1;
}

/* Custom Color Dialog */
.custom-color-dialog  {
    -fx-background-color: dialog_background_color;
    -fx-padding: 1.25em;
    -fx-spacing: 1.25em;
}

.custom-color-dialog > .color-rect-pane {
    -fx-spacing: 0.75em;
    -fx-pref-height: 16.666667em;
    -fx-alignment: top-left;
    -fx-fill-height: true;
}

.custom-color-dialog .color-rect-pane .color-rect {
    -fx-min-width: 16.666667em;
    -fx-min-height: 16.666667em;
}

.custom-color-dialog > .color-rect-pane #color-rect-indicator {
    -fx-background-color: null;
    -fx-border-color: white;
    -fx-border-radius: 0.4166667em;
    -fx-translate-x: -0.4166667em;
    -fx-translate-y: -0.4166667em;
    -fx-pref-width: 0.833333em;
    -fx-pref-height: 0.833333em;
    -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
}

.custom-color-dialog > .color-rect-pane > .color-bar {
    -fx-min-width: 1.666667em;
    -fx-min-height: 16.666667em;
    -fx-max-width: 1.666667em;
    -fx-border-color: derive(-fx-base, -20%);
}
.custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
    -fx-border-radius: 0.333333em;
    -fx-border-color: white;
    -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
    -fx-pref-width: 2em;
    -fx-pref-height: 0.833333em;
    -fx-translate-x: -0.1666667em;
    -fx-translate-y: -0.4166667em;
}

.custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
    -fx-min-width: 10.666667em;
    -fx-min-height: 1.75em;
    -fx-pref-width: 10.666667em;
    -fx-pref-height: 1.75em;
}

.custom-color-dialog .transparent-pattern {
    -fx-background-image: url("pattern-transparent.png");
    -fx-background-repeat: repeat;
    -fx-background-size: auto;
}

.custom-color-dialog .controls-pane #spacer1 {
    -fx-min-height: 0.1666667em;
    -fx-max-height: 0.1666667em;
    -fx-pref-height: 0.1666667em;
}

.custom-color-dialog .controls-pane #spacer2 {
    -fx-min-height: 1em;
    -fx-max-height: 1em;
    -fx-pref-height: 1em;
}

.custom-color-dialog .controls-pane #settings-pane {
    -fx-hgap: 0.4166667em;
    -fx-vgap: 0.3333333em;
}

.custom-color-dialog .controls-pane #settings-pane .settings-label {
    -fx-min-width: 5.75em;
}

.custom-color-dialog .controls-pane #settings-pane .settings-unit {
    -fx-max-width: 1.5em;
    -fx-min-width: 1.5em;
    -fx-pref-width: 1.5em;
}

.custom-color-dialog .controls-pane #settings-pane .slider {
    -fx-pref-width: 8.25em;
}

.custom-color-dialog .controls-pane .color-input-field {
    -fx-pref-column-count: 3;
    -fx-max-width: 3.25em;
    -fx-min-width: 3.25em;
    -fx-pref-width: 3.25em;
}

.custom-color-dialog .controls-pane .web-field {
    -fx-pref-column-count: 6;
    -fx-pref-width: 8.25em;
}

.custom-color-dialog .controls-pane #spacer-side {
    -fx-min-width: 0.5em;
    -fx-pref-width: 0.5em;
}

.custom-color-dialog .controls-pane #spacer-bottom {
    -fx-pref-height: 0.833333em;
    -fx-min-height: 0.833333em;
}

.custom-color-dialog .controls-pane .customcolor-controls-background {
    -fx-background-color: controls_border_color, controls_background_color;
}

.custom-color-dialog .controls-pane .current-new-color-grid .label {
    -fx-padding: 0 0 0 0.4166667em;
}

.custom-color-dialog .controls-pane #buttons-hbox {
    -fx-spacing: 0.333333em;
    -fx-padding: 1em 0 0 0;
    -fx-alignment: bottom-right;
}

/* The fix for RT-37494 forces the web color text's major direction to
 * LTR. The following keeps the text right-aligned when in RTL mode. */
.custom-color-dialog .webcolor-field:dir(rtl) > .text-field:dir(ltr) {
    -fx-alignment: baseline-right;
}

/* With Button styleclass */
.color-picker.button {
    -fx-border-color: transparent;
    -fx-border-width: 2;

    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-background-color: button_background_color;

    -fx-font-family: "Segoe UI";
    -fx-text-fill: text_color;
}

.color-picker.button:hover,
.color-picker.button:focused:hover {
    -fx-border-color: border_hover_color;
}

.color-picker.button:pressed,
.color-picker.button:focused:pressed {
    -fx-border-color: background_pressed_color;
    -fx-background-color: background_pressed_color;
}

.color-picker.button:focused {
    -fx-border-color: transparent, focus_ring_border_color;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.color-picker.button:showing {
    -fx-border-color: transparent, focus_ring_border_color;
    -fx-background-color: background_pressed_color;
    -fx-border-width: 1, 1;
    /*noinspection CssInvalidFunction*/
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

/*******************************************************************************
 *                                                                             *
 * Dialogs                                                                     *
 *                                                                             *
 ******************************************************************************/

.dialog-pane {
    -fx-background-color: dialog_background_color;
    -fx-padding: 0 0.5em 0.5em 0.5em; /* 0 6 6 6 */
}

.dialog-pane > .expandable-content {
    -fx-padding: 0.666em; /* 8px */
}

.dialog-pane > .button-bar > .container {
    -fx-padding: 0.833em; /* 10px */
}

.dialog-pane:no-header > * > .graphic-container {
    -fx-padding: 0.833em 0 0 0.833em; /* 10px 0px 0px 10px */
}

.dialog-pane:header .header-panel {
    -fx-background-color: dialog_background_color;
    -fx-background-insets: 0;

    -fx-padding: 0em 0.833em 0 0.833em; /* 0 10 0 10*/
}

.dialog-pane:header .header-panel .label {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1.666667em; /* 20 */
    -fx-wrap-text: true;
}

.dialog-pane:header .header-panel .graphic-container {
    /* This prevents the text in the header running directly into the graphic */
    -fx-padding: 0 0 0 0.833em; /* 0px 0px 0px 10px */
}

.dialog-pane > .button-bar > .container > .details-button {
  -fx-alignment: baseline-left;
  -fx-focus-traversable: false;
  -fx-padding: 0.416em; /* 5px */
}

.dialog-pane > .button-bar > .container > .details-button:hover {
    -fx-underline: true;
}

.dialog-pane > .content.label {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 1.166667em; /* 14 */
}

.dialog-pane > .content {
    -fx-padding: 1.083333em 0.833em 2.5em 0.833em; /* 13 10 30 10 */
}

.dialog-pane > .button-bar > .container > .details-button {
    -fx-text-fill: text_color;
}

.alert.confirmation.dialog-pane,
.text-input-dialog.dialog-pane,
.choice-dialog.dialog-pane,
.alert.information.dialog-pane,
.alert.error.dialog-pane,
.alert.warning.dialog-pane {
    -fx-graphic: null;
}

/* Have all Dialog backgrounds (the Panes inside) be dialog_background_color unless the "background" styleclass is set */

.dialog-pane Pane,
.dialog-pane AnchorPane,
.dialog-pane BorderPane,
.dialog-pane DialogPane,
.dialog-pane FlowPane,
.dialog-pane GridPane,
.dialog-pane HBox,
.dialog-pane StackPane,
.dialog-pane TextFlow,
.dialog-pane TilePane,
.dialog-pane VBox {
    -fx-background-color: dialog_background_color;
}

.dialog-pane Pane.background,
.dialog-pane AnchorPane.background,
.dialog-pane BorderPane.background,
.dialog-pane DialogPane.background,
.dialog-pane FlowPane.background,
.dialog-pane GridPane.background,
.dialog-pane HBox.background,
.dialog-pane StackPane.background,
.dialog-pane TextFlow.background,
.dialog-pane TilePane.background,
.dialog-pane VBox.background {
    -fx-background-color: background_color;
}

/*******************************************************************************
 *                                                                             *
 * Text Input Dialog                                                           *
 *                                                                             *
 ******************************************************************************/

.text-input-dialog.dialog-pane .text-input > Pane {
    -fx-background-color: transparent;
}

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

/*
 * For now most of the CSS in this section and all sections below for Charts are equal to modena.css because the changes introduced by
 * JMetro broke the styles of Charts. There is a change to modena default style to make Chart Legend text color correct.
 */

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

.chart-legend > .label {
    -fx-text-fill: #111;
}

/*******************************************************************************
 *                                                                             *
 * 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:top > .axis-label,
.axis:left > .axis-label {
    -fx-padding: 0 0 4px 0;
}
.axis:bottom > .axis-label,
.axis:right > .axis-label {
    -fx-padding: 4px 0 0 0;
}
.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%);
    -fx-stroke-dash-array: 0.25em, 0.25em;
}
.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: CHART_COLOR_1, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}
.chart-series-line {
    -fx-stroke: CHART_COLOR_1;
    -fx-stroke-width: 3px;
}
.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: CHART_COLOR_1, 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: CHART_COLOR_1;
    -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: CHART_COLOR_1_TRANS_20;
}
.default-color0.chart-series-area-fill { -fx-fill: CHART_COLOR_1_TRANS_20; }
.default-color1.chart-series-area-fill { -fx-fill: CHART_COLOR_2_TRANS_20; }
.default-color2.chart-series-area-fill { -fx-fill: CHART_COLOR_3_TRANS_20; }
.default-color3.chart-series-area-fill { -fx-fill: CHART_COLOR_4_TRANS_20; }
.default-color4.chart-series-area-fill { -fx-fill: CHART_COLOR_5_TRANS_20; }
.default-color5.chart-series-area-fill { -fx-fill: CHART_COLOR_6_TRANS_20; }
.default-color6.chart-series-area-fill { -fx-fill: CHART_COLOR_7_TRANS_20; }
.default-color7.chart-series-area-fill { -fx-fill: CHART_COLOR_8_TRANS_20; }
.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: CHART_COLOR_1_TRANS_70;
    -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_TRANS_70; }
.default-color1.chart-bubble { -fx-bubble-fill: CHART_COLOR_2_TRANS_70; }
.default-color2.chart-bubble { -fx-bubble-fill: CHART_COLOR_3_TRANS_70; }
.default-color3.chart-bubble { -fx-bubble-fill: CHART_COLOR_4_TRANS_70; }
.default-color4.chart-bubble { -fx-bubble-fill: CHART_COLOR_5_TRANS_70; }
.default-color5.chart-bubble { -fx-bubble-fill: CHART_COLOR_6_TRANS_70; }
.default-color6.chart-bubble { -fx-bubble-fill: CHART_COLOR_7_TRANS_70; }
.default-color7.chart-bubble { -fx-bubble-fill: CHART_COLOR_8_TRANS_70; }

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

.chart-bar {
    -fx-bar-fill: CHART_COLOR_1;
    -fx-background-color:   linear-gradient(to right,
    derive(-fx-bar-fill, -4%),
    derive(-fx-bar-fill, -1%),
    derive(-fx-bar-fill, 0%),
    derive(-fx-bar-fill, -1%),
    derive(-fx-bar-fill, -6%)
    );
    -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, -4%),
    derive(-fx-bar-fill, -1%),
    derive(-fx-bar-fill, 0%),
    derive(-fx-bar-fill, -1%),
    derive(-fx-bar-fill, -6%)
    );
}
.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: CHART_COLOR_1;
    -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;
    -fx-fill: -fx-text-base-color;
}
.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;
}