.bp-planning-days-head,
.bp-timeline-grid {
  width: var(--bp-grid-width, max(100%, var(--bp-grid-min-width, 850px)));
  grid-template-columns: 58px repeat(var(--bp-day-count, 5), minmax(var(--bp-day-column-width, var(--bp-day-min, 150px)), 1fr));
  min-width: var(--bp-grid-min-width, 850px);
}

.bp-employee-planning {
  min-width: var(--bp-employee-grid-min-width, 1054px);
  overflow: visible;
}

.bp-employee-planning-head,
.bp-employee-planning-row {
  grid-template-columns: 114px repeat(var(--bp-day-count, 5), minmax(var(--bp-day-column-width, 150px), 1fr)) 190px;
  min-width: var(--bp-employee-grid-min-width, 1054px);
}

.bp-employee-planning-head {
  z-index: 90;
}

.bp-planning-days-head > .bp-time-head,
.bp-timeline-grid > .bp-time-axis,
.bp-employee-planning-head > div:first-child,
.bp-employee-planning-row > .bp-employee-planning-person {
  position: sticky;
  left: 0;
  z-index: 7;
  background: #fff;
}

.bp-timeline-grid > .bp-time-axis {
  z-index: 5;
  background: #fbfcfb;
}

.bp-timeline-day[data-off-hours="before"]::before,
.bp-timeline-day[data-off-hours="before-after"]::before,
.bp-timeline-day[data-off-hours="all"]::before,
.bp-timeline-day[data-off-hours="after"]::after,
.bp-timeline-day[data-off-hours="before-after"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(243,245,243,.94) 0, rgba(243,245,243,.94) 9px, rgba(232,238,235,.94) 9px, rgba(232,238,235,.94) 18px);
}

.bp-timeline-day[data-off-hours="before"]::before,
.bp-timeline-day[data-off-hours="before-after"]::before {
  top: var(--bp-off-before-top, 0%);
  height: var(--bp-off-before-height, 0%);
}

.bp-timeline-day[data-off-hours="after"]::after,
.bp-timeline-day[data-off-hours="before-after"]::after {
  top: var(--bp-off-after-top, 100%);
  height: var(--bp-off-after-height, 0%);
}

.bp-timeline-day[data-off-hours="all"]::before {
  top: 0;
  height: 100%;
}

.bp-employee-planning-row > .bp-employee-planning-person {
  z-index: 70;
  background: #fbfdfb;
}

@media (max-width: 1100px) {
  .bp-employee-planning-head,
  .bp-employee-planning-row {
    grid-template-columns: 114px repeat(var(--bp-day-count, 5), minmax(var(--bp-day-column-width, 140px), 1fr)) 170px;
  }
}

@media (min-width: 1101px) {
  .bp-employee-planning-head,
  .bp-employee-planning-row {
    grid-template-columns:
      clamp(114px, 6.8vw, 140px)
      repeat(var(--bp-day-count, 5), minmax(var(--bp-day-column-width, clamp(150px, 8.3vw, 170px)), 1fr))
      clamp(190px, 10.8vw, 220px);
  }
}