kai.infodb/route.css

.itinerary-train {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: repeat(auto-fit, auto);
	align-items: center;
}

.itinerary-train:not(:last-child) {
    grid-template-areas:
        "dep-time  dep-station    dep-platform"
        "train     train          train"
        "arr-time  arrdep-station arr-platform"
        "dep2-time arrdep-station dep2-platform";
}

.itinerary-train:last-child {
    grid-template-areas:
        "train     train       train"
        "arr-time  arr-station arr-platform";
}

.itinerary-train:only-child {
    grid-template-areas:
        "dep-time  dep-station dep-platform"
        "train     train       train"
        "arr-time  arr-station arr-platform";
}

.itinerary-train .departure.time {
    grid-area: dep-time;
}

.itinerary-train .departure.platform {
    grid-area: dep-platform;
}

.itinerary-train .next-departure.time {
    grid-area: dep2-time;
}

.itinerary-train .next-departure.platform {
    grid-area: dep2-platform;
}

.itinerary-train .departure.station {
    grid-area: dep-station;
}

.itinerary-train .train {
    grid-area: train;
}

.itinerary-train .arrival.time {
    grid-area: arr-time;
}

.itinerary-train .arrival.platform {
    grid-area: arr-platform;
}

.itinerary-train:not(:last-child) .arrival.station {
    grid-area: arrdep-station;
    align-self: center;
}

.itinerary-train .arrival.station {
    grid-area: arr-station;
}

.itinerary-train .time {
    margin-left: 2px;
    margin-right: 2px;
    align-self: center;
}

.itinerary-train .time .original {
    color: #a0a0a0;
    text-decoration: line-through;
}

.itinerary-train .time .delay {
    padding-left: 4px;
    padding-right: 4px;
}

.itinerary-train .time .original, .itinerary-train .time .delay {
    font-size: 0.8em;
}

.itinerary-train .platform {
    margin: 2px;
    padding: 2px;
    border: 1px solid black;
    border-radius: 4px;
    justify-self: end;
    min-width: 16px;
    text-align: center;
}

.itinerary-train .platform.changed {
    color: red;
    border-color: red;
}

.train .company {
    font-size: 0.8em;
    font-style: italic;
}

.walking {
    font-size: 0.95em;
    font-style: italic;
}

input#time {
    margin: 1px;
}