body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1920px;
}

h1 {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout:fixed;
}

thead th {
  background-color: #007BFF;
  color: white;
  padding: 0.1rem;
}

tbody td {
  font-size: 1.2rem;
  text-align: center;
  border: 1px solid #ddd;
}

td:not(.time) {
  text-align: left;
}

th.time,
td.time {
  width: 85px;
}

tr {
  height: 26px;
}

tbody tr:nth-child(even) {
  background-color: rgb(231, 239, 255)
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
  grid-template-rows: repeat(2, 1fr);    /* 2 equal-height rows */
  width: 100%;                           /* stretch to full width */
  height: 100vh;                         /* optional: make it full screen height */
  gap: 1rem;                             /* space between cells */
}

.grid > div {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep content left-aligned */
  font-size: 1rem;
}

.grid h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.in {
  color: green;
  font-weight: bold;
}

.out {
  color: red;
  font-weight: bold;
}