.bioeng-tooltip {
  display: inline;
  position: relative;
}

.bioeng-tooltip summary {
  cursor: help;
}

.bioeng-tooltip .bioeng-open {
  position: absolute;
  left: -20px;
  right: -20px;
  min-width: 200px;
  background: white;
  padding: 8px;
  border: solid 1px lightgray;
  z-index: 10;

  transition-property: top opacity;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

.bioeng-tooltip:not([open]) .bioeng-open {
  top: 40px;
  opacity: 0;
}

.bioeng-tooltip[open] .bioeng-open {
  top: 20px;
  opacity: 1;
}

.detailsAside {
  position: relative;
}

.detailsAside summary {
  color: #428bca;
  cursor: pointer;
  z-index: inherit;
}

.detailsAside .detailsBlock {
  width: calc(33vw);
  position: absolute;
  left: calc(100% + 80px);
  top: -30px;
  background: white;
  padding: 16px;
  border: solid 1px lightgray;
  z-index: 10;
  opacity: 0;

  transition-property: left opacity;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}

.detailsAside[open] .detailsBlock {
  left: calc(100% + 70px);
  opacity: 1;
}

@media (max-width: 987px) {
  .detailsAside .detailsBlock {
    width: calc(33vw);
    position: absolute;
    left: -15vw;
    top: 100%;
    background: white;
    padding: 16px;
    border: solid 1px lightgray;
    transition: none;
  }
  .detailsAside[open] .detailsBlock {
    left: -15vw;
    opacity: 1;
  }
}