.journeyPlannerPromo {
    display: block;
    margin: auto;

    text-align: center;
}

.comingSoon {
    display: block;
    margin: auto;
    width: fit-content;
    padding: 4px 16px;
    border-radius: 5px;
    background-color: rgb(57, 147, 199);
    margin-top: 30px;
    margin-bottom: 30px;
}
.comingSoon:has(a):hover {
    background-color: rgb(40, 126, 175);
}

.comingSoon a {
    text-decoration: none;
    color: white;
}

.trips {
    display: block;
    margin: auto;
    width: 50%;
}
.trips .trip {
    display: block;
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 600px;
    height: fit-content;
    min-height: 150px;
    background-color: rgb(20,20,20);
    border-radius: 10px;
    padding: 4px 16px;
    margin-bottom: 10px;
}

.trips .trip .stopBetween, .trips .trip .stopBefore {
    /* color: grey; */
    font-size: 14px;
    opacity: 0.5;
}
.trips .trip .stopBefore {
    margin-top: 25px;
}
.trips .trip .stopOn.passed {
    font-size: 14px;
    opacity: 0.3;
}

.trips .originalTime {
    font-size: 14px;
    color: grey;
    text-decoration: line-through;
}

.trips .trip .linkButtons {
    display: block;
    margin: auto;
    width: 100%;
    text-align: left;
}

.trips .trip .associatedVehicleLink {
    display: inline-block;
}

.trips .trip .live {
    display: block;
    margin: auto;
    position: absolute;
    top: 5px;
    left: 10px;
    font-weight: normal;
    font-size: 16px;
}

.trips .trip .live .dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 50%;
    animation-name: flash;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    vertical-align: middle;
}
@keyframes flash {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

h3 {
    font-size: 1.17em;
}

@media screen and (max-width: 700px) {
    .trips {
        width: 80%;
    }
    .trips .trip {
        max-width: 100%;
        width: 100%;
        padding: 4px 0;
    }
}

@media screen and (max-width: 450px) {
    .trips {
        width: 95%;
    }
}

.preview {
    display: block;
    position: relative;
}

.preview .watermark {
    display: block;
    margin: auto;
    position: absolute;
    width: fit-content;
    height: fit-content;
    top:0;right:0;left:0;bottom:0;
    font-size: 48px;
    /* background-color: var(--blue1); */
    padding: 12px 36px;
    border-radius: 6px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 100;
    transform: rotate(-20deg);
}
.preview .watermark:nth-child(2) {
    top: -75%;
}
.preview .watermark:nth-child(3) {
    top: 75%;
}

.preview img {
    display: block;
    margin: auto;
    height: auto;
    max-width: 100%;
}

.trips .trip .stops {
    display: flex;
    margin: auto;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: rgb(57, 136, 255);
    position: relative;
}

.trips .trip .stops .stop {
    display: block;
    position: absolute;
    background-color: white;
    width: 20px;
    height: 20px;
    top:-10px;
    bottom:0;
    border-radius: 50%;
    border: 5px solid green;
}
.trips .trip .stops .stop.start {
    left:0;
}
.trips .trip .stops .stop.end {
    right: 0;
}
.trips .trip .stops .vehicle {
    display: block;
    position: absolute;
    background-color: orange;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 5px solid orange;
    top:-10px;
    bottom:0;
    right: 50%;
    /* Left is what will be changed to make the vehicle move position. */
    left: 50%;
}
.trips .trip .stops .vehicle::before {
    font-family: FontAwesome;
    content: "\f55e";
    color: black;
}
.trips .trip .stops .vehicle.train::before {
    content: "\f239";
}
.trips .trip .stops .vehicle.tram::before {
    content: "\e5b4";
}

.myJourneys .journeyBtn {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: auto;
    margin-bottom: 15px;
    color: white;
    text-decoration: none;
    padding: 6px 24px;
    min-width: 250px;
    border-radius: 5px;
    background-color: rgb(20, 20, 20);
    text-align: left;
    position: relative;
    width: 340px;
}
.myJourneys .journeyBtn:hover {
    background-color: rgb(10, 10, 10);
}
.myJourneys .journeyBtn #title {
    font-size: 20px;
}

@media screen and (min-width: 540px) {
    .myJourneys .journeyBtn {
        width: fit-content;
        min-width: 450px;
    }
}
@media screen and (max-width: 420px) {
    .myJourneys .journeyBtn {
        width: 250px;
    }
}

.myJourneys .journeyBtn #tripCount {
    display: block;
    margin: auto;
    color: grey;
}

.myJourneys .journeyBtn .visibilityIcon {
    margin-left: auto;
}
.myJourneys .journeyBtn .visibilityIcon.private::before {
    font-family: FontAwesome;
    /* content: "\f023"; */
    content: "\f070";
}
.myJourneys .journeyBtn .visibilityIcon.public::before {
    font-family: FontAwesome;
    /* content: "\f3c1"; */
    content: "\f06e";
}

