/* row milestone */
.gantt_row_milestone [data-column-name="end_date"] > .gantt_tree_content {
  display: none;
}
/* end row milestone */

/* control bar */
.gantt-controls {
  overflow: visible;
  margin: 0;
  padding: 0;
  list-style-type: none;
  user-select: none;
  text-align: left;
  background-color: #f5f5f5;
  font-size: 14px;
}

.gantt-menu-item {
  position: relative;
  display: inline-block;
  overflow: visible;
  box-sizing: border-box;
}

.gantt-menu-item-right {
  float: right;
}

.gantt-menu-item img {
  margin-right: 8px;
  vertical-align: middle;
}

.gantt-menu-item a {
  display: block;
  padding: 0 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #3d3d3d;
  line-height: 40px;
}

.gantt-menu-item a:hover {
  color: #3d3d3d;
  border-radius: 0.5rem;
  background-color: #e2e2e2;
}

.gantt-controls .gantt-controls {
  display: none;
}

.gantt-menu-item:hover .gantt-controls {
  position: absolute;
  z-index: 1;
  top: 41px;
  left: 0;
  display: block;
  padding: 5px 0;
}

.gantt-menu-item .menu-item-active {
  background-color: #dadada !important;
}

.gantt-menu-item .menu-item-disabled {
  pointer-events: none;
  color: #818181 !important;
}

.gantt-menu-item:hover .gantt-controls li {
  width: 100%;
}

.gantt-menu-item:hover .gantt-controls a {
  text-align: left;
  white-space: nowrap;
}

.gantt-menu-item:hover .gantt-controls::before {
  position: absolute;
  z-index: 1;
  top: -7px;
  left: 0;
  width: 100%;
  height: 10px;
  content: " ";
  background: transparent;
}

.gantt-menu-item-last {
  border-right: 1px solid #cecece;
}

.gantt-menu-item-first {
  border-left: 1px solid #cecece;
}

.wrapper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  background-color: #f5f5f5;
}

.wrapper-controls > div:first-child {
  flex: 1;
}

/* end control bar */

.gantt_marker.today {
  transition: all 0.3s;
}

.gantt_marker.today:hover {
  width: 10px !important;
}

.weekend {
  background: #ffe8e8;
}

.gantt_selected .weekend {
  background: #f7eb91;
}

.non-zoom-day .weekend {
  background: none;
}

.d-inline-block {
  display: inline-block;
}

/* css gantt */
.gantt_task_line.exist_base_line_bar,
.exist_base_line_link .gantt_line_wrapper {
  margin-top: -7px;
}

.exist_base_line_link .gantt_link_arrow {
  margin-top: -10px;
}

.gantt_side_content.gantt_right {
  bottom: 0;
}

.baseline {
  position: absolute;
  box-sizing: border-box;
  height: 12px;
  margin-top: -9px;
  opacity: 0.6;
  border: 1px solid rgb(255, 153, 0);
  border-radius: 2px;
  background: #ffcc80;
}

.baseline > span {
  display: none;
}

/* css button */
.complete_button {
  width: 20px;
  margin-top: 1px;
}

.complete_button::before {
  content: "🗹";
  font-size: 20px;
}

.dhx_btn_set.complete_button_set {
  color: #454545;
  border: 1px solid #94ad94;
  background: #accaac;
}

.completed_task {
  border: 1px solid #94ad94;
}

.completed_task .gantt_task_progress {
  background: #accaac;
}

.dhtmlx-completed {
  border-color: #669e60;
}

.dhtmlx-completed div {
  background: #81c97a;
}

/* end css button */

/* hide add task */
.nested_task .gantt_add,
.nested_task [data-column-name="buttons"] > .gantt_tree_content {
  display: none !important;
}

/* end hide add task */

/* highLight drag task */
.drag_date {
  z-index: 1;
  text-align: center;
  color: #454545;
  font-size: 13px;
}

.drag_date.drag_move_start {
  margin-left: -18px;
}

.drag_date.drag_move_end {
  margin-left: 18px;
}

.drag_move_vertical,
.drag_move_horizontal {
  box-sizing: border-box;
  opacity: 0.4;
  background-color: #9de19e;
}

.drag_move_vertical {
  border-right: 1px #6ac666 solid;
  border-left: 1px #6ac666 solid;
}

.drag_move_horizontal {
  border-top: 1px #6ac666 solid;
  border-bottom: 1px #6ac666 solid;
}

/* end highLight drag task */

/* button column */
.fa {
  padding: 5px;
  cursor: pointer;
  text-align: center;
  opacity: 0.2;
  font-size: 14px;
}

.fa:hover {
  opacity: 1;
}

.fa-pencil {
  color: #ffa011;
}

.fa-plus {
  color: #328ea0;
}

.fa-times {
  color: red;
}

/* end button column */

