/* 
    Author     : sphillips
*/
.label {
    -fx-text-fill: aliceblue;
}

.litlog-text {
    -fx-font-family: "Segoe UI Semibold";
    -fx-fill: green; 
    -fx-font-size: 16; 
}
.litlog-textarea {
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: green;
    -fx-display-caret: true;
    -fx-highlight-fill: #00ff00;
    -fx-highlight-text-fill: #000000;    
    -fx-background-insets: 0px ;
    -fx-font-size: 16;  
}

.litlog-textarea .content {
    -fx-background-color: transparent;   
}

.litlog-textarea .scroll-pane {
    -fx-background-color: transparent;
    -fx-background-insets: 5 5 5 5;  
    -fx-pannable: true;
}
.litlog-textarea .scroll-pane .scroll-bar {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-shape: null;
    -fx-opacity: 0;
}


.litlog-textarea .scroll-pane .corner {
    -fx-background-color: #000000;
    -fx-background-radius: 0 0 0 0;
    -fx-background-insets: 1 0 0 1;    
}

.litlog-textarea .scroll-pane .viewport{
    -fx-background-color: transparent;
}

.litlog-textarea .scroll-pane .content{
    -fx-background-color: transparent;
}

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

.spinner > .label {
    -fx-text-fill: aliceblue;
}
.spinner > .text-field {
    -fx-text-fill: aliceblue;
}
.spinner > .text-field:focused {
    -fx-text-fill: black;
}


.spinner > .increment-arrow-button,
.spinner > .decrement-arrow-button {
    -fx-background-color: black;
    -fx-border-width: 1px;
    -fx-borders-style: solid;
    -fx-border-color: #1e1e1e;
}
.spinner > .increment-arrow-button:hover,
.spinner > .decrement-arrow-button:hover {
    -fx-border-color: #55c4fe;
    -fx-background-color: #55c4fe;
}
.spinner > .increment-arrow-button:pressed,
.spinner > .decrement-arrow-button:pressed {
    -fx-border-color: silver;
    -fx-background-color: silver;
}
.spinner .increment-arrow-button .increment-arrow:hover,
.spinner .decrement-arrow-button .decrement-arrow:hover {
    -fx-border-color: #55c4fe;
    -fx-background-color: #55c4fe;
}

/*******************************************************************************
 *                                                                             *
 * ListView                                                                    *
 *                                                                             *
 ******************************************************************************/

.list-view {
    -fx-text-fill: aliceblue;
    -fx-background-color: transparent;
}

.list-cell {
    -var-text_color: white;
/*    -var-title_background_color: #1f1f1f;
    -var-title_background_hover_color: #4a4a4a;*/
    -var-border_color: #494949;
    /*-var-arrow_color: #6495ED;  CornflowerBlue*/ 
    -var-content_background_color: #6495ED88;
    -var-content_background_odd_color: #4a9ec388;
    -fx-background-color: -var-content_background_color;    
    
    /*-fx-background-color: linear-gradient(to top, #6495ED01 10%, #6495ED55 75%, #6495ED77 90%);*/    
    /*-fx-background-color: #0A65BFEE;*/
    
}
.list-cell:odd { 
    -fx-background-color: -var-content_background_odd_color;
}

.list-cell:filled:selected:focused, 
.list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
    /*-fx-text-fill: aliceblue;*/
}

.list-cell:filled:hover {
    -fx-background-color: #55c4fe;
    /*-fx-text-fill: aliceblue;*/
}



.dialog-pane .date-picker > .label {
    -fx-background-color: #1d1d1d;
    -fx-text-fill: #d8d8d8;
}

