/* Breeze CSS theme for JavaFX */

.root {
    /* The official breeze color palette */
    paper-white: #fcfcfc;
    carboard-grey: #eff0f1;
    icon-grey: #4d4d4d;
    charcoal-grey: #31363b;
    shade-black: #232629;
    plasma-blue: #3daee9;
    /* Secondary colors */
    icon-red: #da4453;
    danger-red: #ed1515;
    icon-orange: #f47750;
    beware-orange: #f67400;
    icon-yellow: #fdbc4b;
    sunbeam-yellow: #c9ce3b;
    mellow-turquoise: #1cdc9a;
    icon-green: #2ecc71;
    verdant-green: #11d116;
    icon-blue: #1d99f3;

    /* My palette (for now) */
    light-gray: #f3f4f5;
    regular-gray: #bdc3c7;
    dark-gray: #76787d;
    regular-blue: #3daee9;
    light-blue: #93cee9;

    button-outline-gray: #b1b0b2;
    tracks: #babbbe;


    /*-fx-shadow-highlight-color: derive(icon-grey, 95%);
    -fx-outer-border: carboard-grey;
    -fx-inner-border: #b6b8bb;
    -fx-body-color-default: linear-gradient(to bottom, derive(carboard-grey, 5%), derive(carboard-grey, -4%));
    -fx-body-color-hover: linear-gradient(to bottom, derive(light-blue, 30%), light-blue);
    -fx-body-color-armed: linear-gradient(to bottom, derive(plasma-blue, 30%), plasma-blue);*/

    -fx-shadow-highlight-color: carboard-grey;
    -fx-outer-border-color: derive(button-outline-gray, 20%);
    -fx-inner-border-color: derive(button-outline-gray, 20%);
    /*-fx-body-color: carboard-grey;*/
    -fx-body-color: linear-gradient(to bottom, derive(carboard-grey, 20%), derive(carboard-grey, -1%)); /*light to dark*/
}

/**** Text ****/
.text {
    -fx-bounds-type: logical_vertical_center;
    -fx-font-smoothing-type: gray;
    -fx-text-fill: shade-black;
}



/**** Button Style 2 ****/
.button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border-color, -fx-inner-border-color, -fx-body-color;
    -fx-background-insets: 0px -1px -1px 0px, 0px, 0px, 1px;
    -fx-background-radius: 3px, 2px, 2px, 1px;
    /*-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;*/
}
.button:hover {
    -fx-background-color: -fx-shadow-highlight-color, #4e96b9, #4e96b9, -fx-body-color;
}

.button:armed {
    -fx-background-color: #3daee6, #3daee6, #3daee6, #3daee6;
}

/**** Disabled Items ****/

/**** Mnemonic Items ****/

/**** Marks ****/

/**** Arrows ****/


/**** Choice Box Items ****/
.choice-box {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border-color, -fx-inner-border-color, -fx-body-color;
    -fx-background-insets: 0px -1px -1px 0px, 0px, 0px, 1px;
    -fx-background-radius: 3px, 2px, 2px, 1px;
    /*-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;*/
}
.choice-box:hover {
    -fx-background-color: -fx-shadow-highlight-color, #4e96b9, #4e96b9, -fx-body-color;
}
.choice-box:armed {
    -fx-background-color: -fx-shadow-highlight-color, #3daee6, #3daee6, #3daee6;
}


/**** Box Items ****/

/**** Labels ****/

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

/* Default */
/* Web Buttons */
/* Pill Button*/
/* Selected Toggle */


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


/**** CheckBox ****/

/**** HyperLink ****/

/**** SplitMenuButton ****/

/**** ToolBar ****/


/**** Scrollbar ****/
.scroll-bar { 
    -fx-background-color: transparent;
}
.scroll-bar > .track {
    -fx-background-color: tracks;
    -fx-background-radius: 5em; /*24px;*/
    -fx-background-insets: 0.23em; /*4px;*/
}
.scroll-bar > .increment-button, .decrement-button {
    -fx-background-color: transparent;
}
.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
    -fx-background-color: light-blue;
}
.scroll-bar > .thumb {
    -fx-background-color: plasma-blue;
    -fx-background-radius: 5em; /*24px;*/
    -fx-background-insets: 0.23em; /* 0.333333em;*/ /*4px;*/
}
.scroll-bar > .thumb:hover {
    -fx-background-color: light-blue;
}
.scroll-bar > .thumb:pressed {
    -fx-background-color: light-blue;
}


/**** Progress Bar ****/
.progress-bar {
    -fx-background-color: transparent;
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .track {
    -fx-background-color: tracks;
    /*-fx-background-radius: 5em;*/
    -fx-background-insets: 0.53em; 
}
.progress-bar > .bar {
    -fx-background-color: plasma-blue;
    /*-fx-background-radius: 5em;*/
    -fx-background-insets: 0.53em; 
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, light-blue, plasma-blue);
}


/**** Slider ****/
.slider .track {
      -fx-background-color: tracks;/*
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );*/
    /*-fx-background-radius: 5em;*/
    -fx-background-insets: 0.22;
    
    /*-fx-padding: 0.25em; *//* 3 */
}
.slider > .bar {
    -fx-background-color: plasma-blue;
}

.slider .thumb {
    -fx-background-color: 
        linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 1.0em; /* makes sure this remains circular */
    /*-fx-padding: 0.583333em; */ /* 7 */
    -fx-effect: dropshadow(two-pass-box , rgba(0, 0, 0, 0.1), 5, 0.0 , 0, 2);
}
.slider:focused .thumb {
    -fx-background-radius: 1.0em; /* makes sure this remains circular */
}

/*.slider: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;
}*/



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