#waypoints li {
    display: flex;
    width: 100%;
    padding: 5px 0 5px 5px !important;
}

.segment-icon {
    padding: 2px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}

.segment-container {
    width: 100px;
    height: 100px;

    position: absolute;
    left: 300px;
    z-index: 400;

    background-color: #0A4B77;
}

.waypoint-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

.waypoint-info-pause {
    color: red;
}

.waypoint-pauseicon-none:hover {
    background-image: url("/images/route/segments/pauseicon-default-blue.svg");
    -webkit-transition: background ease-in-out 100ms;
    -moz-transition: background ease-in-out 100ms;
    -o-transition: background ease-in-out 100ms;
    transition: background ease-in-out 100ms;
}

.waypoint-pauseicon-none {
    background-image: url("/images/route/segments/pauseicon-default.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: background ease-in-out 100ms;
    -moz-transition: background ease-in-out 100ms;
    -o-transition: background ease-in-out 100ms;
    transition: background ease-in-out 100ms;
}

.segment-icon:hover {
    background: #0A334F !important;
    -webkit-transition: background ease-in-out 100ms;
    -moz-transition: background ease-in-out 100ms;
    -o-transition: background ease-in-out 100ms;
    transition: background ease-in-out 100ms;
}

.waypoint-waypointicon {
    width: 22px;
    height: 27px;
    position: relative;
}

.waypoint-waypointicon-stop {
    width: 22px;
    height: 27px;
}

.waypoint-stopicon {
    position: relative;
}

.waypoint-stopicon-number {
    position: absolute;
    top: 58%;
    left: 37%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 8pt;
}

.waypoint-item, .waypoint-item > div {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.waypoint-item > div > div:last-child {
    display: flex;
    flex-direction: column;
    width: 67%;
}

.waypoint-item > div > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.waypoint-item > div > div:last-child > div {
    display: flex;
    flex-direction: row;
}

.waypoint-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.waypoint-info > div:first-child {
    display: flex;
    width: 50%;
    gap: 5px;
}

.waypoint-info > div:last-child {
    display: flex;
    width: 50%;
    justify-content: flex-end;
    gap: 10px;
}

.waypoint-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media(max-width: 1366px) {
    .waypoint-item > div > div:last-child > div {
        flex-direction: column;
    }

    .waypoint-info > div:first-child, .waypoint-info > div:last-child {
        width: auto;
        justify-content: flex-start;
    }
}