.dialog-pane {
    -fx-background-color: #212121;
    /*-fx-text-fill: #212121;*/
/*    -fx-font-size: 2em;*/
}
.dialog-pane > .content .date-picker-popup .label{
    -fx-text-fill: darkslateblue;
    -fx-font-size: 14pt;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
.dialog-pane > .content .label{
    -fx-text-fill: aliceblue;
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.dialog-pane > .content .date-picker-popup > .month-year-pane {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: darkslategray;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
}

.dialog-pane:header .header-panel {
    -fx-background-color: black;
}
.dialog-pane:header .header-panel {
    -fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
    -fx-font-style: italic;
    /*-fx-font-size: 2em;*/
    -fx-text-fill: aliceblue;
}

.dialog-pane .button {
    -fx-padding: 5 22 5 22;   

    -fx-border-color: darkslategray;
    
    -fx-border-width: 2;

    -fx-background-radius: 0;

    -fx-background-color: #1d1d1d;
  
     -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
}

.dialog-pane .button:hover{
    -fx-background-color: #3a3a3a;
}

.dialog-pane .button:pressed, .button:default:hover:pressed
{
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.dialog-pane .button:focused
{
    -fx-border-color: white, white;
    -fx-border-width: 1, 2;
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.dialog-pane .button:disabled, .dialog-pane .button:default:disabled
{
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.dialog-pane .button:default
{
    -fx-background-color: #008287;
    -fx-text-fill: #ffffff;
}

.dialog-pane .button:default:hover{
    -fx-background-color: #219297;
}


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

.dialog-pane .combo-box-base  {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid;    
}

.dialog-pane .combo-box-base:hover {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
    -fx-border-color: #a1e1e1;    
}

.dialog-pane .combo-box-base:focused {
    -fx-background-color: transparent, white, transparent, #d2d2d2;
    -fx-background-insets: -1.4, 0, 1, 2;

    /*-fx-background-radius: 0, 15, 15, 0;*/
}

.dialog-pane .combo-box-base:focused:hover  {
    -fx-background-color: transparent, white, transparent, #d2d2d2;
}
.dialog-pane .combo-box-base:focused:hover .arrow {
    -fx-background-color: black;
}
.dialog-pane .combo-box-base:hover .arrow {
    -fx-background-color: black;
}

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

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

/* ------- ARROW* ------- */
.dialog-pane .combo-box-base .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
}
/*******************************************************************************
 *                                                                             *
 * SplitMenuButton                                                             *
 *                                                                             *
 ******************************************************************************/
.dialog-pane .split-menu-button {
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid;      
}

.dialog-pane .split-menu-button:hover {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
    /*-fx-background-color: transparent, white, transparent, transparent;*/
    -fx-border-color: #a1e1e1;    
}

.dialog-pane .split-menu-button:focused {
    /*-fx-background-color: transparent, white, transparent, #d2d2d2;*/
    -fx-background-insets: -1.4, 0, 1, 2;
}

.dialog-pane .split-menu-button:focused:hover {
    -fx-background-color: transparent, white, transparent, #d2d2d2;
}

/*
.dialog-pane .split-menu-button:disabled {
    -fx-opacity: .4;
}*/

/* ------- OPEN BUTTON ------- */
.dialog-pane .split-menu-button .arrow-button {
    -fx-background-color: transparent, transparent, transparent;
}

/* ------- ARROW* ------- */
.dialog-pane .split-menu-button .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
}
.dialog-pane .split-menu-button:focused:hover .arrow {
    -fx-background-color: black;
}
.dialog-pane .split-menu-button:hover .arrow {
    -fx-background-color: black;
}
/*******************************************************************************
 *                                                                             *
 * Push Button                                                                 *
 *                                                                             *
 ******************************************************************************/

.button {
    -fx-padding: 5 22 5 22;   

    /*-fx-border-color: #e2e2e2;*/
    -fx-border-color: darkslategray;
    
    -fx-border-width: 2;

    -fx-background-radius: 0;

    -fx-background-color: #1d1d1d;
  
     -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
}

.button:hover{
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed
{
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused
{
    -fx-border-color: white, white;
    -fx-border-width: 1, 2;
    -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
{
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default
{
    -fx-background-color: #008287;
    -fx-text-fill: #ffffff;
}

.button:default:hover{
    -fx-background-color: #219297;
}

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

.toggle-button {
    -fx-padding: 5 10 5 10;   
    /*-fx-border-color: #e2e2e2;*/
    -fx-border-color: darkslategray;
    /*-fx-border-width: 2;*/
    -fx-borders-style: solid; 
    
    -fx-background-radius: 0;

    -fx-background-color: #1d1d1d;
  
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
}
.toggle-button:focused {
    -fx-border-color: white, white;

    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.toggle-button:hover {
    -fx-text-fill: #d8d8d8;
    -fx-background-color: #3a3a3a;
}

.toggle-button:selected {
    -fx-background-color: white;
    -fx-text-fill: #1d1d1d;
}

.toggle-button:selected:hover {
    -fx-background-color: #eee;
    -fx-text-fill: #1d1d1d;
    
    -fx-border-color: #eee;
}
.toggle-button:disabled {
    -fx-opacity: 0.4;
}


/*******************************************************************************
 *                                                                             *
 * choicebox                                                                    *
 *                                                                             *
 ******************************************************************************/
.choice-box  {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid; 
    /*-fx-border-color: aliceblue;*/
    -fx-border-color: darkslategray;
}

/* Text color of non-focused items in the list */
.choice-box .menu-item > .label { -fx-text-fill: darkslategray; }


.choice-box .label  {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: aliceblue;
    -fx-opacity: 0.8;    
}

.choice-box .label:hover {
    -fx-text-fill: aliceblue;
}

.choice-box:hover {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-border-color: #a1e1e1;    
}

.choice-box:focused {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-border-color: #a1e1e1
}

.choice-box:focused:hover  {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-border-color: #a1e1e1
}

.choice-box:focused:hover .arrow {
    -fx-border-color: #55c4fe;
    -fx-background-color: #55c4fe;
}
.choice-box:hover .arrow {
    -fx-border-color: #55c4fe;
    -fx-background-color: #55c4fe;    
}

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

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

/* ------- ARROW* ------- */
.choice-box .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
}


.dialog-pane .choice-box  {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid; 
    -fx-border-color: darkslategray;
}

.dialog-pane .choice-box:hover {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
    /*-fx-background-color: transparent, white, transparent, transparent;*/
    -fx-border-color: #a1e1e1;    
}

.dialog-pane .choice-box:focused {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
    /*-fx-background-insets: -1.4, 0, 1, 2;*/

    /*-fx-background-radius: 0, 15, 15, 0;*/
}

.dialog-pane .choice-box:focused:hover  {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
}
/*.choicebox-base:focused:hover .arrow {*/
.dialog-pane .choice-box:focused:hover .arrow {
    -fx-background-color: black;
}
.dialog-pane .choice-box:hover .arrow {
    -fx-background-color: black;
}

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

/* ------- OPEN BUTTON ------- */
.dialog-pane .choice-box .arrow-button {
    -fx-background-color: transparent, transparent, transparent;
}

/* ------- ARROW* ------- */
.dialog-pane .choice-box .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
}
.dialog-pane .choice-box .label {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: darkslategray;
    -fx-opacity: 0.6;    
}

/*******************************************************************************
 *                                                                             *
 * TextBox (and PasswordBox)                                                   *
 *                                                                             *
 ******************************************************************************/
.dialog-pane .text-field {
    -fx-background-color: #FFFFFF22;
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 16pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid; 
}
.dialog-pane .text-input{
    /*-fx-background-radius: 0, 0;*/
    -fx-background-color: black;
    /*-fx-background-insets: 0;*/
    -fx-prompt-text-fill: #818181;
    -fx-highlight-fill: #008287;  
}

.dialog-pane .text-input:hover{
    -fx-background-color: #55c4fe;
    -fx-text-fill: aliceblue;
    -fx-prompt-text-fill: aliceblue;
}

.dialog-pane .text-input:focused{
    -fx-background-color: #5c5c5c, white;
    -fx-text-fill: black;
}

.dialog-pane .text-input > Pane{
-fx-padding: 0.333333em 0.583em 0.333333em 0em;  /*4 7 4 0 */
}

.dialog-pane .text-input > .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 */
}

.dialog-pane .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.5em 0.5em;  /*TODO: put the real number here 18 18 */
    -fx-background-color: black;
}
/*******************************************************************************
 *                                                                             *
 * ScrollBar                                                                   *
 *                                                                             *
 ******************************************************************************/

.dialog-pane .scroll-bar > .thumb{
    -fx-background-color: #1e1e1e;/*#b8b8b8;*/
    -fx-background-insets: 0;
    -fx-background-radius: 0;
/*    -fx-scale-x: 2.0;
    -fx-scale-y: 2;    */
}

.dialog-pane .scroll-bar > .thumb:hover {
    -fx-background-color: #cacaca;
}

.dialog-pane .scroll-bar > .thumb:pressed {
    -fx-background-color: #cacaca; /* #1e1e1e; */
}

.dialog-pane .scroll-bar > .track {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0 2 2 0;
    -fx-background-radius: 0;
    /*-fx-scale-x: 2.0;*/
}
.dialog-pane .scroll-bar > .track-background {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0;
}

.dialog-pane .scroll-bar > .increment-button,
.dialog-pane .scroll-bar > .decrement-button {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.25em; /* 3 */
/*    -fx-scale-x: 2.0;
    -fx-scale-y: 2.0;*/
}

.dialog-pane .scroll-bar > .increment-button:hover,
.dialog-pane .scroll-bar > .decrement-button:hover  {
    -fx-background-color: #cacaca;
}

.dialog-pane .scroll-bar > .increment-button:pressed,
.dialog-pane .scroll-bar > .decrement-button:pressed {
    -fx-background-color: #1e1e1e;
}

.dialog-pane .scroll-bar > .decrement-button > .decrement-arrow,
.dialog-pane .scroll-bar > .increment-button > .increment-arrow{
    -fx-background-color: transparent, #1e1e1e;
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-effect: null;
}

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

.dialog-pane .dialog-pane scroll-bar:vertical > .increment-button > .increment-arrow,
.dialog-pane .scroll-bar:vertical > .decrement-button > .decrement-arrow {
    /*-fx-padding: 0.333333em 0.5em 0.0em 0.0em;  4 6 0 0 */
    -fx-padding: 0.5em 0.5em 0.5em 0.5em; /* 4 6 0 0 */
}

.dialog-pane .scroll-bar:horizontal > .increment-button > .increment-arrow,
.dialog-pane .scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    /*-fx-padding: 0.5em 0.333333em 0.0em 0.0em;  6 4 0 0 */
    -fx-padding: 0.0em 0.0em 0.5em 0.5em; /* 6 4 0 0 */
}


.dialog-pane .scroll-bar:disabled {
    -fx-opacity: 0.4;
}
/* ------- ARROW* ------- 
.choice-box .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em;  (2/3 * 4.25) 4 (2/3 * 4.25) 4 
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
    
}*/
/* ARROW SHAPES */
.dialog-pane .scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M7.626,12.876L4.251,8.751H7.14L11,12.876L7.14,17H4.251L7.626,12.876z";
}

.dialog-pane .scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M11,17H8.111l-3.86-4.124l3.86-4.125H11l-3.375,4.125L11,17z";
}

.dialog-pane .scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
}