/* css slack */
.slack {
  position: absolute;
  margin-left: -2px;
  opacity: 0.7;
  border: none;
  border-right: 1px solid #b6b6b6;
  border-radius: 0;
  background: #b6b6b6;
  background: repeating-linear-gradient(45deg, #fff, #fff 5px, #b6b6b6 5px, #b6b6b6 10px);
}

/* end css slack */

/* css chosen multiple selected, number */
.gantt_cal_chosen.gantt_cal_multiselect,
.gantt_cal_chosen.gantt_cal_onceselect,
.gantt_cal_number,
.gantt_cal_text,
.gantt_cal_datetime {
  box-sizing: border-box;
  width: 100%;
}

.gantt_cal_light_wide .gantt_cal_chosen.gantt_cal_multiselect,
.gantt_cal_light_wide .gantt_cal_chosen.gantt_cal_onceselect,
.gantt_cal_light_wide .gantt_cal_number,
.gantt_cal_light_wide .gantt_cal_text,
.gantt_cal_light_wide .gantt_cal_datetime {
  box-sizing: border-box;
  width: calc(100% - 120px);
}

.gantt_cal_number > input,
.gantt_cal_text > input {
  box-sizing: inherit;
  width: 100%;
}

/* end css chosen multiple selected, number */

/* css progress text */
.gantt_task_progress {
  box-sizing: border-box;
  text-align: left;
  color: white;
  font-weight: bold;
}

/* end css progress text */

/* css button fullscreen in gantt */
.gantt-fullscreen {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 30px;
  height: 30px;
  padding: 2px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  text-align: center;
  opacity: 0.4;
  background: transparent;
  font-size: 32px;
}

.gantt-fullscreen:hover {
  opacity: 1;
}

/* end css button fullscreen in gantt */

/* css filter text */
.gantt-filter {
  width: calc(100% - 2px);
  height: 100%;
  text-align: center;
  border: none;
}

/* end css filter text */

/* css dashboard */
.wrapper-dashboard {
  display: grid;
  grid-template-columns: auto auto;
  padding: 10px;
}

.wrapper-dashboard > div {
  text-align: left;
}

/* end css dashboard */

/* css width lightbox */
.gantt_cal_light {
  width: 700px !important;
}

.gantt_cal_light_wide .gantt_cal_lsection {
  width: 110px !important;
}

.gantt_section_time {
  text-align: left !important;
}

.gantt_cal_light_wide .gantt_section_time {
  height: unset !important;
}

.mpp-sample {
  display: inline-block;
  width: 32px;
  height: 32px;
  padding-left: 40px;
  background: red no-repeat;
  line-height: 32px;
}

/* end css lighbox */

/* css column resource */
.resource-label {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 3px;
  border: 2px solid #ccc;
  border-radius: 25px;
  background: #e6e6e6;
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
}

/* end css column resource */

/* css control column */
.gantt-wrapper {
  position: relative;
}

.gantt-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #cecece;
}

.gantt-dropdown:hover {
  background: #0000001a;
}

#gantt_dropdown {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
  padding: 10px;
  border: 1px solid #cecece;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 25px;
}

#gantt_dropdown input {
  margin: 0 5px;
}

#gantt_dropdown label {
  display: inline-block;
  width: 100%;
  min-width: 120px;
  height: 25px;
}

/* end css control column */

/* css control column */
.summary-row,
.summary-row.odd {
  background-color: #eee;
  font-weight: bold;
}

.summary-bar {
  opacity: 0.6;
}
/* end css control column */

/* button duration */
.wrapper-start,
.wrapper-end,
.wrapper-duration-day,
.wrapper-duration-hour,
.wrapper-duration-minute,
.wrapper-duration {
  display: inline-block;
}

.wrapper-end::before {
  padding: 0 6px;
  content: "-";
}

.wrapper-duration > div {
  display: inline-block;
}

.wrapper-duration {
  margin-left: 15px;
}

[id^="duration-button"] {
  padding: 3px 10px;
  border: none;
}

#main-duration-day,
#main-duration-hour,
#main-duration-minute {
  margin: 3px;
}

#duration-day,
#duration-hour,
#duration-minute {
  width: 35px;
  margin-right: 2px;
  text-align: center;
}

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* end button duration */

/* import file */
.gantt-file-hover {
  position: absolute;
  top: 0;
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 33px;
  pointer-events: none;
  background: #b8e3ffa6;
}

.gantt-file-hover.not-supported {
  color: #6b6b6b;
  background: #a9a9a9a6;
}

.gantt-file-hover-inner {
  height: 100%;
  text-align: center;
  border: 3px dashed #929292;
}

.gantt-file-hover-content-pending {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  opacity: 0.8;
}

.gantt-file-hover-content-upload-message {
  padding-left: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

.gantt-file-upload-spinner {
  position: relative;
  width: 256px;
  height: 64px;
}

/* spinner */
.gantt-file-upload-spinner-inner::before,
.gantt-file-upload-spinner-inner::after,
.gantt-file-upload-spinner-inner {
  width: 2.5em;
  height: 2.5em;
  -webkit-animation: gantt-upload-spinner 1.8s infinite ease-in-out;
  animation: gantt-upload-spinner 1.8s infinite ease-in-out;
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.gantt-file-upload-spinner-inner {
  position: relative;
  margin: 0 auto;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  text-indent: -9999em;
  color: #46ad515c;
  font-size: 10px;
}

.gantt-file-upload-spinner-inner::before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.gantt-file-upload-spinner-inner::after {
  left: 3.5em;
}

.gantt-file-upload-spinner-inner::before,
.gantt-file-upload-spinner-inner::after {
  position: absolute;
  top: 0;
  content: "";
}

@keyframes gantt-upload-spinner {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes gantt-upload-spinner {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
/* end import file */

/* css highlight project */
.group {
  position: absolute;
  z-index: 1;
  width: 40px;
  height: 20px;
  pointer-events: none;
  opacity: 0.3;
  color: white;
  border-radius: 2px;
  background: #555;
}
/* end css highlight project */

/* end css gantt */