.timeline.faded{
  opacity: 0.5;
}

.aoivisit.faded{
  opacity: 0.1;
}

.heatmap-canvas{
  pointer-events: none;
  opacity: 0;
}

.aoi{
  opacity: 0;
}

.aoi.hovered, .aoi.clickable{
  opacity: 1;
}

.aoi.clickable > rect{
  opacity: 0.3;
}

.aoi.hovered > rect{
  opacity: 0.5;
}

.aoi.hovered.clickable > rect{
  opacity: 0.7;
  cursor: pointer;
}

.aoi.clickable.invalid > rect{
  pointer-events: none;
  cursor: no-drop;
}

.aoi.High > rect{
  fill: rgb(214, 39, 40);
}

.aoi.Labels > rect{
  fill: rgb(255, 127, 14);
}

.aoi.Legend > rect{
  fill: rgb(44, 160, 44);
}

.aoi.Question > rect{
  fill: rgb(31, 119, 180);
}

.aoi.Input > rect{
  fill: rgb(148, 103, 189);
}

.aoi-label {
  pointer-events: none;
}

.seq-list > tr.hovered {
  /*opacity: 1;*/
  background-color: #f9f9f9;
}

.seq-list > tr.unselected {
  opacity: 0.5;
}

.seq-list > tr > td {
  text-align: center;
}

.seq-list > tr > td.seq-aoi {
  color: white;
  line-height: 40px;
}

.seq-list > tr > td.seq-empty {
  border: 1px dashed gray;
}

.seq-list > tr > td.seq-edit {
  vertical-align: middle;
}

.seq-list > tr > td.High{
  background-color: rgb(214, 39, 40);
}

.seq-list > tr > td.Labels{
  background-color: rgb(255, 127, 14);
}

.seq-list > tr > td.Legend{
  background-color: rgb(44, 160, 44);
}

.seq-list > tr > td.Question{
  background-color: rgb(31, 119, 180);
}

.seq-list > tr > td.Input{
  background-color: rgb(148, 103, 189);
}

.seq-list > tr.unselected > td.seq-edit{
  opacity: 0;
}

.seq-list > tr.hovered > td.seq-edit{
  opacity: 1;
}

.fa-check-circle.enabled{
  color: green;
  cursor: pointer;
}

.fa-check-circle.disabled{
  color: gray;
}

.fa-times-circle{
  color: red;
}

#timeline-control{
  margin-bottom: 10px;
}

g.userchars > rect.value{
  fill: gray;
}

g.userchars > rect.ref{
  fill: #f0f0f0;
}

.header-sort{
  display: inline-block;
  padding: 0;
  line-height: 30px;
  letter-spacing: 5px;
}

.fa-sort, .fa-sort-asc, .fa-sort-desc, .fa-times-circle{
  cursor: pointer;
}

.fa-sort{
  opacity: 0.5;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.container-fluid .text-muted {
  margin: 20px 0;
}

.footer > .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}