#ganttOut .p6-toolbar,
    #wbsOut .wbs-toolbar {
      row-gap: 8px !important;
      align-items: center !important
    }

    #ganttOut .p6-toolbar .p6-tb-btn,
    #ganttOut .p6-toolbar .p6-exp-btn,
    #wbsOut .wbs-toolbar .wbs-btn {
      position: relative;
      overflow: hidden;
      transition: transform .18s cubic-bezier(.22, .8, .22, 1), box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
    }

    #ganttOut .p6-toolbar .p6-tb-btn:hover,
    #ganttOut .p6-toolbar .p6-exp-btn:hover,
    #wbsOut .wbs-toolbar .wbs-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(96, 165, 250, .42) !important;
      box-shadow: 0 10px 28px rgba(59, 130, 246, .18);
      color: #f8fbff !important;
    }

    #ganttOut .p6-toolbar .p6-tb-btn:active,
    #ganttOut .p6-toolbar .p6-exp-btn:active,
    #wbsOut .wbs-toolbar .wbs-btn:active {
      transform: translateY(0) scale(.985)
    }

    #ganttOut .p6-toolbar .p6-tb-btn.on,
    #wbsOut .wbs-toolbar .wbs-btn.active {
      box-shadow: 0 12px 32px rgba(34, 211, 238, .18)
    }

    #ganttOut .p6-toolbar .p6-tb-btn::before,
    #ganttOut .p6-toolbar .p6-exp-btn::before,
    #wbsOut .wbs-toolbar .wbs-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    #ganttOut .p6-row.is-toggleable .p6-left,
    #ganttOut .p6-row.is-toggleable .p6-right,
    #wbsOut .wbs-row.has-kids {
      cursor: pointer
    }

    #ganttOut .p6-row.is-toggleable:hover .p6-left {
      filter: brightness(1.08) !important
    }

    #ganttOut .p6-row.is-toggleable:hover .p6-right {
      background-color: rgba(255, 255, 255, .028) !important
    }

    #ganttOut .p6-toggle-mark,
    #wbsOut .tw:not(.empty) {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      min-width: 18px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(6, 18, 40, .78);
      color: #eaf4ff !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .18);
      transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    #ganttOut .p6-toggle-mark:hover,
    #wbsOut .tw:not(.empty):hover {
      transform: scale(1.06);
      border-color: rgba(96, 165, 250, .46);
      background: rgba(14, 32, 62, .92);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px rgba(37, 99, 235, .2);
    }

    #ganttOut .p6-toggle-mark.pm-minus,
    #wbsOut .tw.pm-minus {
      color: #86efac !important;
      border-color: rgba(34, 197, 94, .34);
      background: rgba(8, 42, 24, .86)
    }

    #ganttOut .p6-toggle-mark.pm-plus,
    #wbsOut .tw.pm-plus {
      color: #93c5fd !important;
      border-color: rgba(96, 165, 250, .34);
      background: rgba(10, 24, 52, .86)
    }

    body.v9-tree-premium-switch #ganttOut .p6-outer,
    body.v9-tree-premium-switch #wbsOut .wbs-tree-v10,
    body.v9-tree-premium-switch #wbsOut .wbs-wrap {
      animation: v9TreePremiumSwap .24s cubic-bezier(.22, .8, .22, 1);
      transform-origin: top center;
    }

    body.v9-tree-premium-enter #ganttOut .p6-row,
    body.v9-tree-premium-enter #wbsOut .wbs-row {
      animation: v9TreePremiumRows .30s cubic-bezier(.22, .8, .22, 1)
    }

    @keyframes v9TreePremiumSwap {
      from {
        opacity: .72;
        transform: translateY(5px) scale(.995)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes v9TreePremiumRows {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }