/**
 * This is the default stylesheet for pileup.js.
 * In general, it attempts to look like IGV.
 * You are encouraged to override anything you like.
 */

.pileup-root {
  display: flex;
  flex-direction: column;
  height: inherit; /* height 100% makes featureTrack too small */
}

.pileup-root > .track {
  display: flex;
  flex-direction: row;
  margin-bottom: 4px;
}
.pileup-root text, .track-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* hack to hide track label for genotypes */
.genotypes > .track-label {
  display: none;
}
.track-label {
  flex: 0 0 100px;  /* fixed-width track labels */
  text-align: right;
  font-size: 0.9em;
  position: relative;  /* make this an offset parent for positioning the label. */
}
.track-label > span {
  padding-right: 5px;
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  right: 0;
}

/* hack to hide track label for genotypes */
.genotypes > .track-label {
  display: none;
}

/* bottom-justify these track labels */
.track.reference .track-label > span,
.track.variants .track-label > span
{
  bottom: 0;
}

.track-label > span:hover {
  overflow: visible !important;
}

.track-content {
  flex: 1;  /* stretch to fill remaining space */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.track-content {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-color: #bcbbbb;
    border-left: 7px solid #bcbbbb;
}

.reference > .track-content, .controls > .track-content,
    .scale > .track-content, .location > .track-content {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-color: None;
        border-left: None;
}

.track-content > div {
  position: absolute; /* Gets the child of the flex-item to fill height 100% */
}
.track-content canvas {
  display: block;
}

/* controls */
.pileup-root > .controls {
  flex: 0 0 30px;  /* fixed height */
}
.pileup-root > .controls > .track-content {
  overflow: visible;
}
.pileup-root > .controls form.controls {
  margin-bottom: 0;  /* overrides browser default */
}
.pileup-root > .controls .zoom-controls {
  display: inline-block;
}
.pileup-root > .controls .btn-zoom-out:before {
  content: '-';
}
.pileup-root > .controls .btn-zoom-in:before {
  content: '+';
}
.pileup-root > .controls input,
.pileup-root > .controls button,
.pileup-root > .controls select,
.pileup-root > .controls option {
  font-size: 0.9em;
  border-radius: 4px;
  border: 1px solid #bcbbbb;
  vertical-align: middle;
}
.controls button:active {
  background-color: #bcbbbb;       /* make button interactive */
}
.controls button:focus {
  outline: none !important;         /* remove blue line from buttons */
}
.zoom-slider {
  margin-left: 10px;                /* leave space between slider and zoom buttons */
  display: inline-block !important; /* imporant overrides input[type="range"] from forms.less */
  width: 65% !important;            /* restrict width so it does not get pushed to new line */
}
.gear {
  margin-left: 0.5em;
  font-size: 1.2em;
  color: #666;
  line-height: normal;  /* avoid cutting off gear icon */
}
.gear:hover {
  color: black;
  cursor: pointer;
}
.menu-container {
  z-index: 1;
  width: 250px;  /* not really 250px, but clears parent constraint */
}
.menu {
  border: 1px solid black;
  border-radius: 2px;
  display: table;
  background: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: left;
}
.menu-header {
  font-weight: bold;
  border-bottom: 1px solid #777;
  padding: 2px 4px;
}
.menu-item {
  padding: 4px;
  cursor: pointer;
}
.menu-separator {
  border-top: 1px solid #777;
  height: 0px;
}
.menu-item:hover {
  background: lightblue;
}

.check {
  display: inline-block;
  width: 1em;
}
.check.checked:before {
  content: '✓';
}

/* reference track */
.pileup-root > .reference {
  flex: 0 0 20px;  /* fixed height */
}

.background {
  fill: white;
}
.basepair.A { fill: #188712; }
.basepair.G { fill: #C45C16; }
.basepair.C { fill: #0600F9; }
.basepair.T { fill: #F70016; }
.basepair.U { fill: #F70016; }
.basepair text, text.basepair {
  text-anchor: middle;
}
.loose text {
  font-size: 24;
}
.tight text {
  font-size: 12;
  font-weight: bold;
}

/* gene track */
.pileup-root > .genes {
  flex: 0 0 50px;
}
.gene {
  stroke-width: 1;
  stroke: blue;
}
.gene text {
  font-size: 16px;
  text-anchor: middle;
  stroke: black;
  alignment-baseline: hanging;
}
#sense, #antisense .main {
  stroke: blue;
  fill: none;
  stroke-width: 1;
}
#antisense .offset, #sense .offset {
  stroke: white;
  fill: none;
  stroke-width: 1;
}
.exon {
  fill: blue;
  stroke: none;
}

/* features track */
.pileup-root > .features {
  flex-basis: auto; /* sets track size based on track height */
  max-height: 200px; /* prevents track from becoming too large */
}

/* pileup track */
.pileup-root > .pileup, .pileup-root > .genotypes {
  flex: 1;  /* stretch to fill remaining space */
  flex-basis: auto;
  min-height: 300px; /* prevent tracks from becoming too small */
}
.pileup .alignment .match {
  fill: #c8c8c8;  /* matches IGV */
}
.pileup text.basepair {
  alignment-baseline: hanging;
  font-size: 12;
  font-weight: bold;
}
.pileup .insert {
  stroke: rgb(97, 0, 216);  /* matches IGV */
  stroke-width: 2;
}
.pileup .delete {
  stroke: black;
  stroke-width: 2;
}
.pileup .network-status {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 30px;
}
.pileup .network-status-message {
  padding: 4px 8px;
  width: auto;
  background: #eee;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: small;
  position: absolute;
  text-align: center;
}

.pileup .mate-connector {
  stroke: #c8c8c8;  /* matches IGV */
}

/* variants */
.pileup-root > .variants {
  flex: 0 0 25px;  /* fixed height */
}
.variants rect {
  fill: #ddd;
  stroke: blue;
}

/* coverage track */
.pileup-root > .coverage {
  flex: 0 0 50px;  /* fixed height */
}
.coverage rect.bin {
  stroke-width: 0.1;
  stroke: white;
  fill: #a0a0a0;
}
.coverage .y-axis {
  stroke: black;
  stroke-width: 1;
}
.coverage .y-axis g.tick text {
  color: black;
  font-size: x-small;
  stroke: whitesmoke;
  stroke-width: 2;
  paint-order: stroke;
}
.coverage .y-axis path {
  stroke-width: 0;
}
.coverage rect.y-axis-background {
  fill: white;
  opacity: 0.5;
}

/* location track */
.pileup-root > .location {
  flex: 0 0 20px;  /* fixed height */
}
.location .location-hline, .location .location-vline-left, .location .location-vline-right {
  stroke: gray;
  stroke-width: 1.5;
}
.location .location-label {
  color: black;
  font-size: smaller;
  text-anchor: start;
  dominant-baseline: central;
}

/* scale track */
.pileup-root > .scale {
  flex: 0 0 20px;  /* fixed height */
}
.scale .scale-lline, .scale .scale-rline {
  stroke: gray;
  stroke-width: 1.5;
}
.scale .scale-label {
  color: black;
  font-weight: bold;
  font-size: smaller;
  dominant-baseline: central;
  text-anchor: middle;
}