JavaFX drop shadow gets cut off

Question

I am working on a project for school and we are required to use JavaFX to create a desktop application. I am mainly responsible for how the application looks but I am still running in some problems.

One of these problems occures when I apply a drop shadow to one of my components. The drop shadow is there but it gets cut off because my component is inside another Pane.

As you can see in this image, the drop shadow is visible but it still gets cut off on the right side.

If it helps, this is my fxml.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.collections.FXCollections?>
<?import java.lang.String?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<BorderPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="be.hogent.sdp2_g14.ui.EmployeesViewController"
            stylesheets="@../css/global.css">

    <top>
        <fx:include source="header.fxml"/>
    </top>
    <center>
        <HBox styleClass="bg-white">
            <Pane HBox.hgrow="ALWAYS"/>
            <AnchorPane>
                <VBox prefWidth="817" prefHeight="200" AnchorPane.leftAnchor="14" AnchorPane.topAnchor="14" AnchorPane.rightAnchor="14" AnchorPane.bottomAnchor="14">
                    <!--Title area-->
                    <HBox alignment="CENTER">
                        <Label styleClass="page-title">Employees</Label>
                        <Pane HBox.hgrow="ALWAYS"/>
                        <HBox spacing="14" alignment="CENTER">
                            <Label text="Sort by:"/>
                            <ComboBox fx:id="comboBoxSort" prefWidth="150.0" styleClass="combo-box" AnchorPane.rightAnchor="14.0" >
                                <items>
                                    <FXCollections fx:factory="observableArrayList">
                                        <String fx:value="A - Z" />
                                        <String fx:value="Z - A" />
                                    </FXCollections>
                                </items>
                            </ComboBox>
                        </HBox>
                    </HBox>
                    <!--Searchbar area-->
                    <HBox spacing="14" styleClass="py-md-sm">
                        <TextField fx:id="searchBar" styleClass="input-field, drop-shadow" onKeyPressed="#handleOnKeyReleased" promptText="Search by name..." HBox.hgrow="ALWAYS" />
                        <Button  fx:id="createEmployeeButton" onMouseClicked="#handleCreateButtonClicked" prefWidth="150" styleClass="primary-button" text="CREATE +"/>
                    </HBox>

                    <!--Page content-->
                    <ScrollPane fitToWidth="true" styleClass="bg-transparent" VBox.vgrow="ALWAYS">
                        <GridPane fx:id="gridPaneEmployees" styleClass="bg-white" hgap="10" vgap="10" prefWidth="817.0" VBox.vgrow="ALWAYS" />
                    </ScrollPane>
                </VBox>
            </AnchorPane>
            <Pane HBox.hgrow="ALWAYS"/>
        </HBox>
    </center>

</BorderPane>

This is my global.css file that I am using for this fxml file.

* {
    /*TODO: Change to inter*/
    -fx-font-family: 'Arial';
}

.page-title {
    -fx-font-size: 40;
}

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


/*CARD*/

.card-base {
    /*-fx-border-color: #535858;*/
    /*-fx-border-width: 1;*/
    /*-fx-border-style: solid;*/
    -fx-background-radius: 6;
    /*-fx-padding: 10;*/
    -fx-background-color: white;
    -fx-padding: 14 10 14 10;
}

.card-text {
    -fx-font-size: 24;
}

.card-subtext {
    -fx-font-size: 20;
    -fx-text-fill: #D9D9D9;
}

/*CONTROL*/

.primary-button {
    -fx-background-color: #EF463C;
    -fx-text-fill: white;
    -fx-cursor: hand;
    -fx-padding: 10 14 10 14;
    -fx-font-size: 14;
}

.primary-button:hover {
    -fx-background-color: #ea6d66;
}

.secondary-button {
    -fx-background-color: #D4D4D4;
    -fx-text-fill: black;
    -fx-cursor: hand;
    -fx-padding: 10 14 10 14;
    -fx-font-size: 14;
}

.secondary-button:hover {
    -fx-background-color: #e0e0e0;
}

.input-field {
    -fx-background-color: white;
    -fx-padding: 10 14 10 14;
    -fx-font-size: 14;
}

/*CONTROL (Automatic)*/

.combo-box {
    -fx-cursor: hand;
    -fx-background-color: #d3d3d3;
}

/*SPACING*/

.pt-sm {
    -fx-padding: 14 0 0 0;
}
.pt-md {
    -fx-padding: 24 0 0 0;
}

.pl-sm {
    -fx-padding: 0 0 0 14;
}
.pl-md {
    -fx-padding: 0 0 0 24;
}

.py-md-md {
    -fx-padding: 24 0 24 0;
}

.py-sm-sm {
    -fx-padding: 14 0 14 0;
}

.py-md-sm {
    -fx-padding: 24 0 14 0;
}

.py-sm-md {
    -fx-padding: 14 0 24 0;
}

/*SCROLLBAR (Automatic)*/

.scroll-bar {
    -fx-background-color: transparent;
    -fx-pref-width: 0;
}

.scroll-pane {
    -fx-background: white;
    -fx-background-color: transparent;
}

.increment-button, .decrement-button {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.scroll-bar .thumb {
    -fx-background-radius: 5em;
}




.text-bold {
    -fx-font-weight: bold;
}

.text-24 {
    -fx-font-size: 24;
}

.text-20 {
    -fx-font-size: 20;
}

.bg-white {
    -fx-background-color: white;
}

.bg-transparent {
    -fx-background-color: transparent;
}

.bg-error {
    -fx-background-color: #EF463C;
}

.debug-red {
    -fx-background-color: red;
}


.debug-green {
    -fx-background-color: green;
}


.debug-blue {
    -fx-background-color: blue;
}


/*Effects*/
.drop-shadow {
    -fx-effect: dropshadow(gaussian, rgba(211, 211, 211, 5), 10, 0, 2, 2)
}

If you happen to have a solution, please let me know!

I tried setting the root pane's background to transparent but that still didn't fix it.