.dialog-pane .scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M4,17v-2.889l4.124-3.86l4.125,3.86V17l-4.125-3.375L4,17z";
}


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

.radio-button {
    -fx-text-fill: white;
}

.radio-button > .radio  {
   -fx-background-color: #cfcfcf;
   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
   -fx-background-insets: 0;
   
   -fx-border-radius: 1.0em;
   -fx-border-color: #cfcfcf;
    
   -fx-padding: 4px; /* 4 -- padding from outside edge to the inner black dot */
}

.radio-button:hover > .radio {
    -fx-background-color: #e0e0e0;
    -fx-border-color: #e0e0e0;
}

.radio-button > .radio > .dot {
   -fx-background-color: transparent;
   -fx-background-insets: 0;
   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
   -fx-padding: 6px; /* 3 -- radius of the inner black dot when selected */
}

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

.radio-button:disabled
{
    -fx-opacity: 0.5;
}

.radio-button:disabled > .radio
{
    -fx-background-color: #e6e6e6;
    -fx-border-color: #d9d9d9;
}

.radio-button:disabled:selected > .radio > .dot
{
    -fx-background-color: #484848;
}


.radio-button:focused > .radio
{
   -fx-background-color: #cfcfcf;
   -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
   -fx-background-insets: 0;
   
   -fx-border-style: solid, segments(1, 2);
   -fx-border-radius: 1.0em, 0;
   -fx-border-color: #cfcfcf, white;
   -fx-border-insets: 0px, -2px;
   -fx-border-width: 1px, 1px;
    
   -fx-padding: 4px; /* 4 -- padding from outside edge to the inner black dot */   
}

