.ts-graph-wrap {
  overflow-x: auto;
}
.ts-schedule {
  min-width: 980px;
}
.ts-schedule-table {
  width: 100%;
  border-collapse: collapse;
}
.ts-schedule-table th,
.ts-schedule-table td {
  border: 1px solid #e9e9e9;
  vertical-align: top;
}
.ts-hours-row th {
  background: #fafafa;
}
.ts-hours-left {
  width: 50px;
}
.ts-hours-names {
  width: 100px;
}
.ts-hours-timeline {
  padding: 0;
}

.ts-hours {
  position: relative;
  height: 58px;
  background: #ffffff;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 5.882%
  );
}
.ts-hour-label {
  position: absolute;
  top: 30px;
  font-size: 11px;
  color: #6b6b6b;
  transform: rotate(-90deg);
  transform-origin: top left;
  white-space: nowrap;
}

.ts-day-label {
  width: 50px;
  background: #fbfbfb;
  text-align: center;
  font-weight: 600;
  color: #555;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 10px 0;
}
.ts-name-cell {
  width: 100px;
  padding: 6px 8px;
  background: #ffffff;
  font-weight: 600;
}
.ts-timeline-cell {
  padding: 3px 6px;
  background: #ffffff;
}
.ts-track {
  position: relative;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(5.882% - 1px),
    rgba(0, 0, 0, 0.06) calc(5.882% - 1px),
    rgba(0, 0, 0, 0.06) 5.882%
  );
  border-radius: 3px;
}
.ts-bar {
  position: absolute;
  height: 18px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: default;
  min-width: 4px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  padding: 0 4px;
}
.ts-bar:hover {
  filter: brightness(1.08);
  z-index: 2;
}
.ts-bar-open {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  ) !important;
  background-size: 12px 12px !important;
  animation: ts-bar-stripes 1.2s linear infinite;
}
@keyframes ts-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12px 0;
  }
}
.ts-legend {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}
.ts-legend .ts-sample-green {
  display: inline-block;
  width: 28px;
  height: 14px;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 4px;
  background: #2e7d32;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 8px 8px;
}
.ts-legend .ts-sample-yellow {
  display: inline-block;
  width: 28px;
  height: 14px;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 4px;
  background: #f9a825;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 8px 8px;
}
.ts-legend .ts-sample-red {
  display: inline-block;
  width: 28px;
  height: 14px;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 4px;
  background: #c62828;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 8px 8px;
}