/* .header-box {
  display: flex;
  justify-content: space-between; /* pushes items to opposite sides
  align-items: top;           /* vertically center them
  width: 100%;
  height: 12%;
  font-size: 120%;
}

.header-box h1 {
  margin: 0 2.5% 2.5% 2.5%;
} */

html, body {
  /* margin: 0; */
  padding: 0;
  height: 100%;
  overflow: hidden; /* no scrollbars */
  font-size: 150%;
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  background: #282a35;
  color: #899194;
}

.header-table-container {
  width: 95%;
  margin: 0 2.5% 1% 2.5%;
  height: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 120%;
}

.header-station {
  width: 79%;
}

/* .header-clock {
  width: 15%; 
} */

.line {
  width: 6%;
  /* text-align: left; */
  /* padding: 0 0 0 0; */
  vertical-align: 25%;
}

.destination{
  padding: 100em;
}

.departure_time {
  width: 12%;
  text-align: center;
}

.departure_delay {
  width: 10%;
  text-align: left;
  font-size: 50%;
  color: #646a6c
}

.until_departure {
  width: 16%;
  text-align: right;
}

.departure-table-container {
  width: 95%;
  margin: 0 2.5% 2.5% 2.5%;
  height: 83%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.departure-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 200%;
}


.departure-table th,
.departure-table td {
  padding: 0 0.25em 0 0;
  /* vertical-align: middle; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* border: 1px solid #8de8fa; */
  /* height: 12.5%; */
}

.departure-table td:last-child,
.departure-table th:last-child {
  padding-right: 0;
}

.line-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.5em;    /* relative padding */
  font-weight: bold;
  font-size: 0.75em;
  border-radius: 9999px;       /* pill shape adjusts automatically */
  height: 100%;              /* takes most of cell height */
  max-height: 100%;         /* don’t overflow cell */
  width: 100%;
  max-width: 100%;          /* stay within cell */
  aspect-ratio: 2 / 1;
  box-sizing: border-box;
  white-space: nowrap;      /* prevent text wrapping */
  overflow: hidden;         /* hide overflow if text is too long */
  text-overflow: ellipsis;  /* show "..." if necessary */
}

/* Colors for different lines */
.line-S1 {
  background-color: #14bae7;
  color: #b5b5b5;
}

.line-S2 {
  background-color: #75b728;
  color: #b5b5b5;
}

.line-S3 {
  background-color: #951781;
  color: #b5b5b5;
}

.line-S4 {
  background-color: #e30b1b;
  color: #b5b5b5;
}

.line-S5 {
  background-color: #00517f;
  color: #b5b5b5;
}

.line-S6 {
  background-color: #008c58;
  color: #b5b5b5;
}

.line-S7 {
  background-color: #882d22;
  color: #b5b5b5;
}

.line-S8 {
  background-color: #000000;
  color: #f0a901;
}

.line-S20 {
  background-color: #ea516c;
  color: #b5b5b5;
}

.line-default {
  background-color: #bdc3c7;
  color: #1f2831;
}

.delay-high {
  color: #dc4d21;
}

.delay-neg {
  color: #5bc812
}

.until-low {
  color: #dc4d21
}

.until-medium {
  color: #dc9e21
}