.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}

.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}

.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 95px;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}

.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}

.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: 85px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}

.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}

.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range ,
.react-datepicker__month-text--in-selecting-range ,
.react-datepicker__quarter-text--in-selecting-range ,
.react-datepicker__year-text--in-selecting-range {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
.react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__year-text--in-range {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}

.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "\00d7";
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.popup-content{margin:auto;background:#fff;width:50%;padding:5px;border:1px solid #d7d7d7}[role=tooltip].popup-content{width:200px;box-shadow:0 0 3px rgba(0,0,0,.16);border-radius:5px}.popup-overlay{background:rgba(0,0,0,.5)}[data-popup=tooltip].popup-overlay{background:transparent}.popup-arrow{-webkit-filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));color:#fff;stroke-width:2px;stroke:#d7d7d7;stroke-dasharray:30px;stroke-dashoffset:-54px}
.rst__rowWrapper {
  padding: 10px 10px 10px 0;
  height: 100%;
  box-sizing: border-box;
}

.rst__rtl.rst__rowWrapper {
  padding: 10px 0 10px 10px;
}

.rst__row {
  height: 100%;
  white-space: nowrap;
  display: flex;
}
.rst__row > * {
  box-sizing: border-box;
}

/**
 * The outline of where the element will go if dropped, displayed while dragging
 */
.rst__rowLandingPad,
.rst__rowCancelPad {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.rst__rowLandingPad > *,
.rst__rowCancelPad > * {
  opacity: 0 !important;
}
.rst__rowLandingPad::before,
.rst__rowCancelPad::before {
  background-color: lightblue;
  border: 3px dashed white;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

/**
 * Alternate appearance of the landing pad when the dragged location is invalid
 */
.rst__rowCancelPad::before {
  background-color: #e6a8ad;
}

/**
 * Nodes matching the search conditions are highlighted
 */
.rst__rowSearchMatch {
  outline: solid 3px #0080ff;
}

/**
 * The node that matches the search conditions and is currently focused
 */
.rst__rowSearchFocus {
  outline: solid 3px #fc6421;
}

.rst__rowContents,
.rst__rowLabel,
.rst__rowToolbar,
.rst__moveHandle,
.rst__toolbarButton {
  display: inline-block;
  vertical-align: middle;
}

.rst__rowContents {
  position: relative;
  height: 100%;
  border: solid #bbb 1px;
  border-left: none;
  box-shadow: 0 2px 2px -2px;
  padding: 0 5px 0 10px;
  border-radius: 2px;
  min-width: 230px;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}

.rst__rtl.rst__rowContents {
  border-right: none;
  border-left: solid #bbb 1px;
  padding: 0 10px 0 5px;
}

.rst__rowContentsDragDisabled {
  border-left: solid #bbb 1px;
}

.rst__rtl.rst__rowContentsDragDisabled {
  border-right: solid #bbb 1px;
  border-left: solid #bbb 1px;
}

.rst__rowLabel {
  flex: 0 1 auto;
  padding-right: 20px;
}
.rst__rtl.rst__rowLabel {
  padding-left: 20px;
  padding-right: inherit;
}

.rst__rowToolbar {
  flex: 0 1 auto;
  display: flex;
}

.rst__moveHandle,
.rst__loadingHandle {
  height: 100%;
  width: 44px;
  background: #d9d9d9
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiI+PGcgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuOSIgPjxwYXRoIGQ9Ik0xNCAxNS43aDE0LjQiLz48cGF0aCBkPSJNMTQgMjEuNGgxNC40Ii8+PHBhdGggZD0iTTE0IDI3LjFoMTQuNCIvPjwvZz4KPC9zdmc+')
    no-repeat center;
  border: solid #aaa 1px;
  box-shadow: 0 2px 2px -2px;
  cursor: move;
  border-radius: 1px;
  z-index: 1;
}

.rst__loadingHandle {
  cursor: default;
  background: #d9d9d9;
}

@keyframes pointFade {
  0%,
  19.999%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}

.rst__loadingCircle {
  width: 80%;
  height: 80%;
  margin: 10%;
  position: relative;
}

.rst__loadingCirclePoint {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.rst__rtl.rst__loadingCirclePoint {
  right: 0;
  left: initial;
}

.rst__loadingCirclePoint::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 11%;
  height: 30%;
  background-color: #fff;
  border-radius: 30%;
  animation: pointFade 800ms infinite ease-in-out both;
}
.rst__loadingCirclePoint:nth-of-type(1) {
  transform: rotate(0deg);
}
.rst__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}
.rst__loadingCirclePoint:nth-of-type(1)::before,
.rst__loadingCirclePoint:nth-of-type(7)::before {
  animation-delay: -800ms;
}
.rst__loadingCirclePoint:nth-of-type(2) {
  transform: rotate(30deg);
}
.rst__loadingCirclePoint:nth-of-type(8) {
  transform: rotate(210deg);
}
.rst__loadingCirclePoint:nth-of-type(2)::before,
.rst__loadingCirclePoint:nth-of-type(8)::before {
  animation-delay: -666ms;
}
.rst__loadingCirclePoint:nth-of-type(3) {
  transform: rotate(60deg);
}
.rst__loadingCirclePoint:nth-of-type(9) {
  transform: rotate(240deg);
}
.rst__loadingCirclePoint:nth-of-type(3)::before,
.rst__loadingCirclePoint:nth-of-type(9)::before {
  animation-delay: -533ms;
}
.rst__loadingCirclePoint:nth-of-type(4) {
  transform: rotate(90deg);
}
.rst__loadingCirclePoint:nth-of-type(10) {
  transform: rotate(270deg);
}
.rst__loadingCirclePoint:nth-of-type(4)::before,
.rst__loadingCirclePoint:nth-of-type(10)::before {
  animation-delay: -400ms;
}
.rst__loadingCirclePoint:nth-of-type(5) {
  transform: rotate(120deg);
}
.rst__loadingCirclePoint:nth-of-type(11) {
  transform: rotate(300deg);
}
.rst__loadingCirclePoint:nth-of-type(5)::before,
.rst__loadingCirclePoint:nth-of-type(11)::before {
  animation-delay: -266ms;
}
.rst__loadingCirclePoint:nth-of-type(6) {
  transform: rotate(150deg);
}
.rst__loadingCirclePoint:nth-of-type(12) {
  transform: rotate(330deg);
}
.rst__loadingCirclePoint:nth-of-type(6)::before,
.rst__loadingCirclePoint:nth-of-type(12)::before {
  animation-delay: -133ms;
}
.rst__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}
.rst__loadingCirclePoint:nth-of-type(13) {
  transform: rotate(360deg);
}
.rst__loadingCirclePoint:nth-of-type(7)::before,
.rst__loadingCirclePoint:nth-of-type(13)::before {
  animation-delay: 0ms;
}

.rst__rowTitle {
  font-weight: bold;
}

.rst__rowTitleWithSubtitle {
  font-size: 85%;
  display: block;
  height: 0.8rem;
}

.rst__rowSubtitle {
  font-size: 70%;
  line-height: 1;
}

.rst__collapseButton,
.rst__expandButton {
  appearance: none;
  border: none;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 1px #000;
  width: 16px;
  height: 16px;
  padding: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.rst__rtl.rst__collapseButton,
.rst__rtl.rst__expandButton {
  transform: translate(50%, -50%);
}
.rst__collapseButton:focus,
.rst__expandButton:focus {
  outline: none;
  box-shadow: 0 0 0 1px #000, 0 0 1px 3px #83bef9;
}
.rst__collapseButton:hover:not(:active),
.rst__expandButton:hover:not(:active) {
  background-size: 24px;
  height: 20px;
  width: 20px;
}

.rst__collapseButton {
  background: #fff
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48L2c+Cjwvc3ZnPg==')
    no-repeat center;
}

.rst__expandButton {
  background: #fff
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48cGF0aCBkPSJNOSA0LjV2OSIvPjwvZz4KPC9zdmc+')
    no-repeat center;
}

/**
 * Line for under a node with children
 */
.rst__lineChildren {
  height: 100%;
  display: inline-block;
  position: absolute;
}
.rst__lineChildren::after {
  content: '';
  position: absolute;
  background-color: black;
  width: 1px;
  left: 50%;
  bottom: 0;
  height: 10px;
}

.rst__rtl.rst__lineChildren::after {
  right: 50%;
  left: initial;
}

.rst__placeholder {
  position: relative;
  height: 68px;
  max-width: 300px;
  padding: 10px;
}
.rst__placeholder,
.rst__placeholder > * {
  box-sizing: border-box;
}
.rst__placeholder::before {
  border: 3px dashed #d9d9d9;
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  z-index: -1;
}

/**
 * The outline of where the element will go if dropped, displayed while dragging
 */
.rst__placeholderLandingPad,
.rst__placeholderCancelPad {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.rst__placeholderLandingPad *,
.rst__placeholderCancelPad * {
  opacity: 0 !important;
}
.rst__placeholderLandingPad::before,
.rst__placeholderCancelPad::before {
  background-color: lightblue;
  border-color: white;
}

/**
 * Alternate appearance of the landing pad when the dragged location is invalid
 */
.rst__placeholderCancelPad::before {
  background-color: #e6a8ad;
}

/**
 * Extra class applied to VirtualScroll through className prop
 */
.rst__virtualScrollOverride {
  overflow: auto !important;
}
.rst__virtualScrollOverride * {
  box-sizing: border-box;
}

.ReactVirtualized__Grid__innerScrollContainer {
  overflow: visible !important;
}

.rst__rtl .ReactVirtualized__Grid__innerScrollContainer {
  direction: rtl;
}

.ReactVirtualized__Grid {
  outline: none;
}

.rst__node {
  min-width: 100%;
  white-space: nowrap;
  position: relative;
  text-align: left;
  height: 62px;
}

.rst__node.rst__rtl {
  text-align: right;
}

.rst__nodeContent {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* ==========================================================================
   Scaffold

    Line-overlaid blocks used for showing the tree structure
   ========================================================================== */
.rst__lineBlock,
.rst__absoluteLineBlock {
  height: 100%;
  position: relative;
  display: inline-block;
}

.rst__absoluteLineBlock {
  position: absolute;
  top: 0;
}

.rst__lineHalfHorizontalRight::before,
.rst__lineFullVertical::after,
.rst__lineHalfVerticalTop::after,
.rst__lineHalfVerticalBottom::after {
  position: absolute;
  content: '';
  background-color: black;
}

/**
 * +-----+
 * |     |
 * |  +--+
 * |     |
 * +-----+
 */
.rst__lineHalfHorizontalRight::before {
  height: 1px;
  top: 50%;
  right: 0;
  width: 50%;
}

.rst__rtl.rst__lineHalfHorizontalRight::before {
  left: 0;
  right: initial;
}

/**
 * +--+--+
 * |  |  |
 * |  |  |
 * |  |  |
 * +--+--+
 */
.rst__lineFullVertical::after,
.rst__lineHalfVerticalTop::after,
.rst__lineHalfVerticalBottom::after {
  width: 1px;
  left: 50%;
  top: 0;
  height: 100%;
}

/**
 * +--+--+
 * |  |  |
 * |  |  |
 * |  |  |
 * +--+--+
 */
.rst__rtl.rst__lineFullVertical::after,
.rst__rtl.rst__lineHalfVerticalTop::after,
.rst__rtl.rst__lineHalfVerticalBottom::after {
  right: 50%;
  left: initial;
}

/**
 * +-----+
 * |  |  |
 * |  +  |
 * |     |
 * +-----+
 */
.rst__lineHalfVerticalTop::after {
  height: 50%;
}

/**
 * +-----+
 * |     |
 * |  +  |
 * |  |  |
 * +-----+
 */
.rst__lineHalfVerticalBottom::after {
  top: auto;
  bottom: 0;
  height: 50%;
}

/* Highlight line for pointing to dragged row destination
   ========================================================================== */
/**
 * +--+--+
 * |  |  |
 * |  |  |
 * |  |  |
 * +--+--+
 */
.rst__highlightLineVertical {
  z-index: 3;
}
.rst__highlightLineVertical::before {
  position: absolute;
  content: '';
  background-color: #36c2f6;
  width: 8px;
  margin-left: -4px;
  left: 50%;
  top: 0;
  height: 100%;
}

.rst__rtl.rst__highlightLineVertical::before {
  margin-left: initial;
  margin-right: -4px;
  left: initial;
  right: 50%;
}

@keyframes arrow-pulse {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  30% {
    transform: translate(0, 300%);
    opacity: 1;
  }
  70% {
    transform: translate(0, 700%);
    opacity: 1;
  }
  100% {
    transform: translate(0, 1000%);
    opacity: 0;
  }
}
.rst__highlightLineVertical::after {
  content: '';
  position: absolute;
  height: 0;
  margin-left: -4px;
  left: 50%;
  top: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid white;
  animation: arrow-pulse 1s infinite linear both;
}

.rst__rtl.rst__highlightLineVertical::after {
  margin-left: initial;
  margin-right: -4px;
  right: 50%;
  left: initial;
}

/**
 * +-----+
 * |     |
 * |  +--+
 * |  |  |
 * +--+--+
 */
.rst__highlightTopLeftCorner::before {
  z-index: 3;
  content: '';
  position: absolute;
  border-top: solid 8px #36c2f6;
  border-left: solid 8px #36c2f6;
  box-sizing: border-box;
  height: calc(50% + 4px);
  top: 50%;
  margin-top: -4px;
  right: 0;
  width: calc(50% + 4px);
}

.rst__rtl.rst__highlightTopLeftCorner::before {
  border-right: solid 8px #36c2f6;
  border-left: none;
  left: 0;
  right: initial;
}

/**
 * +--+--+
 * |  |  |
 * |  |  |
 * |  +->|
 * +-----+
 */
.rst__highlightBottomLeftCorner {
  z-index: 3;
}
.rst__highlightBottomLeftCorner::before {
  content: '';
  position: absolute;
  border-bottom: solid 8px #36c2f6;
  border-left: solid 8px #36c2f6;
  box-sizing: border-box;
  height: calc(100% + 4px);
  top: 0;
  right: 12px;
  width: calc(50% - 8px);
}

.rst__rtl.rst__highlightBottomLeftCorner::before {
  border-right: solid 8px #36c2f6;
  border-left: none;
  left: 12px;
  right: initial;
}

.rst__highlightBottomLeftCorner::after {
  content: '';
  position: absolute;
  height: 0;
  right: 0;
  top: 100%;
  margin-top: -12px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #36c2f6;
}

.rst__rtl.rst__highlightBottomLeftCorner::after {
  left: 0;
  right: initial;
  border-right: 12px solid #36c2f6;
  border-left: none;
}

@font-face {
  font-family: 'TeamworkRegular';
  src: url('/nw_content_manager/scripts/jQueryGantt/res/icons.eot?5qjga5');
  src: url('/nw_content_manager/scripts/jQueryGantt/res/icons.eot?#iefix5qjga5') format('embedded-opentype'),
  url('/nw_content_manager/scripts/jQueryGantt/res/icons.woff?5qjga5') format('woff'),
  url('/nw_content_manager/scripts/jQueryGantt/res/icons.ttf?5qjga5') format('truetype'),
  url('/nw_content_manager/scripts/jQueryGantt/res/icons.svg?5qjga5#icons') format('svg');
  font-weight: normal !important;
  font-style: normal;
}

#savingMessage {
  background-color: #E3EDED;
  display: none;
  color: #617777;
  font-weight: bolder;
  position: fixed;
  top: 0;
  left: 50%;
  width: 200px;
  text-align: center;
  margin-left: -100px;
  padding: 5px 0;
  z-index: 1000000;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
}

.waiting {
  cursor: progress;
}

/*
-------------------------------------------------------
teamwork icon
-------------------------------------------------------
*/

.teamworkIcon {
  font-family: 'TeamworkRegular' !important;
  color: #34495e;
  font-weight: normal;
  font-size: 120%;
  font-style: normal !important;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;

}

.teamworkIcon:hover {
  opacity: .8
}

.teamworkIcon.withLabel {
  padding-right: 5px;
}

.button:hover .teamworkIcon {
  opacity: 0.8
}

.teamworkIcon.alert {
  color: #B61E2D;
}

.del {
  color: #ff7271
}

.cvcColorSquare {
  display: inline-block;
  text-align: left;
  border: #fff 0px solid;
  box-shadow: 0px 0px 5px #999;
  -moz-box-shadow: 2px 2px 2px #999;
  -webkit-box-shadow: 0px 0px 5px #999;
  -o-box-shadow: 0px 0px 5px #999;
  text-indent: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.cvcColorSquare:hover {
  opacity: .7;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

/*
-------------------------------------------------------
table styles
-------------------------------------------------------
*/

.tableHeader {
  font-weight: normal;
  color: #555;
  border: none;
  background-color: #f0f0f0;
  padding: 2px
}

.list td{
  border-bottom: 1px solid #dedede;
  padding: 5px 0;
}

.list th {
  padding: 5px 2px
}

.ganttTaskEditor h2 {
  text-transform: capitalize

}

.ganttTaskEditor .formElements,
.resourceEditor .formElements {
  background-color: #F5F5F5;
  border-color: #CECECE
}

table .resRow td, table .assigEditRow td {
  border-bottom: 1px solid #cecece;
  padding: 5px 0
}




/*
-------------------------------------------------------
Gantt Online
-------------------------------------------------------
*/


.servicesEnroll h2 {
  margin-bottom: 20px
}

.heading {
  text-align: center;
}
.heading img {
  display:block;
  margin: -20px auto 30px;
}


.twAds {
  height: 38px;
  background-color: #5ACADF;
  width: 100%;
  /*background-image: url("../../img/twAdBg.png");*/
  text-align: center;
  color: #fff;
  z-index: 1000;
}

.twAds.light {
  padding-top: 8px
}

.twAds .twitterButton {
  vertical-align: middle;
  display: inline-block;
  margin-left: 15px
}

.twAds .remove {
 display: inline-block;
 line-height: 38px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top:0;
  right: 12px
}

.twAds a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.40)
}

.twAds a:hover {
  text-decoration: none
}

.servicesEnroll .oauth {
  width: 90px;
  height: auto;
}

.servicesEnroll .oauth:hover {
  opacity: .8
}

.errImg img {
  width: 25px;
  height: auto;
  vertical-align: middle;
}

#__FEEDBACKMESSAGEPLACE {
  position: absolute;
  background-color: #fafad2;
}

.adminLogin .formElements {
width: 120px;
}

.adminLogin {
  width: 350px;
  margin: 0 auto;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

.lastMod {
  font-style: italic;
  margin-right: 10px;
  vertical-align: middle;
  display: block;
  color: #D37E00;
  font-size: 12px;
  position: fixed;
  bottom: 25px;
  z-index: 20;
  padding: 5px 10px;
  background-color: rgba(255, 255, 0, 0.16);
}

.lastMod .teamworkIcon {
  color: #34495e;
  font-size: 160%;
  vertical-align: middle;
}

.button.textual,
.button.buttonImg,
.ganttButtonSeparator {
  vertical-align: middle;
}

.button span.teamworkIcon {
  font-size: .95em;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}


.embedCode {
  font-family: Consolas,monospace!important;
  font-size: 100%;
  width: 100%;
  color: #2792E6;
  padding: 10px;
  border: 4px solid #d0d0d0
}

.ruler {
  width: 100%;
  display: block;
  padding: 35px 0 35px;
  height: 1px;
}

.ruler.short span {
  width: 100px;
  height: 1px;
  display: block;
  margin: 0 auto;
  border-bottom:1px solid #ccc
}

/*
-------------------------------------------------------
Buttons
-------------------------------------------------------
*/

.buttonBar {
}

.buttonBar.centered {
 text-align: center
}

.buttonBar.block .button {
  margin: 0 0 20px
}


.TWGanttWorkSpace .button, .bwinPopupd .button {
  display: inline-block;
  font-size: 110%;
  color: #fff;
  cursor: pointer;
  background-color: #34495e;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px 12px 8px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
  -webkit-transition: background-color 500ms ease-out 1s;
  -moz-transition: background-color 500ms ease-out 1s;
  -o-transition: background-color 500ms ease-out 1s;
  transition: background-color 500ms ease-out 1s;
}

.TWGanttWorkSpace .button.first, .bwinPopupd .button.first {
  background-color: #75a800;
  font-weight: bold;
}

.TWGanttWorkSpace .button.small, .bwinPopupd .button.small {
  font-size: 100%;
  padding: 2px 7px 4px;
  margin-bottom: 0

}

.large {
  font-size: 160%;
  padding: 5px 14px 8px;
  border-radius: 6px
}



.TWGanttWorkSpace .button.first:hover, .bwinPopupd .button.first:hover {
  background-color: #2F2F2F;
}

.TWGanttWorkSpace .button[disabled], .bwinPopupd .button[disabled] {
  cursor: default;
  opacity: 0.4
}

.TWGanttWorkSpace .button:hover[disabled], .bwinPopupd .button:hover[disabled] {
  background-color: #BABABA
}

.TWGanttWorkSpace .button.textual, .TWGanttWorkSpace .button.buttonImg, .bwinPopupd .button.textual, .bwinPopupd .button.buttonImg {
  border: none;
  background-color: transparent;
  color: #68979B;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left
}

.TWGanttWorkSpace .button.opt, .bwinPopupd .button.opt {
  background-color: #009E94;
  background-color: #2792E6;
}

.TWGanttWorkSpace .button.edit, .bwinPopupd .button.edit {
  color: #009E94;
  padding: 0;
  margin: 0
}

.TWGanttWorkSpace .button.delete, .bwinPopupd .button.delete {
  color: #B61E2D;
  padding: 0;
  margin: 0
}

.TWGanttWorkSpace .button:hover, .bwinPopupd .button:hover {
  background-color: #506b84;
  color: rgba(255, 255, 255, 0.75);
}

.TWGanttWorkSpace a.button:hover, .bwinPopupd a.button:hover {
  text-decoration: none
}

.TWGanttWorkSpace .button.textual:hover, .TWGanttWorkSpace .button.buttonImg:hover, .bwinPopupd .button.textual:hover, .bwinPopupd .button.buttonImg:hover {
  background-color: transparent;
}

.TWGanttWorkSpace span.separator, .bwinPopupd span.separator {
  display: inline-block;
}

.TWGanttWorkSpace .button.add, .bwinPopupd .button.add {
  color: #009E94;
}

.TWGanttWorkSpace .button.add .teamworkIcon, .bwinPopupd .button.add .teamworkIcon {
  color: #009E94;
}

.TWGanttWorkSpace form {
  margin: 0;
  padding: 0;
}

.TWGanttWorkSpace select {
  border: 1px solid #91B4B7;
  padding: 4px;
  font-size: 16px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.formElements {
  background-color: white;
  padding: 4px;
  font-size: 16px;
  border: 1px solid #91B4B7;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.formElementsError {
  border: 1px solid #ff0000;
}

.formElementExclamation {
  width: 15px;
  height: 25px;
  margin-left: -20px;
  position: absolute;
  background: url("/nw_content_manager/scripts/jQueryGantt/res/alert.gif") no-repeat;
}

span#FLD_LOGIN_NAMEerror, span#FLD_PWDerror {
  margin-left: -23px;
  margin-top: 2px;
}

.TWGanttWorkSpace input {
  background-color: white;
  padding: 4px;
  font-size: 16px;
  border: 1px solid #91B4B7;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.confirmBox {
  display: inline;
  z-index: 10000;
  vertical-align: middle;
  text-align: center;
  font-style: italic;
  color: #777;
  background: #fff;
  position: absolute;
  margin: 0 auto
}



.confirmBox .confirmNo {
  color: #e06060;
  cursor: pointer;
  font-weight: bolder;
}

.confirmBox .confirmYes {
  color: #68af6c;
  cursor: pointer;
  font-weight: bolder;
}

.blackpopup {
  padding: 20px;
  border-radius: 10px;
}

.smallPopUp {
  top:0!important;
  margin-top:0!important;
}

iframe#bwinPopup {
  border-radius: 10px;
}

.mainWrap {
  padding: 20px
}

.mainWrap > h2:first-of-type {
  text-transform: capitalize
}


/******** SHARE BOX *********/

.shareBar {
  position: absolute;
  right: 100px;
  top: 0;
}

.shareBar img:hover {
  opacity: 0.8;
}

.shareBtn {
  background: none repeat scroll 0 0 #F9F7F7;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 3px;
  color: #878686;
  display: inline-block;
  font-family: sans-serif;
  font-size: 12px;
  padding: 4px 8px 4px 14px;
  text-decoration: none;
}

.shareBtn {
  cursor: pointer;
}

.shareBtn:hover {
  border: 1px solid rgba(0, 0, 0, 0.24);
  color: #878686;
  opacity: .7;
}

.shareBtn img {
  border: 0 none;
  padding-right: 5px;
  vertical-align: middle;
}

.shareBtn a {
  color: #888;
  text-decoration: none;
}

#shareBox {
  text-align: center
}

#shareBox h2 {
  margin-bottom: 30px;
}


#shareBox .shareBtn {
  padding: 15px 20px;
  font-size: 30px;
}

