@syncfusion/ej2-vue-gantt 20.4.54 → 21.1.37

package/src/gantt/holidays.directive.d.ts

@@ -1,10 +1,4 @@
-declare let vueImport: any;
-export declare class HolidaysDirective extends vueImport {
-    constructor();
-    render(createElement: any): void;
-    updated(): void;
-    getTag(): string;
-}
+export declare let HolidaysDirective: any;
 export declare const HolidaysPlugin: {
     name: string;
     install(Vue: any): void;
@@ -21,12 +15,8 @@ export declare const HolidaysPlugin: {
  * </ejs-gantt>
  * ```
  */
-export declare class HolidayDirective extends vueImport {
-    render(): void;
-    getTag(): string;
-}
+export declare let HolidayDirective: any;
 export declare const HolidayPlugin: {
     name: string;
     install(Vue: any): void;
 };
-export {};

package/src/gantt/holidays.directive.js

@@ -1,40 +1,8 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { EJComponentDecorator, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base';
-import * as Vue3 from 'vue-class-component';
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import Vue from 'vue';
-import { Options } from 'vue-class-component';
-var vueImport;
-if (!isExecute || parseInt(allVue.version) < 3) {
-    vueImport = Vue3.Vue;
-}
-else {
-    vueImport = Vue;
-}
-var HolidaysDirective = /** @class */ (function (_super) {
-    __extends(HolidaysDirective, _super);
-    function HolidaysDirective() {
-        return _super.call(this, arguments) || this;
-    }
-    HolidaysDirective.prototype.render = function (createElement) {
+export var HolidaysDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
         if (!isExecute) {
             var h = !isExecute ? gh : createElement;
             var slots = null;
@@ -44,28 +12,18 @@ var HolidaysDirective = /** @class */ (function (_super) {
             return h('div', { class: 'e-directive' }, slots);
         }
         return;
-    };
-    HolidaysDirective.prototype.updated = function () {
+    },
+    updated: function () {
         if (!isExecute && this.custom) {
             this.custom();
         }
-    };
-    HolidaysDirective.prototype.getTag = function () {
-        return 'e-holidays';
-    };
-    HolidaysDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-        ,Options({
-            inject: {
-                custom: {
-                    default: null
-                }
-            }
-        })
-    ], HolidaysDirective);
-    return HolidaysDirective;
-}(vueImport));
-export { HolidaysDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-holidays';
+        }
+    }
+});
 export var HolidaysPlugin = {
     name: 'e-holidays',
     install: function (Vue) {
@@ -84,23 +42,16 @@ export var HolidaysPlugin = {
  * </ejs-gantt>
  * ```
  */
-var HolidayDirective = /** @class */ (function (_super) {
-    __extends(HolidayDirective, _super);
-    function HolidayDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HolidayDirective.prototype.render = function () {
+export var HolidayDirective = vueDefineComponent({
+    render: function () {
         return;
-    };
-    HolidayDirective.prototype.getTag = function () {
-        return 'e-holidays';
-    };
-    HolidayDirective = __decorate([
-        EJComponentDecorator({}, isExecute)
-    ], HolidayDirective);
-    return HolidayDirective;
-}(vueImport));
-export { HolidayDirective };
+    },
+    methods: {
+        getTag: function () {
+            return 'e-holidays';
+        }
+    }
+});
 export var HolidayPlugin = {
     name: 'e-holidays',
     install: function (Vue) {

package/styles/bootstrap-dark.css

@@ -312,6 +312,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -341,7 +347,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 40px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -380,6 +386,7 @@
   border-radius: 50%;
   height: auto !important; /* stylelint-disable-line declaration-no-important */
   width: auto;
+  box-shadow: none;
 }
 .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item.e-active {
   margin-left: 5px !important;
@@ -1268,7 +1275,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1361,6 +1367,7 @@
   border-radius: 50%;
   height: auto !important; /* stylelint-disable-line declaration-no-important */
   width: auto;
+  box-shadow: none;
 }
 
 .e-icon-rowselect::before {
@@ -1665,13 +1672,13 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #4cc7ba;
-  border: 1px solid #4cc7ba;
+  border: 0px solid #4cc7ba;
   border-radius: 4px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0070f0;
-  border: 1px solid #0070f0;
-  border-radius: 4px;
+  border: 0px solid #0070f0;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #8dd1c4;
@@ -1682,7 +1689,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #67c1b2;
-  border: #4fb29f;
+  outline: #4fb29f;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #67c1b2;
@@ -1742,6 +1749,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0070f0;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0070f0;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0070f0;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0070f0;
 }
@@ -1793,7 +1812,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2054,14 +2076,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
-  border: 1px solid #0070f0;
-  border-radius: 4px;
+  border: 0px solid #0070f0;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap.css

@@ -456,6 +456,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -485,7 +491,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 40px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -1412,7 +1418,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1809,13 +1814,13 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #555;
-  border: 1px solid #555;
+  border: 0px solid #555;
   border-radius: 4px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #21527d;
-  border: 1px solid #21527d;
-  border-radius: 4px;
+  border: 0px solid #21527d;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #7538C9;
@@ -1826,7 +1831,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #572A96;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #572A96;
@@ -1886,6 +1891,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #21527d;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #21527d;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #21527d;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #21527d;
 }
@@ -1937,7 +1954,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2198,14 +2218,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
-  border: 1px solid #21527d;
-  border-radius: 4px;
+  border: 0px solid #21527d;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap4.css

@@ -637,6 +637,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -666,7 +672,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 38px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -1596,7 +1602,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1999,7 +2004,7 @@
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0056b3;
   border: 0px;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #8553F1;
@@ -2010,7 +2015,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #6628EE;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #6628EE;
@@ -2070,6 +2075,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0056b3;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0056b3;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #d13438;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0056b3;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #d13438;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0056b3;
 }
@@ -2121,7 +2138,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2382,14 +2402,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #F3D8DA;
-  border: 1px solid #F3D8DA;
+  outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #D13438;
   border: 0px;
-  border-radius: 4px;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap5-dark.css

@@ -356,6 +356,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -385,7 +391,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 35px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -597,7 +603,7 @@
   border-width: 1px;
   box-shadow: 0 0;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: 700;
   opacity: 1;
   overflow: hidden;
   padding: 2px 8px 1px;
@@ -789,7 +795,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 14px;
-  font-weight: bold;
+  font-weight: 700;
   margin: 0;
   padding: 0;
   position: static;
@@ -1312,7 +1318,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1715,7 +1720,7 @@
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0d6efd;
   border: 0px;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #d3f0e2;
@@ -1726,7 +1731,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #21b26f;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #21b26f;
@@ -1786,6 +1791,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0d6efd;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0d6efd;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #e4606d;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0d6efd;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #e4606d;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0d6efd;
 }