.radio-button:focused:hover > .radio
{
    -fx-border-color: #e0e0e0, #e0e0e0;
    -fx-background-color: #e0e0e0;
}

.radio-button:focused:pressed > .radio
{
    -fx-border-color: white, white;
    -fx-background-color: white;
}

.radio-button:pressed > .radio
{
    -fx-background-color: white;
    -fx-border-color: white;
}

.radio-button:pressed:selected > .radio > .dot
{
    -fx-background-color: black;
}
/*******************************************************************************
 *                                                                             *
 * TextBox (and PasswordBox)                                                   *
 *                                                                             *
 ******************************************************************************/
.text-field {
    -fx-background-color: #FFFFFF77;
    /*-fx-background-color: darkslategray;*/
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 16pt;
    -fx-border-width: 1px;
    -fx-border-color: #d1d1d122;
    -fx-borders-style: solid; 
}
.text-input{
    /*-fx-background-radius: 0, 0;*/
    -fx-background-color: darkslategray;
    /*-fx-background-insets: 0;*/
    -fx-prompt-text-fill: #818181;
    -fx-highlight-fill: #008287;  
}
.text-input:hover{
    -fx-background-color: #55c4fe;
    -fx-text-fill: aliceblue;
    -fx-prompt-text-fill: aliceblue;
}
.text-input:focused{
    -fx-background-color: #5c5c5c, white;
    -fx-text-fill: black;
}

