@font-face {
    src: url("/ui/fonts/ubuntu/UbuntuMono-B.ttf");
}

@font-face {
    src: url("/ui/fonts/opensans/OpenSans-Regular.ttf");
}

@font-face {
    src: url("/ui/fonts/opensans/OpenSans-SemiBold.ttf");
}

.root {
    -fx-control-width: 180;
    -fx-control-medium-width: 200;
    -fx-control-bid-width: 240;

    -fx-control-height: 28;
    -fx-control-medium-height: 30;
    -fx-control-big-height: 34;

    -var-dialog-button-height: 32;
    -var-dialog-button-width: 150;

    -var-default-label-height: 22px;
    -var-default-field-height: 26px;
    -var-default-field-preview-height: 24px;
    -var-default-inner-field-height: 22px;
    -var-default-cell-height: 22px;
    -var-default-toolbar-button-size: 24px;
}

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

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

.label {
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
    -fx-text-fill: -var-font-color;
    -fx-max-height: -var-default-label-height;
}

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

.context-menu {
    -fx-padding: 0 0 0 0;
    -fx-background-color: -var-menu-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 3px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 2px;
    -fx-effect: -fx-shadow-menu;
}

.context-menu .separator:horizontal {
    -fx-padding: 0px 0px 0px 0px;
}

.context-menu .separator:horizontal .line {
    -fx-border-color: -var-split-line-color;
    -fx-border-width: 1px 0px 0px 0px;
    -fx-border-insets: 0;
}

.context-menu > .scroll-arrow {
    -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
    -fx-background-color: transparent;
    -fx-background-radius: 0;
}

.context-menu > .scroll-arrow:hover {
    -fx-background: -fx-selection-bar;
    -fx-background-color: -fx-background;
    -fx-background-radius: 0;
    -fx-text-fill: -fx-text-background-color;
}

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

/*******************************************************************************
 *                                                                             *
 * Split Pane                                                                  *
 *                                                                             *
 ******************************************************************************/

.split-pane {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.split-pane > .split-pane-divider {
    -fx-padding: 0 1 0 0;
}

.split-pane:horizontal > .split-pane-divider {
    -fx-background-color: -var-split-line-color;
    -fx-background-insets: 0;
    -fx-effect: null;
}

.split-pane:vertical > .split-pane-divider {
    -fx-background-color: -var-split-line-color;
    -fx-background-insets: 0;
    -fx-effect: null;
}

/*******************************************************************************
 *                                                                             *
 * Tab Pane                                                                    *
 *                                                                             *
 ******************************************************************************/

.tab-pane {
    -fx-tab-min-height: 1.75em; /* 21 */
    -fx-tab-max-height: 1.75em; /* 21 */
    -fx-tab-min-width: 70px;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-background-color: transparent;
    -fx-alignment: CENTER;
    -fx-text-fill: -var-font-color;
}

.tab-pane > .tab-content-area {
    -fx-background-color: transparent;
    -fx-padding: 0px;
}

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background: -var-tab-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 1px 3px 1px 3px;
    -fx-border-color: transparent;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.tab-pane:tool-collapsed > .tab-header-area > .headers-region > .tab:selected:hover,
.tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-background: -var-tab-hover-background-color;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px 1px 1px 1px;
    -fx-border-radius: 1px 1px 0px 0px;
}

.tab-pane > .tab-header-area > .headers-region > .tab:top {
    -fx-background-color: -fx-background;
}

.tab-pane > .tab-header-area > .headers-region > .tab:right {
    -fx-background-color: -fx-background;
}

.tab-pane > .tab-header-area > .headers-region > .tab:bottom {
    -fx-background-color: -fx-background;
}

.tab-pane > .tab-header-area > .headers-region > .tab:left {
    -fx-background-color: -fx-background;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 1px 3px 1px 3px;
    -fx-background-color: -var-background-color;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px 1px 0px 1px;
    -fx-border-radius: 1px;
}

.tab-pane:tool-collapsed > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: -var-tab-background-color;
    -fx-border-color: transparent;
}

.tab-pane:bottom > .tab-header-area > .headers-region > .tab,
.tab-pane:bottom > .tab-header-area > .headers-region > .tab:selected,
.tab-pane:right > .tab-header-area > .headers-region > .tab,
.tab-pane:right > .tab-header-area > .headers-region > .tab:selected,
.tab-pane:left > .tab-header-area > .headers-region > .tab,
.tab-pane:left > .tab-header-area > .headers-region > .tab:selected {
    -fx-padding: -1px 3px 5px 3px;
}