#shareBox .shareBtn.icon-facebook {
  background-color:#3b5998;
  color: #fff;
}

#shareBox .shareBtn.icon-twitter {
  background-color:#00aced;
  color: #fff;
}

#shareBox .shareBtn.icon-linkedin {
  background-color:#007bb6;
  color: #fff;
}
#shareBox .shareBtn.icon-gplus {
  background-color:#dd4b39;
  color: #fff;
}

#shareBox .shareBtn span {
  display: none;
}


/*-------------------------------------------------   MODAL POPUP (ex blackPopup) ------------------------------------------------------*/
.modalPopup {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,.8);
  z-index: 100;
}

.modalPopup.upgradeMessage {
  top:40px;
  text-align: center;
}

.modalPopup.upgradeMessage p {
  margin-bottom: 20px;
  line-height: 1.6em;
}

.modalPopup.inIframe {
  background-color:rgba(255,255,255,0);
}

.modalPopup.black {
  background-color: rgba(75, 75, 75, 0.6);
}

.modalPopup .bwinPopupd{
  position: relative;
  box-shadow: 0 0 0 4px rgba(46, 186, 255, 0.3);
  border: 1px solid rgba(127, 127, 127, 0.3);
  background-color:#fff;
  margin:auto;
  padding: 30px 30px;
  border-radius: 5px;
}

