@font-face {
    src: url("Baloo-Regular.ttf");
}

* {
    -fx-pp-light-text-color: #fff;
    -fx-pp-dark-text-color: #6c6c6c;
    -fx-pp-theme-color: #3493e3;
    -fx-pp-light-theme-color: #38a2fa;
    -fx-pp-background-color: transparent;
    -fx-pp-front-color: #fff;
    -fx-font-family: "Baloo";

    -fx-pp-dropshadow-light: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10.0, 0.2, 3, 4);
    -fx-pp-dropshadow-dark: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10.0, 0.2, 5, 6);
    -fx-pp-dropshadow-headers: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 10.0, 0.2, 3, 4);
}

/*GridPane .jfx-button {*/
/*-fx-min-height: 65px; !* because we changed the font, we now need to set mini height for all buttons *!*/
/*}*/

.jfx-button {
    -fx-cursor: hand;
}

.jfx-button:pressed {
    -fx-cursor: wait;
}

.jfx-text-field {
    -jfx-label-float: true;
}

.jfx-decorator {
    -fx-decorator-color: -fx-pp-theme-color;
}

.jfx-decorator .jfx-decorator-buttons-container {
    -fx-background-color: -fx-decorator-color;
}

.jfx-decorator .resize-border {
    -fx-border-color: -fx-decorator-color;
    -fx-border-width: 0 4 4 4;
}
/********* customised scroll bar for scroll pane ***********/

/* The main scrollbar **track** CSS class  */
.scroll-bar:horizontal .track,
.scroll-bar:vertical .track {
    -fx-background-color: white;
    -fx-border-color: derive(-fx-pp-background-color, 50%);
    -fx-border-style: solid;
    -fx-border-width: 3px;
    -fx-background-radius: 0em;
    -fx-border-radius: 0em;
}

/* The increment and decrement button CSS class of scrollbar */
.scroll-bar:horizontal .increment-button,
.scroll-bar:horizontal .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0em;
    -fx-padding: 0 0 10 0;
}

/* The increment and decrement button CSS class of scrollbar */

.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0em;
    -fx-padding: 0 10 0 10; /* set scroll bar width */

}

.scroll-bar .increment-arrow,
.scroll-bar .decrement-arrow {
    -fx-shape: " ";
    -fx-padding: 0;
}

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
    -fx-background-color: derive(#c9c9cb, 0%);
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 0em;
}

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

.slider .thumb {
    -fx-background-color: -fx-pp-theme-color;
}

.slider .track {
    -fx-background-color: -fx-pp-dark-text-color;
}