/* DEFAULTS
----------------------------------------------------------*/

/* Base styles for the submit button */
.submit-button {
    /* Set basic dimensions and appearance */
    width: 75%;
    padding: 12px 20px;
    
    /* Define colors and borders */
    background-color: #FFA500; /* A pleasant teal color */
    color: #fff; /* White text */
    border: none;
    border-radius: 5px; /* Slightly rounded corners */
    
    /* Style the text and cursor */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    
    /* Add a smooth transition for hover effect */
    transition: background-color 0.3s ease;
    
    /* Prevent text selection */
    user-select: none;
}

/* Hover and active states for user interaction */
.submit-button:hover {
    background-color: #3498db; /* A slightly darker shade on hover */
}

.submit-button:active {
    background-color: #48817f; /* Even darker when clicked */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .submit-button 
    {
        width: 60%;
        padding: 10px 15px; /* Smaller padding for mobile screens */
        font-size: 14px;
    }
    
    .hide-row {
        display: none; /* Hides the logo cell on mobile */
    }    
}


.menu-button {
    /* Set basic dimensions and appearance */
    position: relative;
    top: 5px;
    width: 100%;
    max-width: 95px; /* Set a maximum width for consistency */
    padding: 8px 10px;
    /* Define colors and borders */
    background-color: #f4f4f4; /* A pleasant teal color */
    color: #000; /* White text */
    border: none;
    border-radius: 5px; /* Slightly rounded corners */
    
    /* Style the text and cursor */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    
    /* Add a smooth transition for hover effect */
    transition: background-color 0.3s ease;
    
    /* Prevent text selection */
    user-select: none;
}

/* Hover and active states for user interaction */
.menu-button:hover {
    background-color: #3498db; /* A slightly darker shade on hover */
}

.menu-button:active {
    background-color: #48817f; /* Even darker when clicked */
}


.menu-button-mobile {
    /* Set basic dimensions and appearance */
    position: relative;
    top: 0px;
    left: 5px;
    width: 100%;
    max-width: 40px; /* Set a maximum width for consistency */
    padding: 8px 10px;
    /* Define colors and borders */
    background-color: #f4f4f4; /* A pleasant teal color */
    color: #000; /* White text */
    border: none;
    border-radius: 5px; /* Slightly rounded corners */
    
    /* Style the text and cursor */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    
    /* Add a smooth transition for hover effect */
    transition: background-color 0.3s ease;
    
    /* Prevent text selection */
    user-select: none;
}

/* Hover and active states for user interaction */
.menu-button-mobile:hover {
    background-color: #3498db; /* A slightly darker shade on hover */
}

.menu-button-mobile:active {
    background-color: #48817f; /* Even darker when clicked */
}