.modalPopup .popUpClose{
  z-index: 9;
  color: #2f2f2f;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  right: 15px;
  top:15px;
}

.modalPopup.black .bwinPopupd .popUpClose{
  color: #ffffff;
}

.modalPopup.iframe .bwinPopupd {
  overflow: hidden;
  padding: 0;
}

.modalPopup.iframe .bwinPopupd iframe {
  position: absolute;
  border-radius: 5px;
}

.modalPopup.inIframe .bwinPopupd {
  background-color: #f9f9f9;
  border-radius: 0 0 5px 5px;
}

.offScreen {
  position: absolute;
  left: -5000px;
}


.calBox {
  background-color: #999;
  text-align: center;
  color: white;
  width:200px;
  position:absolute;
  padding-bottom: 10px;
}

.calElement,.calDayHeader  {
  padding: 1px;
  display: inline-block;
  overflow:hidden;
}

.calDayHeader  {
  padding: 4px;
  display: inline-block;
  background-color:#55b6c7
}

.calNav {
  height: 20px;
}

.calNavBar {
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.25)
}


.calDay .calElement, .calDay .calDayHeader {
  border: 1px solid transparent;
}

.calDay .calElement.holy {
  /*background-color: rgba(236, 195, 176, 0.40);*/
  color: #81d7e2;

}

