javascriptgantt/src/gantt.css

An open source JavaScript Gantt. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management.

: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;
}