.buttons-wrapper {
  position: relative;
  bottom: 35px;

  display: flex;
  justify-content: flex-end;

  margin-right: 25px;
  margin-left: 50%;

  .month-choice-button,
  .weeks-choice-button {
    cursor: pointer;

    z-index: 3;

    display: flex;
    align-items: center;

    height: 30px;
    margin-right: 10px;

    font-weight: 400;
    color: var(--default-color);

    background-color: var(--app-bg-color-l1);
    border: solid 2px #d9dfe2;

    &.active {
      border: solid 2px var(--accent-color-bg);
    }
  }
}

.gantt-chart {
  overflow: hidden;
  display: flex;
  flex-direction: row;

  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;

  .sidebar-panel {
    position: relative;
    z-index: 999;

    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;

    min-height: 70vh;

    background: var(--color-gray-fff);
    border-right: solid 1px #d9dfe2;

    .title-rows {
      display: flex;
      justify-content: flex-start;

      height: 64px;
      padding-left: 15px;

      font-size: 16px;
      line-height: 64px;

      background: rgb(238 238 238 / 37%);
      border-bottom: solid 1px #d9dfe2;
    }
  }

  .chart-panel {
    scrollbar-color: var(--accent-color-bg) var(--color-gray-eee);

    overflow: scroll hidden;
    flex: 4;

    padding-bottom: 25px;

    .chart-scroll-view {
      .chart-timeline-title {
        position: sticky;
        top: 0;
      }

      &.drag-cursor {
        cursor: ew-resize;
      }
    }
  }
}

.button-toggle.active {
  color: #fff;
  background-color: var(--accent-color-bg);
}

::ng-deep {
  .buttons-wrapper {
    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
      line-height: 33px !important;
    }
  }
}