.tab-pane:tool-collapsed:bottom > .tab-header-area > .headers-region > .tab,
.tab-pane:tool-collapsed:bottom > .tab-header-area > .headers-region > .tab:selected,
.tab-pane:tool-collapsed:right > .tab-header-area > .headers-region > .tab,
.tab-pane:tool-collapsed:right > .tab-header-area > .headers-region > .tab:selected,
.tab-pane:tool-collapsed:left > .tab-header-area > .headers-region > .tab,
.tab-pane:tool-collapsed:left > .tab-header-area > .headers-region > .tab:selected {
    -fx-border-width: 1px 1px 1px 1px;
    -fx-border-radius: 1px 1px 0px 0px;
}

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

.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
    -fx-opacity: -var-disabled-opacity;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -var-tab-header-background-color;
    -fx-border-color: -var-border-color;
    -fx-border-width: 0px 0px 1px 0px;
    -fx-effect: null;
}

.tab-pane:top > .tab-header-area {
    -fx-background-insets: 0px;
    -fx-padding: 2px 2px 0px 2px;
}

.tab-pane:bottom > .tab-header-area {
    -fx-background-insets: 0px;
    -fx-padding: 0px 2px 2px 2px;
}

.tab-pane:left > .tab-header-area {
    -fx-background-insets: 0px;
    -fx-padding: 2px 0px 2px 2px;
}

.tab-pane:right > .tab-header-area {
    -fx-background-insets: 0px;
    -fx-padding: 2px 2px 2px 0px;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
    -fx-background-color: -var-arrow-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: null;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button:hover {
    -fx-background-color: -var-arrow-hover-color;
}

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

.button {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0px 0px 0px 0px;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
    -fx-text-fill: -var-font-color;
}

.button:focused {
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
}

.button:hover {
    -fx-border-color: -var-button-hover-border-color;
    -fx-background: -var-button-hover-background-color;
}

.button:pressed {
    -fx-border-color: -var-border-color;
    -fx-background: -fx-focus-color;
    -fx-background-radius: 2px;
    -fx-text-fill: -var-font-focused-color;
}

.button:disabled {
    -fx-opacity: -var-disabled-opacity;
}

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

/*******************************************************************************
 *                                                                             *
 * ToggleButton                                                                *
 *                                                                             *
 ******************************************************************************/

.toggle-button {
    -fx-background: transparent;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-background-radius: 2px;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0;
    -fx-text-fill: -var-font-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

.toggle-button:focused {
    -fx-background: transparent;
    -fx-text-fill: -var-font-focused-color;
}

.toggle-button:hover {
    -fx-border-color: transparent;
    -fx-background: -var-button-hover-background-color;
}

.toggle-button:selected {
    -fx-background: -fx-focus-color;
    -fx-text-fill: -var-font-focused-color;
}

.toggle-button:selected:focused {
    -fx-background: -fx-focus-color;
    -fx-text-fill: -var-font-focused-color;
}

.toggle-button:selected:hover {
    -fx-border-color: transparent;
    -fx-text-fill: -var-font-focused-color;
}

.toggle-button:disabled {
    -fx-opacity: -var-disabled-opacity;
}

/*******************************************************************************
 *                                                                             *
 * Combo Box                                                                   *
 *                                                                             *
 ******************************************************************************/

/* ------- MAIN BUTTON ------- */
.combo-box-base {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0px 0px 0px 0px;
    -fx-text-fill: -var-font-color;
    -fx-min-height: -var-default-field-height;
}

.combo-box-base:hover {
    -fx-border-color: -var-button-hover-border-color;
    -fx-background: -var-button-hover-background-color;
}

/*------- THIS SPECIFIES THE BUTTON COLOR WHEN THE POPUP MENU IS SHOWING -------*/
.combo-box-base:showing {
    -fx-border-color: -var-border-color;
    -fx-background: -fx-focus-color;
    -fx-background-radius: 2px;
}

.combo-box-base:focused {
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
}

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

/* ------- OPEN BUTTON ------- */
.combo-box-base > .arrow-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-padding: 0px 7px 0px 0px;
}

.combo-box-base:hover > .arrow-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
}

.combo-box-base:showing > .arrow-button {
}

.combo-box-base > .arrow-button > .arrow {
    -fx-background: -var-arrow-color;
    -fx-background-insets: 0px;
    -fx-background-color: -fx-background;
    -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";
}

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

.combo-box-base:showing > .arrow-button > .arrow {
    -fx-background: -var-arrow-focused-color;
}

/* Customise the ListCell that appears in the ComboBox button itself */

