#stopInfo {
  position: relative;
  flex: 1 0 10rem;
  width: 100%;
  height: 100%;
}

  /* stopInfoHeader is used by as the tripInfo header too */

  .stopInfoHeaderBanner {
    display: block;
    text-align: left;
    padding: 0.2em 0.2em;
    white-space: nowrap;
    overflow: hidden;
    font-size: 90%;
    font-weight: bold;
    color: var(--accent-highlight);
    background-color: var(--surface-secondary);
  }
    .stopInfoHeaderBanner a {
      color: var(--accent-highlight);
    }

  .stopInfoHeader {
    padding: 0.3em 0.2em 0.3em 0.2em;
    background-color: var(--surface-secondary);
    color: var(--text-on-dark);

  }
    .stopInfoHeaderLine1 {
      display: flex;
      padding: 0em 0em 0em 0em;
      min-height: 20px;
    }
      .back {
        flex: 1 0 1.5em;
        align-self: stretch;
        text-align: left;
      }
        .leftarrow {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 0;
          height: 0;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 15px solid var(--text-on-dark);
        }

      .stopInfoDay {
        flex: 1 0 auto;
        white-space: nowrap;
        overflow: hidden;
        font-size: 70%;
        text-align: center;
      }

      .starholder {
        flex: 1 0 1.5em;
        padding-right: 0.3em;
      }
        .star {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 10px solid var(--text-on-dark);
          position: relative;
          margin: 0 0 0 auto;
          opacity:0.5;
        }
        .star::after {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid var(--text-on-dark);
          position: absolute;
          content: "";
          top: 3px;
          right: -5px;
        }
        .starred {
          opacity:1.0;
          border-bottom-color: var(--accent-highlight);
        }
        .starred::after {
          border-top-color: var(--accent-highlight);
        }

#myStopsToast {
  position: fixed;
  left: 50%;
  bottom: 1.2em;
  z-index: 10000;
  max-width: 90vw;
  padding: 0.45em 0.8em;
  border-radius: 3px;
  border-radius: var(--borderradius);
  background-color: var(--surface-panel);
  color: var(--text-on-light);
  font-size: 80%;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.4em);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
