/**************************************************************************
 * 
 * CustomTextField
 * 
 **************************************************************************/

.custom-text-field {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    
}

/*
.custom-text-field {
    -fx-background-color: null;
    -fx-background-insets: 0;
}
*/
.custom-text-field:no-side-nodes {
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; 
}

.custom-text-field:left-node-visible {
    -fx-padding: 0.333333em 0.583em 0.333333em 0; 
}

.custom-text-field:right-node-visible {
    -fx-padding: 0.333333em 0 0.333333em 0.583em;
}

.custom-text-field:left-node-visible:right-node-visible {
    -fx-padding: 0.333333em 0 0.333333em 0; 
}

.custom-text-field:left-node-visible .left-pane {
    -fx-padding: 0 3 0 3;
}

.custom-text-field:right-node-visible .right-pane {
    -fx-padding: 0 3 0 3; 
}

.custom-text-field:focused, 
.custom-text-field:text-field-has-focus {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color: 
        -fx-focus-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.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}




/**************************************************************************
 * 
 * Clearable Text / Password Field
 * 
 **************************************************************************/

.clearable-field .clear-button {
    -fx-padding: 0 3 0 0;
}

.clearable-field .clear-button > .graphic {
    -fx-background-color: #949494;
    -fx-scale-shape: false;
    -fx-padding: 4.5 4.5 4.5 4.5; /* Graphic is 9x9 px */
    -fx-shape: "M395.992,296.758l1.794-1.794l7.292,7.292l-1.795,1.794 L395.992,296.758z M403.256,294.992l1.794,1.794l-7.292,7.292l-1.794-1.795 L403.256,294.992z";
}

.clearable-field .clear-button:hover > .graphic {
    -fx-background-color: #ee4444;
}

.clearable-field .clear-button:pressed > .graphic {
    -fx-background-color: #ff1111;
}