igv 2.13.3 → 2.13.5

package/dist/igv.esm.js

@@ -21237,6 +21237,8 @@ const FRAME_HEIGHT = 25;
 const FRAME_BORDER = 5;
 const BP_PER_PIXEL_THRESHOLD = 1 / 10;
 
+const bppFeatureFetchThreshold = 10;
+
 class SequenceTrack {
 
     constructor(config, browser) {
@@ -21289,7 +21291,6 @@ class SequenceTrack {
         ]
     }
 
-
     contextMenuItemList(clickState) {
         const viewport = clickState.viewport;
         if (viewport.referenceFrame.bpPerPixel <= 1) {
@@ -21340,7 +21341,6 @@ class SequenceTrack {
         }
     }
 
-
     translateSequence(seq) {
 
         const threeFrame = [[], [], []];
@@ -21367,9 +21367,11 @@ class SequenceTrack {
     }
 
     async getFeatures(chr, start, end, bpPerPixel) {
+
         start = Math.floor(start);
         end = Math.floor(end);
-        if (bpPerPixel && bpPerPixel > 1) {
+
+        if (bpPerPixel && bpPerPixel > bppFeatureFetchThreshold) {
             return null
         } else {
             const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
@@ -21388,7 +21390,6 @@ class SequenceTrack {
 
             let sequence = options.features.sequence;
             if(!sequence) {
-                console.error("No sequence");
                 return
             }
 
@@ -21555,17 +21556,9 @@ class Viewport {
             this.alert = new AlertDialog(this.$viewport.get(0));
         }
 
-        this.$content = $$1("<div>", {class: 'igv-viewport-content'});
-        this.$viewport.append(this.$content);
-
-        this.$content.height(this.$viewport.height());
-        this.contentDiv = this.$content.get(0);
+        this.contentTop = 0;
+        this.contentHeight = this.$viewport.height();
 
-        // this.$canvas = $('<canvas>')
-        // this.$content.append(this.$canvas)
-        //
-        // this.canvas = this.$canvas.get(0)
-        // this.ctx = this.canvas.getContext("2d")
 
         this.$viewport.width(width);
 
@@ -21581,7 +21574,8 @@ class Viewport {
         if (!this.messageDiv) {
             this.messageDiv = document.createElement('div');
             this.messageDiv.className = 'igv-viewport-message';
-            this.contentDiv.append(this.messageDiv);
+            //this.contentDiv.append(this.messageDiv)
+            this.$viewport.append($$1(this.messageDiv));
         }
         this.messageDiv.textContent = message;
         this.messageDiv.style.display = 'inline-block';
@@ -21610,15 +21604,15 @@ class Viewport {
 
     setTop(contentTop) {
 
-        const viewportHeight = this.$viewport.height();
-        const viewTop = -contentTop;
-        const viewBottom = viewTop + viewportHeight;
-
-        this.$content.css('top', `${contentTop}px`);
+        this.contentTop = contentTop;
+        this.$viewport.height();
 
-        if (undefined === this.canvasVerticalRange || this.canvasVerticalRange.bottom < viewBottom || this.canvasVerticalRange.top > viewTop) {
-            this.repaint();
-        }
+        //this.$content.css('top', `${contentTop}px`)
+        //
+        // if (undefined === this.canvasVerticalRange || this.canvasVerticalRange.bottom < viewBottom || this.canvasVerticalRange.top > viewTop) {
+        //     console.log("Repaint " + this.canvasVerticalRange)
+        //    this.repaint()
+        // }
 
     }
 
@@ -21646,7 +21640,8 @@ class Viewport {
         } else if (typeof track.computePixelHeight === 'function') {
             if (features && features.length > 0) {
                 let requiredContentHeight = track.computePixelHeight(features);
-                let currentContentHeight = this.$content.height();
+                //let currentContentHeight = this.$content.height()
+                let currentContentHeight = this.contentHeight;
                 if (requiredContentHeight !== currentContentHeight) {
                     this.setContentHeight(requiredContentHeight);
                 }
@@ -21655,14 +21650,12 @@ class Viewport {
     }
 
     getContentHeight() {
-        return this.$content.height()
+        //return this.$content.height()
+        return this.contentHeight
     }
 
     setContentHeight(contentHeight) {
-
-        // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
-        contentHeight = Math.min(contentHeight, 32000);
-        this.$content.height(contentHeight);
+       this.contentHeight = contentHeight;
     }
 
     isLoading() {
@@ -21686,7 +21679,7 @@ class Viewport {
     }
 
     getContentTop() {
-        return this.contentDiv.offsetTop
+        return this.contentTop
     }
 
     containsPosition(chr, position) {
@@ -23852,7 +23845,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.13.3";
+const _version = "2.13.5";
 function version() {
     return _version
 }
@@ -24358,7 +24351,7 @@ class TrackViewport extends Viewport {
 
         const track = this.trackView.track;
         if ('sequence' !== track.type) {
-            this.$zoomInNotice = this.createZoomInNotice(this.$content);
+            this.$zoomInNotice = this.createZoomInNotice(this.$viewport);
         }
 
         if (track.name && "sequence" !== track.id) {
@@ -24418,7 +24411,7 @@ class TrackViewport extends Viewport {
             }
         };
 
-        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
+        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > bppFeatureFetchThreshold) {
             $$1(this.canvas).remove();
             this.canvas = undefined;
             //this.featureCache = undefined
@@ -24469,6 +24462,34 @@ class TrackViewport extends Viewport {
         }
     }
 
+    /**
+     * Set the content top of the current view.  This is triggered by scrolling.   If the current canvas extent is not
+     * sufficient to cover the new vertical range repaint.
+     *
+     * @param contentTop - the "top" property of the virtual content div, 0 unless track is scrolled vertically
+     *
+     *
+     */
+    setTop(contentTop) {
+        super.setTop(contentTop);
+
+        if (!this.canvas) {
+            this.repaint();
+        } else {
+            // See if currently painted canvas covers the vertical range of the viewport.  If not repaint
+            const h = this.$viewport.height();
+            const vt = contentTop + this.canvas._data.canvasTop;
+            const vb = contentTop + this.canvas._data.canvasBottom;
+            if (vt > 0 || vb < h) {
+                this.repaint();
+            }
+        }
+
+        // Now offset backing canvas to align with the contentTop visual offset.
+        let offset = contentTop + this.canvas._data.canvasTop;
+        this.canvas.style.top = `${offset}px`;
+    }
+
     async loadFeatures() {
 
         const referenceFrame = this.referenceFrame;
@@ -24476,7 +24497,7 @@ class TrackViewport extends Viewport {
 
         // Expand the requested range so we can pan a bit without reloading.  But not beyond chromosome bounds
         const chrLength = this.browser.genome.getChromosome(chr).bpLength;
-        const pixelWidth = this.$content.width();// * 3;
+        const pixelWidth = this.$viewport.width();// * 3;
         const bpWidth = pixelWidth * referenceFrame.bpPerPixel;
         const bpStart = Math.floor(Math.max(0, referenceFrame.start - bpWidth));
         const bpEnd = Math.ceil(Math.min(chrLength, referenceFrame.start + bpWidth + bpWidth));  // Add one screen width to end
@@ -24517,6 +24538,12 @@ class TrackViewport extends Viewport {
         }
     }
 
+    /**
+     * Compute the genomic extent and needed pixelWidth to repaint the canvas for the current genomic state.
+     * Normally the canvas is size 3X the width of the viewport, however there is no left-right panning for WGV so
+     * canvas width is viewport width.
+     * @returns {{bpEnd: *, pixelWidth: (*|number), bpStart: number}}
+     */
     repaintDimensions() {
         const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
         const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
@@ -24539,12 +24566,8 @@ class TrackViewport extends Viewport {
         }
 
         const {features, roiFeatures} = this.featureCache;
-        //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
-
-        // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
-        GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
 
-        // Canvas dimensions. There is no left-right panning for WGV so canvas width is viewport width.
+        // Canvas dimensions.
         // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
         const {bpStart, bpEnd, pixelWidth} = this.repaintDimensions();
         const viewportHeight = this.$viewport.height();
@@ -24557,14 +24580,15 @@ class TrackViewport extends Viewport {
             }
             return
         }
-        const canvasTop = Math.max(0, -(this.$content.position().top) - viewportHeight);
+        const canvasTop = Math.max(0, -this.contentTop - viewportHeight);
+
 
         const bpPerPixel = this.referenceFrame.bpPerPixel;
-        //const bpStart = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel)
-        //const bpEnd = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel)
         const pixelXOffset = Math.round((bpStart - this.referenceFrame.start) / bpPerPixel);
 
-        const newCanvas = $$1('<canvas class="igv-canvas">').get(0);
+        const newCanvas = document.createElement('canvas');//  $('<canvas class="igv-canvas">').get(0)
+        newCanvas.style.position = 'relative';
+        newCanvas.style.display = 'block';
         newCanvas.style.width = pixelWidth + "px";
         newCanvas.style.height = pixelHeight + "px";
         newCanvas.style.left = pixelXOffset + "px";
@@ -24590,6 +24614,8 @@ class TrackViewport extends Viewport {
                 bpStart: bpStart,
                 bpEnd: bpEnd,
                 bpPerPixel,
+                canvasTop,
+                canvasBottom: canvasTop + pixelHeight,
                 referenceFrame: this.referenceFrame,
                 selection: this.selection,
                 viewport: this,
@@ -24603,7 +24629,7 @@ class TrackViewport extends Viewport {
         }
         newCanvas._data = drawConfiguration;
         this.canvas = newCanvas;
-        this.$content.append($$1(newCanvas));
+        this.$viewport.append($$1(newCanvas));
 
     }
 
@@ -24625,13 +24651,11 @@ class TrackViewport extends Viewport {
      */
     draw(drawConfiguration, features, roiFeatures) {
 
-        // console.log(`${ Date.now() } viewport draw(). track ${ this.trackView.track.type }. content-css-top ${ this.$content.css('top') }. canvas-top ${ drawConfiguration.pixelTop }.`)
-
         if (features) {
             drawConfiguration.features = features;
             this.trackView.track.draw(drawConfiguration);
         }
-        if (roiFeatures) {
+        if (roiFeatures && roiFeatures.length > 0) {
             for (let r of roiFeatures) {
                 drawConfiguration.features = r.features;
                 r.track.draw(drawConfiguration);
@@ -24655,13 +24679,13 @@ class TrackViewport extends Viewport {
 
         if (!this.canvas) return
 
-        const canvasMetadata = this.featureCache;
+        const canvasMetadata = this.canvas._data;
         const canvasTop = canvasMetadata ? canvasMetadata.canvasTop : 0;
         const devicePixelRatio = window.devicePixelRatio;
         const w = this.$viewport.width() * devicePixelRatio;
         const h = this.$viewport.height() * devicePixelRatio;
         const x = -$$1(this.canvas).position().left * devicePixelRatio;
-        const y = (-this.$content.position().top - canvasTop) * devicePixelRatio;
+        const y = (-this.contentTop - canvasTop) * devicePixelRatio;
 
         const ctx = this.canvas.getContext("2d");
         const imageData = ctx.getImageData(x, y, w, h);
@@ -24679,57 +24703,82 @@ class TrackViewport extends Viewport {
 
     saveSVG() {
 
-        const {width, height} = this.$viewport.get(0).getBoundingClientRect();
+        const marginTop = 32;
+        const marginLeft = 32;
+
+        let {width, height} = this.browser.columnContainer.getBoundingClientRect();
+
+        const h_render = 8000;
 
         const config =
             {
+
                 width,
-                height,
+                height: h_render,
+
+                backdropColor: 'white',
+
+                multiLocusGap: 0,
+
                 viewbox:
                     {
                         x: 0,
-                        y: -this.$content.position().top,
+                        y: 0,
                         width,
-                        height
+                        height: h_render
                     }
 
             };
 
         const context = new ctx(config);
 
-        const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
+        const delta =
+            {
+                deltaX: marginLeft,
+                deltaY: marginTop
+            };
 
-        const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
-        const id = `${str}_referenceFrame_${index}_guid_${guid$2()}`;
+        this.renderViewportToSVG(context, delta);
 
-        this.drawSVGWithContext(context, width, height, id, 0, 0, 0);
+        // reset height to trim away unneeded svg canvas real estate. Yes, a bit of a hack.
+        context.setHeight(height);
+
+        const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
+        const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
 
         const svg = context.getSerializedSvg(true);
         const data = URL.createObjectURL(new Blob([svg], {type: "application/octet-stream"}));
 
+        const id = `${str}_referenceFrame_${index}_guid_${guid$2()}`;
         download(`${id}.svg`, data);
+
     }
 
     // called by trackView.renderSVGContext() when rendering
     // entire browser as SVG
 
-    renderSVGContext(context, {deltaX, deltaY}) {
+    renderViewportToSVG(context, {deltaX, deltaY}) {
 
-        // Nothing to do if zoomInNotice is active
         if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
             return
         }
 
-        const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
+        const {width, height} = this.$viewport.get(0).getBoundingClientRect();
 
+        const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
         const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
         const id = `${str}_referenceFrame_${index}_guid_${guid$2()}`;
+        this.drawSVGWithContext(context, width, height, id, deltaX, deltaY + this.contentTop, -this.contentTop);
 
-        const {top: yScrollDelta} = this.$content.position();
+    }
 
-        const {width, height} = this.$viewport.get(0).getBoundingClientRect();
+    renderSVGContext(context, {deltaX, deltaY}) {
 
-        this.drawSVGWithContext(context, width, height, id, deltaX, deltaY + yScrollDelta, -yScrollDelta);
+        this.renderViewportToSVG(context, {deltaX, deltaY});
+
+        if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
+            return
+        }
 
         if (this.$trackLabel && true === this.browser.trackLabelsVisible) {
             const {x, y, width, height} = relativeDOMBBox(this.$viewport.get(0), this.$trackLabel.get(0));
@@ -24787,7 +24836,7 @@ class TrackViewport extends Viewport {
                 selection: this.selection
             };
 
-        const features = this.featureCache ? this.featureCache.features : [];
+        const features = this.featureCache ? this.featureCache.features : undefined;
         const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined;
         this.draw(config, features, roiFeatures);
 
@@ -24805,7 +24854,6 @@ class TrackViewport extends Viewport {
     }
 
     async getFeatures(track, chr, start, end, bpPerPixel) {
-
         if (this.featureCache && this.featureCache.containsRange(chr, start, end, bpPerPixel)) {
             return this.featureCache.features
         } else if (typeof track.getFeatures === "function") {
@@ -24887,22 +24935,21 @@ class TrackViewport extends Viewport {
         viewport.addEventListener('touchend', mu);
 
         // Mouse move
-        if (typeof this.trackView.track._hoverText === 'function') {
+        if (typeof this.trackView.track.hoverText === 'function') {
             viewport.addEventListener('mousemove', (event => {
-                if (Date.now() - lastHoverUpdateTime > 100) {
+                if (event.buttons === 0 && (Date.now() - lastHoverUpdateTime > 100)) {
                     lastHoverUpdateTime = Date.now();
-                    const clickState = createClickState(event, this);
+                    const clickState = this.createClickState(event);
                     if (clickState) {
-                        const hoverText = this.trackView.track._hoverText(clickState);
-                        if (hoverText) {
-                            this.$viewport[0].setAttribute("title", hoverText);
+                        const tooltip = this.trackView.track.hoverText(clickState);
+                        if (tooltip) {
+                            this.$viewport[0].setAttribute("title", tooltip);
                         } else {
                             this.$viewport[0].removeAttribute("title");
                         }
                     }
                 }
             }));
-
         }
 
         this.addViewportClickHandler(this.$viewport.get(0));
@@ -24922,7 +24969,7 @@ class TrackViewport extends Viewport {
                 return false
             }
 
-            const clickState = createClickState(event, this);
+            const clickState = this.createClickState(event);
 
             if (undefined === clickState) {
                 return false
@@ -25024,7 +25071,7 @@ class TrackViewport extends Viewport {
 
                         popupTimerID = setTimeout(() => {
 
-                                const content = getPopupContent(event, this);
+                                const content = this.getPopupContent(event);
                                 if (content) {
                                     if (this.popover) this.popover.dispose();
                                     this.popover = new Popover(this.browser.columnContainer);
@@ -25068,57 +25115,58 @@ class TrackViewport extends Viewport {
         });
     }
 
-}
+    createClickState(event) {
 
-function createClickState(event, viewport) {
+        if (!this.canvas) return  // Can happen during initialization
 
-    if (!viewport.contentDiv || !viewport.canvas) return  // Can happen during initialization
+        const referenceFrame = this.referenceFrame;
+        const viewportCoords = translateMouseCoordinates$1(event, this.$viewport.get(0));
+        const canvasCoords = translateMouseCoordinates$1(event, this.canvas);
+        const genomicLocation = ((referenceFrame.start) + referenceFrame.toBP(viewportCoords.x));
 
-    const referenceFrame = viewport.referenceFrame;
-    const viewportCoords = translateMouseCoordinates$1(event, viewport.contentDiv);
-    const canvasCoords = translateMouseCoordinates$1(event, viewport.canvas);
-    const genomicLocation = ((referenceFrame.start) + referenceFrame.toBP(viewportCoords.x));
+        return {
+            event,
+            viewport: this,
+            referenceFrame,
+            genomicLocation,
+            y: viewportCoords.y - this.contentTop,
+            canvasX: canvasCoords.x,
+            canvasY: canvasCoords.y
+        }
 
-    return {
-        event,
-        viewport,
-        referenceFrame,
-        genomicLocation,
-        x: viewportCoords.x,
-        y: viewportCoords.y,
-        canvasX: canvasCoords.x,
-        canvasY: canvasCoords.y
     }
 
-}
+    getPopupContent(event) {
 
-function getPopupContent(event, viewport) {
+        const clickState = this.createClickState(event);
 
-    const clickState = createClickState(event, viewport);
+        if (undefined === clickState) {
+            return
+        }
 
-    if (undefined === clickState) {
-        return
-    }
+        let track = this.trackView.track;
+        const dataList = track.popupData(clickState);
 
-    let track = viewport.trackView.track;
-    const dataList = track.popupData(clickState);
+        const popupClickHandlerResult = this.browser.fireEvent('trackclick', [track, dataList]);
 
-    const popupClickHandlerResult = viewport.browser.fireEvent('trackclick', [track, dataList]);
+        let content;
+        if (undefined === popupClickHandlerResult || true === popupClickHandlerResult) {
+            // Indicates handler did not handle the result, or the handler wishes default behavior to occur
+            if (dataList && dataList.length > 0) {
+                content = formatPopoverText(dataList);
+            }
 
-    let content;
-    if (undefined === popupClickHandlerResult || true === popupClickHandlerResult) {
-        // Indicates handler did not handle the result, or the handler wishes default behavior to occur
-        if (dataList && dataList.length > 0) {
-            content = formatPopoverText(dataList);
+        } else if (typeof popupClickHandlerResult === 'string') {
+            content = popupClickHandlerResult;
         }
 
-    } else if (typeof popupClickHandlerResult === 'string') {
-        content = popupClickHandlerResult;
+        return content
     }
 
-    return content
+
 }
 
+
 function formatPopoverText(nameValues) {
 
     const rows = nameValues.map(nameValue => {
@@ -25698,6 +25746,9 @@ function decodeBed(tokens, header) {
                 feature.attributes = {};
                 for (let kv of attributeKVs) {
                     feature.attributes[kv[0]] = kv[1];
+                    if (header.nameField != undefined && kv[0] === header.nameField) {
+                        feature.name = kv[1];
+                    }
                 }
             }
             if (!feature.name) {
@@ -26717,6 +26768,7 @@ class TrackBase {
      * @param config
      */
     init(config) {
+
         if (config.displayMode) {
             config.displayMode = config.displayMode.toUpperCase();
         }
@@ -26772,8 +26824,12 @@ class TrackBase {
             }
         }
 
-        if(config.hoverTextFields) {
-            this.hoverTextFields = config.hoverTextFields;
+        // Support for mouse hover text.  This can be expensive, off by default.
+        // this.hoverText = function(clickState) => return tool tip text
+        if (config.hoverTextFields) {
+            this.hoverText = hoverText.bind(this);
+        } else if (typeof this.config.hoverText === 'function') {
+            this.hoverText = this.config.hoverText;
         }
     }
 
@@ -26888,7 +26944,7 @@ class TrackBase {
      */
     setTrackProperties(properties) {
 
-        if(this.disposed) return;   // This track was removed during async load
+        if (this.disposed) return   // This track was removed during async load
 
         const tracklineConfg = {};
         let tokens;
@@ -26991,20 +27047,20 @@ class TrackBase {
     }
 
     /**
-     * Return the features clicked over.  Default implementation assumes a single row of features and only considers
+     * Return the features clicked over.  Default implementation assumes an array of features and only considers
      * the genomic location.   Overriden by most subclasses.
      *
      * @param clickState
      * @param features
      * @returns {[]|*[]}
      */
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        if (!features) features = clickState.viewport.cachedFeatures;
+        const features = clickState.viewport.cachedFeatures;
 
-        if (!features || features.length === 0) {
+        if (!features || !Array.isArray(features) || features.length === 0) {
             return []
         }
 
@@ -27102,65 +27158,6 @@ class TrackBase {
 
     }
 
-    /**
-     * Return a plain string for descriptive text given the list of features.  The string is used to set a "title"
-     * attribute and cannot contain any html.
-     *
-     * @returns {undefined}
-     */
-    _hoverText(clickState) {
-
-        const features = this.clickedFeatures(clickState);
-
-        if (features && features.length > 0) {
-            let str = "";
-            for (let i = 0; i < features.length; i++) {
-                if (i === 10) {
-                    str += "; ...";
-                    break
-                }
-                if (!features[i]) continue
-
-                const f = features[i]._f || features[i];
-                if (str.length > 0) str += "\n";
-
-                if(this.hoverTextFields) {
-                    str = "";
-                    for(let field of this.hoverTextFields) {
-                        if(str.length > 0) str += "\n";
-                        if(f.hasOwnProperty(field)) {
-                            str += f[field];
-                        } else if(typeof f.getAttribute === "function") {
-                            str += f.getAttribute(field);
-                        }
-                    }
-                }
-                else if (typeof this.config.hoverText === 'function') {
-                    str += this.config.hoverText(f);
-                } else if (typeof f.hoverText === 'function') {
-                    str += f.hoverText();
-                } else {
-                   str += this.hoverText(f);
-                }
-            }
-            return str
-        }
-    }
-
-    /**
-     * Default hoverText function.  Can be overridden in track configuration or subclasses
-     *
-     * @param f - feature hovered over
-     */
-    hoverText(f) {
-        let str = "";
-        if (f.name) {
-            str += f.name;
-            if (f.value) str += ": ";
-        }
-        if (f.value) str += f.value;   // TODO format value if number
-        return str;
-    }
 
     /**
      * Default track description -- displayed on click of track label.  This can be overriden in the track
@@ -27233,6 +27230,38 @@ class TrackBase {
     }
 }
 
+function hoverText(clickState) {
+
+    if (!this.hoverTextFields) return
+
+    const features = this.clickedFeatures(clickState);
+
+    if (features && features.length > 0) {
+        let str = "";
+        for (let i = 0; i < features.length; i++) {
+            if (i === 10) {
+                str += "; ...";
+                break
+            }
+            if (!features[i]) continue
+
+            const f = features[i]._f || features[i];
+            if (str.length > 0) str += "\n";
+
+            str = "";
+            for (let field of this.hoverTextFields) {
+                if (str.length > 0) str += "\n";
+                if (f.hasOwnProperty(field)) {
+                    str += f[field];
+                } else if (typeof f.getAttribute === "function") {
+                    str += f.getAttribute(field);
+                }
+            }
+
+        }
+        return str
+    }
+}
 
 /**
  * Map UCSC track line "type" setting to file format.  In igv.js "type" refers to the track type, not the input file format
@@ -27431,12 +27460,6 @@ class SegFeature {
         return pd
     }
 
-    hoverText() {
-
-        return `${this.sample}: ${this.value}`
-    }
-
-
     extractCravatLink(genomeId) {
 
         let ref, alt;
@@ -27720,10 +27743,6 @@ class Variant {
         return fields
     }
 
-    hoverText() {
-        return `${this.names}  ${this.referenceBases}->${this.alternateBases}`
-    }
-
     getInfo(tag) {
         return this.info ? this.info[tag] : undefined;
     }
@@ -28942,10 +28961,9 @@ class CSIIndex {
                 for (let bin = binRange[0]; bin <= binRange[1]; bin++) {
                     if (ba.binIndex[bin]) {
                         const binChunks = ba.binIndex[bin];
-                        const nchnk = binChunks.length;
-                        for (let c = 0; c < nchnk; ++c) {
-                            const cs = binChunks[c][0];
-                            const ce = binChunks[c][1];
+                        for (let c of binChunks) {
+                            const cs = c[0];
+                            const ce = c[1];
                             chunks.push({minv: cs, maxv: ce, bin: bin});
                         }
                     }
@@ -28963,7 +28981,7 @@ class CSIIndex {
     reg2bins(beg, end) {
         beg -= 1; // < convert to 1-based closed
         if (beg < 1) beg = 1;
-        if (end > 2 ** 50) end = 2 ** 34; // 17 GiB ought to be enough for anybody
+        if (end > 2 ** 34) end = 2 ** 34; // 17 GiB ought to be enough for anybody
         end -= 1;
         let l = 0;
         let t = 0;
@@ -28972,25 +28990,18 @@ class CSIIndex {
         for (; l <= this.depth; s -= 3, t += (1 << l * 3), l += 1) {
             const b = t + (beg >> s);
             const e = t + (end >> s);
-            if (e - b + bins.length > this.maxBinNumber)
-                throw new Error(
-                    `query ${beg}-${end} is too large for current binning scheme (shift ${this.minShift}, depth ${this.depth}), try a smaller query or a coarser index binning scheme`,
-                )
-            //for (let i = b; i <= e; i += 1) bins.push(i)
+            //
+            // ITS NOT CLEAR WHERE THIS TEST CAME FROM,  but maxBinNumber is never set, and its not clear what it represents.
+            // if (e - b + bins.length > this.maxBinNumber)
+            //     throw new Error(
+            //         `query ${beg}-${end} is too large for current binning scheme (shift ${this.minShift}, depth ${this.depth}), try a smaller query or a coarser index binning scheme`,
+            //     )
+            //
             bins.push([b, e]);
         }
         return bins
     }
 
-    // function reg2bins(beg, end, min_shift, depth) {
-    //     let l, t, n, s = min_shift + depth * 3;
-    //     const bins = [];
-    //     for (--end, l = n = t = 0; l <= depth; s -= 3, t += 1 << l * 3, ++l) {
-    //         let b = t + (beg >> s), e = t + (end >> s), i;
-    //         for (i = b; i <= e; ++i) bins[n++] = i;
-    //     }
-    //     return bins;
-    // }
 
     bin_limit() {
         return ((1 << (this.depth + 1) * 3) - 1) / 7
@@ -29193,11 +29204,10 @@ class BamIndex {
             for (let binRange of overlappingBins) {
                 for (let bin = binRange[0]; bin <= binRange[1]; bin++) {
                     if (ba.binIndex[bin]) {
-                        const binChunks = ba.binIndex[bin],
-                            nchnk = binChunks.length;
-                        for (let c = 0; c < nchnk; ++c) {
-                            const cs = binChunks[c][0];
-                            const ce = binChunks[c][1];
+                        const binChunks = ba.binIndex[bin];
+                        for (let c of binChunks) {
+                            const cs = c[0];
+                            const ce = c[1];
                             chunks.push({minv: cs, maxv: ce, bin: bin});
                         }
                     }
@@ -29209,7 +29219,7 @@ class BamIndex {
             let lowest = null;
             const minLin = Math.min(min >> 14, nintv - 1);
             const maxLin = Math.min(max >> 14, nintv - 1);
-            for (let i = minLin; i <= maxLin; ++i) {
+            for (let i = minLin; i < maxLin; i++) {
                 const vp = ba.linearIndex[i];
                 if (vp) {
                     // todo -- I think, but am not sure, that the values in the linear index have to be in increasing order.  So the first non-null should be minimum
@@ -35129,10 +35139,6 @@ class BamAlignment {
         return (genomicLocation >= s && genomicLocation <= (s + l))
     }
 
-    hoverText() {
-        return this.readName;
-    }
-
     popupData(genomicLocation) {
 
         // if the user clicks on a base next to an insertion, show just the
@@ -39984,6 +39990,14 @@ class BAMTrack extends TrackBase {
         return clickedObject ? [clickedObject] : undefined
     }
 
+    hoverText(clickState) {
+        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrack.height) {
+            const clickedObject = this.coverageTrack.getClickedObject(clickState);
+            return clickedObject.hoverText()
+        }
+
+    }
+
     menuItemList() {
 
 
@@ -41401,6 +41415,10 @@ class RulerViewport extends TrackViewport {
         super(trackView, $viewportColumn, referenceFrame, width);
     }
 
+    get contentDiv() {
+        return this.$viewport.get(0)
+    }
+
     initializationHelper() {
 
         this.$multiLocusCloseButton = $$1('<div>', {class: 'igv-multi-locus-close-button'});
@@ -41628,7 +41646,8 @@ class IdeogramViewport extends TrackViewport {
 
         this.canvas = document.createElement('canvas');
         this.canvas.className = 'igv-ideogram-canvas';
-        this.$content.append($$1(this.canvas));
+        //this.$content.append($(this.canvas))
+        this.$viewport.append($$1(this.canvas));
         this.ideogram_ctx = this.canvas.getContext('2d');
 
         this.addMouseHandlers();
@@ -42202,7 +42221,7 @@ const hideAllMenuPopups = () => {
  * THE SOFTWARE.
  */
 
-const scrollbarExclusionTypes = new Set(['ruler', 'sequence', 'ideogram']);
+const scrollbarExclusionTypes = new Set(['ruler', 'ideogram']);
 const colorPickerExclusionTypes = new Set(['ruler', 'sequence', 'ideogram']);
 
 class TrackView {
@@ -42582,17 +42601,18 @@ class TrackView {
         }
 
         if (this.track.autoscale) {
-            let allFeatures = [];
+            let allFeatures;
             for (let visibleViewport of visibleViewports) {
                 const referenceFrame = visibleViewport.referenceFrame;
                 const start = referenceFrame.start;
-                const end = start + referenceFrame.toBP($$1(visibleViewport.contentDiv).width());
+                const end = start + referenceFrame.toBP(visibleViewport.getWidth());
                 if (visibleViewport.featureCache && visibleViewport.featureCache.features) {
+                    // If the "features" object has a getMax function use it.  Currently only alignmentContainer implements this, for coverage.
                     if (typeof visibleViewport.featureCache.features.getMax === 'function') {
                         const max = visibleViewport.featureCache.features.getMax(start, end);
-                        allFeatures.push({value: max});
+                        allFeatures = [{value: max}];
                     } else {
-                        allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.featureCache.features, start, end));
+                        allFeatures = FeatureUtils.findOverlapping(visibleViewport.featureCache.features, start, end);
                     }
                 }
             }
@@ -42657,7 +42677,7 @@ class TrackView {
 
             const referenceFrame = vp.referenceFrame;
             const {chr, start, bpPerPixel} = vp.referenceFrame;
-            const end = start + referenceFrame.toBP($$1(vp.contentDiv).width());
+            const end = start + referenceFrame.toBP(vp.getWidth());
             const needsReload = !vp.featureCache || !vp.featureCache.containsRange(chr, start, end, bpPerPixel);
 
             if (needsReload) {
@@ -43549,7 +43569,7 @@ class FeatureTrack extends TrackBase {
 
         if (typeof this.featureSource.getHeader === "function") {
             this.header = await this.featureSource.getHeader();
-            if(this.disposed) return;   // This track was removed during async load
+            if (this.disposed) return   // This track was removed during async load
         }
 
         // Set properties from track line
@@ -43642,7 +43662,7 @@ class FeatureTrack extends TrackBase {
                     options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
                 }
             }
-            const maxFeatureCount = Math.max(1,  Math.max(...rowFeatureCount));
+            const maxFeatureCount = Math.max(1, Math.max(...rowFeatureCount));
             const pixelsPerFeature = pixelWidth / maxFeatureCount;
 
             let lastPxEnd = [];
@@ -43673,10 +43693,10 @@ class FeatureTrack extends TrackBase {
 
     };
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
         const y = clickState.y - this.margin;
-        const allFeatures = super.clickedFeatures(clickState, features);
+        const allFeatures = super.clickedFeatures(clickState);
 
         let row;
         switch (this.displayMode) {
@@ -43700,9 +43720,8 @@ class FeatureTrack extends TrackBase {
      */
     popupData(clickState, features) {
 
-        features = this.clickedFeatures(clickState, features);
+        if (features === undefined) features = this.clickedFeatures(clickState);
         const genomicLocation = clickState.genomicLocation;
-
         const data = [];
         for (let feature of features) {
 
@@ -43827,8 +43846,7 @@ class FeatureTrack extends TrackBase {
                     let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
                     if (!seq) {
                         seq = "Unknown sequence";
-                    }
-                    else if (f.strand === '-') {
+                    } else if (f.strand === '-') {
                         seq = reverseComplementSequence(seq);
                     }
                     this.browser.alert.present(seq);
@@ -43844,8 +43862,7 @@ class FeatureTrack extends TrackBase {
                             let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
                             if (!seq) {
                                 seq = "Unknown sequence";
-                            }
-                            else if (f.strand === '-') {
+                            } else if (f.strand === '-') {
                                 seq = reverseComplementSequence(seq);
                             }
                             try {
@@ -44162,10 +44179,7 @@ class WigTrack extends TrackBase {
 
     popupData(clickState, features) {
 
-        // We use the featureCache property rather than method to avoid async load.  If the
-        // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-
-        features = this.clickedFeatures(clickState, features);
+        if(features === undefined) features = this.clickedFeatures(clickState);
 
         if (features && features.length > 0) {
 
@@ -44483,7 +44497,7 @@ class SegTrack extends TrackBase {
 
     draw({context, renderSVG, pixelTop, pixelWidth, pixelHeight, features, bpPerPixel, bpStart}) {
 
-        IGVGraphics.fillRect(context, 0, 0, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+        IGVGraphics.fillRect(context, 0, pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
 
         if (features && features.length > 0) {
 
@@ -44707,9 +44721,9 @@ class SegTrack extends TrackBase {
 
     }
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
-        const allFeatures = super.clickedFeatures(clickState, features);
+        const allFeatures = super.clickedFeatures(clickState);
         const y = clickState.y;
         return allFeatures.filter(function (feature) {
             const rect = feature.pixelRect;
@@ -44718,13 +44732,16 @@ class SegTrack extends TrackBase {
 
     }
 
-    hoverText(feature) {
-        return `${feature.sample}: ${feature.value}`
+    hoverText(clickState) {
+        const features = this.clickedFeatures(clickState);
+        if(features && features.length > 0) {
+            return `${features[0].sample}: ${features[0].value}`
+        }
     }
 
     popupData(clickState, featureList) {
 
-        featureList = this.clickedFeatures(clickState);
+        if(featureList === undefined) featureList = this.clickedFeatures(clickState);
 
         const items = [];
 
@@ -44880,6 +44897,7 @@ const MUT_COLORS = {
  * THE SOFTWARE.
  */
 
+
 /**
  * Represents 2 or more wig tracks overlaid on a common viewport.
  */
@@ -44970,70 +44988,111 @@ class MergedTrack extends TrackBase {
         return items
     }
 
+    /**
+     * Returns a MergedFeatureCollection containing an array of features for the specified range, 1 for each track.
+     */
     async getFeatures(chr, bpStart, bpEnd, bpPerPixel) {
 
         const promises = this.tracks.map((t) => t.getFeatures(chr, bpStart, bpEnd, bpPerPixel));
-        return Promise.all(promises)
+        const featureArrays = await Promise.all(promises);
+        return new MergedFeatureCollection(featureArrays)
     }
 
     draw(options) {
 
-        const mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
-
-        if (this.autoscale) {
-            this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
-        }
+        const mergedFeatures = options.features;    // A MergedFeatureCollection
 
         for (let i = 0, len = this.tracks.length; i < len; i++) {
             const trackOptions = Object.assign({}, options);
-            trackOptions.features = mergedFeatures[i];
+            trackOptions.features = mergedFeatures.featureArrays[i];
             this.tracks[i].dataRange = this.dataRange;
             this.tracks[i].flipAxis = this.flipAxis;
             this.tracks[i].logScale = this.logScale;
-            if(this.graphType){
+            if (this.graphType) {
                 this.tracks[i].graphType = this.graphType;
             }
             this.tracks[i].draw(trackOptions);
         }
     }
 
-    popupData(clickState, features) {
+    popupData(clickState) {
 
-        const featuresArray = features || clickState.viewport.cachedFeatures;
+        if(clickState.viewport && clickState.viewport.cachedFeatures) {
 
-        if (featuresArray && featuresArray.length === this.tracks.length) {
-            // Array of feature arrays, 1 for each track
-            const popupData = [];
-            for (let i = 0; i < this.tracks.length; i++) {
-                if (i > 0) popupData.push('<hr/>');
-                popupData.push(`<div style=background-color:rgb(245,245,245);border-bottom-style:dashed;border-bottom-width:1px;padding-bottom:5px;padding-top:10px;font-weight:bold;font-size:larger >${this.tracks[i].name}</div>`);
-                const trackPopupData = this.tracks[i].popupData(clickState, featuresArray[i]);
-                popupData.push(...trackPopupData);
+            const featuresArray = clickState.viewport.cachedFeatures.featureArrays;
+
+            if (featuresArray && featuresArray.length === this.tracks.length) {
+                // Array of feature arrays, 1 for each track
+                const popupData = [];
+                for (let i = 0; i < this.tracks.length; i++) {
+                    if (i > 0) popupData.push('<hr/>');
+                    popupData.push(`<div style=background-color:rgb(245,245,245);border-bottom-style:dashed;border-bottom-width:1px;padding-bottom:5px;padding-top:10px;font-weight:bold;font-size:larger >${this.tracks[i].name}</div>`);
+                    const trackPopupData = this.tracks[i].popupData(clickState, featuresArray[i]);
+                    popupData.push(...trackPopupData);
 
+                }
+                return popupData
             }
-            return popupData
         }
     }
 
+    clickedFeatures(clickState) {
+
+
+        // We use the cached features rather than method to avoid async load.  If the
+        // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
+        const mergedFeaturesCollection = clickState.viewport.cachedFeatures;
+
+        if(!mergedFeaturesCollection) {
+            return [];
+        }
+
+        const genomicLocation = clickState.genomicLocation;
+        const clickedFeatures = [];
+        for(let features of mergedFeaturesCollection.featureArrays) {
+            // When zoomed out we need some tolerance around genomicLocation
+            const tolerance = (clickState.referenceFrame.bpPerPixel > 0.2) ? 3 * clickState.referenceFrame.bpPerPixel : 0.2;
+            const ss = genomicLocation - tolerance;
+            const ee = genomicLocation + tolerance;
+            const tmp = (FeatureUtils.findOverlapping(features, ss, ee));
+            for(let f of tmp) {
+                clickedFeatures.push(f);
+            }
+        }
+        return clickedFeatures;
+    }
+
 
     get supportsWholeGenome() {
         return this.tracks.every(track => track.supportsWholeGenome)
     }
 }
 
-function autoscale(chr, featureArrays) {
 
-    let min = 0;
-    let max = -Number.MAX_VALUE;
-    for(let features of featureArrays) {
-        for(let f of features) {
-            if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
-                min = Math.min(min, f.value);
-                max = Math.max(max, f.value);
+class MergedFeatureCollection {
+
+    constructor(featureArrays) {
+        this.featureArrays = featureArrays;
+    }
+
+    getMax(start, end) {
+        let max = -Number.MAX_VALUE;
+        for (let a of this.featureArrays) {
+            for (let f of a) {
+                if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
+                    if (f.end < start) {
+                        continue
+                    }
+                    if (f.start > end) {
+                        break
+                    }
+                    max = Math.max(max, f.value);
+                }
             }
         }
+        return max
     }
-    return {min: min, max: max}
+
 }
 
 /*
@@ -45616,7 +45675,7 @@ class InteractionTrack extends TrackBase {
 
     popupData(clickState, features) {
 
-        features = this.clickedFeatures(clickState);
+        if(features === undefined) features = this.clickedFeatures(clickState);
 
         const data = [];
         for (let feature of features) {
@@ -45658,11 +45717,11 @@ class InteractionTrack extends TrackBase {
         return data
     }
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        const featureList = features || clickState.viewport.cachedFeatures;
+        const featureList =  clickState.viewport.cachedFeatures;
         const candidates = [];
         if (featureList) {
             const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
@@ -46252,9 +46311,9 @@ class VariantTrack extends TrackBase {
         }
     }
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
-        let featureList = super.clickedFeatures(clickState, features);
+        let featureList = super.clickedFeatures(clickState);
 
         const vGap = (this.displayMode === 'EXPANDED') ? this.expandedVGap : this.squishedVGap;
         const callHeight = vGap + ("SQUISHED" === this.displayMode ? this.squishedCallHeight : this.expandedCallHeight);
@@ -46290,9 +46349,9 @@ class VariantTrack extends TrackBase {
     /**
      * Return "popup data" for feature @ genomic location.  Data is an array of key-value pairs
      */
-    popupData(clickState, features) {
+    popupData(clickState, featureList) {
 
-        const featureList = this.clickedFeatures(clickState, features);
+        if(featureList === undefined) featureList = this.clickedFeatures(clickState);
         const genomicLocation = clickState.genomicLocation;
         const genomeID = this.browser.genome.id;
         const sampleInformation = this.browser.sampleInformation;
@@ -46820,9 +46879,9 @@ class EqtlTrack extends TrackBase {
     /**
      * Return "popup data" for feature @ genomic location.  Data is an array of key-value pairs
      */
-    popupData(clickState) {
+    popupData(clickState, features) {
 
-        let features = clickState.viewport.cachedFeatures;
+        if(features === undefined) features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return []
 
         const tolerance = 3;
@@ -47149,11 +47208,12 @@ class GWASTrack extends TrackBase {
         }
     }
 
-    popupData(clickState) {
+    popupData(clickState, features) {
+
+        if(features === undefined) features =  clickState.viewport.cachedFeatures;
 
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.cachedFeatures;
 
         if (features) {
             let count = 0;
@@ -47541,12 +47601,12 @@ class GCNVTrack extends TrackBase {
         return []
     }
 
-    popupData(clickState, featureList) {
+    popupData(clickState, features) {
 
-        featureList = this.clickedFeatures(clickState, featureList);
+        if(features === undefined) features = this.clickedFeatures(clickState);
 
         const items = [];
-        featureList.forEach(function (f) {
+        features.forEach(function (f) {
             for (let property of Object.keys(f)) {
                 if (isSimpleType(f[property])) {
                     items.push({name: property, value: f[property]});
@@ -47732,9 +47792,9 @@ class RnaStructTrack extends TrackBase {
         }
     }
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
-        features = super.clickedFeatures(clickState, features);
+        const features = super.clickedFeatures(clickState);
 
         const clicked = [];
 
@@ -47776,10 +47836,7 @@ class RnaStructTrack extends TrackBase {
 
     popupData(clickState, features) {
 
-        // We use the featureCache property rather than method to avoid async load.  If the
-        // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-
-        features = this.clickedFeatures(clickState, features);
+        if(features === undefined) features = this.clickedFeatures(clickState);
 
         if (features && features.length > 0) {
 
@@ -48207,7 +48264,7 @@ class SpliceJunctionTrack extends TrackBase {
 
         if (typeof this.featureSource.getHeader === "function") {
             this.header = await this.featureSource.getHeader();
-            if(this.disposed) return;   // This track was removed during async load
+            if (this.disposed) return   // This track was removed during async load
         }
 
         // Set properties from track line
@@ -48264,7 +48321,8 @@ class SpliceJunctionTrack extends TrackBase {
 
             junctionRenderingContext.referenceFrame = options.viewport.referenceFrame;
             junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start;
-            junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart + junctionRenderingContext.referenceFrame.toBP($$1(options.viewport.contentDiv).width());
+            junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart +
+                junctionRenderingContext.referenceFrame.toBP(options.viewport.getWidth());
 
             // For a given viewport, records where features that are < 2px in width have been rendered already.
             // This prevents wasteful rendering of multiple such features onto the same pixels.
@@ -48512,9 +48570,9 @@ class SpliceJunctionTrack extends TrackBase {
         ctx.fillText(label, junctionMiddlePx - ctx.measureText(label).width / 2, (7 * topY + cy) / 8);
     }
 
-    clickedFeatures(clickState, features) {
+    clickedFeatures(clickState) {
 
-        const allFeatures = super.clickedFeatures(clickState, features);
+        const allFeatures = super.clickedFeatures(clickState);
 
         return allFeatures.filter(function (feature) {
             return (feature.isVisible && feature.attributes)
@@ -48526,7 +48584,7 @@ class SpliceJunctionTrack extends TrackBase {
      */
     popupData(clickState, features) {
 
-        features = this.clickedFeatures(clickState, features);
+        if (features === undefined) features = this.clickedFeatures(clickState);
         const genomicLocation = clickState.genomicLocation;
 
         const data = [];
@@ -51970,11 +52028,11 @@ class Browser {
      */
     toSVG() {
 
-        let {x, y, width, height} = this.columnContainer.getBoundingClientRect();
+        const {y, width, height} = this.columnContainer.getBoundingClientRect();
 
         const h_render = 8000;
 
-        let context = new ctx(
+        const config =
             {
 
                 width,
@@ -51992,13 +52050,14 @@ class Browser {
                         height: h_render
                     }
 
-            });
+            };
+
+        const context = new ctx(config);
 
         // tracks -> SVG
         for (let trackView of this.trackViews) {
             trackView.renderSVGContext(context, {deltaX: 0, deltaY: -y});
         }
-
         // reset height to trim away unneeded svg canvas real estate. Yes, a bit of a hack.
         context.setHeight(height);
 
@@ -53983,7 +54042,7 @@ async function createTrack(config, browser) {
 
 function embedCSS() {
 
-    var css =  '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 210px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 18px;\n  height: 18px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer;\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 200px;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 1;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 1;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container div:first-child {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container div:first-child i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  z-index: 4096;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu-next-gen {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu-next-gen > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n  cursor: pointer;\n}\n.igv-roi-menu-next-gen > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > div:last-child div:first-child {\n  cursor: default;\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu-next-gen > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-four-column {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table-four-column > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  cursor: pointer;\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  margin-top: 44px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.igv-roi-menu {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  margin-top: 5px;\n  width: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n/*# sourceMappingURL=dom.css.map */\n';
+    var css =  '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 210px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 18px;\n  height: 18px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer;\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 200px;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 1;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 1;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container div:first-child {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container div:first-child i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  z-index: 4096;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu-next-gen {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu-next-gen > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n  cursor: pointer;\n}\n.igv-roi-menu-next-gen > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > div:last-child div:first-child {\n  cursor: default;\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu-next-gen > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-four-column {\n  position: absolute;\n  z-index: 1024;\n  width: fit-content;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table-four-column > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > div:last-child {\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  cursor: pointer;\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  margin-top: 44px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.igv-roi-menu {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  line-height: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  margin-top: 5px;\n  width: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n/*# sourceMappingURL=dom.css.map */\n';
 
     var style = document.createElement('style');
     style.setAttribute('type', 'text/css');