#myStopsToast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

    .stopInfoHeaderLine2 {
      display: flex;
      padding: 0.2em 0em 0.2em 0em;
      font-size: 100%;
    }
      .stopInfoStopName {
        flex: 1 0 10ch;
        white-space: nowrap;
        overflow: hidden;
      }
      .stopInfoTime {
        padding-right: 0.3em;
        flex: 0 0 10ch;
        text-align: right;
      }

    .stopInfoHeaderLine3 {
      display: flex;
      padding: 0.2em 0em 0em 0em;
      justify-content: center;
    }
      #noticeIcon {
        flex: 0 0 2ch;
        text-align: center;
        border-radius: 50%;
        background-color: var(--accent-highlight);
        color: #000000;
        font-weight: bold;
      }

  .destinationBox {
    margin: 4vw 2vw;
    padding: 0.3em 0em;
    background-color: var(--surface-primary);
    color: var(--text-on-dark);
    border-radius: 3px;
    border-radius: var(--borderradius);
  }
    #destination {
      margin: 0;
      width: 100%;
      border: 0.2em outset;
      border-color: transparent;
      padding: 0.1em 0;
      text-align: center;
      background-color: var(--surface-primary);
      color: var(--text-on-dark);
      font-size: 100%;
    }

  .stopInfoTrip {
    padding: 0.5em 0.2em 0.5em 0.4em;
    margin: 2vw 2vw 2vw 2vw;
    border-radius: 3px;
    border-radius: var(--borderradius);
    font-size: 100%;
    font-weight: normal;
    background-color: var(--surface-primary);
    color: var(--text-on-dark);
  }
  #stopInfo > .button {
    width: calc(100% - 4vw);
    max-width: none;
    margin-left: 2vw;
    margin-right: 2vw;
  }
    .stopInfoTripLine {
      padding: 0.1em 0em 0.1em 0em;
      display: flex;
      align-items: center;
      overflow: visible;
    }

      #stopInfo .routeShortNameBadge {
        flex: 0 0 auto;
        margin-right: 1ch;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--surface-primary);
        background-color: var(--text-on-dark);
      }
        #stopInfo .routeShortNameBadge span {
          font-size: 80%;
        }

      #stopInfo .headsign {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
        overflow-wrap: break-word;
        white-space: normal;
      }
      #stopInfo .canceled  {
        color: var(--departure-canceled);
      }
      #stopInfo .skipped  {
        color: var(--departure-skipped);
      }
      #stopInfo .added {
        color: var(--departure-added);
      }
      #stopInfo .unmatched {
        color: var(--departure-unmatched);
      }
      #stopInfo .estimatedTime {
        flex: 0 0 8.5ch;
        text-align: right;
        margin-left: 0.5ch;
        padding-right: 0.1em;
        overflow: hidden;
      }
      #stopInfo .min, #stopInfo .arr, .enhanceddeparturelisting {
        font-size: 70%;
        white-space: nowrap;
      }
      #stopInfo .departureStatus {
        display: block;
        overflow: visible;
        white-space: nowrap;
        font-size: 55%;
        font-weight: bold;
        line-height: 1.5;
      }
        .estimatedTimeMain {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          line-height: 1.05;
          white-space: nowrap;
        }
          .estimatedTimeMain .min {
            flex: 0 0 auto;
            margin-left: 0.22em;
            font-size: 70%;
            line-height: 1;
          }
          .tripChevron {
            flex: 0 0 auto;
            margin-left: 0.18em;
            font-size: 75%;
            line-height: 1;
            opacity: 0.85;
          }
        .estimatedTimeSub {
          min-height: 1.05em;
          line-height: 1.05;
          white-space: nowrap;
        }
          .livePill {
            display: inline-flex;
            align-items: center;
            gap: 0.18em;
            overflow: hidden;
            padding: 0.08em 0.25em;
            border: 1px solid rgba(255, 255, 255, 0.55);
            border-radius: 0.8em;
            color: var(--accent-highlight);
            font-size: 43%;
            font-weight: bold;
            line-height: 1.05;
          }
            .livePillDot {
              flex: 0 0 auto;
              width: 0.34em;
              height: 0.34em;
              border-radius: 50%;
              background-color: var(--surface-panel);
              animation-name: livePillPrediction;
              animation-duration: 2s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
              animation-timing-function: ease-in;
            }
            .livePillPosition {
              border-color: color-mix(in srgb, var(--accent-highlight) 75%, transparent);
            }
              .livePillPosition .livePillDot {
                background-color: var(--accent-highlight);
                width: 0.42em;
                height: 0.42em;
                animation-name: livePillPosition;
              }
          @keyframes livePillPrediction {
            from {opacity: 1.0;}
            to   {opacity: 0.35;}
          }
          @keyframes livePillPosition {
            from {opacity: 1.0;}
            to   {opacity: 0.3;transform: scale(0.7,0.7);}
          }

      #stopInfo .destTime {
        flex: 1 0 auto;
        text-align: left;
        padding: 1.5ch 0ch 0ch 0ch;
        font-size: 70%;
        font-weight: normal;
        overflow: hidden;
        color: var(--text-on-dark);
      }

#notices {
  padding: 0em 0.2em 0em 0.2em;
}
  .notice {
    padding: 0.5em 0.2em;
    border-style: groove;
    border-width: 0.2em;
    border-radius: 3px;
    border-radius: var(--borderradius);
    background-color: var(--surface-panel);
    margin-bottom: 1em;
  }
  .noticeHeader {
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.5em;
  }
  .noticeDate {
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.5em;
    font-size: 75%;
  }
  .noticeDescription {
    white-space: pre-wrap;
    font-size: 80%;
  }