.line {
  display:       inline-block;
  width:         100%;
  scroll-margin: 80px;
  height:        20px;
  line-height:   20px;
  white-space:   pre;
}
.variable {
  position:      relative;
  display:       inline-block;
  border-bottom: 1px dotted black;
}
.variable .hovervalue {
  visibility:       hidden;
  background-color: rgba(80,80,80,.9);
  color:            #fff;
  text-align:       left;
  white-space:      nowrap;
  max-height:       20px;
  border-radius:     2px;
  padding:          0px 4px;
  position:         absolute;
  z-index:          1;
  bottom:            60%;
  left:             125%;
  margin-left:      0px;
  opacity:          0;
  transition:       opacity 0.3s;
}
.variable:hover .hovervalue {
  visibility:       visible;
  opacity:          1;
}

.variable .hoversigh {
  visibility:       hidden;
  background-color: rgba(200, 50, 0, .9);
  color:            #fff;
  text-align:       left;
  white-space:      pre-wrap;
  line-height:      15px;
  width:            400px;
  border-radius:    4px;
  padding:          3px 6px;
  position:         absolute;
  z-index:          1;
  bottom:            30%;
  left:             125%;
  margin-left:      0px;
  opacity:          0;
  transition:       opacity 0.3s;
}
.variable:hover .hoversigh {
  visibility:       visible;
  opacity:          1;
}



.hastooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.hastooltip .tooltiptext {
  visibility: hidden;
  width: max-content;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.hastooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.hastooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}



.run-control .tooltiptext {
  visibility: hidden;
  width: auto;
  white-space: nowrap;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.run-control .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.run-control:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}