.combo-box > .list-cell {
    -fx-background-color: transparent;
    -fx-text-fill: -var-font-color;
    -fx-padding: 0 0 0 4px;
    -fx-cell-size: -1;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.combo-box:showing > .list-cell {
    -fx-text-fill: -var-font-focused-color;
}

.combo-box-popup > .list-view {
    -fx-background-color: -var-menu-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 3px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 2px;
    -fx-effect: -fx-shadow-menu;
    -fx-padding: 0px;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container {
    -fx-padding: 0px;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-background: transparent;
    -fx-padding: 0px 0px 0px 4px;
    -fx-background-color: -fx-background;
    -fx-cell-size: 26;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-background: transparent;
    -fx-text-fill: -var-font-color;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
    -fx-background: -var-menu-hover-color;
    -fx-text-fill: -var-font-focused-hover-color;
}

.combo-box-popup > .list-view > .placeholder > .label {
    -fx-text-fill: -var-font-color;
}

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

.check-box {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-border-radius: 0px;
    -fx-padding: 0px 0px 0px 0px;
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em;
    -fx-text-fill: -var-font-color;
    -fx-min-height: -var-default-field-height;
    -fx-min-width: -var-default-field-height;
}

.check-box:focused {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-border-radius: 0px;
}

.check-box:hover {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-border-radius: 0px;
}

.check-box:selected {
    -fx-background-color: transparent;
    -fx-background-insets: 0px;
    -fx-background-radius: 0px;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-border-radius: 0px;
}

.check-box .box {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 3px;
}

.check-box:editable {
    -fx-background-color: red;
}

.check-box:hover .box {
    -fx-border-color: -fx-focus-color;
    -fx-background: -var-button-hover-background-color;
}

.check-box:selected .box {
    -fx-border-color: -var-border-color;
    -fx-background: -fx-focus-color;
    -fx-background-radius: 2px;
}

.check-box > .box > .mark {
    -fx-border-width: 0;
    -fx-effect: null;
}

.check-box:hover > .box > .mark {
    -fx-effect: null;
}

.check-box:selected > .box > .mark {
    -fx-background-color: -var-background-color;
    -fx-effect: null;
}

.check-box:indeterminate > .box > .mark {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-shape: "M0,0H8V2H0Z";
    -fx-scale-shape: false;
}

.check-box:disabled {
    -fx-opacity: -var-disabled-opacity;
}

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

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

.menu-bar {
    -fx-padding: 0px; /* 0 8 0 8 */
    -fx-spacing: 0px; /* 2 */
    -fx-min-height: 30px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-background-color: -var-menu-bar-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-effect: null;
}

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

.menu-bar > .container > .menu-button > .label {
    -fx-text-fill: -var-font-color;
}

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

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

.menu-bar:show-mnemonics > .mnemonic-underline {
    -fx-stroke: -var-font-color;
}

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

.menu-item {
    -fx-body-color: transparent;
    -fx-background-color: -fx-body-color;
    -fx-padding: 6 14 6 14; /* 4 5 4 5 */
    -fx-cursor: hand;
    -fx-min-height: 30px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.menu-item > .left-container {
    -fx-padding: 0.458em 0.791em 0.458em 0.458em;
}

.menu-item > .graphic-container {
    -fx-padding: 0em 0.333em 0em 0em;
}

.menu-item > .label {
    -fx-text-fill: -var-font-color;
    -fx-padding: 0em 0.5em 0em 0em;
}

.menu-item:focused {
    -fx-body-color: -var-menu-item-hover-color;
}

.menu-item:showing > .label,
.menu-item:focused > .label {
    -fx-text-fill: -var-font-hover-color;
}

.menu-item:hover > .label {
    -fx-text-fill: -var-font-hover-color;
}

.menu-item > .right-container {
    -fx-padding: 0em 0em 0em 0.5em;
}

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

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

.menu {
    -fx-cursor: hand;
    -fx-min-height: 30px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.menu > .right-container > .arrow {
    -fx-background-color: -var-menu-arrow-color;
}

.menu:focused > .right-container > .arrow {
    -fx-background-color: -var-menu-arrow-color;
}

/*******************************************************************************
 *                                                                             *
 * Scroll Bar                                                                  *
 *                                                                             *
 ******************************************************************************/

.scroll-bar {
    -fx-background-color: -var-scroll-bar-background-color;
    -fx-background-insets: 0;
}

.scroll-bar:hover {
    -fx-background-color: -var-scroll-bar-hover-background-color;
}

.scroll-bar:focused {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.scroll-bar:horizontal {
    -fx-padding: 1px 0px 1px 0px;
}

.scroll-bar:horizontal:focused {
    -fx-padding: 1px 0px 1px 0px;
}

.scroll-bar:vertical {
    -fx-padding: 0px 1px 0px 1px;
}

.scroll-bar:vertical:focused {
    -fx-padding: 0px 1px 0px 1px;
}

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

.scroll-bar:focused > .thumb {
}

.scroll-bar > .thumb:hover {
}

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

.scroll-bar > .track-background {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0px;
}

.scroll-bar:vertical > .decrement-button,
.scroll-bar:vertical > .increment-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0px 2px 0px 2px;
}

.scroll-bar:horizontal > .decrement-button,
.scroll-bar:horizontal > .increment-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 2px 0px 2px 0px;
}

.scroll-bar > .decrement-button > .decrement-arrow,
.scroll-bar > .increment-button > .increment-arrow {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0px;
    -fx-shape: null;
}

.scroll-bar:disabled {
    -fx-opacity: -var-disabled-opacity;
}

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

.scroll-pane {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0px;
}

.scroll-pane:focused {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.scroll-pane > * > .scroll-bar:horizontal {
    -fx-padding: 1px 0px 1px 0px;
}

.scroll-pane > * > .scroll-bar:vertical {
    -fx-padding: 0px 1px 0px 1px;
}

.scroll-pane > .corner {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.scroll-pane > .viewport {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.scroll-pane:disabled {
    -fx-opacity: -var-disabled-opacity;
}

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

.hyperlink {
    -fx-padding: 1px;
    -fx-text-fill: -fx-focus-color;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

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

.tooltip {
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
    -fx-padding: 6px;
    -fx-background-color: -var-menu-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 3px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 2px;
    -fx-effect: -fx-shadow-menu;
    -fx-text-fill: -var-font-color;
}

/*******************************************************************************
 *                                                                             *
 * Text Area                                                                    *
 *                                                                             *
 ******************************************************************************/

.text-area {
    -fx-font-family: "Ubuntu Mono";
    -fx-font-size: 14px;
    -fx-font-weight: normal;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 1px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 0px;
    -fx-prompt-text-fill: -var-font-color;
}

.text-area:focused {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-border-color: -var-border-color, -fx-focus-color;
    -fx-border-width: 1px, 1px;
    -fx-border-insets: 0 0 0 0, 1 1 1 1;
    -fx-prompt-text-fill: transparent;
    -fx-padding: 0px;
}

.text-area .content {
    -fx-background-color: transparent;
    -fx-padding: 3px 5px 3px 5px;
    -fx-cursor: text;
}

.text-area:disabled {
    -fx-opacity: -var-disabled-opacity;
}

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

.spinner {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0px 0px 0px 0px;
    -fx-text-fill: -var-font-color;
}

.spinner:focused,
.spinner:contains-focus {
    -fx-border-color: -var-border-color, -fx-focus-color;
    -fx-border-width: 1px, 1px;
    -fx-border-insets: 0 0 0 0, 1 1 1 1;
    -fx-prompt-text-fill: transparent;
}

.spinner:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.spinner > .text-field {
    -fx-background: transparent;
    -fx-border-color: transparent;
    -fx-cursor: text;
}

.spinner > .text-field:focused {
    -fx-background: transparent;
    -fx-padding: 0px 0px 0px 4px;
    -fx-border-width: 0;
    -fx-border-insets: 0;
}

.spinner .decrement-arrow-button,
.spinner .increment-arrow-button {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 4px 6px 4px 6px;
}

.spinner .decrement-arrow-button {
    -fx-padding: 4px 6px 5px 6px;
}

.spinner:focused .decrement-arrow-button,
.spinner:contains-focus .decrement-arrow-button,
.spinner:focused .decrement-arrow-button,
.spinner:contains-focus .increment-arrow-button {
    -fx-padding: 4px 5px 4px 5px;
}

.spinner .increment-arrow-button .increment-arrow,
.spinner .decrement-arrow-button .decrement-arrow {
    -fx-background: -var-arrow-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
    -fx-padding: 3px 5px 3px 5px;
}

.spinner .increment-arrow-button .increment-arrow {
    -fx-rotate: 180;
}

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

.spinner .decrement-arrow-button:hover .decrement-arrow,
.spinner .increment-arrow-button:hover .increment-arrow {
    -fx-background: -var-arrow-hover-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,
.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.333em 0.166em 0.333em 0.166em; /* 4 2 4 2 */
    -fx-shape: "M 4 0 v 7 l -4 -3.5 z";
}

/* Spinner - STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL */
.spinner.arrows-on-right-horizontal .increment-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 0, 2 2 3 1;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-padding: 0.333em 0.666em 0.333em 0.583em; /* 4 8 4 7 */

}

.spinner.arrows-on-right-horizontal .decrement-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
    -fx-background-radius: 0, 0, 0;
    -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
}

/* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL */
.spinner.arrows-on-left-vertical > .text-field {
    -fx-background-insets: 0 0 1 0, 1 1 2 0;
    -fx-background-radius: 0 3 3 0, 0 2 2 0;
}

.spinner.arrows-on-left-vertical .increment-arrow-button {
    -fx-background-radius: 3 0 0 0, 2 0 0 0, 1 0 0 0;
}

.spinner.arrows-on-left-vertical .decrement-arrow-button {
    -fx-background-radius: 0 0 0 3, 0 0 0 2, 0 0 0 1;
}

/* Spinner - STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL */
.spinner.arrows-on-left-horizontal > .text-field {
    -fx-background-insets: 0 0 1 -1, 1 1 2 -1;
    -fx-background-radius: 0 3 3 0, 0 2 2 0;
}

.spinner.arrows-on-left-horizontal .increment-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 0, 2 2 3 1;
    -fx-background-radius: 0, 0, 0;
    -fx-padding: 0.333em 0.666em 0.333em 0.583em; /* 4 8 4 7 */
}

.spinner.arrows-on-left-horizontal .decrement-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
    -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
}

/* Spinner - STYLE_CLASS_SPLIT_ARROWS_VERTICAL */
.spinner.split-arrows-vertical > .text-field {
    -fx-background-insets: 0, 0 1 0 1;
    -fx-background-radius: 0, 0;
}

.spinner.split-arrows-vertical .increment-arrow-button {
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
}

.spinner.split-arrows-vertical .decrement-arrow-button {
    -fx-background-insets: -1 0 1 0, 0 1 2 1, 1 2 3 2;
    -fx-background-radius: 0 0 3 3, 0 0 2 2, 0 0 1 1;
    -fx-padding: 0.25em 0.666em 0.417em 0.666em; /* 3 8 5 8 */
}

/* Spinner - STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL */
.spinner.split-arrows-horizontal > .text-field {
    -fx-background-insets: 0 0 1 0, 1 0 2 0;
    -fx-background-radius: 0, 0;
}

.spinner.split-arrows-horizontal .increment-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
    -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
}

.spinner.split-arrows-horizontal .decrement-arrow-button {
    -fx-background-insets: 0 0 1 0, 1 1 2 1, 2 2 3 2;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 1 0 0 1;
    -fx-padding: 0.333em 0.666em 0.333em 0.666em; /* 4 8 4 8 */
}

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

.text-input {
    -fx-text-fill: -var-font-color;
    -fx-highlight-fill: derive(-fx-focus-color, -20%);
    -fx-highlight-text-fill: -fx-focus-color;
}

.text-input:focused {
    -fx-highlight-fill: -fx-focus-color;
    -fx-highlight-text-fill: white;
}

/*******************************************************************************
 *                                                                             *
 * Text Field                                                                  *
 *                                                                             *
 ******************************************************************************/

.text-field {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0px;
    -fx-background-radius: 2px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0px 0px 0px 4px;
    -fx-text-fill: -var-font-color;
    -fx-cursor: text;
    -fx-min-height: -var-default-field-height;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.text-field:focused {
    -fx-border-color: -var-border-color, -fx-focus-color;
    -fx-border-width: 1px, 1px;
    -fx-border-insets: 0 0 0 0, 1 1 1 1;
    -fx-padding: 0px 0px 0px 3px;
    -fx-prompt-text-fill: transparent;
}

.text-field:disabled {
    -fx-opacity: -var-disabled-opacity;
}


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

.list-view {
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 1px;
}

.list-view:focused {
    -fx-border-color: -var-border-color, -fx-focus-color;
    -fx-border-width: 1px, 1px;
    -fx-border-insets: 0 0 0 0, 1 1 1 1;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0px;
}

.list-view > .virtual-flow > .scroll-bar:vertical {
    -fx-background-insets: 0;
    -fx-padding: 0px 1px 0px 1px;
}

.list-view > .virtual-flow > .scroll-bar:horizontal {
    -fx-background-insets: 0;
    -fx-padding: 1px 0px 1px 0px;
}

.list-view:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.list-view > .virtual-flow > .corner {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.text-field-list-cell,
.list-cell {
    -fx-min-height: -var-default-cell-height;
    -fx-background-color: transparent;
    -fx-text-fill: -var-font-color;
    -fx-padding: 0px;
    -fx-indent: 1em;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.text-field-list-cell,
.list-cell .label {
    -fx-padding: 0px 0px 0px 3px;
}

.text-field-list-cell,
.list-cell:odd {
    -fx-background-color: transparent;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:hover {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover {
    -fx-background-color: -var-tree-cell-hover-color;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

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

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-focused-color;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-text-fill: -var-font-focused-color;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-text-fill: -var-font-focused-color;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-focused-color;
}

.list-cell:filled:selected:focused,
.list-cell:filled:selected {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-text-fill: -var-font-focused-color;
}

.list-cell:filled:selected:focused > .hbox > .label,
.list-cell:filled:selected > .hbox > .label {
    -fx-text-fill: -var-font-focused-color;
}

.list-cell:filled:selected:focused:disabled,
.list-cell:filled:selected:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.list-cell:filled:hover {
    -fx-background-color: -var-tree-cell-hover-color;
    -fx-text-fill: -var-font-hover-color;
}

.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:hover {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

/*******************************************************************************
 *                                                                             *
 * Tree View and Tree Cell                                                     *
 *                                                                             *
 ******************************************************************************/

.tree-view {
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 1px;
}

.tree-view:focused {
    -fx-border-color: -var-border-color, -fx-focus-color;
    -fx-border-width: 1px, 1px;
    -fx-border-insets: 0 0 0 0, 1 1 1 1;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0px;
}

.tree-view > .virtual-flow > .scroll-bar:vertical {
    -fx-background-insets: 0;
    -fx-padding: 0px 1px 0px 1px;
}

.tree-view > .virtual-flow > .scroll-bar:horizontal {
    -fx-background-insets: 0;
    -fx-padding: 1px 0px 1px 0px;
}

.tree-view:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.tree-view > .virtual-flow > .corner {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.tree-cell {
    -fx-min-height: -var-default-cell-height;
    -fx-background-color: transparent;
    -fx-text-fill: -var-font-color;
    -fx-padding: 0px;
    -fx-indent: 1em;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 13px;
}

.tree-cell .label {
    -fx-padding: 0px 0px 0px 3px;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:hover {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:hover {
    -fx-background-color: -var-tree-cell-hover-color;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:focused {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-focused-color;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-text-fill: -var-font-focused-color;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-focused-color;
}

/* When the TreeView is _not_ focused, we show alternate selection colors */
.tree-cell:filled:selected:focused,
.tree-cell:filled:selected {
    -fx-background-color: -var-tree-cell-selected-color;
    -fx-text-fill: -var-font-focused-color;
}

.tree-cell:filled:selected:focused:disabled,
.tree-cell:filled:selected:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.tree-cell > .tree-disclosure-node,
.tree-table-row-cell > .tree-disclosure-node {
    -fx-background-color: transparent;
    -fx-padding: 6px 6px 0px 6px;
}

.tree-cell > .tree-disclosure-node:disabled,
.tree-table-row-cell > .tree-disclosure-node:disabled {
    -fx-opacity: -var-disabled-opacity;
}

.tree-cell > .tree-disclosure-node > .arrow,
.tree-table-row-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: -var-arrow-color;
    -fx-padding: 0.333333em 0.229em 0.333333em 0.229em;
    -fx-shape: "M 0 -4 L 8 0 L 0 4 z";
}

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

.tree-cell:filled:selected > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:selected > .tree-disclosure-node > .arrow {
    -fx-background-color: -var-arrow-focused-color;
}

.tree-cell:filled:hover,
.tree-table-row-cell:filled:hover {
    -fx-background-color: -var-tree-cell-hover-color;
    -fx-text-fill: -var-font-hover-color;
}

.tree-cell:filled:selected:focused > .hbox > .label,
.tree-cell:filled:selected > .hbox > .label {
    -fx-text-fill: -var-font-focused-color;
}

.tree-cell:filled:hover > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: -var-arrow-hover-color;
}

.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:hover,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-text-fill: -var-font-hover-color;
}

.tree-cell:filled:selected:hover > .tree-disclosure-node > .arrow,
.tree-table-row-cell:filled:selected:hover > .tree-disclosure-node > .arrow {
    -fx-background-color: -var-arrow-focused-color;
}

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

.slider .thumb {
    -fx-background: -var-button-background-color;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-background-radius: 10px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 10px;
    -fx-padding: 6px;
    -fx-effect: null;
}

.slider:focused .thumb {
}

.slider .thumb:hover {
    -fx-border-color: -var-button-hover-border-color;
    -fx-background: -var-button-hover-background-color;
}

.slider .thumb:pressed {
    -fx-border-color: -var-border-color;
    -fx-background: -fx-focus-color;
}

.slider .track {
    -fx-background-color: -var-slider-track-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 10px;
    -fx-padding: 3px;
}

.slider:vertical .track {
    -fx-background-color: -fx-shadow-highlight-color,
    -fx-text-box-border,
    linear-gradient(to right,
            derive(-fx-control-inner-background, -9%),
            -fx-control-inner-background,
            derive(-fx-control-inner-background, -9%)
    );
}

.slider .axis {
    -fx-tick-label-fill: derive(-fx-text-background-color, 30%);
    -fx-tick-length: 5px;
    -fx-minor-tick-length: 3px;
    -fx-border-color: null;
}

/*******************************************************************************
 *                                                                             *
 * Color Picker                                                                *
 *                                                                             *
 ******************************************************************************/

.color-picker {
    -fx-min-height: -var-default-field-height;
    -fx-max-height: -var-default-field-height;
    -fx-color-rect-width: 14px;
    -fx-color-rect-height: 14px;
}

.color-picker.button {
    -fx-padding: 0px 5px 0px 0px;
}

.color-picker > .color-picker-label {
    -fx-alignment: center-left;
    -fx-padding: 0px 0px 0px 0px;
}

.color-picker.button > .arrow-button {
}

.color-picker > .split-button > .arrow-button:hover {
}

.color-picker > .split-button > .color-picker-label:hover {
}

.color-picker > .color-picker-label > .picker-color {
    -fx-padding: 1px 1px 1px 6px;
    -fx-background-color: null;
}

.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: -fx-pressed-base;
    -fx-stroke-type: inside;
}

.color-palette {
    -fx-spacing: 15px;
    -fx-background-color: -var-menu-background-color;
    -fx-background-insets: 0;
    -fx-background-radius: 3px;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 2px;
    -fx-effect: -fx-shadow-menu;
}

.color-palette > .color-picker-grid > .color-square > .color-rect {
    -fx-stroke: transparent;
    -fx-stroke-width: 0.4;
    -fx-border-color: transparent;
}

.color-palette > .color-picker-grid {
    -fx-border-color: transparent;
}

.color-palette > .color-picker-grid > .color-square {
    -fx-background-color: transparent;
    -fx-background-insets: -1, 0;
    -fx-padding: 0.5;
}

/* the color over which the user is hovering */
.color-palette-region > .color-square.hover-square {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0px;
}

.color-palette > .hyperlink {
    -fx-text-fill: -fx-focus-color;
}

.color-palette > .separator > .line {
    -fx-border-color: -var-border-color transparent transparent transparent,
    transparent transparent transparent transparent;
    -fx-border-insets: 0, 1 0 0 0;
    -fx-border-style: none;
    -fx-padding: 0px;
}

/* ------- CUSTOM COLOR DIALOG ------- */

.custom-color-dialog {
    -fx-background-color: -var-background-color;
    -fx-padding: 10px 15px 10px 15px;
    -fx-spacing: 0px;
}

.custom-color-dialog > .color-rect-pane {
    -fx-background-color: transparent;
    -fx-spacing: 0.75em;
    -fx-min-height: 200px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-alignment: top-left;
    -fx-fill-height: true;
    -fx-padding: 0px 10px 0px 0px;
}

.custom-color-dialog .color-rect-pane .color-rect {
    -fx-min-width: 200px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 200px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .color-rect-pane .color-rect-border {
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
}

.custom-color-dialog > .color-rect-pane #color-rect-indicator {
    -fx-background-color: transparent;
    -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: -fx-shadow-control;
}

.custom-color-dialog > .color-rect-pane > .color-bar {
    -fx-min-height: 200px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-min-width: 20px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
}

.custom-color-dialog > .color-rect-pane > .color-bar > #color-bar-indicator {
    -fx-border-radius: 1px;
    -fx-border-color: white;
    -fx-effect: -fx-shadow-control;
    -fx-min-width: 24px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 12px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-translate-x: -0.1666667em;
    -fx-translate-y: -0.4166667em;
}

/* -------- Toggle Button ---------------- */
.custom-color-dialog .controls-pane .toggle-button {
    -fx-background: transparent;
    -fx-background-color: -fx-background;
    -fx-background-insets: 0;
    -fx-background-radius: 2px;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
    -fx-border-radius: 1px;
    -fx-padding: 0px;
}

.custom-color-dialog .controls-pane .toggle-button:focused {
    -fx-background: transparent;
    -fx-text-fill: -var-font-focused-color;
}

.custom-color-dialog .controls-pane .toggle-button:selected {
    -fx-background: -fx-focus-color;
    -fx-text-fill: -var-font-focused-color;
}

.custom-color-dialog .controls-pane .toggle-button:selected:focused {
    -fx-background: -fx-focus-color;
    -fx-text-fill: -var-font-focused-color;
}

.custom-color-dialog .controls-pane .left-pill {
    -fx-background-color: -var-button-background-color;
    -fx-background-radius: 2px 0px 0px 2px;
    -fx-background-insets: 0px;
    -fx-border-color: -var-border-color;
    -fx-border-insets: 0px;
    -fx-border-width: 1px 0px 1px 1px;
    -fx-border-radius: 1px 0px 1px 0px;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .left-pill:hover {
    -fx-background-color: -var-button-hover-background-color;
    -fx-border-color: -var-button-hover-border-color;
}

.custom-color-dialog .controls-pane .left-pill:focused {
    -fx-background-color: -fx-focus-color;
    -fx-background-radius: 2px 0px 0px 2px;
    -fx-background-insets: 0px;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .left-pill:selected {
    -fx-background-color: -fx-focus-color;
}

.custom-color-dialog .controls-pane .left-pill:selected, .controls-pane .left-pill:selected:focused {
    -fx-background-radius: 2px 0px 0px 2px;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .center-pill {
    -fx-background-color: -var-button-background-color;
    -fx-background-radius: 0px;
    -fx-background-insets: 0px;
    -fx-border-color: -var-border-color;
    -fx-border-insets: 0px;
    -fx-border-width: 1px 0px 1px 0px;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .center-pill:hover {
    -fx-background-color: -var-button-hover-background-color;
    -fx-border-color: -var-button-hover-border-color;
}

.custom-color-dialog .controls-pane .center-pill:focused {
    -fx-background-color: -fx-focus-color;
    -fx-background-radius: 0px;
    -fx-background-insets: 0px;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .center-pill:selected, .controls-pane .center-pill:selected:focused {
    -fx-background-insets: 0px;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .center-pill:selected {
    -fx-background-color: -fx-focus-color;
}

.custom-color-dialog .controls-pane .right-pill {
    -fx-background-color: -var-button-background-color;
    -fx-background-radius: 0px 2px 2px 0px;
    -fx-background-insets: 0;
    -fx-border-color: -var-border-color;
    -fx-border-insets: 0px;
    -fx-border-radius: 0px 1px 1px 0px;
    -fx-border-width: 1px 1px 1px 0px;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .right-pill:hover {
    -fx-background-color: -var-button-hover-background-color;
    -fx-border-color: -var-button-hover-border-color;
}

.custom-color-dialog .controls-pane .right-pill:focused {
    -fx-background-color: -fx-focus-color;
    -fx-background-radius: 0px 2px 2px 0px;
    -fx-background-insets: 0;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .right-pill:selected, .controls-pane .right-pill:selected:focused {
    -fx-background-insets: 0;
    -fx-border-color: -var-border-color;
    -fx-padding: 4px;
}

.custom-color-dialog .controls-pane .right-pill:selected {
    -fx-background-color: -fx-focus-color;
}

.custom-color-dialog .controls-pane .current-new-color-grid #current-new-color-border {
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
}

.custom-color-dialog .controls-pane .current-new-color-grid .color-rect {
    -fx-min-width: 230px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 24px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .transparent-pattern {
    -fx-background-image: url("/com/sun/javafx/scene/control/skin/modena/pattern-transparent.png");
    -fx-background-repeat: repeat;
    -fx-background-size: auto;
}

.custom-color-dialog .controls-pane #spacer1 {
    -fx-min-width: 400px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 6px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .controls-pane #spacer2 {
    -fx-min-width: 400px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 6px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .controls-pane #settings-pane {
    -fx-hgap: 0.4166667em;
    -fx-vgap: 0.3333333em;
    -fx-min-width: 460px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 160px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .controls-pane #settings-pane .settings-label {
    -fx-min-width: 110px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-text-alignment: right;
    -fx-alignment: center-right;
}

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

.custom-color-dialog .controls-pane #settings-pane .slider {
    -fx-min-height: 24px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-min-width: 230px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
}

.custom-color-dialog .controls-pane .color-input-field {
    -fx-min-width: 40px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 22px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.custom-color-dialog .controls-pane .web-field {
    -fx-min-width: 230px;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: 22px;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
}

.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: transparent;
    -fx-border-color: -var-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 0px;
}

.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;
}

.custom-color-dialog .controls-pane #buttons-hbox .button {
    -fx-min-width: -var-dialog-button-width;
    -fx-pref-width: -fx-min-width;
    -fx-max-width: -fx-min-width;
    -fx-min-height: -var-dialog-button-height;
    -fx-pref-height: -fx-min-height;
    -fx-max-height: -fx-min-height;
    -fx-font-size: 14px;
}


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

.progress-indicator {
}
.progress-indicator > .determinate-indicator > .indicator {
}
.progress-indicator > .determinate-indicator > .progress {
}
.progress-indicator > .determinate-indicator > .tick {
}
.progress-indicator > .percentage {
}
.progress-indicator:indeterminate > .spinner {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}
.progress-indicator:indeterminate .segment {
    -fx-background-color: -fx-focus-color;
}