@syncfusion/ej2-fabric-theme 33.2.15 → 34.1.29

package/styles/gantt/_layout.scss

@@ -0,0 +1,1452 @@
+@use 'variables' as *;
+@mixin resizer-styles($display, $position, $top, $width, $index) {
+  display: $display;
+  position: $position;
+  top: $top;
+  width: $width;
+  z-index: $index;
+}
+
+@mixin mask-cell-styles($height,$width,$left,$border-radius) {
+  height: $height;
+  width: $width;
+  left: $left;
+  border-radius: $border-radius;
+}
+
+@mixin inner-cell-styles($innerheight, $innerwidth, $innerleft) {
+  height: $innerheight;
+  width: $innerwidth;
+  left: $innerleft;
+}
+
+@mixin button-styles($back-color,$border-color,$text-color,$font-size,$line-height,$padding) {
+  background-color: $back-color;
+  border-color: $border-color;
+  color: $text-color;
+  font-size: $font-size;
+  line-height: $line-height;
+  padding: $padding;
+}
+
+@mixin border-styles($border-radius,$border-height,$border-width) {
+  border-radius: $border-radius;
+  height: $border-height;
+  width: $border-width;
+}
+
+@mixin float-styles($direction,$padding-style,$width) {
+  float: $direction;
+  padding: $padding-style;
+  width: $width;
+}
+
+@mixin min-styles {
+  min-height: $gantt-bigger-dialog-input-icon;
+  min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+@include export-module('gantt-layout') {
+
+  .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 */
+    }
+  }
+  @if ($skin-name == 'Material3-dark' or $skin-name == 'Material3'){
+    .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon{
+      font-size: 16px;
+    }}
+
+  .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-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.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-draganddrop {
+        border-spacing: 0;
+        font-size: $gantt-header-font-size;
+        font-weight: normal;
+        overflow: visible;
+      }
+
+      .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-gantt-splitter:has(.e-headercell.e-fltr-icon) {
+      overflow: visible !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:has(.e-headercell.e-fltr-icon):not(.e-gantt .e-grid.e-rtl)  {
+        position: inherit;
+      }
+      .e-grid .e-row .e-input-group {
+        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+        margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
+        @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+          line-height: 100% !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+      .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-headercontent .e-table {
+          border-spacing: $gantt-header-border-spacing !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-headercell {
+        @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark') {
+          padding: 15px 12px !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+
+      .e-gridcontent:not(:has(.e-movablescrollbar)) .e-content {
+        overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-gridcontent .e-content.e-gantt-scroll-padding {
+        width: calc(100% + 17px);
+      }
+
+      .e-gridcontent .e-content.e-yscroll .e-table {
+        border-spacing: $gantt-header-border-spacing !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .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;
+          td.e-chart-row-cell.e-droptop{
+            border-top: $gantt-rowdd-topbottom-border;
+            border-width: $gantt-rowdd-childborder-width;
+          }
+
+          td.e-chart-row-cell.e-dropbottom{
+            border-bottom: $gantt-rowdd-topbottom-border;
+            box-shadow: $gantt-rowdd-boxshadow;
+          }
+          
+          td.e-chart-row-cell.e-childborder {
+            border-bottom: $gantt-rowdd-topbottom-border;
+            border-top: $gantt-rowdd-topbottom-border;
+            box-shadow: $gantt-rowdd-boxshadow;
+          }
+        }
+
+        .e-nonworking-day-container {
+          position: absolute;
+          height: 100%;
+        }
+
+        .e-event-markers-container {
+          position: absolute;
+          height: 100%;
+        }
+
+        .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:last-child thead tr td {
+        border-bottom: $gantt-event-markers-border-right; /* stylelint-disable-line declaration-no-important */
+      }
+      .e-timeline-header-table-container:last-child thead tr th {
+        border-bottom: $gantt-event-markers-border-right; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-timeline-header-table-container thead tr th {
+        border-left: 0;
+      }
+
+      .e-timeline-header-table-container thead tr td {
+        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;
+        display: block;
+      }
+
+      .e-timeline-header-table-body {
+        border-collapse: collapse;
+        box-sizing: border-box;
+        transform: scale(1);
+        white-space: nowrap;
+        display: block;
+      }
+
+      .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;
+        }
+
+        @if ($theme-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'fluent2-dark') {
+          .e-gantt-top-cell-text {
+            padding-left: 8px;
+            text-align: left;
+          }
+        }
+        @else {
+          .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: 0;
+      }
+
+      .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;
+        }
+        display: table-row;
+      }
+
+      .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-taskbar-main-container.e-gantt-multi-taskbar:hover {
+        z-index: 4;
+      }
+
+      .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%;
+        height: 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;
+        height: 100%;
+      }
+
+      .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-gantt-parent-milestone {
+        position: absolute;
+        transform: rotate(45deg);
+      }
+      .e-gantt-milestone{
+        @if $skin-name =='Material3'{
+          border: 1px;
+          border-style: solid;
+        }
+        position: absolute;
+        transform: rotate(45deg);
+      }
+
+      .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 {
+          @if $skin-name =='Material3'{
+            border-color: $gantt-split-container-line-border-color;
+          }
+          @else{
+            border-color: inherit;
+          }
+        }
+        @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
+          border-top-style: dashed;
+        }
+        @else{
+          border-top-style: dotted;
+        }
+        border-top-width: 2px;
+        height: 0;
+        left: 2px;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        width: calc(100% - 5px);
+      }
+
+      .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;
+        border-style: solid;
+        height: 100%;
+      }
+
+      .e-chart-scroll-container,
+      .e-chart-rows-container {
+        user-select: none;
+      }
+
+      .e-chart-scroll-container {
+        position: relative;
+        height: 100%;
+      }
+
+      .e-chart-rows-container {
+        line-height: initial;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .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 {
+        @include inner-cell-styles(16px,16px,14px);
+      }
+
+      .e-innerHTML1 {
+        @include inner-cell-styles(16px,16px,30px);
+      }
+
+      .e-innerHTML2 {
+        @include inner-cell-styles(16px,16px,60px);
+      }
+
+      .e-timelineHeader {
+        @include inner-cell-styles(16px,82px,20px);
+      }
+
+      .e-maskcell01 {
+        @include mask-cell-styles(12px, 88px, 14px, 0);
+      }
+
+      .e-maskcell02 {
+        @include border-styles(0, 18px, 410px);
+      }
+
+      .e-maskcell03 {
+        @include mask-cell-styles(12px, 88px, 14px, 0);
+      }
+
+      .e-maskcell04 {
+        @include border-styles(0, 18px, 208px);
+      }
+
+      .e-maskcell05 {
+        @include mask-cell-styles(12px, 108px, 64px, 0);
+      }
+
+      .e-maskcell06 {
+        @include mask-cell-styles(18px, 195px, 192px, 0);
+      }
+
+      .e-maskcell07 {
+        @include mask-cell-styles(18px, 156px, 388px, 0);
+      }
+
+      .e-taskbar-left-resizer,
+      .e-taskbar-right-resizer {
+        @include resizer-styles(inline-block,absolute,0,10px,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;
+        }
+      }
+      @if ($theme-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'fluent2-dark') {
+        .e-baseline-bar {
+          border-radius: $gantt-baseline-bar-border-radius;
+        }
+      }
+      @else {
+        .e-baseline-bar {
+          border-radius: $gantt-baseline-bar-border-radius;
+        }
+      }
+
+      .e-baseline-bar {
+        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;
+        transform: rotate(45deg);
+        @if $skin-name =='Material3'{
+          border: 2px;
+          border-color: $gantt-baseline-color;
+          border-style: solid;
+        }
+      }
+
+      .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-label-inner-div {
+        align-content: center;
+        height: 100%;
+      }
+
+      .e-task-table {
+        overflow: hidden;
+        border-collapse: separate;
+        position: absolute;
+      }
+
+      .e-left-resize-gripper,
+      .e-right-resize-gripper {
+        align-items: center;
+        cursor: ew-resize;
+        display: inline-flex;
+      }
+
+      .e-holiday {
+        display: inline-block;
+        position: absolute;
+        height: 100%;
+        .e-span {
+          position: absolute;
+          transform: rotate(-90deg);
+          white-space: nowrap;
+          width: 0;
+          top: calc(100% - 50%);
+        }
+      }
+
+      .e-weekend {
+        display: inline-block;
+        position: absolute;
+        z-index: 0;
+        height: 100%;
+      }
+
+      .e-rangecontainer {
+        position: absolute;
+        
+        .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: 4;
+        height: 100%;
+        .e-span-label {
+          border-radius: $gantt-label-border-radius;
+          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;
+        pointer-events: stroke;
+      }
+
+      .e-connector-line-z-index {
+        z-index: 1;
+      }
+
+      .e-connector-line-hover,
+      .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: $gantt-manual-parent-taskbar-border-radius;
+        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: $gantt-manual-parent-taskbar-border-radius;
+        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;
+      }
+    }
+  }
+  
+  .sf-gantt.e-gantt {
+    .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
+      position: relative;
+      left: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+  
+    .e-grid .e-row .e-icon-rowdragicon::before {
+      text-indent: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+  
+    .e-grid .e-icon-rowdragicon {
+      text-align: center !important; /* stylelint-disable-line declaration-no-important */
+      text-indent: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-gantt-dialog .e-tab .e-tab-header {
+    padding-left: $gantt-dialog-tab-padding-left;
+    @if $skin-name =='fluent2' or $skin-name == 'bootstrap5.3' {
+      border-bottom: 1px solid $gantt-header-border-color; /* stylelint-disable-line declaration-no-important */
+    }
+
+    @if ($skin-name == 'FluentUI'){
+      .e-indicator {
+        display: block;
+        bottom: 1px;
+        height: 3px;
+      }
+    }
+    @else{
+      .e-indicator {
+        @if $skin-name !='bootstrap5.3'{
+          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 .e-edit-form-column .error-message .e-error {
+    margin-bottom: 0;
+  }
+  
+  .e-gantt-dialog .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    top: -8px;
+  }
+  .e-gantt-dialog .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-bottom {
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+  }
+  .e-gantt-dialog {
+    border: 0;
+    
+    .e-gridform .e-table {
+      border-spacing: 0;
+    }
+
+    .e-item {
+      height: 100%;
+    }
+
+    .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:not(:has(.e-richtexteditor)) {
+      height: $gantt-dialog-general-height;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    .e-edit-form-row .e-richtexteditor {
+      @if ($theme-name == 'fluent2-highcontrast') {
+        margin-top: 0;
+      }
+    }
+
+    .e-edit-form-row .e-grid {
+      @if ($theme-name == 'fluent2-highcontrast') {
+        bottom: 5px;
+      }
+    }
+
+    .e-edit-form-column:nth-child(odd) {
+      @include float-styles(left, $gantt-dialog-edit-form-odd-padding,50%);
+    }
+
+    .e-edit-form-column:nth-child(even) {
+      @include float-styles(left, $gantt-dialog-edit-form-even-padding,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 auto;
+      @if ($theme-name == 'fluent2-highcontrast') {
+        bottom: 5px;
+        margin-top: 5px;
+      }
+    }
+
+    .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: auto;
+    }
+
+    > .e-dlg-content {
+      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark'{
+        height: 298px;
+      }
+      @if $skin-name == 'fluent2' {
+        border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
+      }
+      @if $skin-name =='bootstrap5.3'{
+        padding-top: 10px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
+    .e-dlg-header {
+      line-height: 30px;
+    }
+
+    .e-dlg-header-content {
+      @if $skin-name !='bootstrap5.3'{
+        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;
+      
+      .e-btn.e-dlg-closeicon-btn {
+        // left: -11px;
+        top: $gantt-dialog-close-button-top;
+      }
+      
+      @if ($skin-name == 'bootstrap-dark'){
+        .e-btn.e-dlg-closeicon-btn {
+          @include border-styles(50%, auto !important, auto);
+          box-shadow: none;
+        }
+      }
+      @else{
+        .e-btn.e-dlg-closeicon-btn {
+          @include border-styles(50%, auto !important, auto);
+        }
+      }
+    }
+  }
+
+  .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-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) {
+        @include float-styles(none, $gantt-dialog-edit-form-odd-padding,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-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,
+    .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 {
+      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px,0 8px 0 0);
+    }
+
+    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
+      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px,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-gantt-chart-resize-indicator{
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+  }
+  .e-template-padding {
+    padding: 2px;
+  }
+}