.downloadable-plot:hover .visible-plot.downloadable-plot-btn,
.hide-btn-container .hide-btn  {
  animation: 0.2s fadeIn;
  animation-fill-mode: forwards;
}

.downloadable-plot-btn,
.hide-btn {
  animation: 0.2s fadeOut;
  animation-fill-mode: forwards;
}

.downloadable-plot-btn i,
.hide-btn i {
  color: rgba(68, 68, 68, 0.3);
}

.downloadable-plot-btn:hover i,
.hide-btn:hover i {
  color: rgba(68, 68, 68, 0.7);
}

.downloadable-plot-btn .btn,
.hide-btn {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 3px 4px;
  display: none;
}

.visible-plot a.btn {
    display: block;
  }
  
  
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
    }
}

/* for plot download data button: making it look like plotly */
.tooltip.plot .tooltip-inner {
    background: rgb(105, 115, 138);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
  }
  
  .tooltip.plot.left .tooltip-arrow {
    border-left-color: rgb(105, 115, 138);
  }
  
  .tooltip.plot.bottom .tooltip-arrow {
    border-bottom-color: rgb(105, 115, 138);
  }