.schedule-wrapper {
  overflow-x: auto;
}

.schedule-table {
  min-width: 500px;
  width: 100%;
  border: 1px solid var(--black);
  background-color: var(--primary);
  border-collapse: collapse;
}

.schedule-table td {
  position: relative;
  z-index: 0;
}

.schedule-table tr:nth-of-type(even) td::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tertiary);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

.schedule-table thead {
  background-color: var(--secondary);
  color: var(--black);
}
/* ------------------- */
/* ## Overflow Tables  */
/* ------------------- */
.offscreen-scroll {
  position: relative;
  /* display: flex; */
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overflow-y: hidden;
}

.offscreen-scroll > .offscreen-shadows,
.offscreen-scroll::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--left, 0);
  z-index: 1;
  transform: translateY(-50%);
  width: var(--maxwidth, 100%);
  height: 200%;
  pointer-events: none;
  transition: box-shadow 0.5s, left 0.05s linear;
  outline: 105vw solid rgba(0, 0, 0, 0.25);
}

.offscreen-scroll.shadow-right > .offscreen-shadows,
.offscreen-scroll.shadow-right::after {
  box-shadow: inset -10px 0 10px rgba(0, 0, 0, 0.25);
}

.offscreen-scroll.shadow-left > .offscreen-shadows,
.offscreen-scroll.shadow-left::after {
  box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.25);
}

.offscreen-scroll.shadow-left.shadow-right > .offscreen-shadows,
.offscreen-scroll.shadow-left.shadow-right::after {
  box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.25);
}
/* ------------------- */
/* End Overflow Tables */
/* ------------------- */