div.next-service-info {
  width: var(--header-width);
}

div.next-service-info.template {
  display: none;
}

div.next-service-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;

  --next-svc-sch-time-font: calc(var(--header-width) * 0.045);
  --next-svc-sch-time-letter-spacing: calc(var(--header-width) * 0.0005);

  --next-svc-dest-font: calc(var(--header-width) * 0.058);
  --next-svc-dest-letter-spacing: calc(var(--header-width) * 0.0015);

  --next-svc-plat-width: calc(var(--header-width) * 0.075);
  --next-svc-plat-font: calc(var(--header-width) * 0.05);
  --next-svc-plat-padding: calc(var(--header-width) * 0.009);

  --next-svc-est-time-width: calc(var(--header-width) * 0.21);
  --next-svc-est-time-font: calc(var(--header-width) * 0.05);
  --next-svc-est-time-padding: calc(var(--header-width) * 0.009);
}

div.next-service-info.compact div.next-service-header {
  --next-svc-sch-time-font: calc(var(--height) * 0.038);
  --next-svc-sch-time-letter-spacing: calc(var(--width) * 0.0005);
  --next-svc-dest-font: calc(var(--height) * 0.048);
  --next-svc-dest-letter-spacing: calc(var(--width) * 0.0015);
  
  --next-svc-plat-width: calc(var(--width) * 0.21);
  --next-svc-plat-font: calc(var(--height) * 0.055);
  --next-svc-plat-padding: calc(var(--height) * 0.007);
  
  --next-svc-est-time-width: calc(var(--width) * 0.21);
  --next-svc-est-time-font: calc(var(--height) * 0.026);
  --next-svc-est-time-padding: calc(var(--height) * 0.005);

  align-items: flex-start;
}

div.next-service-header div.left, div.next-service-header div.right {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

div.next-service-info.compact div.next-service-header div.left,
div.next-service-info.compact div.next-service-header div.right {
  flex-direction: column;
}

span.next-service-sch-time {
  font-size: var(--next-svc-sch-time-font);
  letter-spacing: var(--next-svc-sch-time-letter-spacing);
  font-weight: 400;
  margin-right: calc(var(--header-width) * 0.016);
}

span.next-service-destination {
  font-size: var(--next-svc-dest-font);
  letter-spacing: var(--next-svc-dest-letter-spacing);
  font-weight: 700;
}

span.next-service-platform {
  width: var(--next-svc-plat-width);
  font-size: var(--next-svc-plat-font);
  display: inline-block;
  padding-block: var(--next-svc-plat-padding);
  text-align: center;

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

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

span.next-service-est-time {
  width: var(--next-svc-est-time-width);
  font-size: var(--next-svc-est-time-font);
  font-weight: 400;
  display: inline-block;
  padding-block: var(--next-svc-est-time-padding);
  text-align: center;

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

div.next-service-info.compact span.next-service-est-time {
  margin-top: calc(var(--height) * 0.003);
}

div.next-service-pattern-info {
  margin-top: calc(var(--header-width) * 0.016);
  height: calc(var(--header-width) * 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
}

div.next-service-info.compact div.next-service-pattern-info {
  margin-top: calc(var(--header-width) * 0.0324);
  height: calc(var(--header-width) * 0.08);
}

span.next-service-summary, span.next-service-pattern-text {
  position: absolute;
  top: 0;
  left: 0;

  height: 0;
  font-size: calc(var(--header-width) * 0.0375);
  font-weight: 400;
  margin: 0;
  margin-top: calc(var(--header-width) * -0.0019);

  display: block;
}

div.next-service-info.compact span.next-service-summary,
div.next-service-info.compact span.next-service-pattern-text {
  font-size: calc(var(--header-width) * 0.05);
}

span.next-service-pattern-text {
  white-space: nowrap;
  overflow-x: clip;
}

div.next-service-info.compact span.next-service-pattern-text {
  margin-top: calc(var(--header-width) * -0.068);
}