.early { color: green; } .late { color: red; } .station { color: black; } .rsk { cursor: pointer; } #comp-date { display: flex; justify-content: space-between; } #company { text-align: start; } #date { text-align: end; } .stationItem { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; grid-template-areas: "arr name dep" "arr km dep" "arr platform dep" "arr notes dep"; padding: 4px 0; page-break-inside: avoid; } .stationItem:nth-of-type(even) { background-color: #fafafa; } .stationItem .name { text-align: center; grid-area: name; } .stationItem .arrival { text-align: start; grid-area: arr; align-items: flex-start; } .stationItem .departure { text-align: end; grid-area: dep; align-items: flex-end; } .stationItem .arrival, .station .departure { align-self: center; display: flex; flex-direction: column; } .stationItem .arrival .original, .stationItem .departure .original { color: #a0a0a0; text-decoration: line-through; } .stationItem .arrival .not-real, .stationItem .departure .not-real { font-style: italic; } .stationItem .km { text-align: center; grid-area: km; } .stationItem .platform { text-align: center; grid-area: platform; } .stationItem .notes { grid-area: notes; } .stationItem .note { text-align: center; } .last-refreshed { font-size: 12px; text-transform: none; }