.text-input > Pane{
-fx-padding: 0.333333em 0.583em 0.333333em 0em;  /*4 7 4 0 */
}

.text-input > .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 */
}

.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.5em 0.5em;  /*TODO: put the real number here 18 18 */
    -fx-background-color: black;
}

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

.scroll-bar > .thumb{
    -fx-background-color: #1e1e1e;/*#b8b8b8;*/
    -fx-background-insets: 0;
    -fx-background-radius: 0;
/*    -fx-scale-x: 2.0;
    -fx-scale-y: 2;    */
}

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

.scroll-bar > .thumb:pressed {
    -fx-background-color: #cacaca; /* #1e1e1e;*/
}

.scroll-bar > .track {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0 2 2 0;
    -fx-background-radius: 0;
    /*-fx-scale-x: 2.0;*/
}
.scroll-bar > .track-background {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0;
}

.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
    -fx-background-color: #4a4a4a;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0.25em; /* 3 */
/*    -fx-scale-x: 2.0;
    -fx-scale-y: 2.0;*/
}

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

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

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

.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-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.5em 0.5em 0.5em 0.5em; /* 4 6 0 0 */
}

.scroll-bar:horizontal > .increment-button > .increment-arrow,
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-padding: 0.0em 0.0em 0.5em 0.5em; /* 6 4 0 0 */
}


.scroll-bar:disabled {
    -fx-opacity: 0.4;
}
/* ------- ARROW* ------- 
.choice-box .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em;  (2/3 * 4.25) 4 (2/3 * 4.25) 4 
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
    
}*/
/* ARROW SHAPES */
.scroll-bar:horizontal > .increment-button > .increment-arrow {
    -fx-shape: "M7.626,12.876L4.251,8.751H7.14L11,12.876L7.14,17H4.251L7.626,12.876z";
}

