div.pid.announcements-active #announcements {
  display: flex;
}

#announcements {
  background: #000;
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: var(--width);
  height: var(--height);
  gap: calc(var(--width) * 0.02);

  z-index: 1000;
}

#announcements img {
  height: calc(var(--height) * 0.125);
}

#announcements p {
  font-size: calc(var(--height) * 0.08);
  color: #fff;
}

div.pid.landscape div.line-marker {
  width: 100%;
  height: calc(var(--height) * 0.04);

  background-color: var(--line-colour);
}

div.pid.portrait div.line-marker {
  width: 100%;
  height: calc(var(--width) * 0.04);

  background-color: var(--line-colour);
}

div.next-service-info {
  width: var(--pid-body-width);
  margin-top: calc(var(--height) * 0.015);
  border-bottom: calc(var(--height) * 0.004) solid #000;
  --header-width: var(--pid-body-width);
}

div.pid.landscape div.next-service-info.disrupted span.next-service-destination::after,
div.pid.portrait div.next-service-info.disrupted span.next-service-sch-time::after,
tr.subsequent-service.disrupted td.service-destination span::after {
  content: "";
  display: inline-block;

  background-image: url(../../img/alert.svg);
  background-size: cover;

  margin-left: var(--next-svc-disruption-margin);

  width: var(--next-svc-disruption-size);
  height: var(--next-svc-disruption-size);
}

span.next-service-summary::before {
  content: "\200b";
}

div.pid span.next-service-summary, div.pid span.next-service-pattern-text {
  font-size: calc(var(--height) * 0.047);
  font-weight: 400;
  display: block;
}

div.next-service-detail {
  width: var(--pid-body-width);
  height: var(--next-svc-pattern-height);
}

div.next-service-pattern {
  width: 100%;
  height: 100%;
}

div.next-service-pattern div.stopping-pattern {
  font-size: var(--next-svc-pattern-font);
  letter-spacing: var(--next-svc-pattern-letter-spacing);
  line-height: var(--next-svc-pattern-line-height);
  --column-bullet-height: calc(var(--height) * 0.008);
}


div.pid-footer {
  --footer-border: calc(var(--height) * 0.002);
  --subsequent-service-padding: calc((var(--footer-height) / var(--subsequent-service-count) - var(--footer-border) - var(--est-time-box-height)) / 2);
  --footer-content-height: calc(var(--footer-height) - var(--subsequent-service-padding));

  margin-top: auto;
  width: var(--pid-body-width);
  margin-bottom: var(--footer-m-bottom);
  display: flex;

  height: var(--footer-height);
}

table.subsequent-service-info {
  width: var(--subsequent-service-width);
  display: inline-table;
  border-collapse: collapse;
  box-sizing: border-box;

  height: fit-content;
}

tr.subsequent-service.template {
  display: none;
}

tr.subsequent-service td {
  border-top: var(--footer-border) solid #000;
  padding: 0;
  padding-block: var(--subsequent-service-padding);
  vertical-align: baseline;
}

tr.subsequent-service td span {
  vertical-align: baseline;
}

tr.subsequent-service:last-child td {
  padding-block-end: 0;
}

tr.subsequent-service td.service-sch-time {
  font-weight: 400;
  width: var(--subsequent-svc-sch-width);
  font-size: var(--subsequent-svc-sch-font);
}

tr.subsequent-service td.service-sch-time span {
  border-left: var(--subsequent-svc-line-colour-width) solid var(--line-colour);
  padding-left: calc(var(--width) * 0.01);
  padding-block: var(--subsequent-svc-plat-padding);
  display: inline-block;
  line-height: calc(var(--est-time-box-height) - var(--subsequent-svc-plat-padding) * 2);
}

tr.subsequent-service td.service-destination {
  font-weight: 500;
  font-size: var(--subsequent-svc-dest-font);
}

tr.subsequent-service.disrupted td.service-destination span::after {
  width: calc(var(--subsequent-svc-font) * 0.75);
  height: calc(var(--subsequent-svc-font) * 0.75);
}

