/* @page size */
@page {
    size: portrait;
}

/* #weatherInfo*/
#currentWeather {
    text-align: center;
    padding: 5px;
    font-size: 2em;
}

/* #TempInfo*/
#currentTemp {
    text-align: center;
    padding: 1px;
    font-size: 2em;
}

#currentTemp img {
    text-align: center;
    padding: 1px;
    font-size: 2em;
}

/* #humidityInfo*/
#currentHumidity {
    text-align: center;
    padding: 0px;
    font-size: 2em;
}

.currentHumidity img {
    width: 50px; /* Adjust the size as needed */
    height: 50px; /* Adjust the size as needed */
    padding: 1px;
    margin: 2px 0; /* Add margin above and below for spacing */
}

/* #PSIInfo*/
#currentPSI {
    text-align: center;
    padding: 5px;
    font-size: 2em;
}

/* Modify .Weather img to adjust spacing as needed */
/*.currentWeather img {
    width: 50px;*/ /* Adjust the size as needed */
    /*height: 50px;*/ /* Adjust the size as needed */
    /*padding: 1px;
    margin: 2px 0;*/ /* Add margin above and below for spacing */
/*}*/

/* #busInfo */
#busInfo {
    display: -webkit-box; /* For QtWeb, use -webkit-box instead of flex */
    -webkit-box-orient: vertical; /* For QtWeb, use -webkit-box-orient instead of flex-direction */
    -webkit-box-pack: center; /* For QtWeb, use -webkit-box-pack instead of justify-content */
    -webkit-box-align: center; /* For QtWeb, use -webkit-box-align instead of align-items */
    padding: 1px;
}

#dynamicBusServices {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch; /* Align children to stretch the full container width */
    width: 100%; /* Full width of the parent container */
    margin: 0 auto; /* Centering if needed */
    padding: 0px; /* Space inside the container */
}


/* .busService */
.busService {
    display: -webkit-box; /* Use -webkit-box for QtWeb */
    -webkit-box-orient: horizontal; /* Set horizontal orientation */
    -webkit-box-pack: start; /* Align children to the start of the flex container */
    -webkit-box-align: center; /* Vertically align items in the middle */
    width: 100%; /* Set width to 100% of the parent element */
    margin-bottom: 2px; /* Add space between rows */
    font-family: Arial, sans-serif;
    font-size: 2em;
    -webkit-box-pack: justify;
}

.serviceNumber,
.busItem {
    -webkit-box-flex: 0; /* Do not allow flex items to grow or shrink */
    width: 25%; /* Divide the container equally in 3 parts */
    text-align: center; /* Center align the text */
    padding: 1px 0; /* Add padding top and bottom for spacing */

}

.serviceNumber {
    font-size: 3em;
    font-weight: bold;
}
/* Existing .busItem styles, change the -webkit-box-orient to vertical */
.busItem {
    display: -webkit-box; /* Use -webkit-box for QtWeb */
    -webkit-box-orient: vertical; /* Change to vertical orientation */
    -webkit-box-pack: center; /* Center children horizontally */
    -webkit-box-align: center; /* Align children vertically in the middle */
    padding: 3px 0; /* Add padding top and bottom for spacing */
}

/* New styles for .iconsDiv to make sure the icons stack under the time */
.iconsDiv {
    display: -webkit-box;
    -webkit-box-orient: vertical; /* Stack children vertically */
    -webkit-box-pack: center; /* Center children horizontally */
    -webkit-box-align: center; /* Align children vertically in the middle */
    margin-top: 5px; /* Add some space between the time and the icons */
}

/* Modify .busItem img to adjust spacing as needed */
.busItem img {
    width: 75px; /* Adjust the size as needed */
    height: 60px; /* Adjust the size as needed */
    margin: 2px 0; /* Add margin above and below for spacing */
    padding: 10px;
}

.serviceNumberHeader {
    text-align: left;
    padding: 20px;
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 2em;
}

.nextBusHeader {
    padding-right: 585px;
}

/* .origin-destination */
.origin-destination {
    text-align: center;
    -webkit-box-flex: 2; /* For QtWeb, use -webkit-box-flex instead of flex */
}

/* .column-header */
.column-header {
    text-align: left;
    padding: 20px;
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 2em;
}

/* Odd busService */
.busService {
    background-color: white;
    color: black;
    display: -webkit-box; /* For QtWeb, use -webkit-box instead of flex */
    -webkit-box-orient: horizontal; /* For QtWeb, use -webkit-box-orient instead of flex-direction */
    -webkit-box-align: center; /* For QtWeb, use -webkit-box-align instead of align-items */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    font-size: 4em;
    width: 100%;
}

/* .arriving-label */
.arriving-label {
    text-align: left;
    padding: 5px;
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 2em;
}

.arrivalTime {
    display: inline-block;
    margin-right: 20px; /* Adjust spacing between bus containers */
    margin-left: 20px; /* Adjust spacing between bus containers */
    margin-top: 20px; /* Adjust spacing between bus containers */
    margin-bottom: 20px; /* Adjust spacing between bus containers */
    font-size: 2.5em;
}

.arriving-label img {
    margin-right: 30px;
}
/* .heading-label */
.heading-label {
    text-align: left;
    /*padding: 20px;*/
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 2em;
}

/* .time-header */
.time-header {
    text-align: left;
    /*padding: 20px;*/
    font-weight: bold;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 2em;
}

/* #currentTime */
#currentTime {
    text-align: center;
    padding: 10px;
    font-size: 2em;
}

.bus-container {
    display: inline-block;
    margin-right: 10px; /* Adjust spacing between bus containers */
    font-size: 2em;
}

.arrival {
    display: inline-block;
    background-color: black;
    color: white;
    margin-right: 20px; /* Adjust spacing between bus containers */
    margin-left: 20px; /* Adjust spacing between bus containers */
    margin-top: 20px; /* Adjust spacing between bus containers */
    margin-bottom: 20px; /* Adjust spacing between bus containers */
    font-size: 2.5em;
}



.busServiceye {
    display: -webkit-box; /* For QtWeb, use -webkit-box instead of flex */
    -webkit-box-orient: horizontal; /* For QtWeb, use -webkit-box-orient instead of flex-direction */
    -webkit-box-align: center; /* For QtWeb, use -webkit-box-align instead of align-items */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 2em;
    width: 100%;
}