.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
    -fx-shape: "M11,17H8.111l-3.86-4.124l3.86-4.125H11l-3.375,4.125L11,17z";
}

.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
}

.scroll-bar:vertical > .decrement-button > .decrement-arrow {
    -fx-shape: "M4,17v-2.889l4.124-3.86l4.125,3.86V17l-4.125-3.375L4,17z";
}

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

.scroll-pane .corner {
    -fx-background-color: #000000;
    -fx-background-radius: 0 0 0 0;
    -fx-background-insets: 1 0 0 1; /* have the square on the corner be centered */
}
.scroll-pane > .viewport {
   -fx-background-color: transparent;
}
.scroll-pane {
    -fx-pannable: true;
    -fx-background-color: transparent;
    -fx-background-insets: 5 5 5 5; /* have the square on the corner be centered */
}
/*******************************************************************************
 *                                                                             *
 * Check Box                                                                   *
 *                                                                             *
 ******************************************************************************/

.check-box {
    -fx-text-fill: white;
}

/* unselected */
.check-box > .box {
    /*-fx-background-color: #d1d1d1;*/
    -fx-background-color: #d1d1d122;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    /*-fx-border-color: #d1d1d1;*/
    -fx-border-color: #d1d1d122;
    -fx-border-width: 1px;
    -fx-borders-style: solid;
    -fx-padding: 1;
}

.check-box > .box > .mark {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding:7px;
    -fx-shape: "M9.005,17.766l13.759,14.739h1.716L49.02,0l10.298,8.488L25.997,50.453h-3.629L0,26.897L9.005,17.766z"
}

.check-box:hover > .box {
    -fx-border-color: #55c4fe;
    -fx-background-color: #55c4fe;
}

/* focused */
.check-box:focused > .box{
    -fx-background-color: #d1d1d1;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-border-color: white, #d1d1d1;
    -fx-border-width: 1, 2;
    -fx-border-style: segments(1, 2), solid;
    -fx-border-insets: -3, 0;
}

.check-box:focused:hover > .box{
    -fx-border-color: white, #55c4fe;
    -fx-background-color: #55c4fe;
}

.check-box:pressed > .box{
    -fx-border-color: white, white;

}

.check-box:selected > .box > .mark {
    -fx-background-color: black;
    -fx-border-color: #55c4fe;
    -fx-border-width: 0.5px;    
}
.check-box:selected:hover > .box > .mark {
    -fx-border-color: transparent;
    -fx-border-width: 1px;
}

.check-box:indeterminate > .box > .mark {
   -fx-background-color: black;
   -fx-background-insets: 2.8;
   -fx-padding:7px;
   -fx-shape: null;
}

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

.check-box:disabled > .box
{
    -fx-border-color: white;
    -fx-background-color: white;
}

.check-box:disabled:selected > .box > .mark
{
    -fx-background-color: #4c4c4c;
    -fx-opacity: 0.5;
}

.check-box:armed > .box
{
    -fx-background-color: transparent, white;
    -fx-background-insets: -1, 2;
    -fx-background-radius: 0, 0;
}
/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider {
    -fx-text-fill: white;
}
.slider .thumb {
    -fx-background-color: aliceblue;
    -fx-background-insets: 0 0 0 0;
    -fx-background-radius: 0em;
    -fx-padding: 0.333333em; /* 4 */
    -fx-scale-x: 1.5;
    -fx-scale-y: 2;
    -fx-effect: null;
}
.slider:focused .thumb {
    -fx-background-radius: 0em;
    -fx-background-color: steelblue;
}
.slider .label {
    -fx-text-fill: aliceblue;
}
.slider .track {
    -fx-background-color: #6c6c6c;
    -fx-background-insets: 2;
    -fx-background-radius: 2;
    -fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}

.slider .fill {
    -fx-background-color: #008287;
    -fx-padding: 0.333333em; /* This value must be equal to ".slider .thumb" padding */
}

.slider .fill:hover {
    -fx-background-color: #219297;
}

