@charset "UTF-8";
/* Default styles for the menu bar */
.menu-bar {
    position: fixed; /* Or absolute, depending on layout needs */
    top: 0;
    right: 0;
    padding: 10px;
    background-color: #f0f0f0; /* Light grey background */
    border-bottom: 1px solid #ccc; /* Optional: adds a border */
    z-index: 1000; /* Ensures menu is on top of other content */
}

.menu-bar h:form {
    display: flex;
    gap: 20px; /* Spacing between buttons */
}

.menu-bar h:commandButton {
    padding: 8px 15px;
    border: 1px solid #007bff; /* Blue border */
    background-color: #ffffff; /* White background */
    color: #007bff; /* Blue text */
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.menu-bar h:commandButton:hover {
    background-color: #007bff; /* Blue background on hover */
    color: #ffffff; /* White text on hover */
}

/* Styles for the main content area to prevent overlap with fixed menu */
.content {
    padding-top: 70px; /* Adjust based on menu bar height + padding */
}


/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .menu-bar {
        top: auto; /* Remove top positioning */
        bottom: 0; /* Position at the bottom */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        width: 100%; /* Full width */
        padding: 10px 0; /* Adjust padding as needed */
        border-top: 1px solid #ccc; /* Optional: adds a border to the top */
        border-bottom: none; /* Remove bottom border if it was set */
        justify-content: center; /* Center buttons if they are in a flex container */
    }

    .menu-bar h:form {
        justify-content: space-around; /* Distribute buttons evenly */
        width: 100%;
    }

    .menu-bar h:commandButton {
        flex-grow: 1; /* Allow buttons to grow and fill space */
        text-align: center;
        margin: 0 5px; /* Add some horizontal margin between buttons */
    }

    /* Adjust content padding if menu is at the bottom */
    .content {
        padding-top: 20px; /* Reset or adjust top padding */
        padding-bottom: 70px; /* Add padding to the bottom to avoid overlap with bottom menu */
    }
}