dhtmlx-gantt
Version:
An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
1,001 lines • 150 kB
CSS
@charset "UTF-8";
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype');
}
/* default terrace theme is here */
:root {
--dhx-gantt-theme: terrace;
--dhx-gantt-font-family: Inter, Helvetica, Arial, sans-serif;
--dhx-gantt-font-size: 14px;
--dhx-gantt-heading-font-size: calc(var(--dhx-gantt-font-size) + 2px);
--dhx-gantt-heading-font-weight: 600;
--dhx-gantt-important-font-size: var(--dhx-gantt-font-size);
--dhx-gantt-important-line-height: 142%;
--dhx-gantt-important-font-weight: 500;
--dhx-gantt-regular-font-size: var(--dhx-gantt-font-size);
--dhx-gantt-regular-font-weight: 400;
--dhx-gantt-regular-line-height: 142%;
--dhx-gantt-caption-font-size: calc(var(--dhx-gantt-font-size) - 2px);
--dhx-gantt-caption-font-weight: 400;
--dhx-gantt-caption-line-height: 132%;
--dhx-gantt-base-colors-white: #FFFFFF;
--dhx-gantt-base-colors-select: #EFF3FF;
--dhx-gantt-base-colors-hover-color: #e0e0e0;
--dhx-gantt-base-colors-border-light: #F0F0F0;
--dhx-gantt-base-colors-border: #DFE0E1;
--dhx-gantt-base-colors-icons: #A1A4A6;
--dhx-gantt-base-colors-icons-active: #8b8e90;
--dhx-gantt-base-colors-icons-active: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-icons) 100%, #000000 12.6%);
--dhx-gantt-base-colors-icons-hover: #76787a;
--dhx-gantt-base-colors-icons-hover: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-icons) 100%, #000000 28.5%);
--dhx-gantt-base-colors-disabled: #E9E9E9;
--dhx-gantt-base-colors-select: #E0E5F3;
--dhx-gantt-base-colors-readonly: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-base-colors-text-light: #555D63;
--dhx-gantt-base-colors-text-base: #23272A;
--dhx-gantt-base-colors-text-on-fill: rgba(255, 255, 255, 0.9);
--dhx-gantt-base-colors-background: #FFFFFF;
--dhx-gantt-base-colors-background-alt: #F2F2F2;
--dhx-gantt-base-colors-primary: #537CFA;
--dhx-gantt-base-colors-primary-hover: #4269E0;
--dhx-gantt-base-colors-primary-hover: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-primary) 100%, #000000 6%);
--dhx-gantt-base-colors-primary-active: #3365fb;
--dhx-gantt-base-colors-primary-active: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-primary) 100%, #000000 16.6%);
--dhx-gantt-base-colors-primary-lighter: #537cfa33;
--dhx-gantt-base-colors-primary-lighter: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-primary) 20%, rgba(0, 0, 0, 0) 100%);
--dhx-gantt-base-colors-warning: #FAB936;
--dhx-gantt-base-colors-error: #E3334E;
--dhx-gantt-base-colors-error-hover: #D3233E;
--dhx-gantt-base-colors-error-hover: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-error) 100%, #000000 6%);
--dhx-gantt-base-colors-error-active: #C3132E;
--dhx-gantt-base-colors-error-active: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-error) 100%, #000000 16.6%);
--dhx-gantt-base-colors-error-lighter: #E3334E33;
--dhx-gantt-base-colors-error-lighter: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-error) 20%, rgba(0, 0, 0, 0) 100%);
--dhx-gantt-base-colors-error-text: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-base-colors-success: #1BC297;
--dhx-gantt-container-background: var(--dhx-gantt-base-colors-background);
--dhx-gantt-container-color: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-offtime-background: var(--dhx-gantt-base-colors-background-alt);
--dhx-gantt-scale-background: var(--dhx-gantt-container-background);
--dhx-gantt-scale-border-vertical: 1px solid var(--dhx-gantt-base-colors-border-light);
--dhx-gantt-scale-border-horizontal: 1px solid var(--dhx-gantt-base-colors-border);
--dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-grid-body-background: transparent;
--dhx-gantt-grid-scale-background: var(--dhx-gantt-scale-background);
--dhx-gantt-grid-scale-color: var(--dhx-gantt-scale-color);
--dhx-gantt-grid-scale-border-vertical: var(--dhx-gantt-scale-border-vertical);
--dhx-gantt-timeline-scale-background: var(--dhx-gantt-scale-background);
--dhx-gantt-timeline-scale-color: var(--dhx-gantt-scale-color);
--dhx-gantt-timeline-scale-border-vertical: var(--dhx-gantt-scale-border-vertical);
--dhx-gantt-grid-cell-border: 1px solid transparent;
--dhx-gantt-grid-row-border: var(--dhx-gantt-scale-border-horizontal);
--dhx-gantt-base-transition: 0.2s ease;
--dhx-gantt-box-shadow-s: 0px 4px 24px 0px rgba(44, 47, 60, 0.08);
--dhx-gantt-box-shadow-m: 0px 4px 24px 0px rgba(44, 47, 60, 0.36);
--dhx-gantt-box-shadow-l: 0px 4px 24px 0px rgba(44, 47, 60, 0.56);
--dhx-gantt-icon-size: 1.5em;
--dhx-gantt-base-module: 4px;
--dhx-gantt-base-padding: 4px;
--dhx-gantt-border-radius: var(--dhx-gantt-base-module);
--dhx-gantt-transition: all 0.3s;
--dhx-gantt-default-border: 1px solid var(--dhx-gantt-base-colors-border);
--dhx-gantt-header-border: var(--dhx-gantt-default-border);
/* tasks */
--dhx-gantt-task-blue: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-task-green: #20B56D;
--dhx-gantt-task-violet: #D071EF;
--dhx-gantt-task-yellow: linear-gradient(180deg, #FFB725 0%, #FFBB25 31.25%, #FAEA27 100%);
--dhx-gantt-baseline-background-0: #00B4FF;
--dhx-gantt-baseline-background-1: #DF6DE3;
--dhx-gantt-baseline-background-2: #FF957D;
--dhx-gantt-baseline-background-3: #25C79D;
--dhx-gantt-baseline-background-4: #FF6FB0;
--dhx-gantt-baseline-background-5: #FFC470;
--dhx-gantt-baseline-background-6: #FDE720;
--dhx-gantt-baseline-background-7: #47AFD0;
--dhx-gantt-baseline-background-8: #DA9DFF;
--dhx-gantt-baseline-background-9: #BEE964;
--dhx-gantt-task-font-size: var(--dhx-gantt-regular-font-size);
--dhx-gantt-task-line-height: var(--dhx-gantt-regular-line-height);
--dhx-gantt-task-font-weight: var(--dhx-gantt-regular-font-weight);
--dhx-gantt-task-background-primary: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-task-border-radius: var(--dhx-gantt-border-radius);
--dhx-gantt-task-background: var(--dhx-gantt-task-blue);
--dhx-gantt-task-border: none;
--dhx-gantt-task-color: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-project-color: var(--dhx-gantt-task-color);
--dhx-gantt-task-line-text: var(--dhx-gantt-container-color);
--dhx-gantt-task-row-border: 1px solid var(--dhx-gantt-base-colors-border);
--dhx-gantt-task-row-background: var(--dhx-gantt-container-background);
--dhx-gantt-task-row-background--odd: var(--dhx-gantt-container-background);
--dhx-gantt-task-progress-color: rgba(0, 0, 0, 0.15);
--dhx-gantt-project-progress-color: var(--dhx-gantt-task-progress-color);
--dhx-gantt-project-background: var(--dhx-gantt-task-green);
--dhx-gantt-milestone-background: var(--dhx-gantt-task-violet);
--dhx-gantt-task-marker-color: var(--dhx-gantt-task-background);
--dhx-gantt-popup-background: var(--dhx-gantt-container-background);
--dhx-gantt-popup-color: var(--dhx-gantt-container-color);
--dhx-gantt-popup-border: none;
--dhx-gantt-popup-border-radius: var(--dhx-gantt-border-radius);
--dhx-gantt-tooltip-background: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-tooltip-color: var(--dhx-gantt-container-background);
--dhx-gantt-tooltip-border: none;
--dhx-gantt-tooltip-border-radius: var(--dhx-gantt-popup-border-radius);
--dhx-gantt-link-background: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-link-background-hover: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-link-critical-background: var(--dhx-gantt-base-colors-error);
--dhx-gantt-link-handle-offset: 8px;
--dhx-gantt-link-handle-size: 10px;
--dhx-gantt-link-handle-border: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-link-handle-border-hover: var(--dhx-gantt-base-colors-border);
--dhx-gantt-link-handle-background: var(--dhx-gantt-base-colors-border);
--dhx-gantt-link-handle-background-hover: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-progress-handle-border: var(--dhx-gantt-base-colors-border);
--dhx-gantt-progress-handle-background: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-progress-handle-background-hover: var(--dhx-gantt-base-colors-icons-hover);
/* form */
--dhx-gantt-control-height: 32px;
--dhx-gantt-checkbox-height: 20px;
--dhx-gantt-lightbox_font-family: var(--dhx-gantt-font-family);
--dhx-gantt-lightbox-font-size: var(--dhx-gantt-important-font-size);
--dhx-gantt-lightbox-font-weight: var(--dhx-gantt-important-font-weight);
--dhx-gantt-lightbox-background: var(--dhx-gantt-popup-background);
--dhx-gantt-lightbox-border: var(--dhx-gantt-popup-border);
--dhx-gantt-lightbox-control-border: var(--dhx-gantt-default-border);
--dhx-gantt-lightbox-color: var(--dhx-gantt-popup-color);
--dhx-gantt-lightbox-padding: 12px;
--dhx-gantt-lightbox-title-background: var(--dhx-gantt-base-colors-select);
--dhx-gantt-lightbox-title-color: var(--dhx-gantt-lightbox-color);
--dhx-gantt-lightbox-title-font-size: var(--dhx-gantt-heading-font-size);
--dhx-gantt-lightbox-max-width: 622px;
--dhx-gantt-lightbox-wide-max-width: 738px;
--dhx-gantt-lightbox-width: 560px;
--dhx-gantt-btn-order: row-reverse;
/* buttons */
--dhx-gantt-btn-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-background-disabled: var(--dhx-gantt-base-colors-disabled);
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: var(--dhx-gantt-base-colors-disabled);
--dhx-gantt-btn-outline-background: transparent;
--dhx-gantt-btn-outline-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-outline-border-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-outline-background-hover: var(--dhx-gantt-base-colors-primary-lighter);
--dhx-gantt-btn-outline-color-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-outline-border-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-outline-background-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-outline-color-active: var(--dhx-gantt-base-colors-text-on-fill);
--dhx-gantt-btn-outline-border-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-outline-background-disabled: transparent;
--dhx-gantt-btn-outline-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-outline-border-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-text-transform: none;
/* modals */
--dhx-gantt-info-background: var(--dhx-gantt-popup-background);
--dhx-gantt-info-color: var(--dhx-gantt-popup-color);
--dhx-gantt-info-border: var(--dhx-gantt-popup-border);
--dhx-gantt-info-shadow: var(--dhx-gantt-box-shadow-m);
--dhx-gantt-modal-background: var(--dhx-gantt-popup-background);
--dhx-gantt-modal-color: var(--dhx-gantt-popup-color);
--dhx-gantt-modal-border: var(--dhx-gantt-popup-border);
--dhx-gantt-modal-padding: 16px;
--dhx-gantt-modal-width: 320px;
--dhx-gantt-modal-border-radius: var(--dhx-gantt-popup-border-radius);
/* undo delete */
--dhx-gantt-undo-delete-background: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-undo-delete-color: var(--dhx-gantt-task-color);
}
:root[data-gantt-theme='dark'] {
--dhx-gantt-theme: dark;
--dhx-gantt-base-colors-disabled: #3d3d3d;
--dhx-gantt-base-colors-text-light: #AAA;
--dhx-gantt-base-colors-text-base: rgba(255, 255, 255, 0.9);
--dhx-gantt-base-colors-background: #141414;
--dhx-gantt-base-colors-background-alt: #383838;
--dhx-gantt-base-colors-border: #4B4B4B;
--dhx-gantt-base-colors-border-light: #4B4B4B;
--dhx-gantt-navline-font-color: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-base-colors-primary: #3B72F8;
--dhx-gantt-base-colors-error: #EB284F;
--dhx-gantt-base-colors-select: #2A2A2A;
--dhx-gantt-base-colors-hover-color: #2A2A2A;
--dhx-gantt-base-colors-icons: #AAAAAA;
--dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-popup-background: #1B1B1C;
--dhx-gantt-popup-border: 1px solid #4B4B4B;
--dhx-gantt-btn-font-weight: 600;
--dhx-gantt-undo-delete-background: var(--dhx-gantt-popup-background);
--dhx-gantt-link-handle-border: var(--dhx-gantt-base-colors-border);
--dhx-gantt-link-handle-background: var(--dhx-gantt-base-colors-background);
}
:root[data-gantt-theme='meadow'] {
--dhx-gantt-theme: meadow;
--dhx-gantt-font-family: Segoe UI,Arial,san-serif;
--dhx-gantt-base-colors-primary: #0288D1;
--dhx-gantt-base-colors-select: #ffebbc;
--dhx-gantt-task-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-base-colors-border: #cecece;
--dhx-gantt-task-text-font-size: 14px;
--dhx-gantt-task-text-font-weight: 500;
--dhx-gantt-heading-font-size: 22px;
--dhx-gantt-heading-font-weight: 300;
--dhx-gantt-caption-font-size: 14px;
--dhx-gantt-caption-font-weight: 400;
--dhx-gantt-scale-color: #767676;
--dhx-gantt-container-color: #3f3f3f;
--dhx-gantt-border-radius: 0;
--dhx-gantt-box-shadow-s: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
--dhx-gantt-box-shadow-m: 0px 4px 24px 0px rgba(44, 47, 60, 0.36);
--dhx-gantt-box-shadow-l: 0px 4px 24px 0px rgba(44, 47, 60, 0.56);
--dhx-gantt-scale-background: #f4f2ea;
--dhx-gantt-scale-color: #42464b;
--dhx-gantt-task-color: #1e2022;
--dhx-gantt-project-background: #c7d8f7;
--dhx-gantt-milestone-background: #DB7DC5;
--dhx-gantt-task-background: #e1ffd4;
--dhx-gantt-task-border: 1px solid #3588c5;
--dhx-gantt-task-progress-color: #a7d991;
--dhx-gantt-project-progress-color: #9ab9f1;
--dhx-gantt-link-background: #ffb96d;
--dhx-gantt-lightbox-title-background: #f4f2ea;
--dhx-gantt-popup-background: #fcfaf3;
--dhx-gantt-popup-color: var(--dhx-gantt-container-color);
--dhx-gantt-popup-border: 1px solid #cac8bd;
}
:root[data-gantt-theme='skyblue'] {
--dhx-gantt-theme: skyblue;
--dhx-gantt-font-family: Segoe UI,Arial,san-serif;
--dhx-gantt-base-colors-primary: #0288D1;
--dhx-gantt-task-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-base-colors-border: #cecece;
--dhx-gantt-task-text-font-size: 14px;
--dhx-gantt-task-text-font-weight: 500;
--dhx-gantt-heading-font-size: 22px;
--dhx-gantt-heading-font-weight: 300;
--dhx-gantt-caption-font-size: 14px;
--dhx-gantt-caption-font-weight: 400;
--dhx-gantt-scale-color: #767676;
--dhx-gantt-border-radius: 0;
--dhx-gantt-box-shadow-s: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
--dhx-gantt-box-shadow-m: 0px 4px 24px 0px rgba(44, 47, 60, 0.36);
--dhx-gantt-box-shadow-l: 0px 4px 24px 0px rgba(44, 47, 60, 0.56);
--dhx-gantt-scale-background: #dfedff;
--dhx-gantt-scale-color: #42464b;
--dhx-gantt-task-color: #1e2022;
--dhx-gantt-project-background: #eff6fb;
--dhx-gantt-task-background: #eff6fb;
--dhx-gantt-milestone-background: #DB7DC5;
--dhx-gantt-task-border: 1px solid #3588c5;
--dhx-gantt-task-progress-color: linear-gradient(0deg, #abcee8 0, #5aa0d3 36%, #bfdaee);
--dhx-gantt-link-background: #4a8f43;
--dhx-gantt-lightbox-title-background: #eff6fb;
}
:root[data-gantt-theme='skyblue'] .gantt_grid_scale,
:root[data-gantt-theme='skyblue'] .gantt_task_scale,
:root[data-gantt-theme='skyblue'] .gantt_task_vscroll {
box-shadow: inset 0 1px 1px #fff;
background-image: linear-gradient(to bottom, #e4f0ff 0%, #dfedff 50%, #d5e8ff 100%);
}
:root[data-gantt-theme='broadway'] {
--dhx-gantt-theme: broadway;
--dhx-gantt-font-family: Segoe UI,Arial,san-serif;
--dhx-gantt-base-colors-primary: #0288D1;
--dhx-gantt-base-colors-select: #fff3a1;
--dhx-gantt-task-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-base-colors-border: #cecece;
--dhx-gantt-halfhour-border: 1px solid #e8e8e8;
--dhx-gantt-task-title-font-size: 12px;
--dhx-gantt-task-text-font-size: 14px;
--dhx-gantt-task-text-font-weight: 500;
--dhx-gantt-heading-font-size: 22px;
--dhx-gantt-heading-font-weight: 300;
--dhx-gantt-caption-font-size: 14px;
--dhx-gantt-caption-font-weight: 400;
--dhx-gantt-scale-color: #767676;
--dhx-gantt-border-radius: 0;
--dhx-gantt-box-shadow-s: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
--dhx-gantt-box-shadow-m: 0px 4px 24px 0px rgba(44, 47, 60, 0.36);
--dhx-gantt-box-shadow-l: 0px 4px 24px 0px rgba(44, 47, 60, 0.56);
--dhx-gantt-grid-scale-background: #4f4f4f;
--dhx-gantt-grid-scale-border-vertical: 1px solid #c1c1c1;
--dhx-gantt-grid-scale-color: #e1e1e1;
--dhx-gantt-timeline-scale-background: #dbdbdb;
--dhx-gantt-timeline-scale-border-vertical: 1px solid #ebebeb;
--dhx-gantt-timeline-scale-color: #494949;
--dhx-gantt-grid-body-background: #dbdbdb;
--dhx-gantt-lightbox-title-background: #4f4f4f;
--dhx-gantt-lightbox-title-color: #e1e1e1;
--dhx-gantt-task-color: #FFF;
--dhx-gantt-link-background: #ffb96d;
--dhx-gantt-project-background: #65c16f;
--dhx-gantt-project-progress-color: #46ad51;
--dhx-gantt-task-progress-color: #04a4f0;
--dhx-gantt-task-background: #17b2fb;
--dhx-gantt-milestone-background: #DB7DC5;
}
:root[data-gantt-theme='broadway'] .gantt_grid_data {
--dhx-gantt-task-row-background: var(--dhx-gantt-grid-body-background);
--dhx-gantt-task-row-background--odd: var(--dhx-gantt-grid-body-background);
}
:root[data-gantt-theme='material'] {
--dhx-gantt-theme: material;
--dhx-gantt-font-family: Roboto, Inter, Helvetica, Arial, sans-serif;
--dhx-gantt-base-colors-primary: #448aff;
--dhx-gantt-task-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-project-background: #1de9b6;
--dhx-gantt-milestone-background: #ffc107;
--dhx-gantt-task-progress-color: rgba(0, 0, 0, 0.2);
--dhx-gantt-project-color: rgba(0, 0, 0, 0.6);
--dhx-gantt-base-colors-border: #e0e0e0;
--dhx-gantt-task-title-font-size: calc(var(--dhx-gantt-font-size) - 2px);
--dhx-gantt-task-text-font-size: var(--dhx-gantt-font-size);
--dhx-gantt-task-text-font-weight: 500;
--dhx-gantt-heading-font-size: 20px;
--dhx-gantt-caption-font-size: var(--dhx-gantt-font-size);
--dhx-gantt-caption-font-weight: 500;
--dhx-gantt-btn-font-weight: 500;
--dhx-gantt-heading-font-weight: 500;
--dhx-gantt-hours-font-size: calc(var(--dhx-gantt-font-size) - 2px);
--dhx-gantt-base-colors-text-base: rgba(0, 0, 0, 0.75);
--dhx-gantt-base-transition: 0.15s ease;
--dhx-gantt-header-border: 1px solid transparent;
--dhx-gantt-scale-color: rgba(0, 0, 0, 0.54);
--dhx-gantt-base-colors-select: rgba(0, 199, 181, 0.2);
--dhx-gantt-base-colors-hover-color: var(--dhx-gantt-base-colors-select);
--dhx-gantt-border-radius: 0;
--dhx-gantt-task-border-radius: 18px;
--dhx-gantt-btn-text-transform: uppercase;
--dhx-gantt-btn-padding: 1px 20px 0;
--dhx-gantt-link-handle-size: 16px;
--dhx-gantt-progress-handle-background: #FFF;
--dhx-gantt-progress-handle-border: var(--dhx-gantt-base-colors-border);
--dhx-gantt-box-shadow-s: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
--dhx-gantt-box-shadow-m: 0px 4px 24px 0px rgba(44, 47, 60, 0.36);
--dhx-gantt-box-shadow-l: 0px 4px 24px 0px rgba(44, 47, 60, 0.56);
--dhx-gantt-lightbox-title-background: var(--dhx-gantt-container-background);
--dhx-gantt-lightbox-title-color: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-lightbox-title-font-size: calc(var(--dhx-gantt-font-size) + 2px);
--dhx-gantt-lightbox-padding: 30px;
--dhx-gantt-lightbox-width: 610px;
--dhx-gantt-lightbox-wide-max-width: 640px;
--dhx-gantt-btn-order: row;
--dhx-gantt-btn-outline-border-color: transparent;
--dhx-gantt-btn-outline-border-hover: transparent;
--dhx-gantt-btn-outline-border-active: transparent;
--dhx-gantt-btn-outline-border-color-disabled: transparent;
}
:root[data-gantt-theme='material'] .dhx_cal_ltitle {
font-weight: 400;
text-transform: uppercase;
padding: 18px var(--dhx-gantt-lightbox-padding) 8px;
border-bottom-color: transparent;
}
:root[data-gantt-theme='material'] .gantt_grid .gantt_grid_scale .gantt_grid_head_cell,
:root[data-gantt-theme='material'] .gantt_task .gantt_task_scale .gantt_scale_cell {
font-weight: 500;
text-transform: uppercase;
}
:root[data-gantt-theme='material'] .dhx_cal_ltitle_controls {
--dhx-gantt-base-colors-icons: var(--dhx-gantt-lightbox-title-color);
}
:root[data-gantt-theme='material'] .gantt_cal_lsection {
margin-top: 12px;
margin-bottom: 4px;
}
:root[data-gantt-theme='material'] .gantt_cal_ltitle {
padding: 18px var(--dhx-gantt-lightbox-padding);
border-bottom-color: transparent;
}
:root[data-gantt-theme='material'] .gantt_cal_lcontrols {
padding-bottom: 40px;
padding-top: 30px;
}
:root[data-gantt-theme='material'] .gantt_add,
:root[data-gantt-theme='material'] .gantt_grid_head_add {
--dhx-gantt-base-colors-icons: #70d0c2;
--dhx-gantt-base-colors-icons-active: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-icons) 100%, #000000 12.6%);
--dhx-gantt-base-colors-icons-hover: color-mix(in hsl increasing hue, var(--dhx-gantt-base-colors-icons) 100%, #000000 28.5%);
}
:root[data-gantt-theme='material'] .gantt_grid_data .gantt_row,
:root[data-gantt-theme='material'] .gantt_grid_data .gantt_row.odd {
transition: background var(--dhx-gantt-base-transition);
}
:root[data-gantt-theme='material'] .gantt_grid_head_cell {
transition: border-color ground var(--dhx-gantt-base-transition);
border-right: 1px solid transparent;
}
:root[data-gantt-theme='material'] .gantt_grid_scale:hover .gantt_grid_head_cell {
border-right: var(--dhx-gantt-grid-scale-border-vertical);
}
:root[data-gantt-theme='material'] .gantt_grid_column_resize_wrap .gantt_grid_column_resize {
transition: background var(--dhx-gantt-base-transition);
background-color: transparent;
}
:root[data-gantt-theme='material'] .gantt_grid_column_resize_wrap:hover .gantt_grid_column_resize {
background-color: var(--dhx-gantt-base-colors-border);
}
:root[data-gantt-theme='material'] div.gantt_grid_scale:after,
:root[data-gantt-theme='material'] div.gantt_scale_line:last-child:after {
content: "";
width: 100%;
display: block;
height: 1px;
background-color: transparent;
position: absolute;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
z-index: 1;
}
:root[data-gantt-theme='material'] div.gantt_scale_line:last-child:after {
bottom: -1px;
}
:root[data-gantt-theme='material'] .gantt_link_control {
--dhx-gantt-link-handle-border: var(--dhx-gantt-task-background);
--dhx-gantt-link-handle-background: #FFF;
--dhx-gantt-link-handle-border-hover: var(--dhx-gantt-task-background);
--dhx-gantt-link-handle-background-hover: #FFF;
}
:root[data-gantt-theme='material'] .gantt_task_line.gantt_milestone {
margin-top: -1px;
--dhx-gantt-task-border-radius: 2px;
}
:root[data-gantt-theme='contrast-white'] {
--dhx-gantt-theme: contrast-white;
--dhx-gantt-base-colors-disabled: #C2C2C2;
--dhx-gantt-base-colors-text-light: #303030;
--dhx-gantt-base-colors-text-base: #303030;
--dhx-gantt-base-colors-background: #FFFFFF;
--dhx-gantt-base-colors-background-alt: #929292;
--dhx-gantt-base-colors-border: #4D595B;
--dhx-gantt-base-colors-border-light: #4D595B;
--dhx-gantt-base-colors-text-on-fill: #FFF;
--dhx-gantt-base-colors-primary: #0A47CD;
--dhx-gantt-base-colors-text-on-fill: rgba(255, 255, 255, 0.9);
--dhx-gantt-task-background: #0A47CD;
--dhx-gantt-task-border: 1px solid rgba(0, 0, 0, 0.1);
--dhx-gantt-base-colors-warning: #FCBA2E;
--dhx-gantt-base-colors-success: #77D257;
--dhx-gantt-base-colors-error: #ee3d31;
--dhx-gantt-base-colors-error-text: #141414;
--dhx-gantt-btn-color: #FFFFFF;
--dhx-gantt-btn-color-hover: #FFFFFF;
--dhx-gantt-btn-color-active: #FFFFFF;
--dhx-gantt-base-colors-select: #E7E5E5;
--dhx-gantt-base-colors-hover-color: #E7E5E5;
--dhx-gantt-base-colors-icons: #303030;
--dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-popup-background: #FFF;
--dhx-gantt-popup-border: 1px solid #4D595B;
--dhx-gantt-font-size: 16px;
--dhx-gantt-heading-font-size: 24px;
--dhx-gantt-important-font-size: 16px;
--dhx-gantt-regular-font-size: 16px;
--dhx-gantt-caption-font-size: 16px;
--dhx-gantt-btn-outline-color-hover: #212121;
--dhx-gantt-btn-outline-color-active: #FFFFFF;
}
:root[data-gantt-theme='contrast-black'] {
--dhx-gantt-theme: contrast-black;
--dhx-gantt-base-colors-disabled: #3d3d3d;
--dhx-gantt-base-colors-text-light: #cfcfcf;
--dhx-gantt-base-colors-text-base: #FFFFFF;
--dhx-gantt-base-colors-background: #141414;
--dhx-gantt-base-colors-background-alt: #4f4f4f;
--dhx-gantt-base-colors-border: rgba(255, 255, 255, 0.8);
--dhx-gantt-base-colors-border-light: rgba(255, 255, 255, 0.8);
--dhx-gantt-base-colors-text-on-fill: #141414;
--dhx-gantt-base-colors-primary: #A395FF;
--dhx-gantt-task-background: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-project-background: #77D257;
--dhx-gantt-milestone-background: #FCBA2E;
--dhx-gantt-task-background: #A395FF;
--dhx-gantt-task-border: 1px solid rgba(0, 0, 0, 0.1);
--dhx-gantt-base-colors-warning: #694E02;
--dhx-gantt-base-colors-success: #115700;
--dhx-gantt-base-colors-error: #FFA7A0;
--dhx-gantt-base-colors-error-text: #141414;
--dhx-gantt-base-colors-select: #2A2A2A;
--dhx-gantt-base-colors-hover-color: #2A2A2A;
--dhx-gantt-base-colors-icons: #AAAAAA;
--dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-popup-background: #1B1B1C;
--dhx-gantt-undo-delete-background: var(--dhx-gantt-popup-background);
--dhx-gantt-undo-delete-color: var(--dhx-gantt-base-colors-text-base);
--dhx-gantt-popup-border: 1px solid #4B4B4B;
--dhx-gantt-font-size: 16px;
--dhx-gantt-heading-font-size: 24px;
--dhx-gantt-important-font-size: 16px;
--dhx-gantt-regular-font-size: 16px;
--dhx-gantt-caption-font-size: 16px;
--dhx-gantt-btn-outline-color-hover: var(--dhx-gantt-base-colors-text-light);
--dhx-gantt-btn-outline-color-active: var(--dhx-gantt-base-colors-text-light);
}
.dhx_gantt_button--mixin {
background: var(--dhx-gantt-btn-background);
color: var(--dhx-gantt-btn-color);
border: 1px solid var(--dhx-gantt-btn-border-color);
border-radius: var(--dhx-gantt-border-radius);
height: var(--dhx-gantt-control-height);
padding: var(--dhx-gantt-btn-padding, 0 20px);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
gap: 4px;
flex-shrink: 0;
font-weight: 500;
font-size: var(--dhx-gantt-font-size);
font-family: var(--dhx-gantt-font-family);
font-weight: var(--dhx-gantt-btn-font-weight, normal);
line-height: 142%;
text-transform: var(--dhx-gantt-btn-text-transform);
cursor: pointer;
--dhx-gantt-icon-size: 18px;
}
.dhx_gantt_button--mixin:hover {
background: var(--dhx-gantt-btn-background-hover);
color: var(--dhx-gantt-btn-color-hover);
border-color: var(--dhx-gantt-btn-border-hover);
}
.dhx_gantt_button--mixin:active {
background: var(--dhx-gantt-btn-background-active);
color: var(--dhx-gantt-btn-color-active);
border-color: var(--dhx-gantt-btn-border-active);
}
.dhx_gantt_button--mixin:disabled {
background: var(--dhx-gantt-btn-background-disabled);
color: var(--dhx-gantt-btn-color-disabled);
border-color: var(--dhx-gantt-btn-border-disabled);
}
.dhx_gantt_button_outline--mixin {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color);
--dhx-gantt-btn-background: var(--dhx-gantt-btn-outline-background);
--dhx-gantt-btn-color: var(--dhx-gantt-btn-outline-color);
--dhx-gantt-btn-border-color: var(--dhx-gantt-btn-outline-border-color);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-btn-outline-background-hover);
--dhx-gantt-btn-color-hover: var(--dhx-gantt-btn-outline-color-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-btn-outline-border-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-btn-outline-background-active);
--dhx-gantt-btn-color-active: var(--dhx-gantt-btn-outline-color-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-btn-outline-border-active);
--dhx-gantt-btn-background-disabled: var(--dhx-gantt-btn-outline-background-disabled);
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-btn-outline-color-disabled);
--dhx-gantt-btn-border-color-disabled: var(--dhx-gantt-btn-outline-border-color-disabled);
}
.dhx_gantt_button_danger--mixin {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error-text);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-error-active);
}
.dhx_gantt_button_danger_outline--mixin {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color);
--dhx-gantt-btn-background: transparent;
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-error-lighter);
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-background-disabled: transparent;
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: var(--dhx-gantt-base-colors-icons);
}
.dhx_gantt_button_danger_link--mixin {
--dhx-gantt-icon-size: 18px;
padding: 6px 0;
--dhx-gantt-base-colors-icons: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background: transparent;
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-border-color: transparent;
--dhx-gantt-btn-background-hover: transparent;
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: transparent;
--dhx-gantt-btn-background-active: transparent;
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: transparent;
--dhx-gantt-btn-background-disabled: transparent;
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: transparent;
}
.dhx_gantt_button_link--mixin {
padding: 6px 0;
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: transparent;
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-border-color: transparent;
--dhx-gantt-btn-background-hover: transparent;
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-border-hover: transparent;
--dhx-gantt-btn-background-active: transparent;
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-border-active: transparent;
--dhx-gantt-btn-background-disabled: transparent;
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: transparent;
}
.dhx_gantt_button_icon--mixin {
padding: 8px;
min-width: 32px;
height: 32px;
border-radius: 50%;
padding: 6px 0;
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: transparent;
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-border-color: transparent;
--dhx-gantt-btn-background-hover: transparent;
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-border-hover: transparent;
--dhx-gantt-btn-background-active: transparent;
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-border-active: transparent;
--dhx-gantt-btn-background-disabled: transparent;
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: transparent;
}
.dhx_gantt_button_icon--mixin:hover {
--dhx-gantt-base-colors-icons: var(--dhx-gantt-base-colors-icons-hover);
}
.dhx_gantt_button_icon--mixin:active {
--dhx-gantt-base-colors-icons: var(--dhx-gantt-base-colors-icons-active);
}
.dhx_gantt_button_icon--mixin:disabled {
--dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color-disabled);
}
.dhx_gantt_btn,
.dhx_gantt_btn_danger,
.dhx_gantt_btn_outline,
.dhx_gantt_btn_danger_outline,
.dhx_gantt_btn_danger_link,
.gantt_qi_big_icon,
.gantt_btn_set {
background: var(--dhx-gantt-btn-background);
color: var(--dhx-gantt-btn-color);
border: 1px solid var(--dhx-gantt-btn-border-color);
border-radius: var(--dhx-gantt-border-radius);
height: var(--dhx-gantt-control-height);
padding: var(--dhx-gantt-btn-padding, 0 20px);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
gap: 4px;
flex-shrink: 0;
font-weight: 500;
font-size: var(--dhx-gantt-font-size);
font-family: var(--dhx-gantt-font-family);
font-weight: var(--dhx-gantt-btn-font-weight, normal);
line-height: 142%;
text-transform: var(--dhx-gantt-btn-text-transform);
cursor: pointer;
--dhx-gantt-icon-size: 18px;
}
.dhx_gantt_btn:hover,
.dhx_gantt_btn_danger:hover,
.dhx_gantt_btn_outline:hover,
.dhx_gantt_btn_danger_outline:hover,
.dhx_gantt_btn_danger_link:hover,
.gantt_qi_big_icon:hover,
.gantt_btn_set:hover {
background: var(--dhx-gantt-btn-background-hover);
color: var(--dhx-gantt-btn-color-hover);
border-color: var(--dhx-gantt-btn-border-hover);
}
.dhx_gantt_btn:active,
.dhx_gantt_btn_danger:active,
.dhx_gantt_btn_outline:active,
.dhx_gantt_btn_danger_outline:active,
.dhx_gantt_btn_danger_link:active,
.gantt_qi_big_icon:active,
.gantt_btn_set:active {
background: var(--dhx-gantt-btn-background-active);
color: var(--dhx-gantt-btn-color-active);
border-color: var(--dhx-gantt-btn-border-active);
}
.dhx_gantt_btn:disabled,
.dhx_gantt_btn_danger:disabled,
.dhx_gantt_btn_outline:disabled,
.dhx_gantt_btn_danger_outline:disabled,
.dhx_gantt_btn_danger_link:disabled,
.gantt_qi_big_icon:disabled,
.gantt_btn_set:disabled {
background: var(--dhx-gantt-btn-background-disabled);
color: var(--dhx-gantt-btn-color-disabled);
border-color: var(--dhx-gantt-btn-border-disabled);
}
.gantt_popup_button {
background: var(--dhx-gantt-btn-background);
color: var(--dhx-gantt-btn-color);
border: 1px solid var(--dhx-gantt-btn-border-color);
border-radius: var(--dhx-gantt-border-radius);
height: var(--dhx-gantt-control-height);
padding: var(--dhx-gantt-btn-padding, 0 20px);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
gap: 4px;
flex-shrink: 0;
font-weight: 500;
font-size: var(--dhx-gantt-font-size);
font-family: var(--dhx-gantt-font-family);
font-weight: var(--dhx-gantt-btn-font-weight, normal);
line-height: 142%;
text-transform: var(--dhx-gantt-btn-text-transform);
cursor: pointer;
--dhx-gantt-icon-size: 18px;
}
.gantt_popup_button:hover {
background: var(--dhx-gantt-btn-background-hover);
color: var(--dhx-gantt-btn-color-hover);
border-color: var(--dhx-gantt-btn-border-hover);
}
.gantt_popup_button:active {
background: var(--dhx-gantt-btn-background-active);
color: var(--dhx-gantt-btn-color-active);
border-color: var(--dhx-gantt-btn-border-active);
}
.gantt_popup_button:disabled {
background: var(--dhx-gantt-btn-background-disabled);
color: var(--dhx-gantt-btn-color-disabled);
border-color: var(--dhx-gantt-btn-border-disabled);
}
.gantt_popup_button:not(.gantt_ok_button) {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color);
--dhx-gantt-btn-background: var(--dhx-gantt-btn-outline-background);
--dhx-gantt-btn-color: var(--dhx-gantt-btn-outline-color);
--dhx-gantt-btn-border-color: var(--dhx-gantt-btn-outline-border-color);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-btn-outline-background-hover);
--dhx-gantt-btn-color-hover: var(--dhx-gantt-btn-outline-color-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-btn-outline-border-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-btn-outline-background-active);
--dhx-gantt-btn-color-active: var(--dhx-gantt-btn-outline-color-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-btn-outline-border-active);
--dhx-gantt-btn-background-disabled: var(--dhx-gantt-btn-outline-background-disabled);
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-btn-outline-color-disabled);
--dhx-gantt-btn-border-color-disabled: var(--dhx-gantt-btn-outline-border-color-disabled);
}
.gantt_ok_button {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error-text);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-error-active);
}
.dhx_gantt_btn_outline,
.dhx_gantt_btn_danger_outline {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-base-colors-icons: var(--dhx-gantt-btn-color);
--dhx-gantt-btn-background: var(--dhx-gantt-btn-outline-background);
--dhx-gantt-btn-color: var(--dhx-gantt-btn-outline-color);
--dhx-gantt-btn-border-color: var(--dhx-gantt-btn-outline-border-color);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-btn-outline-background-hover);
--dhx-gantt-btn-color-hover: var(--dhx-gantt-btn-outline-color-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-btn-outline-border-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-btn-outline-background-active);
--dhx-gantt-btn-color-active: var(--dhx-gantt-btn-outline-color-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-btn-outline-border-active);
--dhx-gantt-btn-background-disabled: var(--dhx-gantt-btn-outline-background-disabled);
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-btn-outline-color-disabled);
--dhx-gantt-btn-border-color-disabled: var(--dhx-gantt-btn-outline-border-color-disabled);
}
.dhx_gantt_button_danger {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error-text);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-error-active);
}
.dhx_gantt_button_danger_outline {
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-error-text);
--dhx-gantt-btn-border-color: var(--dhx-gantt-base-colors-error);
--dhx-gantt-btn-background-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-border-hover: var(--dhx-gantt-base-colors-error-hover);
--dhx-gantt-btn-background-active: var(--dhx-gantt-base-colors-error-active);
--dhx-gantt-btn-border-active: var(--dhx-gantt-base-colors-error-active);
}
.dhx_gantt_button_link,
.gantt_qi_big_icon {
padding: 6px 0;
--dhx-gantt-icon-size: 18px;
--dhx-gantt-btn-background: transparent;
--dhx-gantt-btn-color: var(--dhx-gantt-base-colors-primary);
--dhx-gantt-btn-border-color: transparent;
--dhx-gantt-btn-background-hover: transparent;
--dhx-gantt-btn-color-hover: var(--dhx-gantt-base-colors-primary-hover);
--dhx-gantt-btn-border-hover: transparent;
--dhx-gantt-btn-background-active: transparent;
--dhx-gantt-btn-color-active: var(--dhx-gantt-base-colors-primary-active);
--dhx-gantt-btn-border-active: transparent;
--dhx-gantt-btn-background-disabled: transparent;
--dhx-gantt-btn-color-disabled: var(--dhx-gantt-base-colors-icons);
--dhx-gantt-btn-border-color-disabled: transparent;
}
@font-face {
font-family: "dhx-gantt-icons";
/* src: url("src/dhx-gantt-icons.woff?d2ea3e087edb3b9fad35a6580bd8acd3") format("woff"),
url("src/dhx-gantt-icons.woff2?d2ea3e087edb3b9fad35a6580bd8acd3") format("woff2"); */
src: url("data:font/woff;base64,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") format("woff"), url("data:font/woff2;base64,d09GMgABAAAAAAVgAAsAAAAADHgAAAUSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACEQgqGcIV9ATYCJANECyQABCAFhGoHhAEbGwsjEXaDUZpA9o+E7LTkMj3uJ6P42UJ6Z4Ln+XfLzk2CvYeOpONCV4Ua1JQhX1URmFVluib+pVo1AmBTZxn2J/LjFhx7e7s/rSHL0LOlnKzQ/7+fq5uXLMxKJUVK+qL33Y+qJLHEIRInHVGNYiGPUMhUL60DAmPTWQn6KmyefREEUFxCDCPes3+S4LTR82ZQgoUYLzCvLNMmTxyN1wvDqqgseBHcTTeVkOzCBfzJl0DL+M13BRkABi4TcajBExLjeP2wHA5LFCiVXmh9zYgzQG++CUQPLELmVMdNw5zmRTFRqjiLrubcFgKHw7kch2XIHvZsIBiYWLi8f/M8ePGh0PgJECREGMSNIH70n+eH4bAUwBgNANAEAC0A0AUAugFADwDoBQB9AKACADUA6AcAAwBgEAAMAYBhNMRBZLhBDVAJ/A9yMUJZZhGRcQZmwWEUB8vn83ssYg2SleX1iRO7tMs0LX8o0smyHI3TnEy1tjlKki1OW1PKaVlMbmpLNvuq1hjRopqcKjTsMEebynCoqqXNKcTmczJsZWrDWZXupLe2i6hmjXJsVaDQ4mxNr9q3JbO6fXKawqQSZ0tB05DW9tV2LDM4iXacIcOcYUMdrVQRhtIu6013lU7vK0jueyAjsrr9wUInzy3PZu9YfWfHc1ufefj2Vbc99LTTmrGbMs+qLc+/vH/VI6+8oLd+9pasviO537M6Cr35dHGmRzwyRhSLxOPcc+miPk5ZNfnn+0giEU9ECmpAQ0//coJFsevWlK+5rlfv4MabQzczNdF1Z9XOroMHqXQ2mj0c/S/Ky9dcuaB0wZXdu/mXbDq5KZ3ouqtqV9dBlefsG9MHdo1T/+tMZtO45eOGv/hx7OPW4seKSY9VBwrkIL6+5s555u0D27cFg2//646/fPNH8UD88vjP+/dff32xKqlHD/zAstSB//l/82PFjw0T+/Urzl8H32THjRw57pYJ8yKfqE/VJ5F5LKvNj2V/bfylI9YQ6/il8ddsbOCjtbdsuvzccrv4y5rOl0Vrvyyu2e2tsb9b1q8sWXb1qCR5rMitEvIZyY21p2b7D5pDkDvBOQkZpuNiSDThpNhVcQfEAz7eJVhqJUvcNzxmyS9PKwIc4F4oygL8KkUknJXoW/t9+GqsER4ZuuG4V0sUYFn946ugd6upTcOL4cYLNGGGU+VyUvtO5p8mpqJl0ZuM2wN7KgxEtCiXfHGWNACFAnKIhDDv7jZBCDWuCAYeQnPZnCo2aktfb3WhucLqJkQXq6KVgZtr8lmMiVg+hAq2GVaDIFmrSQXPqy39t1YXNsesbipEWRUpafpImgu/ZIV2W257FMn9SJi+wc6hZ0Vrma/+gZMnVHVRKZ/iBAjcC2g17CotthExyjBFdSQUCIHUxHSGUQonMh3K0ri3VIwUM+22HNujSI4fCdM34J059NysAxV1/4GTT7yjqCmomqtPBLs49wI6ZtiHMWkxSePGGFXUZYqKYzemoRykTDGZ1POdYZQC1yFnOlBavZmmpNixEh/5ocCfyj6IiCGmWOISt3jEK77P6Gp+CUhQQhKWiORxd520raat1vbMtLa6GBxvlBPN06Xr4hgowac/M2ES7j1KG8AY3tEkAvqjgQcTBa+/7Ez21ukZ0GfCRv5duaohgMCjwnckqV2AxY99uCiZzhDH2zgtAs5nqM+7jeyue72MVL7XpDegKczprSLTjBr0pW5bT2nxETjLAAA=") format("woff2");
}
.dhx_gantt_icon:before {
font-family: dhx-gantt-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
color: var(--dhx-gantt-base-colors-icons);
font-size: var(--dhx-gantt-icon-size, 1.5em);
}
.dhx_gantt_icon.dhx_gantt_icon_arrow_down:before {
content: "\f101";
}
.dhx_gantt_icon.dhx_gantt_icon_arrow_up:before {
content: "\f102";
}
.dhx_gantt_icon.dhx_gantt_icon_close:before {
content: "\f103";
}
.dhx_gantt_icon.dhx_gantt_icon_constraint_left_dotted:before {
content: "\f104";
}
.dhx_gantt_icon.dhx_gantt_icon_constraint_left_solid:before {
content: "\f105";
}
.dhx_gantt_icon.dhx_gantt_icon_constraint_right_dotted:before {
content: "\f106";
}
.dhx_gantt_icon.dhx_gantt_icon_constraint_right_solid:before {
content: "\f107";
}
.dhx_gantt_icon.dhx_gantt_icon_delete:before {
content: "\f108";
}
.dhx_gantt_icon.dhx_gantt_icon_dots_vertical:before {
content: "\f109";
}
.dhx_gantt_icon.dhx_gantt_icon_edit:before {
content: "\f10a";
}
.dhx_gantt_icon.dhx_gantt_icon_menu_down:before {
content: "\f10b";
}
.dhx_gantt_icon.dhx_gantt_icon_menu_right:before {
content: "\f10c";
}
.dhx_gantt_icon.dhx_gantt_icon_minus:before {
content: "\f10d";
}
.dhx_gantt_icon.dhx_gantt_icon_plus:before {
content: "\f10e";
}
.dhx_gantt_icon.dhx_gantt_icon_rounded_arrow_right:before {
content: "\f10f";
}
.dhx_gantt_icon.dhx_gantt_icon_timer:before {
content: "\f110";
max-width: 100%;
max-height: 100%;
font-size: 1em;
}
.gantt_container {
background: var(--dhx-gantt-container-background);
color: var(--dhx-gantt-container-color);
font-family: var(--dhx-gantt-font-family);
font-size: var(--dhx-gantt-font-size);
border: 1px solid var(--dhx-gantt-base-colors-border);
position: relative;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
.gantt_touch_active {
overscroll-behavior: none;
}
.gantt_task_scroll {
overflow-x: scroll;
}
.gantt_task,
.gantt_grid {
position: relative;
overflow-x: hidden;
overflow-y: hidden;
display: inline-block;
vertical-align: top;
}
.gantt_grid_scale,
.gantt_task_scale {
font-family: var(--dhx-gantt-font-family);
font-size: var(--dhx-gantt-font-size);
border-bottom: var(--dhx-gantt-scale-border-horizontal);
box-sizing: border-box;
}
.gantt_grid_scale {
background: var(--dhx-gantt-grid-scale-background);
color: var(--dhx-gantt-grid-scale-color);
}
.gantt_task_scale {
background: var(--dhx-gantt-timeline-scale-background);
color: var(--dhx-gantt-timeline-scale-color);
}
.gantt_task_vscroll {
background: var(--dhx-gantt-container-background);
}
.gantt_scale_line {
box-sizing: border-box;
border-top: var(--dhx-gantt-scale-border-horizontal);
}
.gantt_scale_line:first-child {
border-top: none;
}
.gantt_grid_head_cell {
display: inline-block;
vertical-align: top;
border-right: var(--dhx-gantt-grid-scale-bo