.calDay .calDayHeader {
  font-size: 8px;
  text-transform: uppercase;
}

.calElement.prev,
.calElement.goToday,
.calElement.next {
  width: 16px;
  height: 18px;
  border: none;
  margin-top: 0
}
.calElement.prev {
  background: transparent url(img/prev.png) no-repeat 5px center;
  float:left;
}

.calElement.goToday {
  background: transparent url(img/today.png) no-repeat 5px center;
  float:left;
}

.calElement.next {
  background: transparent url(img/next.png) no-repeat 5px center;
  float:right;
}

.calElement:hover{
  background-color: transparent;
  border:none;
  cursor: pointer;
  opacity: 0.6
}

.calDay .calElement .dayNumber {
  font-size: 20px;
}

.calDay.calFullMonth .dayNumber {
  font-size: 14px;
}
.calDay .calOutOfScope{
  color: #b1b0b0;
}

.calElement.selected {
  border: 1px solid #404040;
}

.calElement:hover {
  background-color: #404040;
  border: 1px solid #404040;
  cursor: pointer;
}


.calElement.today {
  border: 1px solid #c84e48;
}


.shortCuts {
  /*border-top: 1px solid rgba(0, 0, 0, 0.25);*/
  padding: 3px 0 6px;
  background-color: rgba(97, 215, 232, 0.50)
}

