kai.infodb/config-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 .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;
}

div.checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.checkbox p {
    flex: 1;
}

div.checkbox input {
    flex: 0;
}

.suggestion {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.suggestion :first-child {
    flex: 1;
}

.suggestion .star {
    flex: 0;
    pointer-events: none;
}

.suggestion .star.checked {
    filter: invert(90%) sepia(49%) saturate(704%) hue-rotate(359deg) brightness(94%) contrast(99%);
}

@media (prefers-color-scheme: dark) {
    .suggestion .star {
        filter: invert(100%);
    }

    .suggestion .star.checked {
        filter: invert(86%) sepia(79%) saturate(2126%) hue-rotate(357deg) brightness(108%) contrast(104%);
    }
}