javascriptgantt 1.0.0 → 1.2.0

package/src/gantt.css

@@ -1,1157 +1,1157 @@
-:root {
-  /* -------- Background Colors Start ----------- */
-  --body-background: #fff;
-  --header-background: #fafafa;
-  --header-cell-background: #fafafa;
-  --timeline-cell-background: #f8f8f8;
-  --timeline-scale-background: #fafafa;
-  --resizer-background: #cecece;
-  --grid-resize-area-background: #a2a2a24f;
-  --row-item-background: #fff;
-  --row-item-hover-background: #d5eaff;
-  --weekend-cell-background: #ebebeb;
-  --selected-background: #d5eaff;
-  --marker-background: #4ca0ff80;
-  --marker-hover-background: #4ca0fff2;
-  --toastr-background: #aaaaaa;
-  --scroll-background: #f5f7fa;
-
-  /* lightbox backgrounds  */
-  --lightbox-background: #fff;
-  --textarea-background: #fff;
-
-  /* tooltip background */
-  --tooltip-background: #fff;
-
-  /* taskbar background */
-  --taskbar-background: #7fbbfff2;
-  --taskbar-child-background: #56a4fdf2;
-  --task-area-background: #0094ff4d;
-  --task-progress-background: #0094ff4d;
-  --child-task-progress-background: #298dfff2;
-
-  /* milestone content */
-  --milestone-content-background: #e84855;
-
-  /* backdrop background */
-  --backdrop-background: #0000004d;
-  --loder-backdrop-background: #000000cc;
-
-  /* btn background  */
-  --btn-primary-background: #0094ff;
-  --btn-normal-background: #fff;
-  --btn-danger-background: #c11d1d;
-
-  /* link backgrounds */
-  --link-background: #ffa011;
-  --link-control-background: #f0f0f0;
-  --link-control-hover-background: #fff;
-  --selected-link-control-background: #ffa011;
-  /* -------- Background Colors End ----------- */
-
-  /* -------- Text Colors Start ----------- */
-  --primary-color: #1d273c;
-  --marker-color: #fff;
-  --tooltip-color: #454545;
-  --task-content-color: #fff;
-  --milestone-content-color: #333232;
-
-  /* btn colors  */
-  --btn-primary-color: #fff;
-  --btn-normal-color: #000;
-  --btn-danger-color: #c11d1d;
-
-  /* loader color  */
-  --loader-color: #d1ebfa;
-  --loader-after-color: #0093ff;
-
-  /* toastr color  */
-  --toastr-color: #fff;
-  --toastr-p-color: #fff;
-  /* -------- Text Colors End ----------- */
-
-  /* -------- Border Colors Start ----------- */
-  --primary-border: #dddddd;
-
-  /* taskbar border  */
-  --taskbar-border: #4e89cdf2;
-  --task-area-border: #0094ff;
-  --milestone-content-border: #e84855;
-
-  /* lightbox textarea  */
-  --lightbox-border: #cecece;
-
-  /* link border  */
-  --link-border: #ffa011;
-  --link-control-border: #929292;
-}
-
-.js-gantt-layout * {
-  box-sizing: border-box;
-  color: var(--primary-color);
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer */
-  user-select: none;
-}
-
-.js-gantt-d-flex {
-  display: flex !important;
-}
-
-.js-gantt-d-none {
-  display: none !important;
-}
-
-.js-gantt-d-block {
-  display: block !important;
-}
-
-.js-gantt-border-left-none {
-  border-left: none !important;
-}
-
-.js-gantt-layout {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: var(--body-background);
-  border: 1px solid var(--primary-border);
-}
-
-.sidebar-head-cell-container,
-.right-sidebar-head-cell-container {
-  height: 60px;
-  border-bottom: 1px solid var(--primary-border);
-  background-color: var(--header-background);
-  align-items: center;
-  position: relative;
-  width: 100%;
-  min-width: 100%;
-  position: sticky;
-  top: 0;
-  white-space: nowrap;
-  z-index: 1010;
-}
-
-.sidebar-head-cell-container .head-cell,
-.right-sidebar-head-cell-container .right-head-cell {
-  text-align: center;
-  width: 80px;
-  padding: 0;
-  display: inline-block;
-  border-right: 1px solid var(--primary-border);
-  background-color: var(--header-cell-background);
-  height: 100%;
-  line-height: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
-}
-
-.js-gantt-calendar-cell {
-  text-align: center;
-  position: absolute;
-  border-right: 1px solid var(--primary-border);
-}
-
-.js-gantt-scale-cell {
-  position: absolute;
-  border-right: 1px solid var(--primary-border);
-  text-align: center;
-}
-
-.js-gantt-scale-row {
-  position: relative;
-  height: 29px;
-  background-color: var(--timeline-scale-background);
-  line-height: inherit;
-  width: 100%;
-}
-
-.js-gantt-scale-row:not(:nth-child(1)) {
-  border-top: 1px solid var(--primary-border);
-}
-
-.js-gantt-timeline-cell .js-gantt-scale {
-  overflow-x: hidden;
-  overflow-y: hidden;
-  position: sticky;
-  top: 0;
-  border-bottom: 1px solid var(--primary-border);
-  z-index: 1010;
-}
-
-.js-gantt-row-item {
-  align-items: center;
-  height: 50px;
-  line-height: inherit;
-  border-bottom: 1px solid var(--primary-border);
-}
-
-.js-gantt-cell-data {
-  white-space: nowrap;
-  border-right: 1px solid transparent;
-}
-
-.js-gantt-left-cell,
-.js-gantt-right-sidebar-cell {
-  height: 100%;
-}
-
-.js-gantt-left-cell,
-.js-gantt-right-sidebar-cell {
-  border-right: 1px solid var(--primary-border);
-  overflow: auto;
-  position: relative;
-  overflow-x: hidden;
-}
-
-.js-gantt-left-cell,
-.js-gantt-right-sidebar-cell,
-.js-gantt-timeline-cell {
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: none;
-  /* Internet Explorer */
-  -ms-overflow-style: none;
-}
-
-/* WebKit (Safari/Chrome) */
-.js-gantt-left-cell::-webkit-scrollbar,
-.js-gantt-right-sidebar-cell::-webkit-scrollbar,
-.js-gantt-timeline-cell::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.js-gantt-task-row {
-  height: 50px;
-  position: relative;
-  white-space: nowrap;
-  border-bottom: 1px solid var(--primary-border);
-}
-
-.js-gantt-task-cell {
-  width: 80px;
-  height: 100%;
-  position: absolute;
-  background-color: var(--timeline-cell-background);
-  border-right: 1px solid var(--primary-border);
-  /* border-left: 1px solid #ebebeb; */
-}
-
-.js-gantt-weekday-cell {
-  border-left: none;
-}
-
-.js-gantt-indent {
-  width: 20px;
-  height: inherit;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.js-gantt-timeline-cell {
-  height: 100%;
-  overflow: auto;
-}
-
-.sidebar-head-cell-container .js-gantt-col-resizer-wrap,
-.right-sidebar-head-cell-container .js-gantt-col-resizer-wrap {
-  cursor: col-resize;
-  position: absolute;
-  width: 13px;
-  margin-left: -7px;
-  top: 0px;
-  height: 60px;
-}
-
-.js-gantt-col-resizer-wrap .js-gantt-col-resizer {
-  background-color: var(--resizer-background);
-  height: 100%;
-  width: 1px;
-  margin: 0 auto;
-}
-
-.js-gantt-grid-resize-area {
-  height: 100%;
-  background-color: var(--grid-resize-area-background);
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  border-right: 1px solid var(--primary-border);
-  z-index: 1060;
-}
-
-.js-gantt-layout .js-gantt-left-layout-resizer-wrap,
-.js-gantt-layout .js-gantt-timeline-resizer-wrap {
-  cursor: e-resize;
-  position: absolute;
-  width: 13px;
-  margin-left: -7px;
-  top: 0px;
-  height: 100%;
-  z-index: 1060;
-}
-
-.js-gantt-left-layout-resizer-wrap .js-gantt-left-layout-resizer,
-.js-gantt-timeline-resizer-wrap .js-gantt-timeline-resizer {
-  background-color: var(--resizer-background);
-  height: 100%;
-  width: 1px;
-  margin: 0 auto;
-}
-
-.js-gantt-left-layout-resizer-wrap .js-gantt-left-layout-resizer.resizing,
-.js-gantt-timeline-resizer-wrap .js-gantt-timeline-resizer.resizing {
-  --resizer-background: #218eed;
-}
-
-.js-gantt-grid-data {
-  width: 100%;
-  min-width: 100%;
-}
-
-.js-gantt-grid-data .js-gantt-row-item {
-  transition: background-color 0.2s ease-in-out;
-}
-
-.js-gantt-grid-data .js-gantt-row-item {
-  background-color: var(--row-item-background);
-}
-
-.js-gantt-grid-data .js-gantt-row-item:hover {
-  cursor: pointer;
-  background-color: var(--row-item-hover-background);
-}
-
-.js-gantt-weekend-cell {
-  background-color: var(--weekend-cell-background);
-  /* border-left: 1px solid #ebebeb; */
-}
-
-/* .js-gantt-selected {
-  background-color: var(--selected-background);
-} */
-
-.js-gantt-selected > div {
-  background-color: var(--selected-background);
-}
-
-.js-gantt-timeline-data {
-  position: relative;
-  overflow: hidden;
-}
-
-.js-gantt-marker-today,
-.js-gantt-marker-area .js-gantt-marker {
-  height: 100%;
-  width: 2px;
-  top: 0;
-  position: absolute;
-  text-align: center;
-  background-color: var(--marker-background);
-  box-sizing: border-box;
-  z-index: 1009;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.js-gantt-marker-today:hover {
-  background-color: var(--marker-hover-background);
-  cursor: default;
-}
-
-.js-gantt-marker-today-text {
-  padding: 5px;
-  background: inherit;
-  color: #fff;
-  position: absolute;
-  font-size: 12px;
-  line-height: 12px;
-  opacity: 0.8;
-}
-
-.js-gantt-tooltip {
-  padding: 10px;
-  position: fixed; /* previous value :- absolute */
-  z-index: 1080;
-  white-space: nowrap;
-  background-color: var(--tooltip-background);
-  font-size: 8pt;
-  color: var(--tooltip-color);
-  border-color: #b3b3b3;
-  line-height: 120%;
-  box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
-  max-width: calc(100vw - 30px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.js-gantt-tooltip * {
-  color: var(--tooltip-color);
-}
-
-.js-gantt-bars-area {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.js-gantt-bar-task {
-  position: absolute;
-  z-index: 1007;
-  height: 40px;
-  line-height: inherit;
-  background-color: var(--taskbar-child-background);
-  border: 1px solid var(--taskbar-border);
-  border-radius: 3px;
-  text-align: center;
-}
-
-.js-gantt-bar-task.js-gantt-bar-parent-task {
-  height: 40px;
-  line-height: inherit;
-  background-color: var(--taskbar-background);
-  border: 1px solid var(--taskbar-border);
-}
-.js-gantt-bar-task-content {
-  height: 100%;
-  width: 100%;
-  line-height: inherit;
-  position: absolute;
-  top: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--task-content-color);
-  cursor: pointer;
-}
-
-.js-gantt-bar-task:hover .js-gantt-task-drag-left,
-.js-gantt-bar-task:hover .js-gantt-task-drag-right {
-  display: block;
-}
-
-.js-gantt-task-drag-left,
-.js-gantt-task-drag-right {
-  position: absolute;
-  height: 100%;
-  width: 8px;
-  z-index: 1008;
-  cursor: w-resize;
-  background-color: transparent;
-  display: none;
-}
-
-.js-gantt-task-drag-left {
-  left: -7px;
-}
-
-.js-gantt-task-drag-right {
-  right: -7px;
-}
-
-.js-gantt-cell {
-  padding: 0 6px;
-  overflow: hidden;
-  white-space: nowrap;
-  flex-grow: 0;
-  flex-shrink: 0;
-  height: inherit;
-  box-sizing: border-box;
-}
-
-.js-gantt-lightbox {
-  background: var(--lightbox-background);
-  color: var(--primary-color);
-  padding: 10px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1070;
-  border-radius: 4px;
-  min-width: 400px;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
-
-.js-gantt-lightbox-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: var(--backdrop-background);
-  width: 100vw;
-  height: 100vh;
-  z-index: 1060;
-}
-
-.js-gantt-lightbox .js-gantt-task-title {
-  margin-bottom: 5px;
-}
-
-.js-gantt-lightbox span,
-.js-gantt-lightbox p {
-  color: var(--primary-color);
-}
-
-.js-gantt-lightbox textarea {
-  color: var(--primary-color);
-  border: 1px solid var(--primary-border);
-  background-color: var(--textarea-background);
-  border-radius: 4px;
-  margin: 5px 0;
-  padding: 5px;
-  resize: none;
-  width: 100%;
-}
-
-.js-gantt-lightbox .lightbox-footer button {
-  color: var(--btn-primary-color);
-  padding: 8px 15px;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.js-gantt-lightbox .lightbox-footer button[role="save"] {
-  background-color: var(--btn-primary-background);
-  margin-right: 10px;
-}
-.js-gantt-lightbox .lightbox-footer button[role="cancel"] {
-  background-color: var(--btn-normal-background);
-  color: var(--btn-normal-color);
-  border: 1px solid var(--primary-border);
-}
-.js-gantt-lightbox .lightbox-footer button[role="delete"] {
-  background-color: var(--btn-danger-background);
-  float: right;
-}
-
-.js-gantt-fullScreen {
-  height: 100vh !important;
-  width: 100vw !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.task-dragging {
-  opacity: 0.5;
-  z-index: 9999;
-}
-
-.js-gantt-tree-icon {
-  cursor: pointer;
-  width: 20px;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.js-gantt-tree-close {
-  background-image: url('data:image/svg+xml,<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.2947 0.219725C1.07551 0.00293446 0.750024 -0.0567913 0.466392 0.0555267C0.18335 0.174359 0 0.450875 0 0.758994L0 9.24099C0 9.54731 0.182767 9.82382 0.466392 9.94093C0.750024 10.0604 1.07551 9.99523 1.2947 9.77674L5.53596 5.53548C5.82974 5.2381 5.82974 4.75856 5.53596 4.46118L1.2947 0.219725Z" fill="%23A2A4AB"/></svg>');
-}
-
-.js-gantt-tree-open {
-  background-image: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6584 1.41653C10.8752 1.19733 10.935 0.871851 10.8226 0.588218C10.7038 0.305177 10.4273 0.121826 10.1192 0.121826L1.63719 0.121826C1.33087 0.121826 1.05435 0.304593 0.937241 0.588218C0.817806 0.871851 0.882942 1.19734 1.10144 1.41653L5.34269 5.65779C5.64007 5.95157 6.11962 5.95157 6.417 5.65779L10.6584 1.41653Z" fill="%23A2A4AB"/></svg>');
-}
-
-/* custom scroller  */
-#js-gantt-ver-scroll-cell {
-  height: 100%;
-  width: 19px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  background-color: var(--scroll-background);
-  position: relative;
-  left: 0;
-  right: 0;
-}
-
-#js-gantt-hor-scroll-cell {
-  width: 100%;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  height: 1px;
-  background-color: var(--scroll-background);
-}
-
-.js-gantt-fullScreen #js-gantt-hor-scroll-cell {
-  margin-top: -17px;
-}
-
-.js-gantt-hor-scroll {
-  width: 100%;
-  background-color: transparent;
-  height: 19px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  position: absolute;
-  left: 0;
-  z-index: 1;
-}
-
-.js-gantt-hor-scroll > div {
-  height: 1px;
-}
-
-.js-gantt-ver-scroll {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: absolute;
-}
-
-.js-gantt-blank {
-  width: 20px;
-  height: inherit;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.js-gantt-marker-area {
-  position: absolute;
-  height: 100%;
-  top: 0;
-}
-
-.js-gantt-marker-area .js-gantt-marker .js-gantt-marker-content {
-  padding: 5px;
-  background: inherit;
-  color: var(--marker-color);
-  position: absolute;
-  font-size: 12px;
-  line-height: 12px;
-  opacity: 0.8;
-}
-
-.js-gantt-marker-area .js-gantt-marker:hover {
-  background-color: var(--marker-hover-background);
-}
-
-.js-gantt-selected-task-bar {
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-}
-
-.js-gantt-bar-milestone.js-gantt-selected-task-bar {
-  box-shadow: none;
-}
-
-.js-gantt-bar-milestone.js-gantt-selected-task-bar .js-gantt-bar-task-content {
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-}
-
-/* arrow links to connect tasks  */
-.js-gantt-links-area {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-}
-
-.js-gantt-task-link {
-  position: absolute;
-  cursor: pointer;
-  z-index: 1006;
-}
-
-.js-gantt-link-line {
-  position: absolute;
-  background-color: var(--link-background);
-  transition: box-shadow 0.2s ease-in-out;
-}
-
-.js-gantt-task-link:not([link-type="2"], [link-type="3"])
-  .js-gantt-link-line:last-child:after {
-  content: " ";
-  height: 0;
-  position: absolute;
-  width: 0;
-  top: -6px;
-  left: calc(100% - 6px);
-  border: 7px solid transparent;
-  border-left-color: var(--link-border);
-}
-
-.js-gantt-task-link[link-type="2"] .js-gantt-link-line:last-child:before,
-.js-gantt-task-link[link-type="3"] .js-gantt-link-line:last-child:before {
-  content: " ";
-  height: 0;
-  position: absolute;
-  width: 0;
-  top: -6px;
-  left: -7px;
-  border: 7px solid transparent;
-  border-right-color: var(--link-border);
-}
-
-.js-gantt-hor-link-line {
-  height: 2px;
-}
-
-.js-gantt-ver-link-line {
-  width: 2px;
-}
-
-.ver-inner-line {
-  height: 100%;
-  width: 10px;
-  margin-left: -4px;
-}
-
-.hor-inner-line {
-  height: 10px;
-  width: 100%;
-  margin-top: -4px;
-}
-
-.js-gantt-task-link:hover .js-gantt-link-line {
-  box-shadow: 0 0 5px 0 #ffa011;
-}
-
-.js-gantt-link-control div {
-  display: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  position: relative;
-  top: 50%;
-  margin-top: -7.5px;
-  vertical-align: middle;
-  border: 1px solid var(--link-control-border);
-  border-radius: 6.5px;
-  height: 13px;
-  width: 13px;
-  background-color: var(--link-control-background);
-}
-
-.js-gantt-link-control {
-  width: 20px;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  line-height: inherit;
-  z-index: 1007;
-}
-
-.js-gantt-link-control.js-gantt-right-point div {
-  margin-left: 7px;
-}
-
-.js-gantt-left-point {
-  left: -20px;
-}
-.js-gantt-right-point {
-  right: -20px;
-}
-
-.js-gantt-bar-task:hover .js-gantt-link-control div,
-.js-gantt-bar-milestone:hover .js-gantt-link-control div {
-  display: block;
-}
-
-.js-gantt-bar-task.hovered .js-gantt-link-control div,
-.js-gantt-bar-milestone.hovered .js-gantt-link-control div {
-  display: block;
-}
-
-.js-gantt-link-point:hover {
-  background-color: var(--link-control-hover-background);
-}
-
-.js-gantt-link-direction {
-  height: 0;
-  border: 0 none var(--link-border);
-  border-bottom-style: dashed;
-  border-bottom-width: 2px;
-  transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  z-index: 1008;
-  margin-left: 1px;
-  position: absolute;
-}
-
-.selected-target {
-  background-color: var(--selected-link-control-background) !important;
-}
-
-/* zt Gantt loader  */
-.js-gantt-loader {
-  width: 55px;
-  height: 55px;
-  perspective: 1000px;
-  border-radius: 50%;
-  color: var(--loader-color);
-  z-index: 1100;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: rotateZ(45deg) translate(-50%, -50%);
-}
-.js-gantt-loader:before,
-.js-gantt-loader:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  transform: rotateX(70deg);
-  animation: 1s spin linear infinite;
-}
-.js-gantt-loader:after {
-  color: var(--loader-after-color);
-  transform: rotateY(70deg);
-  animation-delay: 0.4s;
-}
-
-.js-gantt-loader-drop {
-  background-color: var(--loder-backdrop-background);
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 1099;
-}
-
-@keyframes rotate {
-  0% {
-    transform: translate(-50%, -50%) rotateZ(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotateZ(360deg);
-  }
-}
-
-@keyframes rotateccw {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(-360deg);
-  }
-}
-
-@keyframes spin {
-  0%,
-  100% {
-    box-shadow: 0.2em 0px 0 0px currentcolor;
-  }
-  12% {
-    box-shadow: 0.2em 0.2em 0 0 currentcolor;
-  }
-  25% {
-    box-shadow: 0 0.2em 0 0px currentcolor;
-  }
-  37% {
-    box-shadow: -0.2em 0.2em 0 0 currentcolor;
-  }
-  50% {
-    box-shadow: -0.2em 0 0 0 currentcolor;
-  }
-  62% {
-    box-shadow: -0.2em -0.2em 0 0 currentcolor;
-  }
-  75% {
-    box-shadow: 0px -0.2em 0 0 currentcolor;
-  }
-  87% {
-    box-shadow: 0.2em -0.2em 0 0 currentcolor;
-  }
-}
-
-.task-area {
-  position: absolute;
-  border: 1px solid var(--task-area-border);
-  background-color: var(--task-area-background);
-  z-index: 1008;
-}
-
-.js-gantt-task-progress-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  line-height: inherit;
-  overflow: hidden;
-  border-radius: 3px;
-}
-
-.js-gantt-task-progress {
-  height: 100%;
-}
-
-.js-gantt-task-progress-drag {
-  position: absolute;
-  cursor: ew-resize;
-  display: none;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  width: 16px;
-  height: 10px;
-  bottom: -4px;
-  margin-left: -8px;
-  z-index: 1;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkY3Rjk0RUVDMkYzMTFFMkI1OThEQTA3ODU0OTkzMEEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkY3Rjk0RUZDMkYzMTFFMkI1OThEQTA3ODU0OTkzMEEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjdGOTRFQ0MyRjMxMUUyQjU5OERBMDc4NTQ5OTMwQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjdGOTRFREMyRjMxMUUyQjU5OERBMDc4NTQ5OTMwQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobPBzIAAADkSURBVHjaYpk2bRoDDsAExL1QdjEQ/8OmiAWHZk4gXqymqhQM4ty6fU8OSMUA8XdiDBAB4k0a6iqWRga6EKcwMQXduHlnL5DpB8Rv0J2JDFSA+JiOtgZcMwiA2CAxkBxUDVYDLEAKgIpV9XQ0MZwFEgPJAZnHoWpRDAgC4n2W5saiQKfjClQGkBxQDciL+6B6wAbkA/EqJwdrTkUFOQZCAKQGpBbIXA3SCzJggo+XK7OEuBgDsQCkFqgHrBfsBT5eHgZSAUwP2IBfv36TbABMDygdtK1Zv6UESLORaAbIhG6AAAMAKN8wE24DXWcAAAAASUVORK5CYII=");
-}
-
-.js-gantt-bar-task.js-gantt-bar-parent-task .js-gantt-task-progress {
-  background-color: var(--task-progress-background);
-}
-
-.js-gantt-bar-task.child-task .js-gantt-task-progress {
-  background-color: var(--child-task-progress-background);
-}
-
-.js-gantt-bar-task:hover .js-gantt-task-progress-drag {
-  display: block;
-}
-
-/* milestone css  */
-.js-gantt-bar-milestone {
-  position: absolute;
-  z-index: 1007;
-  height: 40px;
-  line-height: inherit;
-  background-color: transparent !important;
-  border: 0px solid transparent !important;
-  border-radius: 3px;
-  text-align: center;
-  margin-left: -10px;
-}
-
-.js-gantt-side-content {
-  height: 100%;
-  line-height: inherit;
-  position: absolute;
-  top: 0;
-  white-space: nowrap;
-  left: calc(100% + 22px);
-  color: var(--milestone-content-color);
-  cursor: pointer;
-}
-
-.js-gantt-bar-milestone .js-gantt-bar-task-content {
-  background-color: var(--milestone-content-background);
-  border: 1px solid var(--milestone-content-border);
-  border-radius: inherit;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  transform: rotate(45deg);
-}
-
-.js-gantt-bar-milestone div {
-  visibility: visible;
-}
-
-/* toastr css start  */
-.js-gantt-toastr-area {
-  position: fixed;
-  z-index: 999999;
-  right: 5px;
-  top: 5px;
-}
-
-.js-gantt-toastr {
-  visibility: hidden;
-  min-width: 250px;
-  max-width: 350px;
-  background-color: #aaaaaa;
-  color: #fff;
-  border-radius: 3px;
-  padding: 16px;
-  margin: 5px;
-  font-size: 14px;
-  cursor: pointer;
-  opacity: 0.9;
-  transition: all 0.3s ease-in;
-}
-
-.js-gantt-toastr:hover {
-  opacity: 1;
-  -moz-box-shadow: 0 0 12px #000000;
-  -webkit-box-shadow: 0 0 12px #000000;
-  box-shadow: 0 0 12px #000000;
-}
-
-.js-gantt-toastr p {
-  color: #fff;
-  font-weight: 400;
-  margin: 0;
-}
-
-.js-gantt-toastr p:first-child {
-  font-weight: 800;
-}
-
-.js-gantt-toastr.js-gantt-toastr-success {
-  background-color: #51a351;
-}
-
-.js-gantt-toastr.js-gantt-toastr-error {
-  background-color: #bd362f;
-}
-
-.js-gantt-toastr.js-gantt-toastr-info {
-  background-color: #2f96b4;
-}
-
-.js-gantt-toastr.js-gantt-toastr-warning {
-  background-color: #f89406;
-}
-
-.js-gantt-toastr.js-gantt-toastr-show {
-  visibility: visible;
-  -webkit-animation: fadein 0.5s;
-  animation: fadein 0.5s;
-}
-
-.js-gantt-toastr.js-gantt-toastr-hide {
-  visibility: visible;
-  -webkit-animation: fadeout 0.5s;
-  animation: fadeout 0.5s;
-}
-
-@-webkit-keyframes fadein {
-  from {
-    margin-top: 0;
-    opacity: 0;
-  }
-  to {
-    margin-top: 5px;
-    opacity: 0.9;
-  }
-}
-
-@keyframes fadein {
-  from {
-    margin-top: 0;
-    opacity: 0;
-  }
-  to {
-    margin-top: 5px;
-    opacity: 0.9;
-  }
-}
-
-@-webkit-keyframes fadeout {
-  from {
-    margin-top: 5px;
-    opacity: 0.9;
-  }
-  to {
-    margin-top: 0;
-    opacity: 0;
-  }
-}
-
-@keyframes fadeout {
-  from {
-    margin-top: 5px;
-    opacity: 0.9;
-  }
-  to {
-    margin-top: 0;
-    opacity: 0;
-  }
-}
-/* toastr css end  */
-
-.js-gantt-task-color-picker {
-  visibility: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 50px;
-  margin-right: -50px;
-}
-
-.js-gantt-bar-task:hover .js-gantt-task-color-picker,
-.js-gantt-bar-task:hover .js-gantt-task-color-picker input {
-  visibility: visible;
-}
-
-.js-gantt-task-color-picker input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  visibility: hidden;
-  width: 25px;
-  height: 100%;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-}
-.js-gantt-task-color-picker input::-webkit-color-swatch {
-  border-radius: 2px;
-  border: none;
-}
-.js-gantt-task-color-picker input::-moz-color-swatch {
-  border-radius: 2px;
-  border: none;
-}
-
-.js-gantt-bar-milestone .js-gantt-task-color-picker {
-  left: 0;
-  margin-left: -50px;
-  margin-right: 0;
-}
-
-.js-gantt-bar-milestone .js-gantt-task-color-picker input {
-  margin-left: -25px;
-}
-
-.head-cell .js-gantt-sort {
-  position: absolute;
-  right: 5px;
-  top: 50%;
-  width: 7px;
-  height: 13px;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  transform: translateY(-50%);
-}
-
-.head-cell .js-gantt-sort.js-gantt-asc {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR4nGNgQAKGxib/GbABkIS7b8B/DAUwCRiGK0CXwFBAb1DfP/U/LszwHwi2X7qFgUEArBtdAVwCBmAKMCSQFSDzAWXXaOHsXeqkAAAAAElFTkSuQmCC);
-}
-
-.head-cell .js-gantt-sort.js-gantt-desc {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR42mNgQAL1/VP/M2ADIIntF2/9x1AAlrh0C47hCmA60DFYwX88gIFGwNDY5D8uDFbg7hvwHx2jmIBTAlkB0e4BAEjlaNtBWJPnAAAAAElFTkSuQmCC);
-}
-
-.js-gantt-inline-editor-wraper {
-  position: absolute;
-}
-
-.js-gantt-inline-editor-wraper > input,
-.js-gantt-inline-editor-wraper > select {
-  height: 100%;
-  width: 100%;
-}
-
-.drop-area {
-  position: absolute;
-  z-index: -1;
-  width: 100%;
-  border: 2px solid var(--task-area-border);
-  background: var(--task-area-background);
-  transition: all 0.2s ease;
-  opacity: 0;
-}
-
-.js-gantt-timeline-data:has(.task-dragging) .drop-area {
-  z-index: 101;
-  opacity: 1;
-}
+:root {
+  /* -------- Background Colors Start ----------- */
+  --body-background: #fff;
+  --header-background: #fafafa;
+  --header-cell-background: #fafafa;
+  --timeline-cell-background: #f8f8f8;
+  --timeline-scale-background: #fafafa;
+  --resizer-background: #cecece;
+  --grid-resize-area-background: #a2a2a24f;
+  --row-item-background: #fff;
+  --row-item-hover-background: #d5eaff;
+  --weekend-cell-background: #ebebeb;
+  --selected-background: #d5eaff;
+  --marker-background: #4ca0ff80;
+  --marker-hover-background: #4ca0fff2;
+  --toastr-background: #aaaaaa;
+  --scroll-background: #f5f7fa;
+
+  /* lightbox backgrounds  */
+  --lightbox-background: #fff;
+  --textarea-background: #fff;
+
+  /* tooltip background */
+  --tooltip-background: #fff;
+
+  /* taskbar background */
+  --taskbar-background: #7fbbfff2;
+  --taskbar-child-background: #56a4fdf2;
+  --task-area-background: #0094ff4d;
+  --task-progress-background: #0094ff4d;
+  --child-task-progress-background: #298dfff2;
+
+  /* milestone content */
+  --milestone-content-background: #e84855;
+
+  /* backdrop background */
+  --backdrop-background: #0000004d;
+  --loder-backdrop-background: #000000cc;
+
+  /* btn background  */
+  --btn-primary-background: #0094ff;
+  --btn-normal-background: #fff;
+  --btn-danger-background: #c11d1d;
+
+  /* link backgrounds */
+  --link-background: #ffa011;
+  --link-control-background: #f0f0f0;
+  --link-control-hover-background: #fff;
+  --selected-link-control-background: #ffa011;
+  /* -------- Background Colors End ----------- */
+
+  /* -------- Text Colors Start ----------- */
+  --primary-color: #1d273c;
+  --marker-color: #fff;
+  --tooltip-color: #454545;
+  --task-content-color: #fff;
+  --milestone-content-color: #333232;
+
+  /* btn colors  */
+  --btn-primary-color: #fff;
+  --btn-normal-color: #000;
+  --btn-danger-color: #c11d1d;
+
+  /* loader color  */
+  --loader-color: #d1ebfa;
+  --loader-after-color: #0093ff;
+
+  /* toastr color  */
+  --toastr-color: #fff;
+  --toastr-p-color: #fff;
+  /* -------- Text Colors End ----------- */
+
+  /* -------- Border Colors Start ----------- */
+  --primary-border: #dddddd;
+
+  /* taskbar border  */
+  --taskbar-border: #4e89cdf2;
+  --task-area-border: #0094ff;
+  --milestone-content-border: #e84855;
+
+  /* lightbox textarea  */
+  --lightbox-border: #cecece;
+
+  /* link border  */
+  --link-border: #ffa011;
+  --link-control-border: #929292;
+}
+
+.js-gantt-layout * {
+  box-sizing: border-box;
+  color: var(--primary-color);
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer */
+  user-select: none;
+}
+
+.js-gantt-d-flex {
+  display: flex !important;
+}
+
+.js-gantt-d-none {
+  display: none !important;
+}
+
+.js-gantt-d-block {
+  display: block !important;
+}
+
+.js-gantt-border-left-none {
+  border-left: none !important;
+}
+
+.js-gantt-layout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: var(--body-background);
+  border: 1px solid var(--primary-border);
+}
+
+.sidebar-head-cell-container,
+.right-sidebar-head-cell-container {
+  height: 60px;
+  border-bottom: 1px solid var(--primary-border);
+  background-color: var(--header-background);
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+  position: sticky;
+  top: 0;
+  white-space: nowrap;
+  z-index: 1010;
+}
+
+.sidebar-head-cell-container .head-cell,
+.right-sidebar-head-cell-container .right-head-cell {
+  text-align: center;
+  width: 80px;
+  padding: 0;
+  display: inline-block;
+  border-right: 1px solid var(--primary-border);
+  background-color: var(--header-cell-background);
+  height: 100%;
+  line-height: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+}
+
+.js-gantt-calendar-cell {
+  text-align: center;
+  position: absolute;
+  border-right: 1px solid var(--primary-border);
+}
+
+.js-gantt-scale-cell {
+  position: absolute;
+  border-right: 1px solid var(--primary-border);
+  text-align: center;
+}
+
+.js-gantt-scale-row {
+  position: relative;
+  height: 29px;
+  background-color: var(--timeline-scale-background);
+  line-height: inherit;
+  width: 100%;
+}
+
+.js-gantt-scale-row:not(:nth-child(1)) {
+  border-top: 1px solid var(--primary-border);
+}
+
+.js-gantt-timeline-cell .js-gantt-scale {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--primary-border);
+  z-index: 1010;
+}
+
+.js-gantt-row-item {
+  align-items: center;
+  height: 50px;
+  line-height: inherit;
+  border-bottom: 1px solid var(--primary-border);
+}
+
+.js-gantt-cell-data {
+  white-space: nowrap;
+  border-right: 1px solid transparent;
+}
+
+.js-gantt-left-cell,
+.js-gantt-right-sidebar-cell {
+  height: 100%;
+}
+
+.js-gantt-left-cell,
+.js-gantt-right-sidebar-cell {
+  border-right: 1px solid var(--primary-border);
+  overflow: auto;
+  position: relative;
+  overflow-x: hidden;
+}
+
+.js-gantt-left-cell,
+.js-gantt-right-sidebar-cell,
+.js-gantt-timeline-cell {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: none;
+  /* Internet Explorer */
+  -ms-overflow-style: none;
+}
+
+/* WebKit (Safari/Chrome) */
+.js-gantt-left-cell::-webkit-scrollbar,
+.js-gantt-right-sidebar-cell::-webkit-scrollbar,
+.js-gantt-timeline-cell::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.js-gantt-task-row {
+  height: 50px;
+  position: relative;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--primary-border);
+}
+
+.js-gantt-task-cell {
+  width: 80px;
+  height: 100%;
+  position: absolute;
+  background-color: var(--timeline-cell-background);
+  border-right: 1px solid var(--primary-border);
+  /* border-left: 1px solid #ebebeb; */
+}
+
+.js-gantt-weekday-cell {
+  border-left: none;
+}
+
+.js-gantt-indent {
+  width: 20px;
+  height: inherit;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.js-gantt-timeline-cell {
+  height: 100%;
+  overflow: auto;
+}
+
+.sidebar-head-cell-container .js-gantt-col-resizer-wrap,
+.right-sidebar-head-cell-container .js-gantt-col-resizer-wrap {
+  cursor: col-resize;
+  position: absolute;
+  width: 13px;
+  margin-left: -7px;
+  top: 0px;
+  height: 60px;
+}
+
+.js-gantt-col-resizer-wrap .js-gantt-col-resizer {
+  background-color: var(--resizer-background);
+  height: 100%;
+  width: 1px;
+  margin: 0 auto;
+}
+
+.js-gantt-grid-resize-area {
+  height: 100%;
+  background-color: var(--grid-resize-area-background);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  border-right: 1px solid var(--primary-border);
+  z-index: 1060;
+}
+
+.js-gantt-layout .js-gantt-left-layout-resizer-wrap,
+.js-gantt-layout .js-gantt-timeline-resizer-wrap {
+  cursor: e-resize;
+  position: absolute;
+  width: 13px;
+  margin-left: -7px;
+  top: 0px;
+  height: 100%;
+  z-index: 1060;
+}
+
+.js-gantt-left-layout-resizer-wrap .js-gantt-left-layout-resizer,
+.js-gantt-timeline-resizer-wrap .js-gantt-timeline-resizer {
+  background-color: var(--resizer-background);
+  height: 100%;
+  width: 1px;
+  margin: 0 auto;
+}
+
+.js-gantt-left-layout-resizer-wrap .js-gantt-left-layout-resizer.resizing,
+.js-gantt-timeline-resizer-wrap .js-gantt-timeline-resizer.resizing {
+  --resizer-background: #218eed;
+}
+
+.js-gantt-grid-data {
+  width: 100%;
+  min-width: 100%;
+}
+
+.js-gantt-grid-data .js-gantt-row-item {
+  transition: background-color 0.2s ease-in-out;
+}
+
+.js-gantt-grid-data .js-gantt-row-item {
+  background-color: var(--row-item-background);
+}
+
+.js-gantt-grid-data .js-gantt-row-item:hover {
+  cursor: pointer;
+  background-color: var(--row-item-hover-background);
+}
+
+.js-gantt-weekend-cell {
+  background-color: var(--weekend-cell-background);
+  /* border-left: 1px solid #ebebeb; */
+}
+
+/* .js-gantt-selected {
+  background-color: var(--selected-background);
+} */
+
+.js-gantt-selected > div {
+  background-color: var(--selected-background);
+}
+
+.js-gantt-timeline-data {
+  position: relative;
+  overflow: hidden;
+}
+
+.js-gantt-marker-today,
+.js-gantt-marker-area .js-gantt-marker {
+  height: 100%;
+  width: 2px;
+  top: 0;
+  position: absolute;
+  text-align: center;
+  background-color: var(--marker-background);
+  box-sizing: border-box;
+  z-index: 1009;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.js-gantt-marker-today:hover {
+  background-color: var(--marker-hover-background);
+  cursor: default;
+}
+
+.js-gantt-marker-today-text {
+  padding: 5px;
+  background: inherit;
+  color: #fff;
+  position: absolute;
+  font-size: 12px;
+  line-height: 12px;
+  opacity: 0.8;
+}
+
+.js-gantt-tooltip {
+  padding: 10px;
+  position: fixed; /* previous value :- absolute */
+  z-index: 1080;
+  white-space: nowrap;
+  background-color: var(--tooltip-background);
+  font-size: 8pt;
+  color: var(--tooltip-color);
+  border-color: #b3b3b3;
+  line-height: 120%;
+  box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
+  max-width: calc(100vw - 30px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.js-gantt-tooltip * {
+  color: var(--tooltip-color);
+}
+
+.js-gantt-bars-area {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.js-gantt-bar-task {
+  position: absolute;
+  z-index: 1007;
+  height: 40px;
+  line-height: inherit;
+  background-color: var(--taskbar-child-background);
+  border: 1px solid var(--taskbar-border);
+  border-radius: 3px;
+  text-align: center;
+}
+
+.js-gantt-bar-task.js-gantt-bar-parent-task {
+  height: 40px;
+  line-height: inherit;
+  background-color: var(--taskbar-background);
+  border: 1px solid var(--taskbar-border);
+}
+.js-gantt-bar-task-content {
+  height: 100%;
+  width: 100%;
+  line-height: inherit;
+  position: absolute;
+  top: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--task-content-color);
+  cursor: pointer;
+}
+
+.js-gantt-bar-task:hover .js-gantt-task-drag-left,
+.js-gantt-bar-task:hover .js-gantt-task-drag-right {
+  display: block;
+}
+
+.js-gantt-task-drag-left,
+.js-gantt-task-drag-right {
+  position: absolute;
+  height: 100%;
+  width: 8px;
+  z-index: 1008;
+  cursor: w-resize;
+  background-color: transparent;
+  display: none;
+}
+
+.js-gantt-task-drag-left {
+  left: -7px;
+}
+
+.js-gantt-task-drag-right {
+  right: -7px;
+}
+
+.js-gantt-cell {
+  padding: 0 6px;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: inherit;
+  box-sizing: border-box;
+}
+
+.js-gantt-lightbox {
+  background: var(--lightbox-background);
+  color: var(--primary-color);
+  padding: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1070;
+  border-radius: 4px;
+  min-width: 400px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+.js-gantt-lightbox-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: var(--backdrop-background);
+  width: 100vw;
+  height: 100vh;
+  z-index: 1060;
+}
+
+.js-gantt-lightbox .js-gantt-task-title {
+  margin-bottom: 5px;
+}
+
+.js-gantt-lightbox span,
+.js-gantt-lightbox p {
+  color: var(--primary-color);
+}
+
+.js-gantt-lightbox textarea {
+  color: var(--primary-color);
+  border: 1px solid var(--primary-border);
+  background-color: var(--textarea-background);
+  border-radius: 4px;
+  margin: 5px 0;
+  padding: 5px;
+  resize: none;
+  width: 100%;
+}
+
+.js-gantt-lightbox .lightbox-footer button {
+  color: var(--btn-primary-color);
+  padding: 8px 15px;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.js-gantt-lightbox .lightbox-footer button[role="save"] {
+  background-color: var(--btn-primary-background);
+  margin-right: 10px;
+}
+.js-gantt-lightbox .lightbox-footer button[role="cancel"] {
+  background-color: var(--btn-normal-background);
+  color: var(--btn-normal-color);
+  border: 1px solid var(--primary-border);
+}
+.js-gantt-lightbox .lightbox-footer button[role="delete"] {
+  background-color: var(--btn-danger-background);
+  float: right;
+}
+
+.js-gantt-fullScreen {
+  height: 100vh !important;
+  width: 100vw !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.task-dragging {
+  opacity: 0.5;
+  z-index: 9999;
+}
+
+.js-gantt-tree-icon {
+  cursor: pointer;
+  width: 20px;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.js-gantt-tree-close {
+  background-image: url('data:image/svg+xml,<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.2947 0.219725C1.07551 0.00293446 0.750024 -0.0567913 0.466392 0.0555267C0.18335 0.174359 0 0.450875 0 0.758994L0 9.24099C0 9.54731 0.182767 9.82382 0.466392 9.94093C0.750024 10.0604 1.07551 9.99523 1.2947 9.77674L5.53596 5.53548C5.82974 5.2381 5.82974 4.75856 5.53596 4.46118L1.2947 0.219725Z" fill="%23A2A4AB"/></svg>');
+}
+
+.js-gantt-tree-open {
+  background-image: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6584 1.41653C10.8752 1.19733 10.935 0.871851 10.8226 0.588218C10.7038 0.305177 10.4273 0.121826 10.1192 0.121826L1.63719 0.121826C1.33087 0.121826 1.05435 0.304593 0.937241 0.588218C0.817806 0.871851 0.882942 1.19734 1.10144 1.41653L5.34269 5.65779C5.64007 5.95157 6.11962 5.95157 6.417 5.65779L10.6584 1.41653Z" fill="%23A2A4AB"/></svg>');
+}
+
+/* custom scroller  */
+#js-gantt-ver-scroll-cell {
+  height: 100%;
+  width: 19px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  background-color: var(--scroll-background);
+  position: relative;
+  left: 0;
+  right: 0;
+}
+
+#js-gantt-hor-scroll-cell {
+  width: 100%;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  height: 1px;
+  background-color: var(--scroll-background);
+}
+
+.js-gantt-fullScreen #js-gantt-hor-scroll-cell {
+  margin-top: -17px;
+}
+
+.js-gantt-hor-scroll {
+  width: 100%;
+  background-color: transparent;
+  height: 19px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+
+.js-gantt-hor-scroll > div {
+  height: 1px;
+}
+
+.js-gantt-ver-scroll {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+}
+
+.js-gantt-blank {
+  width: 20px;
+  height: inherit;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.js-gantt-marker-area {
+  position: absolute;
+  height: 100%;
+  top: 0;
+}
+
+.js-gantt-marker-area .js-gantt-marker .js-gantt-marker-content {
+  padding: 5px;
+  background: inherit;
+  color: var(--marker-color);
+  position: absolute;
+  font-size: 12px;
+  line-height: 12px;
+  opacity: 0.8;
+}
+
+.js-gantt-marker-area .js-gantt-marker:hover {
+  background-color: var(--marker-hover-background);
+}
+
+.js-gantt-selected-task-bar {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+}
+
+.js-gantt-bar-milestone.js-gantt-selected-task-bar {
+  box-shadow: none;
+}
+
+.js-gantt-bar-milestone.js-gantt-selected-task-bar .js-gantt-bar-task-content {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+}
+
+/* arrow links to connect tasks  */
+.js-gantt-links-area {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.js-gantt-task-link {
+  position: absolute;
+  cursor: pointer;
+  z-index: 1006;
+}
+
+.js-gantt-link-line {
+  position: absolute;
+  background-color: var(--link-background);
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.js-gantt-task-link:not([link-type="2"], [link-type="3"])
+  .js-gantt-link-line:last-child:after {
+  content: " ";
+  height: 0;
+  position: absolute;
+  width: 0;
+  top: -6px;
+  left: calc(100% - 6px);
+  border: 7px solid transparent;
+  border-left-color: var(--link-border);
+}
+
+.js-gantt-task-link[link-type="2"] .js-gantt-link-line:last-child:before,
+.js-gantt-task-link[link-type="3"] .js-gantt-link-line:last-child:before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  width: 0;
+  top: -6px;
+  left: -7px;
+  border: 7px solid transparent;
+  border-right-color: var(--link-border);
+}
+
+.js-gantt-hor-link-line {
+  height: 2px;
+}
+
+.js-gantt-ver-link-line {
+  width: 2px;
+}
+
+.ver-inner-line {
+  height: 100%;
+  width: 10px;
+  margin-left: -4px;
+}
+
+.hor-inner-line {
+  height: 10px;
+  width: 100%;
+  margin-top: -4px;
+}
+
+.js-gantt-task-link:hover .js-gantt-link-line {
+  box-shadow: 0 0 5px 0 #ffa011;
+}
+
+.js-gantt-link-control div {
+  display: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  top: 50%;
+  margin-top: -7.5px;
+  vertical-align: middle;
+  border: 1px solid var(--link-control-border);
+  border-radius: 6.5px;
+  height: 13px;
+  width: 13px;
+  background-color: var(--link-control-background);
+}
+
+.js-gantt-link-control {
+  width: 20px;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  line-height: inherit;
+  z-index: 1007;
+}
+
+.js-gantt-link-control.js-gantt-right-point div {
+  margin-left: 7px;
+}
+
+.js-gantt-left-point {
+  left: -20px;
+}
+.js-gantt-right-point {
+  right: -20px;
+}
+
+.js-gantt-bar-task:hover .js-gantt-link-control div,
+.js-gantt-bar-milestone:hover .js-gantt-link-control div {
+  display: block;
+}
+
+.js-gantt-bar-task.hovered .js-gantt-link-control div,
+.js-gantt-bar-milestone.hovered .js-gantt-link-control div {
+  display: block;
+}
+
+.js-gantt-link-point:hover {
+  background-color: var(--link-control-hover-background);
+}
+
+.js-gantt-link-direction {
+  height: 0;
+  border: 0 none var(--link-border);
+  border-bottom-style: dashed;
+  border-bottom-width: 2px;
+  transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  z-index: 1008;
+  margin-left: 1px;
+  position: absolute;
+}
+
+.selected-target {
+  background-color: var(--selected-link-control-background) !important;
+}
+
+/* zt Gantt loader  */
+.js-gantt-loader {
+  width: 55px;
+  height: 55px;
+  perspective: 1000px;
+  border-radius: 50%;
+  color: var(--loader-color);
+  z-index: 1100;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: rotateZ(45deg) translate(-50%, -50%);
+}
+.js-gantt-loader:before,
+.js-gantt-loader:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s spin linear infinite;
+}
+.js-gantt-loader:after {
+  color: var(--loader-after-color);
+  transform: rotateY(70deg);
+  animation-delay: 0.4s;
+}
+
+.js-gantt-loader-drop {
+  background-color: var(--loder-backdrop-background);
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1099;
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+  0%,
+  100% {
+    box-shadow: 0.2em 0px 0 0px currentcolor;
+  }
+  12% {
+    box-shadow: 0.2em 0.2em 0 0 currentcolor;
+  }
+  25% {
+    box-shadow: 0 0.2em 0 0px currentcolor;
+  }
+  37% {
+    box-shadow: -0.2em 0.2em 0 0 currentcolor;
+  }
+  50% {
+    box-shadow: -0.2em 0 0 0 currentcolor;
+  }
+  62% {
+    box-shadow: -0.2em -0.2em 0 0 currentcolor;
+  }
+  75% {
+    box-shadow: 0px -0.2em 0 0 currentcolor;
+  }
+  87% {
+    box-shadow: 0.2em -0.2em 0 0 currentcolor;
+  }
+}
+
+.task-area {
+  position: absolute;
+  border: 1px solid var(--task-area-border);
+  background-color: var(--task-area-background);
+  z-index: 1008;
+}
+
+.js-gantt-task-progress-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  overflow: hidden;
+  border-radius: 3px;
+}
+
+.js-gantt-task-progress {
+  height: 100%;
+}
+
+.js-gantt-task-progress-drag {
+  position: absolute;
+  cursor: ew-resize;
+  display: none;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  width: 16px;
+  height: 10px;
+  bottom: -4px;
+  margin-left: -8px;
+  z-index: 1;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkY3Rjk0RUVDMkYzMTFFMkI1OThEQTA3ODU0OTkzMEEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkY3Rjk0RUZDMkYzMTFFMkI1OThEQTA3ODU0OTkzMEEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjdGOTRFQ0MyRjMxMUUyQjU5OERBMDc4NTQ5OTMwQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjdGOTRFREMyRjMxMUUyQjU5OERBMDc4NTQ5OTMwQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobPBzIAAADkSURBVHjaYpk2bRoDDsAExL1QdjEQ/8OmiAWHZk4gXqymqhQM4ty6fU8OSMUA8XdiDBAB4k0a6iqWRga6EKcwMQXduHlnL5DpB8Rv0J2JDFSA+JiOtgZcMwiA2CAxkBxUDVYDLEAKgIpV9XQ0MZwFEgPJAZnHoWpRDAgC4n2W5saiQKfjClQGkBxQDciL+6B6wAbkA/EqJwdrTkUFOQZCAKQGpBbIXA3SCzJggo+XK7OEuBgDsQCkFqgHrBfsBT5eHgZSAUwP2IBfv36TbABMDygdtK1Zv6UESLORaAbIhG6AAAMAKN8wE24DXWcAAAAASUVORK5CYII=");
+}
+
+.js-gantt-bar-task.js-gantt-bar-parent-task .js-gantt-task-progress {
+  background-color: var(--task-progress-background);
+}
+
+.js-gantt-bar-task.child-task .js-gantt-task-progress {
+  background-color: var(--child-task-progress-background);
+}
+
+.js-gantt-bar-task:hover .js-gantt-task-progress-drag {
+  display: block;
+}
+
+/* milestone css  */
+.js-gantt-bar-milestone {
+  position: absolute;
+  z-index: 1007;
+  height: 40px;
+  line-height: inherit;
+  background-color: transparent !important;
+  border: 0px solid transparent !important;
+  border-radius: 3px;
+  text-align: center;
+  margin-left: -10px;
+}
+
+.js-gantt-side-content {
+  height: 100%;
+  line-height: inherit;
+  position: absolute;
+  top: 0;
+  white-space: nowrap;
+  left: calc(100% + 22px);
+  color: var(--milestone-content-color);
+  cursor: pointer;
+}
+
+.js-gantt-bar-milestone .js-gantt-bar-task-content {
+  background-color: var(--milestone-content-background);
+  border: 1px solid var(--milestone-content-border);
+  border-radius: inherit;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  transform: rotate(45deg);
+}
+
+.js-gantt-bar-milestone div {
+  visibility: visible;
+}
+
+/* toastr css start  */
+.js-gantt-toastr-area {
+  position: fixed;
+  z-index: 999999;
+  right: 5px;
+  top: 5px;
+}
+
+.js-gantt-toastr {
+  visibility: hidden;
+  min-width: 250px;
+  max-width: 350px;
+  background-color: #aaaaaa;
+  color: #fff;
+  border-radius: 3px;
+  padding: 16px;
+  margin: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 0.3s ease-in;
+}
+
+.js-gantt-toastr:hover {
+  opacity: 1;
+  -moz-box-shadow: 0 0 12px #000000;
+  -webkit-box-shadow: 0 0 12px #000000;
+  box-shadow: 0 0 12px #000000;
+}
+
+.js-gantt-toastr p {
+  color: #fff;
+  font-weight: 400;
+  margin: 0;
+}
+
+.js-gantt-toastr p:first-child {
+  font-weight: 800;
+}
+
+.js-gantt-toastr.js-gantt-toastr-success {
+  background-color: #51a351;
+}
+
+.js-gantt-toastr.js-gantt-toastr-error {
+  background-color: #bd362f;
+}
+
+.js-gantt-toastr.js-gantt-toastr-info {
+  background-color: #2f96b4;
+}
+
+.js-gantt-toastr.js-gantt-toastr-warning {
+  background-color: #f89406;
+}
+
+.js-gantt-toastr.js-gantt-toastr-show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s;
+  animation: fadein 0.5s;
+}
+
+.js-gantt-toastr.js-gantt-toastr-hide {
+  visibility: visible;
+  -webkit-animation: fadeout 0.5s;
+  animation: fadeout 0.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    margin-top: 0;
+    opacity: 0;
+  }
+  to {
+    margin-top: 5px;
+    opacity: 0.9;
+  }
+}
+
+@keyframes fadein {
+  from {
+    margin-top: 0;
+    opacity: 0;
+  }
+  to {
+    margin-top: 5px;
+    opacity: 0.9;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    margin-top: 5px;
+    opacity: 0.9;
+  }
+  to {
+    margin-top: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    margin-top: 5px;
+    opacity: 0.9;
+  }
+  to {
+    margin-top: 0;
+    opacity: 0;
+  }
+}
+/* toastr css end  */
+
+.js-gantt-task-color-picker {
+  visibility: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 50px;
+  margin-right: -50px;
+}
+
+.js-gantt-bar-task:hover .js-gantt-task-color-picker,
+.js-gantt-bar-task:hover .js-gantt-task-color-picker input {
+  visibility: visible;
+}
+
+.js-gantt-task-color-picker input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  visibility: hidden;
+  width: 25px;
+  height: 100%;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+}
+.js-gantt-task-color-picker input::-webkit-color-swatch {
+  border-radius: 2px;
+  border: none;
+}
+.js-gantt-task-color-picker input::-moz-color-swatch {
+  border-radius: 2px;
+  border: none;
+}
+
+.js-gantt-bar-milestone .js-gantt-task-color-picker {
+  left: 0;
+  margin-left: -50px;
+  margin-right: 0;
+}
+
+.js-gantt-bar-milestone .js-gantt-task-color-picker input {
+  margin-left: -25px;
+}
+
+.head-cell .js-gantt-sort {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  width: 7px;
+  height: 13px;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: translateY(-50%);
+}
+
+.head-cell .js-gantt-sort.js-gantt-asc {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR4nGNgQAKGxib/GbABkIS7b8B/DAUwCRiGK0CXwFBAb1DfP/U/LszwHwi2X7qFgUEArBtdAVwCBmAKMCSQFSDzAWXXaOHsXeqkAAAAAElFTkSuQmCC);
+}
+
+.head-cell .js-gantt-sort.js-gantt-desc {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAARUlEQVR42mNgQAL1/VP/M2ADIIntF2/9x1AAlrh0C47hCmA60DFYwX88gIFGwNDY5D8uDFbg7hvwHx2jmIBTAlkB0e4BAEjlaNtBWJPnAAAAAElFTkSuQmCC);
+}
+
+.js-gantt-inline-editor-wraper {
+  position: absolute;
+}
+
+.js-gantt-inline-editor-wraper > input,
+.js-gantt-inline-editor-wraper > select {
+  height: 100%;
+  width: 100%;
+}
+
+.drop-area {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  border: 1px solid var(--task-area-border);
+  background: var(--task-area-background);
+  transition: all 0.2s ease;
+  opacity: 0;
+}
+
+.js-gantt-timeline-data:has(.task-dragging) .drop-area {
+  z-index: 101;
+  opacity: 1;
+}