.ttplay {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
}

.ttplay i {
    font-size: 0.7em;
    border: 0.5em solid transparent;
    border-left: 0.75em solid;
    display: inline-block;
    margin-left: 5px;
}

.ttplay .ttplaying {
    border: 0;
    border-left: 0.75em double;
    border-right: 0.5em solid transparent;
    height: 1em;
}

.timetravel{
    display: inline-block;
    position: relative;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    background-image: url('timetravel.png');
    background-size: cover;
}

.timetravel i{
    border: 0.5em solid transparent;
    border-left: 0.75em solid transparent;
    display: inline-block;
    /* margin: 3px 2px; */
}

.timetravel .tooltiptext {
        visibility: hidden;
        width: 120px;
        height: 28px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 0px 0;
        position: absolute;
        z-index: 1;
        /* top: 0; */
        right: 2em;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .timetravel:hover .tooltiptext {
    visibility: visible;
  }