body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    height: 90vh; /* Set the height to 100% of the viewport height */
    width: 100vw; /* Set the width to 100% of the viewport width */
    margin: 0; /* Remove any default margin */
    overflow: none; /* Add a scrollbar if the content is larger than the screen */
}

h1 {
    background-color: #DE2110;
    color: white;
    padding: 10px;
    font-size: 50px;
}

select {
    margin: 0px 0;
    padding-bottom: 0px;
    padding: 0px;
    font-size: 50px;
    font-weight: bold;
    background-color: #de2110;
    color: white;
    border: 0px solid #de211000;
    width: 90vw;
}

#dropdownMenu {
    position: relative;
    display: inline-block;
}

#dropdownContent {
    display: none;
    position: absolute;
    right: 1;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

#dropdownMenu:hover #dropdownContent {
    display: block;
}

option span{
    background-color: #a03db9f5;
}

#arrivals {
    border: 1px solid #000;
    padding: 0px;
    width: 100vw;
    align-items: center;
}

#arrivals p {
    border-bottom: 1px solid #000;
    padding: 10px 0;

}

#arrivals p:last-child {
    border-bottom: none;
}

table {
    width: 90vw;
}
td:last-child {
    text-align: right;
}

tr {
    height: 4vh;
}
tr:not(:last-child) {
    border-bottom: 2px dashed #8d0000 !important;
}

td.duein {
    text-align: right;
    font-size: 1.5vw;
    font-optical-sizing: auto;
    text-underline-offset: 0.5vh;
}

td.destination {
    text-align: left;
    font-size: 1.5vw;
    font-optical-sizing: auto;
    text-underline-offset: 0.5vh;
}

hr {
    border: 0.2vh dashed rgba(0, 0, 0, 0.247);
    border-radius: 100px;;
}

hr.centre {
    width: 100%;
}

label {
    font-size: auto;
    padding: auto;
    background-color: #ffffff; /* Orange */
}

.autoscrollable-wrapper {
    overflow: none;
    max-height: 100%;
    display: block;
    flex-direction: row;
}

select.filterLine {
    margin: 0px 0;
    padding-bottom: 0px;
    padding: 0px;
    font-size: 2vw;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 0px solid #de211000;
    width: 10vw;
}


h2.Northern {
    background-color: #000000;
    padding: 0.5em;
}

h2.Central {
    background-color: #E32017;
    padding: 0.5em;
}

h2.Bakerloo {
    background-color: #B36305;
    padding: 0.5em;
}

h2.Circle {
    background-color: #FFD300;
    padding: 0.5em;
}

h2.District {
    background-color: #00782A;
    padding: 0.5em;
}
h2.Elizabeth {
    background-color: #6950a1;
    padding: 0.5em;
}
h2.Hammersmith{
    background-color: #F3A9BB;
    padding: 0.5em;
}
h2.Jubilee {
    background-color: #A0A5A9;
    padding: 0.5em;
}
h2.Metropolitan {
    background-color: #9B0056;
    padding: 0.5em;
}
h2.Piccadilly {
    background-color: #003688;
    padding: 0.5em;
}
h2.Victoria {
    background-color: #0098D4;
    padding: 0.5em;
}
h2.Waterloo{
    background-color: #95CDBA;
    padding: 0.5em;
}
h2.DLR{
    background-color: #00A4A7;
    padding: 0.5em;
}
h2.London Overground {
    background-color: #EE7C0E;
    padding: 0.5em;
}
h2.London Trams {
    background-color: #84B817;
    padding: 0.5em;
}
h2.Emirates Cable Car {
    background-color: #E21836;
    padding: 0.5em;
}


h2.Northern span{
    background-color: #ffffff;
    padding: 1em;

}

h2.Central span{
    background-color: #ffffff;
    padding: 1em;
}

h2.Bakerloo span{
    background-color: #ffffff;
    padding: 1em;
}

h2.Circle span{
    background-color: #ffffff;
    padding: 1em;
}

h2.District span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Elizabeth span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Hammersmith span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Jubilee span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Metropolitan span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Piccadilly span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Victoria span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Waterloo span{
    background-color: #ffffff;
    padding: 1em;
}
h2.DLR span{
    background-color: #ffffff;
    padding: 1em;
}
h2.London Overground span{
    background-color: #ffffff;
    padding: 1em;
}
h2.London Trams span{
    background-color: #ffffff;
    padding: 1em;
}
h2.Emirates Cable Car span{
    background-color: #ffffff;
    padding: 1em;
}
/* Styles for screens that are 600px wide or less */
@media only screen and (max-width: 600px) {
    h1 {
        font-size: 30px;
    }

    select {
        font-size: 30px;
    }
}

/* Styles for screens in landscape orientation */
@media only screen and (orientation: landscape) {
    /* Your styles for landscape orientation here */
    body {
        font-size: 1.2em;
    }
}

/* Styles for screens in portrait orientation */
@media only screen and (orientation: portrait) {
    /* Your styles for portrait orientation here */
    body {
        font-size: 1em;
    }
}

/* Styles for screens that are square */
@media only screen and (min-aspect-ratio: 1/1), only screen and (max-aspect-ratio: 1/1) {
    /* Your styles for square screens here */
    body {
        font-size: 0.8em;
    }
}