.st-timecode {
  display: inline;
  cursor: pointer;
}

@keyframes toHidden {
  from {
    visibility: visible;
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes toVisible {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
.st-timecode .tooltiptext {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 300;
  animation-duration: 0.3s;
  animation-name: toHidden;
  animation-fill-mode: both;
  transform: translate(-50%, 0);
  transition: background-color 0.3s;
  width: 150px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 10px 5px;
  position: absolute;
  z-index: 1;
  top: var(--staytuned-height-tooltip-text-position);
  left: var(--staytuned-width-tooltip-text-position);
  display: flex;
  justify-content: center;
  align-items: center;
}
.st-timecode .tooltiptext svg {
  height: 13px;
  width: 13px;
  margin-right: 8px;
}
.st-timecode .tooltiptext svg path {
  stroke: white;
}
.st-timecode .tooltiptext.dark::after {
  border-style: solid;
  border-color: #303030 transparent transparent transparent;
}
.st-timecode .tooltiptext.light::after {
  border-style: solid;
  border-color: #ececec transparent transparent transparent;
}
.st-timecode .tooltiptext.light {
  background-color: #ececec;
  color: black;
}
.st-timecode .tooltiptext.light svg path {
  stroke: black;
}
.st-timecode .tooltiptext.hide {
  display: none;
}
.st-timecode .tooltiptext:hover {
  background-color: black;
}
.st-timecode .tooltiptext:hover.light {
  background-color: white;
}
.st-timecode .tooltiptext:hover.dark::after {
  border-color: black transparent transparent transparent;
}
.st-timecode .tooltiptext:hover.light::after {
  border-color: white transparent transparent transparent;
}

.st-timecode .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
}

.st-timecode .tooltiptext::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 150px;
  height: 15px;
  opacity: 0;
}

.st-timecode:hover .tooltiptext {
  animation-name: toVisible;
  animation-duration: 0.3s;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: background-color 0.3s;
}