div.pid {
  --header-height: calc(var(--header-content-height) + var(--header-margin) * 2);
}

div.pid div.header span {
  font-weight: 400;
}

div.pid div.header.bold span {
  font-weight: 700;
}

div.pid.portrait div.header {
  font-size: calc(var(--height) * 0.034);
  margin-block: var(--header-margin);
  width: var(--width);
  height: var(--header-content-height);
  display: flex;
  align-items: center;
}

div.pid.portrait div.header.multiline {
  align-items: flex-start;
}

div.pid.portrait div.header span {
  margin-inline: calc(var(--width) * 0.04);
}

div.pid.landscape div.header {
  font-size: calc(var(--height) * 0.06);
  margin-block: var(--header-margin);
  width: var(--width);
  height: var(--header-content-height);
}

div.pid.landscape div.header span {
  margin-left: calc(var(--width) * 0.02);
}

div.sections {
  display: flex;
  height: calc(var(--height) - var(--header-height));
}

div.pid.portrait div.sections {
  --service-list-width: var(--width);
  flex-direction: column;
  justify-content: space-between;
}

div.pid.portrait:not(:has(div.header)) div.sections > div:first-child,
div.pid.portrait div.sections:not(:has(> :nth-child(2))) > div:first-child, 
div.pid.portrait div.sections:has(div.line-group-container) > div:first-child {
  border-top: none;
}

div.pid.portrait div.sections > div {
  border-top: calc(var(--height) * 0.003) solid #000;
}

div.pid.landscape div#left, div.pid.landscape div#right {
  --border-thickness: calc(var(--width) * 0.002);
  --service-list-width: calc(var(--width) / 2 - var(--border-thickness));

  width: var(--service-list-width);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.pid.landscape div#left {
  border-right: var(--border-thickness) solid #000;
}

div.pid.landscape div#right {
  border-left: var(--border-thickness) solid #000;
}

div.pid.landscape div.service-list {
  border-top: calc(var(--height) * 0.008) solid #000;
}

div.service-row {
  display: flex;
  align-items: center;
}

div.service-list div.service-row {
  --block-height: calc(var(--service-list-width) * 0.075);
  --font-size: calc(var(--service-list-width) * 0.045);

  --line-marker-width: calc(var(--service-list-width) * 0.017);
  --sch-time-margin: calc(var(--service-list-width) * 0.02);
  --sch-time-width: calc(var(--service-list-width) * 0.17);
  --dest-width: calc(var(--service-list-width) * 0.5);
  --platform-width: calc(var(--service-list-width) * 0.08);
  --est-time-margin: calc(var(--service-list-width) * 0.007);
  --est-time-width: calc(var(--service-list-width) * 0.19);
}

div.service-list.mini div.service-row {
  --block-height: calc(var(--service-list-width) * 0.059);
  --font-size: calc(var(--service-list-width) * 0.037);

  --line-marker-width: calc(var(--service-list-width) * 0.015);
  --sch-time-margin: calc(var(--service-list-width) * 0.02);
  --sch-time-width: calc(var(--service-list-width) * 0.17);
  --dest-width: calc(var(--service-list-width) * 0.5);
  --platform-width: calc(var(--service-list-width) * 0.065);
  --est-time-margin: calc(var(--service-list-width) * 0.007);
  --est-time-width: calc(var(--service-list-width) * 0.17);
}


div.service-list > div.content {
  --content-margin: calc(var(--service-list-width) * 0.04);
  --content-width: calc(var(--service-list-width) - var(--content-margin) * 2);

  width: var(--content-width);
  margin-inline: var(--content-margin);

  margin-bottom: calc(var(--service-list-width) * 0.01);
}

div.service-list.mini > div.content {
  --content-margin: calc(var(--service-list-width) * 0.03);
}

div.service-list.template {
  display: none;
}


div.service-list.compact {
  width: var(--service-list-width);
}

div.service-list.compact > div.line-marker {
  height: calc(var(--service-list-width) * 0.02);
  background-color: var(--line-colour);
}

div.service-list.compact p.title {
  margin: 0;
  font-size: calc(var(--service-list-width) * 0.035);
  margin-block: calc(var(--service-list-width) * 0.018);
}

div.service-list.compact div.service-row {
  width: var(--content-width);
  border-top: calc(var(--service-list-width) * 0.0025) solid #000;
}