.shortCuts span{
    font-size: 11px;
    border: 1px dotted #617777;
    width: 23px;
    display: inline-block;
    cursor: pointer
}

.shortCuts span:hover {
  background-color: rgba(0, 0, 0, 0.25)
}



body{
  /*overflow: hidden;*/
}

.TWGanttWorkSpace.ganttFullScreen{
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  margin: auto;
  z-index: 1000;
  background-color: #fff;
}

/* -------------------------------------- GRIDIFY -----------------------------------*/
.gdfTable {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
}

.gdfTable td, .gdfTable th {
  vertical-align: middle;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 14px
}

.gdfCell {
  overflow: hidden;
  padding:4px 2px;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  font-family: arial, helvetica, sans-serif;
}

.gdfCell.noClip{
  overflow: visible;
}

.gdfColHeader {
  min-width: 5px;
  height: 30px;
  background-color: #eee;
  border-bottom:2px solid #bbb;
  border-right: 1px solid #bbb;
}

.gdfColHeader:last-of-type {
  border-right: none;
}

.gdfCell:last-of-type {
  border-right: none;
}


.gdfCellInput {
  border: 0 none;
  font-size: 12px;
  height: 20px;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #d4fbe8;
}

.gdfCellWrap {
  border: 0 none;
  font-size: 12px;
  height: 17px;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;

  background-color: #ffcccc;
}