.myJourneys .journeyBtn .selectedJourneyBox {
    vertical-align: middle;
    transform: scale(1.25, 1.25);
    margin-left: -10px;
    accent-color: red;
}
.myJourneys .journeyBtn .content {
    vertical-align: middle;
}


.stopSelectModal {
    min-height: 450px;
}

.stopSelectModal .stopArrivals, .stopSelectModal .stops, .stopSelectModal .tripStopList {
    display: block;
    margin: auto;
    overflow-y: auto;
    height: 300px;
    margin-bottom: 10px;
    min-width: 430px;
}
.stopSelectModal .stopArrivals .arrival, .stopSelectModal .stops .stopResult {
    display: block;
    margin: auto;
    padding: 8px 12px;
    background-color: rgb(12, 25, 43);
}
.stopSelectModal .stopArrivals .arrival:hover, .stopSelectModal .stops .stopResult:hover {
    background-color: rgb(7, 16, 29);
    cursor: pointer;
}

@media screen and (max-width: 450px) {
    .stopSelectModal .stopArrivals, .stopSelectModal .stops, .stopSelectModal .tripStopList {
        min-width: 240px !important;
    }
}

.stopSelectModal .stopArrivals .arrival #text, .stopSelectModal .stops .stopResult #text {
    margin: 0;
}
.stopSelectModal .stopArrivals .arrival #route {
    float: right;
}

.routeBadge {
    background-color: var(--colour);
    color: var(--textColour);
    padding: 2px 8px;
    border-radius: 2px;
}

@media screen and (max-width: 450px) {
    .stopSelectModal .stopArrivals {
        min-width: 300px;
    }
}

.stopSelectModal .tripStopList, .stopSelectModal #tripTitle {
    display: block;
    margin: auto;
    padding: 8px 14px;
    background-color: rgb(12, 25, 43);
    margin-bottom: 10px;
}
.stopSelectModal .tripStopList {
    overflow-x: auto;
}
.stopSelectModal #tripTitle {
    margin-bottom: 0;
    padding: 12px 14px;
}
.stopSelectModal .tripStopList .stopTime {
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.stopSelectModal .tripStopList .stopTime .icon {
    display: block;
    margin: auto;
    position: relative;
    width: 15px;
    height: 15px;
    background-color: white;
    border: 4px solid green;
    border-radius: 50%;
    float: left;
}
/* Indicator for the chosen stop to start at. */
.stopSelectModal .tripStopList .stopTime.start .icon {
    background-color: rgb(0, 60, 0);
}
/* Indicator for the chosen stop to end at. */
.stopSelectModal .tripStopList .stopTime.end .icon {
    background-color: rgb(120, 0, 0);
}

.stopSelectModal .tripStopList .stopTime .text {
    display: inline-block;
    margin: auto;
    vertical-align: middle;
    margin-left: 10px;

    white-space: nowrap;
    max-width: 80%;
    /* text-overflow: ellipsis; */
}
.stopSelectModal .tripStopList .stopTime .arrivalTime {
    color: grey;
}

.stopSelectModal .tripStopList .stopTime:not(.start):hover {
    opacity: 0.6;
    cursor: pointer;
}
.stopSelectModal .tripStopList .stopTime:not(.start):hover .icon {
    background-color: rgb(240, 0, 0);
}

.stopSelectModal .tripStopList .stopTime .icon .line {
    display: block;
    margin: auto;
    position: absolute;
    width: 2px;
    height: 21px;
    background-color: grey;
    left:0;right:0;
    bottom: -25px;
}

/* Hide the line after the last child as it does not connect to another stop. */
.stopSelectModal .tripStopList .stopTime:last-child .icon .line {
    display: none;
}

.stopSelectModal #tripTitle .timeRange {
    margin-left: 5px;
}

.trip .manageBtn {
    display: block;
    margin: auto;
    position: absolute;
    top: 10px;
    right: 10px;
}
.trip .manageBtn .manageText:after {
    font-family: FontAwesome;
    content: "\f0d7";
    margin-left: 5px;
}
.trip .manageBtn:hover .manageText:after {
    content: "\f0d8";
}

.dropdownHoverBtn {
    display: block;
    margin: auto;
}
.dropdownHoverBtn .buttons {
    display: none;
    margin: auto;
    width: 100%;
    margin-top: 5px;
}
.dropdownHoverBtn .buttons * {
    width: 80%;
}
.dropdownHoverBtn:hover .buttons {
    display: block;
}

.stopSelectModal .alert {
    width: 90%;
}

.editTitleBtn {
    font-size: 24px;
}
.editTitleBtn:hover {
    opacity: 0.7;
    cursor: pointer;
}

.betaTag {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    background-color: rgb(0, 110, 255);
    padding: 4px 8px;
    border-radius: 5px;
}