.bilingual {
    display: flex;
    text-align: left;
}

.bilingual .chinese {
    font-size: 18px;
    font-weight: bold;
    font-family: Regular;
    line-height: 1.5;
}

.bilingual .english {
    font-size: 18px;
    color: gray;
    font-family: Roman;
    line-height: 1.5;
}

/* centered floating dialog */
.floating-form {
    position: fixed; /* fixed to the viewport */
    top: 10%;
    left: 90%;
    transform: translate(-50%, -50%); /* exact centering */
    background-color: white; /* white background keeps the content readable */
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 0.1rem;
    width: 15%;
    max-width: 900px; /* cap the width */
    font-family: 'Arial', sans-serif;
    border: 1px solid #ccc;
    z-index: 1000; /* topmost layer */
}

/* single-row form layout */
#searchForm {
    display: flex;
    align-items: center; /* vertical centering */
    gap: 1rem; /* spacing between items */
    margin: 0;
    padding: 0;
}

/* input and select container */
#searchForm .form-group1 {
    flex: 3; /* inputs and selects share the remaining space */

}

/* input and select container */
#searchForm .form-group2 {
    flex: 1; /* inputs and selects share the remaining space */

}

/* button group */
#searchForm .button-group {
    display: flex;
    flex-direction: row; /* stack the buttons */
    gap: 0.8rem; /* vertical gap between buttons */
    white-space: nowrap; /* keep button text on one line */
}

.floating-form label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.floating-form input,
.floating-form select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.floating-form input:focus,
.floating-form select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.floating-form button {
    background-color: #6e6e6e;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* full-width buttons */
}

.floating-form button:hover {
    background-color: #555555;
}

/* legacy media queries removed: the flex layout is already responsive */
/* extra small screens */
@media (max-width: 600px) {
    #searchForm {
        flex-direction: row; /* stack on small screens */
        align-items: stretch;
    }

    #searchForm .button-group {
        flex-direction: row; /* buttons stay horizontal on small screens */
        width: 100%;
        margin-top: 0.5rem;
    }
}