div.service-list.compact div.service-row > * {
  display: inline-block;
  font-size: var(--font-size);
  margin-block: calc(var(--service-list-width) * 0.007);
  vertical-align: middle;
}

div.service-list.compact div.service-row div.line-marker {
  width: var(--line-marker-width);
  height: var(--block-height);
  background-color: var(--line-colour);
}

div.service-list.compact div.service-row span.service-sch-time {
  margin-left: var(--sch-time-margin);
  width: var(--sch-time-width);
  font-weight: lighter;
}

div.service-list.compact div.service-row span.service-destination {
  width: var(--dest-width);
}

div.service-list.compact div.service-row span.service-platform {
  margin-left: calc(var(--content-width) - var(--line-marker-width) - var(--sch-time-margin) - var(--sch-time-width) - var(--dest-width) - var(--platform-width) - var(--est-time-margin) - var(--est-time-width));

  width: var(--platform-width);
  padding-block: calc((var(--block-height) - var(--font-size)) / 2);
  line-height: var(--font-size);

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

div.service-list.compact div.service-row span.service-est-time {
  margin-left: var(--est-time-margin);

  width: var(--est-time-width);
  padding-block: calc((var(--block-height) - var(--font-size)) / 2);
  line-height: var(--font-size);

  background-color: #000;
  color: #fff;
  text-align: center;
}

div.service-list.multi {
  width: var(--service-list-width);
}

div.service-list.multi > div.content {
  margin: var(--content-margin);

  display: flex;
}

div.service-list.multi div.info {
  width: calc(var(--content-width) * 0.6);
}

div.service-list.multi div.info span.title, div.service-list.multi div.info span.description {
  display: block;
}

div.service-list.multi div.info span.title {
  font-size: calc(var(--content-width) * 0.06);
}

div.service-list.multi div.info span.description {
  font-size: calc(var(--content-width) * 0.04);
  font-weight: lighter;
}

div.service-list.multi.mini div.info span.title {
  font-size: calc(var(--content-width) * 0.05);
}

div.service-list.multi.mini div.info span.description {
  font-size: calc(var(--content-width) * 0.038);
  font-weight: lighter;
}

div.service-list.multi div.services {
  margin-left: auto;
}

div.service-list.multi div.service-row:not(:first-child) {
  border-top: calc(var(--service-list-width) * 0.0025) solid #000;
}

div.service-list.multi div.service-row.hidden {
  display: none;
}

div.service-list.multi div.service-row > * {
  display: inline-block;
  font-size: var(--font-size);
  margin-block: calc(var(--service-list-width) * 0.007);
}

div.service-list.multi div.service-row span.service-platform {
  width: var(--platform-width);
  padding-block: calc((var(--block-height) - var(--font-size)) / 2);
  line-height: var(--font-size);

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

div.service-list.multi div.service-row span.service-est-time {
  margin-left: var(--est-time-margin);

  width: var(--est-time-width);
  padding-block: calc((var(--block-height) - var(--font-size)) / 2);
  line-height: var(--font-size);

  background-color: #000;
  color: #fff;
  text-align: center;
}

div.landscape div.clock {
  width: calc(var(--width) * 0.45);
  height: calc(var(--height) * 0.1);
  border: calc(var(--height) * 0.003) solid #000;
  box-sizing: border-box;

  margin-inline: auto;
  margin-bottom: calc(var(--height) * 0.09);
  
  text-align: center;
  font-size: calc(var(--height) * 0.06);
  line-height: calc(var(--height) * 0.095);
}

div.line-group-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  --service-list-width: var(--width);
  --header-width: calc(var(--width) * 0.92);
  height: var(--area-height);
}

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

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

div.line-group-container > div.header {
  --header-content-height: calc(var(--height) * 0.08);
  --header-margin: calc(var(--height) * 0.01);
}

div.line-group-container div.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.line-group-container div.next-service-info {
  padding-block: calc(var(--height) * 0.018);
  border-top: calc(var(--height) * 0.0015) solid #000;
}

div.line-group-container div.next-service-info div.next-service-header div.right {
  --next-svc-plat-width: calc(var(--service-list-width) * 0.19);
  --next-svc-est-time-width: var(--next-svc-plat-width);
}

div.line-group-container div.service-list {
  margin-top: auto;
}

div.line-group-container div.service-list div.content {
  --content-margin: calc(var(--service-list-width) * 0.04);
}