/* Copyright 2018-2024 Epic Systems Corporation */
/*rtl:begin:ignore*/
.subway {
  margin: 0 0 0.4rem;
  padding: 0.4rem 0;
  position: relative;
  text-align: center;
}
.subway:not(.noFade):before, .subway:not(.noFade):after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 30px;
  z-index: 1;
}
.subway:not(.noFade):before {
  background-position: -75px 0;
  left: 0;
}
.subway:after {
  right: 0;
}
.subway .stops {
  position: relative;
  z-index: 2;
}

.trainstop {
  display: inline-block;
  word-wrap: break-word;
}
.trainstop span {
  display: block;
}

.stops .trainstop {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  line-height: 1rem;
  padding: 0 0.3rem;
  vertical-align: top;
}
.stops .trainstop.now {
  font-weight: bold;
}
.stops .trainstop a {
  display: block;
}
.stops .trainstop.now a,
.stops .trainstop a[aria-disabled=true] {
  cursor: default;
  text-decoration: none;
}
.stops .trainstop .description {
  white-space: normal;
}
.stops .trainstop span.icon {
  height: 2rem;
}
.stops .trainstop span.icon,
.stops .trainstop span.description {
  width: 100%;
}
.stops .trainstop img.icon, .stops .trainstop svg.svgIcon {
  width: 32px;
  height: 32px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.stops .trainstop.visited img.icon, .stops .trainstop.visited svg.svgIcon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.stops .trainstation {
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 2px;
  height: 1rem;
  margin: 0.25rem auto;
  position: relative;
  width: 1rem;
  z-index: 1;
}

.line,
.line .trainrail {
  height: 0.25rem;
}

.line {
  margin-bottom: -0.25rem;
  position: relative;
  top: 2.625rem;
}
.line .trainrail {
  display: inline-block;
  padding: 0 20px;
}

.stops .trainstop,
.line .trainrail {
  width: 20%;
  min-width: 9rem;
}
.stops .trainstop.stops_6,
.line .trainrail.stops_6 {
  width: 16.25%;
  min-width: 8rem;
}
.stops .trainstop.stops_7,
.line .trainrail.stops_7 {
  width: 14.25%;
  min-width: 7rem;
}
.stops .trainstop.stops_8,
.line .trainrail.stops_8 {
  width: 12.25%;
  min-width: 6rem;
}
.stops .trainstop.stops_9,
.line .trainrail.stops_9 {
  width: 11%;
  min-width: 5rem;
}
.stops .trainstop.compact,
.line .trainrail.compact {
  min-width: 7rem;
}
.stops .trainstop.compact:not(.prelogin),
.line .trainrail.compact:not(.prelogin) {
  width: 13.5%;
}

.subway.scrollable .line,
.subway.scrollable .stops {
  left: 6%;
  z-index: 0;
  white-space: nowrap;
}
.subway.scrollable .line.dotnet {
  text-align: initial;
}
.subway.scrollable .stopWrapper {
  overflow-x: hidden;
}
.subway .nav {
  display: none;
}
.subway.scrollable .nav {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}
.subway.scrollable .nav a {
  background-color: #dbdbdb;
  display: block;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  width: 30px;
  z-index: 2;
}
.subway.scrollable .nav a:after {
  content: "";
  height: 100%;
  left: 50%;
  margin-left: -6.5px;
  position: absolute;
  top: 0;
  width: 12px;
  background-image: url("../images/sidearrows.png");
  background-repeat: no-repeat;
  background-clip: content-box;
}
.subway.scrollable .nav .scrollleft {
  left: 0;
  border-radius: 10px 0px 0px 10px;
  box-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.subway.scrollable .nav .scrollleft:after {
  background-position: 0 50%;
}
.subway.scrollable .nav .scrollleft:focus, .subway.scrollable .nav .scrollleft:hover {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 4px 0px 5px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.subway.scrollable .nav .scrollright {
  right: 0;
  border-radius: 0px 10px 10px 0px;
  box-shadow: -4px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.subway.scrollable .nav .scrollright:after {
  background-position: -26px 50%;
}
.subway.scrollable .nav .scrollright:focus, .subway.scrollable .nav .scrollright:hover {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), -4px 0px 5px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.subway .trainstop {
  transition: width 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-duration: 0.3s;
}
.subway .trainstop.toAdd {
  margin-left: -16.25%;
  animation-name: animAddSubwayStop;
}
.subway .trainstop.toRemove {
  animation-name: animRemoveSubwayStop;
}
.subway .trainrail {
  transform-origin: 0 center;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.subway .trainrail.toAdd {
  width: 0;
  padding: 0;
  animation-name: animAddSubwayLine;
}
.subway .trainrail.toRemove {
  animation-name: animRemoveSubwayLine;
}

@media screen and (max-width: 768px) {
  .mobile .subwayNavButtons {
    display: flex;
    flex-direction: column;
  }
  .mobile .subwayNavButtons .messagedisplay {
    order: 1;
  }
  .mobile .subwayNavButtons p.buttoncheck.pullback:not(.hidden) ~ .formbuttons {
    margin-top: 0;
  }
  .subwayNavButtons .buttoncheck {
    margin-bottom: 0;
    padding: 0;
  }
}
.subwayNavButtons .formbuttons.multiStep {
  flex-wrap: wrap;
  margin-top: 0;
}
.subwayNavButtons .formbuttons.multiStep .alert.validationmessage {
  margin-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .subwayNavButtons .formbuttons.multiStep .alert.validationmessage {
    margin-bottom: 0.25rem;
  }
}

@keyframes animAddSubwayLine {
  0% {
    width: 0;
  }
  100% {
    width: 16.25%;
  }
}
@keyframes animRemoveSubwayLine {
  0% {
    width: 16.25%;
  }
  100% {
    width: 0;
    padding: 0;
  }
}
@keyframes animAddSubwayStop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes animRemoveSubwayStop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
/*rtl:end:ignore*/
.stops .rtlIcon img {
  /*rtl:raw:transform: scaleX(-1);*/
}