body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
    font-size: 1.25rem;
}

form {
    margin: 20px 10px;
}

label, select, input {
    margin: 10px;
    padding: 5px;
    font-size: 16px;
}

select {
    font-size: 18px;
    padding: 10px;
}

#resultDiv {
    margin: auto;
    max-width: 700px;
    padding: 5px;
}

span {
    padding-left: 5px;
}

.line-info {
    background-color: #000;
    border-bottom: 1px solid #fff;
    color: #fff;
    padding: 5px;
}

.info-row, .crew-row {
    display: flex;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    background-color: #44546A;
}

.label {
    min-width:280px;
    padding: 5px;
    background-color: #44546A;
    color: #fff;
    border-right: 1px solid #000;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

#tripNumber, #direction, #scheduledDeparture, #actualDeparture, #scheduledPlatform, #crewNumber, #qcto, #cto, #csa, #extraHe, #extraCsa {
    padding: 5px;
    background-color: #fff;
    width: 100%;
    color: #000;
    text-align: left;
}

#tripNumber, #direction, #scheduledDeparture, #actualDeparture, #scheduledPlatform {
    background-color: #D3D3D3;
}

/* Responsive styles for mobile devices */
@media screen and (max-width: 460px) {
    body, select, input, button, .label {
        font-size: 16px; /* Larger font size for better readability on mobile */
    }

    select, input[type="submit"] {
        width: 90%; /* Full-width inputs for smaller screens */
        padding: 10px; /* Larger padding for easier interaction */
        margin: 10px 0; /* Spacing adjustments */
    }

    #resultDiv {
        font-size: 16px; /* Larger font size for results */
    }

    
}