.gdfHResizing {
  cursor: w-resize;
}


/* -------------------------------------- SPLITTER -----------------------------------*/
.splitterContainer {
  width: 100%;
  height: 100%;
}

.splitBox1{
  overflow-x: scroll;
  overflow-y: hidden;
}

.splitBox2 {
  overflow-x: scroll;
  overflow-y: auto;
}


.splitElement {
  outline-style: none;
  position: absolute;
  height: 100%;
  background-color: #f3f3f3;
}

.vSplitBar {
  position: relative;
  width: 5px;
  /*background-color: rgba(170, 170, 170, .2);*/
  cursor: ew-resize;
  text-align: center;
  color: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, .4);
  background: rgba(170, 170, 170, .2) url("/nw_content_manager/scripts/jQueryGantt/res/ganttSplitterGrip.png") no-repeat center center;
  z-index: 5;
}

.unselectable .vSplitBar, .vSplitBar:hover  {
  background-color: rgba(170, 170, 170, .5);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);

}

.vSplitBar .toLeft,.vSplitBar .toRight,.vSplitBar .toCenter{
  font-family: icons,TeamworkRegular;
  cursor: pointer;
  position: absolute;
  top: 0;
  margin-top: 0;
  /*background-color: rgba(170, 170, 170, .2);*/
  /*background-color: rgba(0, 126, 221, 0.3);*/
  background-color: rgba(47, 170, 201, 0.3);
  z-index: 2;
  font-size: 10px;
  width: 15px;
  /*box-shadow: 0 0 1px rgba(0, 0, 0, .5);*/
}

.unselectable .vSplitBar .toLeft,.unselectable  .vSplitBar .toCenter,.unselectable  .vSplitBar .toRight, .vSplitBar:hover .toLeft, .vSplitBar:hover .toRight, .vSplitBar:hover .toCenter{
  /*background-color: rgba(170, 170, 170, 1);*/
  /*background-color: rgba(0, 126, 221, 1);*/
  background-color: rgba(47, 170, 201, 1);

  box-shadow: 0 0 1px rgba(0, 0, 0, .4);
}

.vSplitBar .toLeft {
  left: -19px;
  text-align: left;
}
.vSplitBar .toCenter{
  left:-4px;
  text-align: center;
}
.vSplitBar .toRight{
  left:10px;
  text-align: right;
}

.ganttFixHead{
  position: absolute;
  z-index: 2;
  top:0;
}

/* -------------------------------------- GANTT -----------------------------------*/

.ganttTable{
  table-layout:fixed;
  background-color: #ffffff;
}

.ganttTable td,.ganttTable th{
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ganttHead1,.ganttHead2{
  height:20px;
}

.ganttHead1 th{
  border-left:1px solid #b0b0b0;
  padding: 0;
  margin: 0;
  /*border-right: 1px solid #bbb;*/
  border-bottom:1px solid #bbb;
  background: #EEEEEE;
  white-space: pre-line;
  word-break: break-all;
}

.ganttHead1 th,
.ganttHead2 th{
  white-space: nowrap;
  overflow: hidden;
}

.ganttHead2 th{
  padding: 0;
  margin: 0;
  border-left:1px solid #b0b0b0;
  /*border-right: 1px solid #bbb;*/
  border-bottom:2px solid #bbb;
  background: #EEEEEE;
}

.ganttHead1 th.headSmall,.ganttHead2 th.headSmall{
  font-size: 10px;
}

.ganttHead1 th.headLeft,.ganttHead2 th.headLeft{
  text-align: left;
}

.ganttToday{
  position:absolute;
  top:0;
  width:1px;
  height:100%;
  border-left:2px dotted #13AFA5;
}

.ganttTitle img {
  max-width: 150px;
}

.ganttButtonBar{
  position:relative;
  z-index: 2;
  /*background-color: #fff;*/
  border-bottom: 1px solid #959595;
  padding: 5px 0 5px 10px;
}

.dataTable .ganttButtonBar{
  border-bottom: none;
}

.ganttButtonBar .buttons {
  position: relative;
  display:inline-block;
  width: 100%;
  margin-top: 0;
  height: 45px;
}

.dataTable .ganttButtonBar .buttons {
  display:inline-block;
  width: 100%;
}

.ganttButtonBar .buttons button{
  vertical-align: middle;
  margin:0;
  outline: none;
}

.ganttButtonBar .buttons .button.textual.icon {
  height: 45px;
}


.button span.teamworkIcon {
  text-indent: -10px;
}


.button.textual span.teamworkIcon {
  font-size: 140%
}

#saveGanttButton {
  margin-left:20px;
  padding: 5px 12px;
  margin-bottom: 0;
  vertical-align: middle;
}


