@syncfusion/ej2-angular-gantt 20.4.39 → 20.4.40-ngcc

package/styles/gantt/_layout.scss

@@ -1,1660 +0,0 @@
-@include export-module('gantt-layout') {
-
-  .e-bigger {
-    .e-gantt {
-      .e-gantt-chart {
-        .e-timeline-header-container {
-          height: $gantt-bigger-header-border-height;
-        }
-
-        .e-timeline-top-header-cell {
-          height: $gantt-bigger-timeline-top-header-cell-height;
-        }
-
-        .e-event-markers {
-          .e-span-label {
-            border-radius: $gantt-bigger-event-markers-border-radius;
-            font-size: $gantt-bigger-event-arrow-font-size;
-            height: $gantt-bigger-event-markers-height;
-            padding: $gantt-bigger-event-markers-padding;
-            top: $gantt-bigger-event-markers-top;
-          }
-
-          .e-gantt-right-arrow {
-            border-bottom: $gantt-bigger-event-arrow-bottom;
-            border-right: $gantt-bigger-event-arrow-right;
-            border-right-color: $gantt-bigger-event-arrow-color;
-            border-top: $gantt-bigger-event-arrow-top;
-            top: $gantt-bigger-event-arrow-top-value;
-          }
-        }
-
-        @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
-          .e-left-resize-gripper::before,
-          .e-right-resize-gripper::before {
-            content: '\e888';
-          }
-        }
-        @else {
-          .e-left-resize-gripper::before,
-          .e-right-resize-gripper::before {
-            content: '\e92c';
-          }
-        }
-
-        .e-connectorpoint-right,
-        .e-connectorpoint-left,
-        .e-right-connectorpoint-outer-div,
-        .e-left-connectorpoint-outer-div {
-          border-radius: 50%;
-          display: inline-block;
-          position: absolute;
-        }
-
-        .e-connectorpoint-left-hover,
-        .e-connectorpoint-right-hover {
-          border-style: solid;
-          border-width: 1px;
-          box-sizing: content-box;
-          cursor: pointer;
-          display: inline-block;
-        }
-
-        .e-connectorpoint-left-hover,
-        .e-connectorpoint-right-hover {
-          background-color: $connector-point-hover-color;
-          border-color: $connector-point-border-color;
-        }
-
-        .e-connectorpoint-left-hover:hover,
-        .e-connectorpoint-right-hover:hover {
-          background-color: $connector-point-hover-color;
-          border-color: $connector-point-border-color;
-          outline: 2px solid $connector-point-hover-outerline-color;
-        }
-      }
-
-      .e-tab .e-content {
-        height: $gantt-bigger-add-dialog-content-height;
-      }
-
-      .e-gantt-tree-grid-pane {
-        .e-columnheader {
-          .e-headercell {
-            height: $gantt-bigger-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
-          }
-        }
-      }
-
-      .e-dialog {
-        .e-dlg-header-content {
-          padding: $gantt-bigger-dialog-header-padding; /* stylelint-disable-line declaration-no-important */
-
-          .e-btn.e-dlg-closeicon-btn {
-            left: $gantt-bigger-dialog-close-button-left;
-          }
-        }
-        @if ($skin-name == 'FluentUI' or $skin-name == 'fluent-dark') {
-          .e-dlg-content {
-            margin-bottom: 0;
-          }
-        }
-        @if ($skin-name == 'tailwind') {
-          .e-dlg-header-content {
-            height: 68px !important; /* stylelint-disable-line declaration-no-important */
-          }
-        }
-
-        .e-btn .e-btn-icon.e-icon-dlg-close {
-          font-size: $gantt-bigger-dialog-close-button-size;
-        }
-
-        .e-footer-content {
-          height: $gantt-bigger-filter-dialog-footer-height;
-          padding: $gantt-bigger-filter-dialog-footer-padding;
-
-          .e-btn {
-            margin-left: 12px;
-          }
-        }
-
-        .e-dlg-header {
-          line-height: 28px;
-        }
-      }
-
-      .e-filter-popup.e-popup {
-        width: $gantt-bigger-filter-dialog-width;
-      }
-
-      .e-grid .e-flmenu-valuediv {
-        padding: $gantt-bigger-filter-dialog-input-padding;
-      }
-
-      .e-filter-popup {
-        .e-dlg-content {
-          border-radius: $gantt-dialog-bigger-border-radius;
-          padding: $gantt-dialog-bigger-input-padding-field;
-        }
-      }
-    }
-
-    .e-grid .e-columnmenu {
-      @if $skin-name == 'bootstrap5-dark' or $skin-name == 'tailwind-dark' {
-        top: 35px;
-      }
-      @else if $skin-name == 'fluent-dark' {
-        top: 38px;
-      }
-      @else {
-        top: $bigger-column-menu-size;
-      }
-    }
-
-    .e-gantt-dialog {
-      .e-dialog {
-        border-radius: 6px;
-        width: $gantt-bigger-dialog-width;
-      }
-      .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-        padding: 0 16px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-edit-form-column:nth-child(odd) {
-        padding: $gantt-bigger-dialog-edit-form-odd-padding;
-      }
-
-      .e-edit-form-column:nth-child(even) {
-        padding: $gantt-bigger-dialog-edit-form-even-padding;
-      }
-
-      .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
-        padding: $gantt-bigger-dialog-edit-form-scroll-padding;
-      }
-
-      .e-edit-form-row {
-        height: $gantt-bigger-add-dialog-content-height;
-      }
-
-      .e-edit-form-column {
-        height: $gantt-bigger-add-dialog-input-height;
-      }
-
-      .e-dlg-header-content {
-        border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      > .e-dlg-content {
-        border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-dlg-header-content {
-        border-radius: $gantt-bigger-dialog-border-radius;
-        padding-bottom: $gantt-dialog-padding-bottom;
-        @if ($skin-name == 'bootstrap-dark') {
-          .e-btn.e-dlg-closeicon-btn {
-            border-radius: 50%;
-            height: auto !important; /* stylelint-disable-line declaration-no-important */
-            width: auto;
-            box-shadow: none;
-          }
-        }
-        @else{
-          .e-btn.e-dlg-closeicon-btn {
-            border-radius: 50%;
-            height: auto !important; /* stylelint-disable-line declaration-no-important */
-            width: auto;
-          }
-        }
-      }
-
-      .e-tab {
-        .e-tab-header .e-toolbar-item.e-active {
-          margin-left: $gantt-bigger-dialog-tab-padding-left;
-        }
-      }
-
-      @if ($skin-name == 'bootstrap4') {
-        .e-icon-dlg-close {
-          color: $gantt-bigger-dialog-icon-color;
-        }
-      }
-
-      .e-control-wrapper .e-input-group-icon.e-date-icon {
-        font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-control-wrapper .e-input-group-icon.e-date-icon {
-        min-height: $gantt-bigger-dialog-input-icon;
-        min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-btn.e-flat {
-        line-height: 24px;
-        padding: 6px 16px 6px 15px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-btn.e-primary {
-        padding: 6px 21px 6px 23px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-datetime-wrapper .e-time-icon.e-icons::before {
-        font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
-        font-size: 14px;
-        line-height: 22px;
-      }
-
-      .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
-        font-size: 14px;
-        line-height: 22px;
-      }
-
-      .e-float-input.e-control-wrapper input {
-        height: $gantt-bigger-dialog-input-field-height;
-
-        @if ($skin-name == 'material') {
-          padding: 5px 0 11px !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-
-      .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
-        min-height: $gantt-bigger-dialog-input-icon;
-        min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-control-wrapper .e-input-group-icon.e-time-icon {
-        min-height: $gantt-bigger-dialog-input-icon;
-        min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-input-group.e-control-wrapper {
-        height: $gantt-dialog-bigger-input-field;
-      }
-
-      .e-input-group-icon.e-date-icon {
-        min-width: 36px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      @if ($skin-name == 'material') {
-        .e-datetime-wrapper .e-input-group-icon.e-time-icon {
-          margin: 5px 0 6px !important; /* stylelint-disable-line declaration-no-important */
-        }
-
-        .e-input-group.e-control-wrapper .e-input-group-icon {
-          margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-
-      @if ($skin-name == 'tailwind') {
-        .e-input-group.e-control-wrapper .e-input-group-icon {
-          padding: 7px 0 !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-    }
-
-    .e-predecessor-tooltip {
-      .e-arrow-tip-outer.e-tip-bottom {
-        border-top: 8px solid $gantt-bigger-tooltip-button-color;
-        @if ($skin-name == 'FluentUI')
-        {
-          border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
-        }
-        @else if ($skin-name == 'highcontrast'){
-          border-top: 7px solid $gantt-bigger-tooltip-button-color;
-        }
-      }
-
-      .e-arrow-tip-inner.e-tip-bottom {
-        color: $gantt-bigger-tooltip-button-color;
-      }
-
-      .e-left-btn:disabled {
-        color: $gantt-bigger-tooltip-disabled-button-color;
-      }
-
-      .e-right-btn:disabled {
-        color: $gantt-bigger-tooltip-disabled-button-color;
-      }
-
-      .e-tip-content {
-        padding: 3px !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
-        background-color: $gantt-bigger-tooltip-button-color;
-        border-color: $gantt-bigger-tooltip-button-color;
-        color: $gantt-bigger-tooltip-button-text-color;
-        font-size: 12px;
-        line-height: 18px;
-        padding: 0 8px 0 0;
-      }
-
-      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
-        background-color: $gantt-bigger-tooltip-button-color;
-        border-color: $gantt-bigger-tooltip-button-color;
-        color: $gantt-bigger-tooltip-button-text-color;
-        font-size: 12px;
-        line-height: 18px;
-        padding: 0 0 0 8px;
-      }
-    }
-
-    .e-predecessor-dialog {
-      background-color: $gantt-bigger-tooltip-dialog-color;
-
-      .e-dlg-content {
-        background-color: $gantt-bigger-tooltip-dialog-color;
-        padding: $gantt-bigger-predecessor-dialog-padding;
-        font-size: $gantt-bigger-predecessor-dialog-font-size;
-        font-weight: $gantt-bigger-predecessor-dialog-font-weight;
-        line-height: $gantt-bigger-predecessor-dialog-line-height;
-        color: $gantt-bigger-tooltip-dialog-text-color;
-        @if ($skin-name == 'FluentUI') {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-  .e-blazor-gantt-tooltip{
-    .e-tip-content{
-      overflow-wrap: unset !important; /* stylelint-disable-line declaration-no-important */
-      white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
-      word-break: unset !important; /* stylelint-disable-line declaration-no-important */
-    }
-  }
-  .e-gantt-tooltip{
-    .e-tip-content{
-      text-align: left !important; /* stylelint-disable-line declaration-no-important */
-    }
-  }
-  .e-gantt.e-gantt-rtl{
-    .e-connector-line-right-arrow {
-      border-left: none !important; /* stylelint-disable-line declaration-no-important */
-      border-right-color: $connector-line-hover-color;
-    }
-    .e-connector-line-left-arrow{
-      border-right: none !important; /* stylelint-disable-line declaration-no-important */
-      border-left-color: $connector-line-hover-color;
-    }
-    .e-toolbar-right{
-      left: auto !important; /* stylelint-disable-line declaration-no-important */
-      right: 0 !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .e-gantt-chart{
-      .e-timeline-header-container{
-        border-right: none !important; /* stylelint-disable-line declaration-no-important */
-        border-left: 1px solid !important; /* stylelint-disable-line declaration-no-important */
-        border-left-color: $gantt-header-border-color !important; /* stylelint-disable-line declaration-no-important */
-      }
-      .e-timeline-top-header-cell{
-        .e-gantt-top-cell-text {
-          padding-right: 11px !important; /* stylelint-disable-line declaration-no-important */
-          padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-          text-align: right !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-      .e-progress-resize-gripper {
-        .e-progressbar-handler-element {
-          right: 0 !important; /* stylelint-disable-line declaration-no-important */
-        }
-        .e-progressbar-handler-after{
-          right: 1px !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-      .e-connectorpoint-right {
-        margin-right: 2px !important; /* stylelint-disable-line declaration-no-important */
-      }
-      .e-event-markers{
-        .e-gantt-right-arrow{
-          border-left: 5px solid;
-          border-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-      .e-holiday {
-        .e-span {
-          transform: rotate(90deg) !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-      .e-left-label-container {
-        padding-left: 25px !important; /* stylelint-disable-line declaration-no-important */
-        padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-      .e-right-label-container {
-        margin-right: 25px !important; /* stylelint-disable-line declaration-no-important */
-        margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-  }
-  .e-gantt-rtl{
-    .e-gantt-tooltip-label{
-      text-align: right !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .e-tip-content{
-      text-align: right !important; /* stylelint-disable-line declaration-no-important */
-    }
-  }
-  .e-gantt-dialog.e-rtl{
-    .e-dlg-closeicon-btn{
-      padding: 4px 8px !important; /* stylelint-disable-line declaration-no-important */
-    }
-  }
-
-  #{&}.e-gantt {
-    display: block;
-    width: 100%;
-
-    .e-cloneproperties {
-      padding: $gantt-bigger-clone-padding;
-    }
-
-    & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
-      left: -5px;
-      position: relative;
-    }
-
-    .e-cloneproperties {
-      border-style: solid;
-      border-width: $gantt-border-size;
-      box-shadow: $gantt-group-clone-box-shadow;
-      font-size: $gantt-header-font-size;
-      font-weight: $gantt-drag-clone-font-weight;
-      opacity: $gantt-drag-clone-opacity;
-      overflow: hidden;
-      padding: $gantt-clone-padding;
-      text-align: $gantt-group-clone-text-align;
-      user-select: none;
-      vertical-align: middle;
-      white-space: nowrap;
-      z-index: 100;
-    }
-
-    .e-cloneproperties.e-draganddrop {
-      border-spacing: 0;
-      font-size: $gantt-header-font-size;
-      font-weight: normal;
-      overflow: visible;
-    }
-
-    .e-cloneproperties .e-bothganttlines {
-      border-width: 1px 0 0 1px;
-    }
-
-    .e-draganddrop {
-      border-width: 0 1px 1px;
-      font-weight: normal;
-      padding: 0;
-    }
-
-    .e-draganddrop .e-rowcell {
-      opacity: .95;
-    }
-
-    .e-cloneproperties.e-draganddrop table {
-      border-spacing: 0;
-    }
-
-    .e-icons.e-errorelem {
-      display: inline-block;
-      padding-left: 10px;
-      vertical-align: middle;
-    }
-
-    .e-errorelem::before {
-      color: $error-elem-color;
-      content: '\e22a';
-      transform: rotate(180deg);
-    }
-
-    & .e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop,
-    & .e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
-      border-bottom: 0;
-      border-right: 1px solid $gantt-cell-border-color;
-      border-top: 1px solid $gantt-cell-border-color;
-    }
-
-    .e-gantt-toolbar {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-style: solid;
-      border-width: 1px 1px 0;
-    }
-
-    .e-flmenu-valuediv {
-      padding-top: $gantt-filter-menu-value-div-padding;
-    }
-
-    .e-gantt-splitter {
-      .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
-        margin: 0;
-      }
-
-      .e-pane {
-        overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-
-    .e-temp-content {
-      border-left: 1px solid;
-    }
-
-    .e-tab {
-      border: 0;
-
-      .e-tab-header .e-toolbar-item.e-active {
-        border-color: transparent;
-      }
-    }
-
-    .e-gantt-tree-grid-pane {
-      .e-grid {
-        border-width: 0;
-      }
-
-      .e-grid.e-gridhover tr[role = 'row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role = 'row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role = 'row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-rtl .e-gridhover tr[role = 'row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role = 'row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-        background-color: transparent;
-      }
-
-      .e-gantt-temp-header {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        height: 45px;
-      }
-
-      .e-headercontent {
-        border-right-width: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-gridheader {
-        border-top-style: none;
-        border-top-width: 0;
-        padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
-        padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-columnheader,
-      .e-headercell {
-        height: $gantt-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-gridcontent .e-content {
-        overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-gridcontent .e-gantt-frozen {
-        overflow-x: hidden !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      .e-gridcontent .e-content.e-gantt-scroll-padding {
-        width: calc(100% + 17px);
-      }
-
-      .e-ganttnotes-info {
-        text-align: center;
-      }
-
-      .e-icons.e-notes-info {
-        display: inline-block;
-        font-size: 18px;
-        height: 15px;
-        line-height: 10px;
-        vertical-align: middle;
-      }
-    }
-
-    .e-gantt-chart {
-      height: 100%;
-      overflow: hidden;
-      position: relative;
-      width: 100%;
-
-      .e-chart-empty-row {
-        border: .5px solid;
-        position: absolute;
-        background-color: $gantt-empty-taskbar-background-color;
-        border-color: $gantt-empty-taskbar-border-color;
-      }
-
-      .e-chart-root-container {
-        border-right: 0 solid;
-
-        .e-content {
-          -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
-          overflow-x: scroll;
-          overflow-y: auto;
-          position: relative;
-        }
-
-        .e-nonworking-day-container {
-          position: absolute;
-        }
-
-        .e-event-markers-container {
-          position: absolute;
-        }
-
-        .e-holiday-container {
-          height: 100%;
-          position: absolute;
-        }
-
-        .e-weekend-container {
-          height: 100%;
-          position: absolute;
-        }
-      }
-
-      .e-timeline-header-container {
-        border-bottom-style: solid;
-        border-right: 1px solid;
-        overflow: hidden;
-        position: relative;
-        z-index: 6;
-      }
-
-      .e-timeline-header-table-container > thead > tr > th {
-        border-left: 0;
-      }
-
-      .e-timeline-header-table-container {
-        border-collapse: collapse;
-        border-spacing: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      .e-timeline-header-table-body {
-        border-collapse: collapse;
-        box-sizing: border-box;
-        display: inline-block;
-        transform: scale(1);
-        white-space: nowrap;
-      }
-
-      .e-timeline-header-table-body > tr {
-        display: inline-flex;
-      }
-
-      .e-timeline-top-header-cell,
-      .e-timeline-single-header-cell {
-        border-spacing: 0;
-        border-style: solid;
-        border-top: 0;
-        border-width: 1px;
-        box-sizing: border-box;
-        display: inline-flex;
-        font-size: $gantt-timeline-top-headercell-font-size;
-        font-weight: $gantt-timeline-top-headercell-font-weight;
-        margin: 0;
-        padding: 0;
-        position: static;
-        text-align: center;
-        user-select: none;
-        white-space: nowrap;
-
-        .e-header-cell-label {
-          box-sizing: border-box;
-          margin: auto;
-          overflow: hidden;
-          position: static;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .e-gantt-top-cell-text {
-          padding-left: 11px;
-          text-align: left;
-        }
-      }
-
-      .e-gantt-grid-lines {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        border-collapse: collapse;
-        border-spacing: 0;
-        box-sizing: border-box;
-      }
-
-      .e-zero-spacing {
-        border-spacing: .25px;
-      }
-
-      .e-chart-row:first-child .e-chart-row-border {
-        //border-width: 0;
-        border-top: 0;
-      }
-
-      .e-chart-row {
-        .e-chart-row-border {
-          border-collapse: separate;
-          border-style: solid;
-          border-width: 1px 0 0;
-        }
-
-        .e-chart-row-cell {
-          font-size: 0;
-          padding: 0;
-        }
-
-        .e-chart-row-border.e-lastrow {
-          border-bottom-width: 1px;
-        }
-
-        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          line-height: normal;
-        }
-      }
-
-      .e-line-container-cell {
-        border-right-style: solid;
-        border-right-width: 1px;
-        height: 100%;
-        position: absolute;
-      }
-
-      .e-taskbar-main-container {
-        cursor: move;
-        display: inline-block;
-        position: absolute;
-        vertical-align: middle;
-        z-index: 3;
-      }
-
-      .e-left-label-container.e-left-label-temp-container {
-        align-items: center;
-        display: inline-flex;
-        justify-content: flex-end;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .e-right-label-container.e-right-label-temp-container {
-        align-items: center;
-        display: inline-flex;
-        float: left;
-        outline: none;
-        overflow: hidden;
-        position: absolute;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .e-left-label-container {
-        display: inline-block;
-      }
-
-      .e-left-label-inner-div,
-      .e-right-label-container {
-        overflow: hidden;
-      }
-
-      .e-left-label-inner-div {
-        align-items: center;
-        display: inline-flex;
-        justify-content: flex-end;
-        width: 100%;
-      }
-
-      .e-label {
-        margin: 3px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .e-right-label-container {
-        background-color: transparent;
-        display: inline-block;
-        margin: 0;
-        position: absolute;
-      }
-
-      .e-right-label-inner-div {
-        align-items: center;
-        display: inline-flex;
-        float: left;
-        outline: none;
-        overflow: hidden;
-      }
-
-      .e-indicator-span {
-        display: inline-block;
-        font-size: 13px;
-        font-weight: normal;
-        overflow: hidden;
-        position: absolute;
-        text-overflow: ellipsis;
-      }
-
-      .e-gantt-child-taskbar,
-      .e-gantt-parent-taskbar,
-      .e-gantt-child-progressbar,
-      .e-gantt-parent-progressbar,
-      .e-gantt-milestone,
-      .e-gantt-parent-milestone,
-      .e-gantt-manualparent-milestone {
-        display: inline-block;
-        width: 100%;
-      }
-
-      .e-manualparent-main-container {
-        background-color: transparent;
-        cursor: move;
-        margin-top: -5px;
-        position: absolute;
-      }
-
-      .e-gantt-manualparent-taskbar {
-        margin-top: 3px;
-      }
-
-      .e-gantt-split-container-line {
-        @if ($theme-name == 'material-dark' or $theme-name == 'fabric-dark') {
-          border-color: $gantt-active-background-color;
-        }
-        @else {
-          border-color: inherit;
-        }
-        border-top-style: dotted;
-        border-top-width: 2px;
-        height: 0;
-        left: 2px;
-        pointer-events: none;
-        position: absolute;
-        top: 50%;
-        width: 98%;
-      }
-
-      .e-gantt-child-taskbar-inner-div,
-      .e-gantt-parent-taskbar-inner-div {
-        border-spacing: 0;
-        box-sizing: border-box;
-        margin: auto;
-        overflow: hidden;
-        padding: 0;
-        z-index: 3;
-      }
-
-      .e-gantt-parent-progressbar-inner-div {
-        z-index: 3;
-      }
-
-      .e-gantt-child-progressbar-inner-div,
-      .e-gantt-parent-progressbar-inner-div {
-        box-sizing: border-box;
-        text-align: right;
-      }
-
-      .e-chart-scroll-container,
-      .e-chart-rows-container {
-        user-select: none;
-      }
-
-      .e-chart-rows-container {
-        line-height: initial;
-      }
-
-      .e-masked-tbody {
-        table-layout: fixed;
-        width: 100%;
-      }
-
-      .e-div-background {
-        border-color: $gantt-masked-table-background-color;
-        border-right-style: solid;
-        border-right-width: 1px;
-        height: 100%;
-        position: absolute;
-      }
-
-      .e-innerHTML {
-        height: 16px;
-        width: 16px;
-        left: 14px;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-innerHTML1 {
-        height: 16px;
-        width: 16px;
-        left: 30px;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-innerHTML2 {
-        height: 16px;
-        width: 16px;
-        left: 60px;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-timelineHeader {
-        height: 16px;
-        width: 82px;
-        left: 20px;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell01 {
-        height: 12px;
-        width: 88px;
-        left: 14px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell02 {
-        height: 18px;
-        width: 410px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell03 {
-        height: 12px;
-        width: 88px;
-        left: 14px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell04 {
-        height: 18px;
-        width: 208px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell05 {
-        height: 12px;
-        width: 108px;
-        left: 64px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell06 {
-        height: 18px;
-        width: 195px;
-        left: 192px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-maskcell07 {
-        height: 18px;
-        width: 156px;
-        left: 388px;
-        border-radius: 0;
-        background: $gantt-masked-table-background-color;
-      }
-
-      .e-taskbar-left-resizer,
-      .e-taskbar-right-resizer {
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        width: 10px;
-        z-index: 4;
-      }
-
-      .e-child-progress-resizer {
-        display: inline-block;
-        height: 15px;
-        position: absolute;
-        top: 0;
-        width: 20px;
-        z-index: 5;
-      }
-
-      .e-progress-resize-gripper {
-        cursor: col-resize;
-
-        .e-progressbar-handler {
-          border-width: 1px;
-          box-sizing: content-box;
-          cursor: col-resize;
-          height: 2px;
-          position: absolute;
-          top: 7px;
-        }
-
-        .e-progressbar-handler-element {
-          border-bottom-style: solid;
-          border-bottom-width: 8px;
-          border-left: 7px solid transparent;
-          border-right: 7px solid transparent;
-          cursor: col-resize;
-          height: 0;
-          left: 1px;
-          position: absolute;
-          top: -7px;
-          width: 0;
-        }
-
-        .e-progressbar-handler-after {
-          border-bottom-style: solid;
-          border-bottom-width: 8px;
-          border-left: 6px solid transparent;
-          border-right: 6px solid transparent;
-          cursor: col-resize;
-          height: 0;
-          left: 2px;
-          position: absolute;
-          top: -7px;
-          width: 0;
-        }
-      }
-
-      .e-baseline-bar {
-        border-radius: 2px;
-        box-sizing: border-box;
-        position: absolute;
-        z-index: 2;
-      }
-
-      .e-milestone-top,
-      .e-parent-milestone-top,
-      .e-manualparent-milestone-top {
-        border-style: none solid solid;
-        border-top: 0;
-      }
-
-      .e-milestone-top,
-      .e-milestone-bottom,
-      .e-parent-milestone-top,
-      .e-parent-milestone-bottom,
-      .e-manualparent-milestone-top,
-      .e-manualparent-milestone-bottom {
-        border-left-color: transparent;
-        border-right-color: transparent;
-      }
-
-      .e-milestone-bottom,
-      .e-parent-milestone-bottom,
-      .e-manualparent-milestone-bottom {
-        border-bottom: 0;
-        border-style: solid solid none;
-      }
-
-      .e-baseline-gantt-milestone-container {
-        position: absolute;
-        z-index: 2;
-      }
-
-      .e-task-label {
-        display: inline;
-        font-weight: normal;
-        margin-left: 8px;
-        margin-right: 15px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        white-space: nowrap;
-      }
-
-      .e-task-table {
-        overflow: hidden;
-        border-collapse: separate;
-      }
-
-      .e-left-resize-gripper,
-      .e-right-resize-gripper {
-        align-items: center;
-        cursor: ew-resize;
-        display: inline-flex;
-      }
-
-      .e-holiday {
-        display: inline-block;
-        position: absolute;
-
-        .e-span {
-          position: absolute;
-          transform: rotate(-90deg);
-          white-space: nowrap;
-          width: 0;
-        }
-      }
-
-      .e-weekend {
-        display: inline-block;
-        position: absolute;
-        z-index: 0;
-      }
-
-      .e-rangecontainer {
-
-        .e-leftarc {
-          border-bottom-left-radius: $gantt-range-container-arc-radius;
-          border-top-left-radius: $gantt-range-container-arc-radius;
-          position: absolute;
-        }
-
-        .e-rightarc {
-          border-bottom-right-radius: $gantt-range-container-arc-radius;
-          border-top-right-radius: $gantt-range-container-arc-radius;
-          position: absolute;
-        }
-      }
-
-      .e-event-markers {
-        border-left: 1px dashed;
-        position: absolute;
-        width: 1px;
-        z-index: 2;
-
-        .e-span-label {
-          border-radius: 3px;
-          font-weight: 500;
-          height: $event-marker-label-height;
-          line-height: $event-marker-line-height;
-          padding: $event-marker-label-padding;
-          position: absolute;
-          top: 50px;
-          white-space: nowrap;
-          width: auto;
-          z-index: 2;
-        }
-
-        .e-gantt-right-arrow {
-          border-bottom: 5px solid transparent;
-          border-right: 5px solid;
-          border-top: 5px solid transparent;
-          height: 0;
-          position: absolute;
-          top: $event-marker-label-arrow-top;
-          width: 0;
-        }
-      }
-
-      .e-gantt-unscheduled-taskbar {
-        border-radius: 0;
-        border-style: none;
-        display: inline-block;
-      }
-
-      .e-connector-line-right-arrow {
-        border-left-style: solid;
-        border-left-width: 10px;
-      }
-
-      .e-connector-line-left-arrow {
-        border-right-style: solid;
-        border-right-width: 10px;
-      }
-
-      .e-connector-line-right-arrow,
-      .e-connector-line-left-arrow {
-        border-bottom: 5px solid transparent;
-        border-top: 5px solid transparent;
-      }
-
-      .e-connector-line-container {
-        z-index: 5;
-      }
-
-      .e-connector-line-z-index {
-        z-index: 1;
-      }
-
-      .e-connector-line-hover {
-        outline: 1px solid;
-      }
-
-      .e-critical-connector-line-hover {
-        outline: 1px solid;
-      }
-
-      .e-connector-line-hover-z-index {
-        z-index: 100;
-      }
-
-      .e-connectortouchpoint {
-        background-color: transparent;
-        display: block;
-        position: absolute;
-        z-index: 5;
-      }
-
-      .e-connectorpoint-right,
-      .e-connectorpoint-left,
-      .e-right-connectorpoint-outer-div,
-      .e-left-connectorpoint-outer-div {
-        border-radius: 50%;
-        display: inline-block;
-        position: absolute;
-      }
-
-      .e-connectorpoint-left-hover,
-      .e-connectorpoint-right-hover {
-        border-style: solid;
-        border-width: 1px;
-        box-sizing: content-box;
-        cursor: pointer;
-        display: inline-block;
-      }
-
-      .e-connectorpoint-allow-block {
-        cursor: no-drop;
-      }
-
-      .e-gantt-manualparenttaskbar-left,
-      .e-gantt-manualparenttaskbar-right {
-        background-color: $gantt-manualparent-background-color;
-        border-color: $gantt-manualparent-background-color;
-        border-radius: 50%;
-        display: inline-block;
-        height: 10px;
-        margin: -1px;
-        position: absolute;
-        width: 10px;
-      }
-
-      .e-manualparent-milestone-top,
-      .e-manualparent-milestone-bottom {
-        border-bottom-color: $gantt-manualparent-background-color;
-      }
-
-      .e-gantt-manualparenttaskbar-right {
-        cursor: e-resize;
-        margin-left: -8px;
-      }
-
-      .e-gantt-manualparenttaskbar-left {
-        margin-left: 0;
-      }
-
-      .e-gantt-manualparenttaskbar {
-        background: $gantt-manualparent-background-color;
-        margin-top: 3px;
-        position: absolute;
-      }
-
-      .e-icon {
-        font-family: 'e-icons';
-        font-size: 13px;
-        font-style: normal;
-        font-variant: normal;
-        font-weight: normal;
-        line-height: 1;
-        text-transform: none;
-        vertical-align: middle;
-      }
-
-      .e-active-container {
-        outline: 1px solid;
-        outline-offset: 2px;
-      }
-    }
-  }
-
-  .e-gantt-dialog .e-tab .e-tab-header {
-    padding-left: $gantt-dialog-tab-padding-left;
-
-    @if ($skin-name == 'FluentUI'){
-      .e-indicator {
-        display: block;
-        bottom: 1px;
-        height: 3px;
-      }
-    }
-    @else{
-      .e-indicator {
-        display: block;
-      }
-    }
-
-    .e-toolbar-item .e-tab-wrap {
-      border-style: solid;
-      border-width: $gantt-tab-header-border-width;
-    }
-  }
-
-  .e-gantt-dialog .e-tab .e-tab-header:not(.e-vertical)::before {
-    border: 0;
-  }
-
-  .e-gantt-dialog {
-    border: 0;
-
-    .e-gridform .e-table {
-      border-spacing: 0;
-    }
-
-    .e-item {
-      height: $gantt-dialog-general-height;
-    }
-
-    .e-dependent-div {
-      border-bottom-width: $gantt-depedent-div-border-bottom;
-    }
-
-    .e-icon-dlg-close {
-      opacity: initial;
-    }
-
-    .e-toolbar {
-      border-top-width: 0;
-    }
-
-    .e-resource-div {
-      border-bottom-width: $gantt-resource-div-border-bottom;
-
-      .e-gridheader {
-        border-top-width: 0;
-      }
-    }
-
-    .e-edit-form-row {
-      height: $gantt-dialog-general-height;
-      overflow-y: auto;
-    }
-
-    .e-edit-form-column:nth-child(odd) {
-      float: left;
-      padding: $gantt-dialog-edit-form-odd-padding;
-      width: 50%;
-    }
-
-    .e-edit-form-column:nth-child(even) {
-      float: left;
-      padding: $gantt-dialog-edit-form-even-padding;
-      width: 50%;
-    }
-
-    .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
-      padding: $gantt-dialog-edit-form-scroll-padding;
-    }
-
-    .e-edit-form-column {
-      height: 75px;
-    }
-
-    .e-dependent-div .e-content {
-      height: $gantt-dialog-dependent-height;
-    }
-
-    .e-resource-div .e-content {
-      height: $gantt-dialog-resource-height;
-    }
-
-    .e-richtexteditor {
-      border-bottom-width: $gantt-richtext-border-bottom;
-      height: $gantt-dialog-rte-height !important; /* stylelint-disable-line declaration-no-important */
-      overflow: hidden;
-    }
-
-    .e-richtexteditor.e-rte-tb-expand {
-      border-top: 0;
-    }
-
-    .e-richtexteditor .e-rte-content {
-      border-bottom-width: $gantt-richtext-content-border-bottom;
-      height: $gantt-dialog-rte-content-height;
-      overflow: hidden;
-    }
-
-    > .e-dlg-content {
-      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
-      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        height: 291px;
-      }
-    }
-
-    .e-dlg-header-content {
-      border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
-    }
-
-    .e-dlg-header-content {
-      border-radius: $gantt-dialog-border-radius;
-      padding-bottom: $gantt-dialog-padding-bottom;
-      
-      @if ($skin-name == 'bootstrap-dark'){
-        .e-btn.e-dlg-closeicon-btn {
-          border-radius: 50%;
-          height: auto !important; /* stylelint-disable-line declaration-no-important */
-          width: auto;
-          box-shadow: none;
-        }
-      }
-      @else{
-        .e-btn.e-dlg-closeicon-btn {
-          border-radius: 50%;
-          height: auto !important; /* stylelint-disable-line declaration-no-important */
-          width: auto;
-        }
-      }
-    }
-  }
-
-  .e-icon-rowselect::before {
-    content: '\e930';
-  }
-
-  .e-ganttpopup {
-    -moz-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
-    -ms-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
-    -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
-    font-weight: normal;
-    position: absolute;
-    user-select: none;
-    z-index: 99999;
-
-    .e-rowselect {
-      line-height: 18px;
-      text-indent: 7%;
-    }
-
-    span {
-      border: 1px solid transparent;
-      cursor: pointer;
-      display: inline-block;
-      height: 26px;
-      padding: 4px;
-      width: 26px;
-    }
-
-    .e-content {
-      border-radius: 4px;
-      border-style: solid;
-      border-width: 1px;
-      font-size: 14px;
-      padding: 4px;
-    }
-
-    .e-tail::after,
-    .e-tail::before,
-    .e-ganttpopup {
-      border: 10px solid transparent;
-      content: '';
-      height: 0;
-      left: 8px;
-      position: absolute;
-      width: 0;
-    }
-
-    .e-downtail::after {
-      top: 34px;
-    }
-  }
-
-  .e-gantt-tooltip.e-tooltip-wrap {
-    opacity: 1;
-  }
-
-  .e-gantt-tooltip {
-    visibility: hidden;
-  }
-
-  .e-gantt .e-cloneproperties.e-draganddrop .e-row .e-rowcell .e-treecolumn-container .e-icons.e-none::before {
-    content: '';
-  }
-
-  .e-bigger .e-gantt .e-gantt-chart .e-label {
-    font-size: $gantt-bigger-label-font-size;
-  }
-
-  .e-gantt-tooltip-label {
-    padding-bottom: 2px;
-    padding-right: 2px;
-    text-align: left;
-  }
-
-  .e-gantt.e-device {
-    .e-edit-form-column {
-      &:nth-child(odd),
-      &:nth-child(even) {
-        float: none;
-        padding: $gantt-dialog-edit-form-odd-padding;
-        width: 100%;
-      }
-    }
-
-    .e-edit-form-row {
-      height: auto;
-    }
-
-    .e-adaptive-searchbar {
-      padding: 5px 10px;
-      width: 90%;
-    }
-
-    .e-backarrowspan {
-      font-size: 16px;
-      padding: 5px 10px;
-    }
-
-    .e-gantt-dialog {
-      max-height: none;
-
-      .e-dlg-closeicon-btn {
-        float: left;
-        left: -4px;
-      }
-
-      .e-icon-dlg-close {
-        font-size: 16px;
-      }
-
-      .e-dlg-header {
-        display: inline-block;
-      }
-    }
-
-    .e-toolbar-item {
-      padding: 7px;
-    }
-
-    .e-toolbar .e-icons {
-      font-size: 18px;
-    }
-
-    .e-gridheader .e-icons {
-      font-size: 12px;
-    }
-
-    .e-right-resize-gripper,
-    .e-left-resize-gripper {
-      border: 7px solid;
-      z-index: -1;
-
-      &::before {
-        font-size: 14px;
-        margin-left: -7px;
-      }
-    }
-
-    .e-dependent-div .e-content {
-      height: 100%;
-    }
-
-    .e-resource-div .e-content {
-      height: 100%;
-    }
-
-    .e-richtexteditor {
-      height: 100%;
-
-      .e-rte-content {
-        height: 100%;
-      }
-    }
-  }
-
-  .e-predecessor-tooltip {
-    background-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
-    border-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
-    visibility: hidden;
-
-    .e-arrow-tip-outer.e-tip-bottom {
-      border-top: 8px solid $gantt-bigger-tooltip-button-color;
-      @if ($skin-name == 'FluentUI')
-      {
-        border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
-      }
-      @else if ($skin-name == 'highcontrast'){
-        border-top: 7px solid $gantt-bigger-tooltip-button-color;
-      }
-    }
-
-    .e-arrow-tip-inner.e-tip-bottom {
-      color: $gantt-bigger-tooltip-button-color;
-    }
-
-    .e-left-btn:disabled {
-      color: $gantt-bigger-tooltip-disabled-button-color;
-    }
-
-    .e-right-btn:disabled {
-      color: $gantt-bigger-tooltip-disabled-button-color;
-    }
-
-    .e-tip-content {
-      padding: 3px !important; /* stylelint-disable-line declaration-no-important */
-    }
-
-    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
-      background-color: $gantt-bigger-tooltip-button-color;
-      border-color: $gantt-bigger-tooltip-button-color;
-      color: $gantt-bigger-tooltip-button-text-color;
-      font-size: 12px;
-      line-height: 18px;
-      padding: 0 8px 0 0;
-    }
-
-    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
-      background-color: $gantt-bigger-tooltip-button-color;
-      border-color: $gantt-bigger-tooltip-button-color;
-      color: $gantt-bigger-tooltip-button-text-color;
-      font-size: 12px;
-      line-height: 18px;
-      padding: 0 0 0 8px;
-    }
-  }
-
-  .e-predecessor-dialog {
-    background-color: $gantt-bigger-tooltip-dialog-color;
-
-    .e-dlg-content {
-      background-color: $gantt-bigger-tooltip-dialog-color;
-      padding: $gantt-bigger-predecessor-dialog-padding;
-      font-size: $gantt-bigger-predecessor-dialog-font-size;
-      font-weight: $gantt-bigger-predecessor-dialog-font-weight;
-      line-height: $gantt-bigger-predecessor-dialog-line-height;
-      color: $gantt-bigger-tooltip-dialog-text-color;
-      @if ($skin-name == 'FluentUI') {
-        margin-bottom: 0;
-      }
-    }
-  }
-}