Having some trouble with a custom widget and CSS positioning

[JonMoriSegra]

Hello,

I am having some issues with the positioning of a custom widget. I need it to be a "splash screen" widget so it forces the user to enter an address. I'm having a couple of issues. The widget is positioned perfectly if I leave the setting "inpanel": true, but I do not want the window in the back to be visible. Screenshot below. if InPanel:true. This is exactly where I want the placement of the widget, but I do not want the other panel on the left visible.

If I put the setting on InPanel:False, This is where the widget is showing, it is almost as if it is ignoring the CSS.

Here is my CSS.

.jimu-widget-customgeocode {
    position: fixed; /* Fixed positioning relative to the viewport */
    top: 50%; /* Position the top edge of the element at the center of the viewport */
    left: 50%; /* Position the left edge of the element at the center of the viewport */
    transform: translate(-50%, -50%); /* Shift the element back by half its own width and height to center it exactly */
    width: 50vw; /* Set the width to 50% of the viewport width */
    height: 50vh; /* Set the height to 50% of the viewport height */
    display: flex; /* Ensures flexbox layout */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children vertically */
    align-items: center; /* Centers children horizontally */
    z-index: 1000; /* Ensure it's on top of other elements */
    box-sizing: border-box; /* Include padding and borders in the element's size */
    padding: 10px; /* Padding around the content */
    border: 1px solid #ccc; /* Border for visibility */
    background-color: #fff; /* Background color */
}

.jimu-widget-customgeocode .search-container {
    width: 80%; /* Adjust width as necessary, can be 100% if needed */
    margin-bottom: 20px; /* Space between this container and anything below it */
    display: flex;
    justify-content: center; /* This will center the children within the container */
    align-items: center;
}

.jimu-widget-customgeocode .search-input {
    flex-grow: 1; /* Allows the input to grow and fill space */
    margin-right: 10px; /* Space between input and button */
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.jimu-widget-customgeocode .search-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}