.ganttButtonSeparator{
  border-left:1px solid #dadada;
  margin:0 10px;
  font-size: 130%;
  vertical-align: middle;
}

.ganttLines{
  position:absolute;
  width:100%;
  height:1px;
  border-top:1px solid #eee;
  z-index:1;
}

.ganttLinks{
  z-index:10;
}


.ganttTable td.end{
  border-right: 2px dotted #ddd;
}

.ganttHead2 th.holy{
  background-color: rgba(236, 195, 176, 0.40);
}
.ganttBodyCell.holy{
  background-color: rgba(255, 245, 230, 0.51);
}


/* -------------------------------------- TASK -----------------------------------*/

.taskBoxDiv{
  position:absolute;
  height:25px;
  margin-top:3px;
  z-index:100;
}

.taskBoxDiv .layout {
  height:100%;
  color:#DB2727;
  border-radius:2px;
  background: #eee; /* Old browsers */
  border:1px solid #bbb;
}

.taskBoxDiv .taskStatus {
  left:5px;
  top:10px;
  position:absolute;
  width:10px;
  height:10px;
}

.taskBoxDiv .layout .milestone{
  top:0;
  position:absolute;
  width:18px;
  background: url(/nw_content_manager/scripts/jQueryGantt/res/milestone.png) no-repeat;
  height:18px;
  display:none;
}
.taskBoxDiv .layout .milestone.end{
  right:0;
}
.taskBoxDiv .layout .milestone.active{
  display:block;
}

.taskBoxDiv.hasChild .layout{
  border-top:2px solid black;
}

.taskBoxDiv .taskProgress{
  height:5px;
  position:absolute;
}

.taskBoxDiv .layout.extDep{
  background-image:url(/nw_content_manager/scripts/jQueryGantt/res/hasExternalDeps.png);
}


.taskLabel{
  position:absolute;
  height:28px;
  color:black;
  text-align:right;
  padding-right:5px;
  overflow:hidden;
  left:-200px;
  width:195px;
  white-space:nowrap;
}


.taskDepLine {
  border: 1px solid #9999ff;
  overflow: hidden;
  position: absolute;
}


.taskEditRow,.emptyRow {
  height:30px;
}

.taskEditRow input, .columnWidthTest{
  border: 0 none;
  font-size: 14px;
  height: 20px;
  margin: 0;
  padding:0;
  outline: 0;
  width: 100%;
  border-radius: 0;
  vertical-align: text-bottom;
}

.taskEditRow input[type=checkbox]{
  transform:scale(.7);
  width:15px;
  height: 15px;
}

.columnWidthTest{
  width: auto;
}

.taskEditRow input:focus{
  font-weight: bold;
}

.taskEditRow input{
  background-color: transparent;
}

.taskEditRow.rowSelected td{
  background-color:rgb(234, 248, 255);
}


.isGanttList .taskEditRow:nth-child(odd), .assigEditRow:nth-child(odd){
  background-color: #ffffff;
}
.isGanttList .taskEditRow:nth-child(even), .assigEditRow:nth-child(even){
  background-color: #ffffff;
}

.taskStatusBox{
  position:absolute;
  /*width:100px;*/
  height:26px;
  border:1px solid #a0a0a0;
  background-color:#fff;
  margin-top:-21px;
  margin-left:-2px;
  padding: 4px;
  z-index: 100;
}
.taskStatus{
  width:15px;
  height:15px;
  display:inline-block;
  text-indent: 0;
  position:relative;
  box-shadow: none;
  border-radius: 50%;
  border:0;
  cursor: pointer;
}
.taskStatus[status=STATUS_ACTIVE]{
  background-color: #3BBF67;
  color: #fff;
}
.taskStatus[status=STATUS_DONE]{
  background-color: #6EBEF4;
  color:#000;
}
.taskStatus[status=STATUS_FAILED]{
  background-color: #e71919;
  color: #fff;
}
.taskStatus[status=STATUS_SUSPENDED]{
  background-color: #F9C154;
  color:#000;
}
.taskStatus[status=STATUS_WAITING]{
  background-color:#F79136;
  color:#000;
}
.taskStatus[status=STATUS_UNDEFINED]{
  background-color: #dededf;
  color:#000;
}
.taskStatus.selected{
  border:#666 2px solid;
}

select.taskStatus{
  width: auto;
  height: auto;
  border-radius: 2px;
}

.assigsTableWrapper{
  position: relative;
  height: 150px;
  overflow: auto;
  margin-top: -20px;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}


.exp-controller{
  display:inline-block;
  width:16px;
  height:16px;
  position: relative;
  top: 2px;
  margin-left: -18px;
}

.isParent .exp-controller{
  background-image: url(/nw_content_manager/scripts/jQueryGantt/res/toggle_collapse.png);
}

.isParent.collapsed .exp-controller{
  cursor: pointer;
  background-image: url(/nw_content_manager/scripts/jQueryGantt/res/toggle-expand.png);
}