@@ -1837,7 +1854,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2098,14 +2118,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #fadfe2;
-  border: 1px solid #fadfe2;
+  outline: 1px solid #fadfe2;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #e4606d;
   border: 0px;
-  border-radius: 4px;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {

package/styles/bootstrap5.css

@@ -356,6 +356,12 @@
 .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
   height: 63px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header {
+  padding-left: 12px;
+}
+.e-bigger .e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
+  display: block;
+}
 .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
   padding: 16px 4px 16px 16px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -385,7 +391,7 @@
   border-radius: 6px !important;
   padding: 32px 16px 16px !important;
 }
-.e-bigger .e-grid .e-columnmenu {
+.e-bigger .e-gantt .e-grid .e-columnmenu {
   top: 35px;
 }
 .e-bigger .e-gantt-dialog .e-dialog {
@@ -597,7 +603,7 @@
   border-width: 1px;
   box-shadow: 0 0;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: 700;
   opacity: 1;
   overflow: hidden;
   padding: 2px 8px 1px;
@@ -789,7 +795,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 14px;
-  font-weight: bold;
+  font-weight: 700;
   margin: 0;
   padding: 0;
   position: static;
@@ -1312,7 +1318,6 @@
   outline: 1px solid;
   outline-offset: 2px;
 }
-
 .e-gantt-dialog .e-tab .e-tab-header {
   padding-left: 12px;
 }
@@ -1715,7 +1720,7 @@
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0d6efd;
   border: 0px;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
   background-color: #d1e7dd;
@@ -1726,7 +1731,7 @@
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar {
   background-color: #198754;
-  border: 0px;
+  outline: 0px;
 }
 .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
   background-color: #198754;
@@ -1786,6 +1791,18 @@
 .e-gantt .e-gantt-chart .e-line {
   border-color: #0d6efd;
 }
+.e-gantt .e-gantt-chart .e-connector-line {
+  stroke: #0d6efd;
+}
+.e-gantt .e-gantt-chart .e-critical-line {
+  stroke: #dc3545;
+}
+.e-gantt .e-gantt-chart .e-connector-line-arrow {
+  fill: #0d6efd;
+}
+.e-gantt .e-gantt-chart .e-critical-line-arrow {
+  fill: #dc3545;
+}
 .e-gantt .e-gantt-chart .e-connector-line-right-arrow {
   border-left-color: #0d6efd;
 }
@@ -1837,7 +1854,10 @@
   padding-right: 25px;
 }
 .e-gantt .e-gantt-chart .e-connectorpoint-right {
-  margin-left: 2px;
+  margin-left: 3px;
+}
+.e-gantt .e-gantt-chart .e-connectorpoint-left {
+  margin-right: 3px;
 }
 .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
 .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
@@ -2098,14 +2118,15 @@
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
   background-color: #f8d7da;
-  border: 1px solid #f8d7da;
+  outline: 1px solid #f8d7da;
   border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
   background-color: #dc3545;
   border: 0px;
-  border-radius: 4px;
+  position: absolute;
+  border-radius: 3px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {