.gantt-container{height:var(--gv-grid-height);border-radius:8px;width:100%;font-size:12px;line-height:14.5px;position:relative;overflow:auto;& .popup-wrapper{z-index:1000;background:#fff;border-radius:5px;width:max-content;padding:10px;position:absolute;top:0;left:0;box-shadow:0 10px 24px -3px #0003;& .title{color:var(--g-text-dark);margin-bottom:2px;font-size:.85rem;font-weight:650;line-height:15px}& .subtitle{color:var(--g-text-dark);margin-bottom:5px;font-size:.8rem}& .details{color:var(--g-text-muted);font-size:.7rem}& .actions{margin-top:10px;margin-left:3px}& .action-btn{background-color:var(--g-popup-actions);border:none;border-right:1px solid var(--g-text-light);padding:5px 8px;&:hover{background-color:brightness(97%)}&:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}&:last-child{border-right:none;border-top-right-radius:4px;border-bottom-right-radius:4px}}}& .grid-header{height:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);background-color:var(--g-header-background);border-bottom:1px solid var(--g-row-border-color);z-index:1000;position:sticky;top:0;left:0}& .lower-text,& .upper-text{text-anchor:middle}& .upper-header{height:var(--gv-upper-header-height)}& .lower-header{height:var(--gv-lower-header-height)}& .lower-text{width:calc(var(--gv-column-width)*.8);height:calc(var(--gv-lower-header-height)*.8);margin:0 calc(var(--gv-column-width)*.1);text-align:center;color:var(--g-text-muted);align-content:center;font-size:12px;position:absolute}& .upper-text{color:var(--g-text-dark);height:calc(var(--gv-lower-header-height)*.66);width:fit-content;font-size:14px;font-weight:500;position:absolute}& .current-upper{background:#fff;padding-left:17px;position:sticky;left:0!important}& .side-header{float:right;z-index:1000;background:var(--g-header-background);width:max-content;margin-left:auto;padding-top:10px;padding-right:10px;font-weight:400;line-height:20px;display:flex;position:sticky;top:0;right:0}& .side-header *{background-color:var(--g-actions-background);text-align:-webkit-center;color:var(--g-text-dark);letter-spacing:.02em;box-sizing:content-box;border:none;border-radius:.5rem;margin-right:5px;padding:5px 8px;font-size:14px;font-weight:420;transition-property:background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);&:last-child{margin-right:0}&:hover{filter:brightness(97.5%)}}& .side-header select{width:50px;padding-right:1.25rem}& .date-range-highlight{background-color:var(--g-progress-color);height:calc(var(--gv-lower-header-height) - 6px);top:calc(var(--gv-upper-header-height) + 5px);border-radius:12px;position:absolute}& .current-highlight{background:var(--g-today-highlight);z-index:999;width:1px;position:absolute}& .current-ball-highlight{background:var(--g-today-highlight);z-index:1001;border-radius:50%;position:absolute}& .current-date-highlight{background:var(--g-today-highlight);color:var(--g-text-light);border-radius:5px}& .holiday-label{opacity:0;z-index:1000;background:--g-weekend-label-color;border-radius:5px;padding:2px 5px;position:absolute;top:0;left:0;&.show{opacity:100}}& .extras{position:sticky;left:0;& .adjust{left:8px;top:calc(var(--gv-grid-height) - 60px);color:#fff;background-color:#000000b3;border:none;border-radius:3px;padding:8px;position:absolute}}& .hide{display:none}}.gantt{-webkit-user-select:none;user-select:none;position:absolute;& .grid-background{fill:none}& .grid-row{fill:var(--g-row-color)}& .row-line{stroke:var(--g-border-color)}& .tick{stroke:var(--g-tick-color);stroke-width:.4px;&.thick{stroke:var(--g-tick-color-thick);stroke-width:.7px}}& .arrow{fill:none;stroke:var(--g-arrow-color);stroke-width:1.5px}& .bar-wrapper .bar{fill:var(--g-bar-color);stroke:var(--g-bar-border);stroke-width:0;transition:stroke-width .3s}& .bar-progress{fill:var(--g-progress-color);border-radius:4px}& .bar-expected-progress{fill:var(--g-expected-progress)}& .bar-invalid{fill:#0000;stroke:var(--g-bar-border);stroke-width:1px;stroke-dasharray:5;&~.bar-label{fill:var(--g-text-light)}}& .bar-label{fill:var(--g-text-dark);dominant-baseline:central;font-family:Helvetica;font-size:13px;font-weight:400;&.big{fill:var(--g-text-dark);text-anchor:start}}& .handle{fill:var(--g-handle-color);opacity:0;transition:opacity .3s;&.active,&.visible{cursor:ew-resize;opacity:1}}& .handle.progress{fill:var(--g-text-muted)}& .bar-wrapper{cursor:pointer;& .bar{outline:1px solid var(--g-row-border-color);border-radius:3px}&:hover{& .bar{transition:transform .3s}& .date-range-highlight{display:block}}}}