.ui-resizable-helper { border: 1px dotted #00F;  }
.ui-resizable-e, .ui-resizable-w {width: 5px;}
.ui-draggable{
  cursor:move;
}

/*--------------------------------------------------- SVG --------------------------------------------------*/
.ganttSVGBox{
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  background-color: transparent;
  width: 100%;
  overflow-y: hidden; /*IE11 bug*/
}

.taskBoxSVG{
  overflow: visible;
}

.taskBoxSVG .taskLayout{
  stroke-width:0;
  stroke:#999;
}

.taskLinkPathSVG{
  stroke: rgba(47, 151, 198, 1);
  /*stroke:#9999ff;*/
  stroke-width:2.5px;
  fill:none;
  cursor:pointer;
}

.ganttLinesSVG{
  fill:transparent;
  stroke-width:1;
  stroke:#eee;
}

.isGanttList .ganttLinesSVG:nth-child(even){
  fill:transparent;
  stroke-width:1;
  stroke:#fff;

}
.isGanttList  .ganttLinesSVG:nth-child(odd){
  fill:transparent;
  stroke-width:1;
  stroke:#eee;
}

.ganttLinesSVG.rowSelected{
  fill: rgb(234, 248, 255) !important;
  /*fill: rgba(255, 255, 153, 0.50) !important;*/
}

.ganttTodaySVG{
  stroke-width:2px;
  stroke:#e06671;
  stroke-linecap:"round";
  stroke-dasharray:2,2;
}

.colorByStatus .taskStatusSVG[status=STATUS_ACTIVE]{
  fill: #3BBF67;
}
.colorByStatus .taskStatusSVG[status=STATUS_DONE]{
  fill: #6EBEF4;
}
.colorByStatus .taskStatusSVG[status=STATUS_WAITING]{
  fill: #F79136;
}
.colorByStatus .taskStatusSVG[status=STATUS_FAILED]{
  fill: #e71919;
}
.colorByStatus .taskStatusSVG[status=STATUS_SUSPENDED]{
  fill: #f9c154;
}
.colorByStatus .taskStatusSVG[status=STATUS_UNDEFINED]{
  fill: #dededf;
}
.colorByStatus .taskStatusSVG[status=STATUS_UNDEFINED] .taskLayout{
  stroke: #ccc;
  stroke-width:1;
}

.colorByStatus .taskStatusSVG[status=STATUS_DONE] .textPerc,
.colorByStatus .taskStatusSVG[status=STATUS_ACTIVE] .textPerc,
.colorByStatus .taskStatusSVG[status=STATUS_FAILED] .textPerc{
  fill: #fff;
}

.deSVG.deSVGdrag {
  cursor: move;
}

.deSVG.deSVGhand {
  cursor: ew-resize;
}

.linkHandleSVG{
  display:none;
  stroke:transparent;
  stroke-width:5;
  fill: rgba(47, 151, 198, 0.7);
  cursor: pointer;
}

.linkLineSVG{
  stroke-width:5px;
  stroke: rgba(47, 151, 198, 0.7);
  stroke-linecap:"round";
  opacity: .5;
}

.linkOnProgress .deSVG.taskBoxSVG  {
  cursor:cell;
}

.taskBoxSVG.linkOver .taskLayout{
  stroke-width:1px;
  stroke:rgba(47, 151, 198, 0.7);
  opacity: 1;
}

.taskLabelSVG {
  stroke: none;
  fill:#999;
  font-size: 12px;
}

.critical .taskLinkPathSVG{
  stroke:red;
}

.taskBoxSVG.critical .taskLayout{
  stroke:red;
}

.focused .taskLinkPathSVG{
  stroke-width:5px;
  stroke: rgba(47, 151, 198, 0.7);
}

.taskBoxSVG.focused .taskLayout{
  stroke-width:3px;
  stroke: rgba(47, 151, 198, 0.7);
}

.taskBoxSVG.critical .taskLayout{
  stroke-width:3px;
  stroke: rgba(255, 0, 0, 0.7);
}



/*--------------------------------------------------- RESOURCE ADD  --------------------------------------------------*/
.ganttAddResource{
  position: absolute;
  width: 660px;
  height: 300px;
  border: 1px solid red;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  top:120px;
  left:70px;
  z-index: 200;
  padding: 10px;
}

.ganttAddResource tr.isCompany{
  display:none;
}

.ganttAddResource.isCompany tr.isCompany{
  display:table-row;
}
.ganttAddResource.isCompany tr.isPerson{
  display:none;
}
.ganttAddResourceBG {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
  z-index: 200;
}


/*---------------------------------#LOG_CHANGES_CONTAINER --------------------------------------------*/
#LOG_CHANGES_CONTAINER{
  display: none;
  width: 300px;
  top:-130px;
  margin-left: -35px
}


.userProfile {
  font-size: 16px;
  vertical-align: middle;
  text-align: right;
  margin: 0 5px 0 0;
  padding: 5px;
  float: right;
  position: relative;
  z-index: 50;
  line-height: 40px;
  vertical-align: middle;
  position: absolute;
  right: 0;
}

.userLine {
  max-width: 150px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;padding: 0;
  vertical-align: middle;
}

.avatar {
  vertical-align: middle;
  padding: 1px;
  width: 27px;
  height: 27px;
  border: 1px solid #dedede
}

/*--------------------------------------------------- Media queries  --------------------------------------------------*/

/* Large screens */

@media only screen and (max-width : 1260px) {

  .ganttButtonBar .button span.teamworkIcon {
    font-size: 130%;
  }
  .userLine {
    display: none;
  }

}

@media only screen and (min-width : 1261px) and (max-width : 1320px) {

  .ganttButtonBar .button span.teamworkIcon {
    font-size: 130%;
  }

  .button {
    font-size: 100%;
    padding: 3px 9px 6px;
    margin-right: 5px;
    margin-bottom: 5px
  }

  .userLine {
    display: none;
  }

}

@media only screen and (max-width : 1160px) {

  .userProfile {
    float: none;
    position: absolute;
    top:0;
    right: 10px;
  }

  .userProfile .teamworkIcon {
    color: rgb(255, 255, 255);
  }
  .userProfile .ganttButtonSeparator, .userProfile .avatar {
    border-color: rgb(127, 154, 170);
  }

}

/* Ipad */

@media only screen and  (min-width: 768px) and (max-width: 1024px){
  .ganttButtonSeparator {
    margin-left: 2px;
    padding-right: 6px;
    font-size: 100%;
  }
  .button {
    padding: 5px 6px 6px;
  }
}

/* Mobile TODO */

@media only screen and (max-width: 767px) {
  .button {
    font-size: 50%;
  }
}