.slider .fill:pressed {
    -fx-background-color: #25bbc4;
}
/*******************************************************************************
 *                                                                             *
 * ComboBox                                                                    *
 *                                                                             *
 ******************************************************************************/

.combo-box-base  {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.166667em 0em 0.166667em; /* 0 2px 0 2px*/
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-border-width: 2px;
    -fx-borders-style: solid;    
}

.combo-box-base:hover {
    -fx-background-color: transparent, transparent, transparent, #d2d2d2;
    -fx-border-color: #a1e1e1;    
}

.combo-box-base:focused {
    -fx-background-color: transparent, white, transparent, #d2d2d2;
    -fx-background-insets: -1.4, 0, 1, 2;
    /*-fx-background-radius: 0, 15, 15, 0;*/
}

.combo-box-base:focused:hover  {
    -fx-background-color: transparent, white, transparent, #d2d2d2;
}
.combo-box-base:focused:hover .arrow {
    -fx-background-color: black;
}
.combo-box-base:hover .arrow {
    -fx-background-color: black;
}

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

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

/* ------- ARROW* ------- */
.combo-box-base .arrow {
    -fx-padding: 0.236110875em 0.333333em 0.236110875em 0.333333em; /* (2/3 * 4.25) 4 (2/3 * 4.25) 4 */
    -fx-shape: "M-78,640l-6-5.5v-3l6,5l0,0l6-5v3L-78,640L-78,640z";
    -fx-background-insets: 0 0 0 0, 0;
    -fx-background-color: silver;
}

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

.tab-pane {
    -fx-tab-min-height: 2.0em; /* 22 */
    -fx-tab-max-height: 2.0em; /* 22 */
    -fx-background-color: #00000000;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0 1 1 0, 1 2 1 1, 2 3 1 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em;  
    -fx-background-color: #55c4fe22;  

    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1;  
    
}
*/
.tab-pane .tab {
    -fx-background-color: #5c3c3c77;  
    -fx-border-color: #55c4fe77;
}    

.tab-pane .tab:selected
{
    -fx-background-color: #55c4fe77;
    -fx-border-color: #55c4fe;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1;  
    
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-alignment: CENTER;
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: aliceblue;  
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:top {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
}

.tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-color: -fx-hover-base;
}
*/

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; 
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1;  
}
.tab-pane:showing > .tab-header-area > .headers-region > .tab {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1;  
}

/*
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1;  looks sharper if outer border has a tighter radius (2 instead of 3) 
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:bottom:selected .focus-indicator {
    -fx-border-insets: -6 -5 -4 -4, -5 -3 -2 -2;
}
.tab-pane > .tab-header-area > .headers-region > .tab:disabled:hover {
    -fx-color: -fx-base;
}
*/
/*
.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color:  
        -fx-outer-border,
        -fx-text-box-border, 
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, derive(-fx-text-box-border, 30%));
}
*/
.tab-pane:top > .tab-header-area > .tab-header-background {
    -fx-background-insets: 0, 0 0 1 0, 1;
    -fx-background-color: transparent;
}

.tab-pane:top > .tab-header-area {
    -fx-padding: 0.416667em 0.166667em 0.0em 0.416667em;  
    -fx-padding: 0.416667em 5 0.0em 0.416667em;  
    -fx-background-color: transparent;
}
/*

 CONTROL BUTTONS 
.tab-pane > .tab-header-area > .control-buttons-tab > .container {
    -fx-padding: 3 0 0 0; 
}
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: -1 0 5 0, 0 1 6 1, 1 2 7 2;
    -fx-padding: 4 4 9 4;
    -fx-background-radius: 10;
}
.tab-pane:bottom > .tab-header-area > .control-buttons-tab > .container > .tab-down-button {
    -fx-padding: -5 4 4 4;  TODO convert to ems 
}
 FLOATING TABS CUSTOMISATION 
.tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-header-area {
    -fx-background-color: null;
}
.tab-pane.floating > .tab-content-area {
    -fx-background-color: -fx-outer-border, -fx-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2, 0;
    -fx-padding: 2;
}*/