.itinerary {
    display: grid;
}

.itinerary-sm {
    grid-template-columns: 24px fit-content(160px) auto;
    line-height:1.6rem;
}

.itinerary-md {
    grid-template-columns: 24px auto auto;
    line-height:1.8rem;
}

.itinerary-md-two-columns {
    grid-template-columns: 24px auto;
    line-height:1.8rem;
}

.itinerary > .waypoint-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.itinerary > .waypoint-schedule {
    padding-left: 0.5rem;
}

.itinerary > .waypoint-figure {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 12px auto;
}

.itinerary > .waypoint-figure > .node-active {
    content: ' ';
    background: white;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid var(--info);
    left: 0px;
    width: 12px;
    height: 12px;
    z-index: 9;
}

.itinerary > .waypoint-figure > .node-inactive {
    content: ' ';
    background: white;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #ccc;
    left: 0px;
    width: 12px;
    height: 12px;
    z-index: 9;
}

.itinerary > .waypoint-figure > .edge-top {
    content: ' ';
    background: #fff0;
    display: inline-block;
    width: 2px;
    /*height: 8px;*/
    z-index: 8;
    margin-left: 5px;
}

.itinerary > .waypoint-figure > .edge-mid {
    content: ' ';
    background: #fff0;
    display: inline-block;
    width: 2px;
    /*height: 8px;*/
    z-index: 8;
    margin-left: 5px;
}

.itinerary-md > .waypoint-figure > .edge-top {
    /*height: 10px;*/
}

.itinerary > .waypoint-figure > .edge-bot {
    content: ' ';
    background: #fff0;
    display: inline-block;
    width: 2px;
    /*height: 8px;*/
    z-index: 8;
    margin-left: 5px;
}

.itinerary-md > .waypoint-figure > .edge-bot {
    /*height: 10px;*/
}

.itinerary > .waypoint-figure > .edge-active {
    background: var(--info);
    outline-offset: -1px;
    outline: 2px solid var(--info);
}

.itinerary > .waypoint-figure > .edge-active-dotted {
    border-left: 2px dotted var(--info);
    opacity: 0.6;
}

.itinerary > .waypoint-figure > .edge-active-dashed {
    border-left: 2px dashed var(--info);
}

.itinerary > .waypoint-figure > .edge-inactive {
    background: #ccc;
    outline-offset: -1px;
    outline: 2px solid #ccc;
}