tr.subsequent-service td.service-summary {
  min-width: calc(var(--width) * 0.15);
  font-size: calc(var(--height) * 0.034);
  font-weight: 400;
  font-size: var(--subsequent-svc-sum-font);
}

tr.subsequent-service td.service-platform {
  font-weight: 400;
  width: var(--subsequent-svc-plat-width);
  text-align: center;
  font-size: var(--subsequent-svc-sch-font);
}

tr.subsequent-service td.service-platform span {
  display: inline-block;

  padding-block: var(--subsequent-svc-plat-padding);
  width: var(--subsequent-svc-plat-width);
  line-height: calc(var(--est-time-box-height) - var(--subsequent-svc-plat-padding) * 2);

  background-color: var(--line-colour);
  color: var(--text-colour);
}

tr.subsequent-service td.service-platform:has(span:empty) {
  vertical-align: middle;
}

tr.subsequent-service td.service-est-time {
  font-weight: 400;
  width: var(--subsequent-svc-est-time-width);
  text-align: center;
  font-size: var(--subsequent-svc-sch-font);
}

tr.subsequent-service td.service-est-time span::before {
  content: "\200b";
}

tr.subsequent-service td.service-est-time span {
  display: inline-block;
  height: var(--est-time-box-height);
  line-height: var(--est-time-box-height);
  width: calc(var(--subsequent-svc-est-time-width) - var(--subsequent-svc-est-time-margin));
  margin-left: var(--subsequent-svc-est-time-margin);

  background-color: #000;
  color: #fff;
}

div.service-message {
  display: flex;
  position: absolute;

  width: var(--width);
  height: var(--next-svc-pattern-height);
  
  --padding: calc((var(--width) - var(--pid-body-width)) / 2);

  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--next-svc-pattern-height) * -1);
  
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: var(--pid-background);

  box-sizing: border-box;
  padding-inline: var(--padding);

  opacity: 0;
}

div.service-message.arrival {
  text-align: left;
  font-size: var(--arrival-font);
  font-weight: 400;
}

div.pid.service-message-active div.service-message:not(.alternating) {
  opacity: 1;
}

div.pid.service-message-active div.service-message.alternating {
  animation: opacity 15s ease-in-out infinite;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  48% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


div.pid:not(.fixed-message-active) div.fixed-message {
  display: none;
}

div.pid.fixed-message-active div.next-service-info, div.pid.fixed-message-active div.next-service-detail {
  display: none;
}

div.pid.fixed-message-active div.fixed-message {
  display: flex;
  flex-grow: 1;

  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div.next-service-message {
  width: var(--subsequent-service-width);
  height: var(--footer-content-height);
  position: absolute;
}

div.next-service-message.text {
  background-color: var(--pid-background);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 400;

  animation: opacity 15s ease-in-out infinite;
}

div.next-service-message.disruption {
  background-image: url(../../img/disruption-hatch.svg);
  background-repeat: no-repeat;
  background-size: var(--disruption-hatch-size);

  padding-left: var(--disruption-hatch-padding);
  border-block: calc(var(--height) * 0.005) solid #000;
  border-inline: calc(var(--width) * 0.005) solid #000;
  box-sizing: border-box;

  background-color: #000;
  color: #fff;
  
  display: flex;
  align-items: center;
  font-weight: 400;

  animation: opacity 15s ease-in-out infinite;
}

i.arrival-icon {
  display: inline-block;
  background-image: url(../../img/do-not-board.svg);
  background-size: cover;

  width: var(--arrival-img-size);
  height: var(--arrival-img-size);

  margin-right: var(--arrival-img-m-right);
  margin-bottom: var(--arrival-img-m-bottom);
}

i.no-trains-icon {
  display: inline-block;
  background-image: url(../../img/no-trains.svg);
  background-size: cover;

  width: var(--arrival-img-size);
  height: var(--arrival-img-size);
}