/* Build tooltip. */
[data-tooltip]::before {
    content: attr(data-tooltip);
  }

/* Position tooltip. */
[data-tooltip] {
    position: relative;
    /*display: inline-block;*/
}
[data-tooltip]::before {
    position: absolute;
    z-index: 999;
}
[data-tooltip].dataCell::before {
    bottom: 100%;
    /*margin-bottom: 3px;*/
}

/* Show tooltip only on hover. */
[data-tooltip]::before {
    visibility: hidden;
    opacity: 0;
    /*transition: opacity 1s;*/
}
[data-tooltip]:hover::before {
    visibility: visible;
    opacity: 1;
    left: -120px;
}

/* Style tooltip. */
[data-tooltip]::before {
    background: #EBD99F;
    color: #000000;
    padding: 5px;
    min-width: 300px;
    text-align: center;
    font-style: normal;
    border: 2px solid #555960;
    border-radius: 5px;
    text-align: left;
}

.dataCell {
    cursor: pointer;
}

.dataCell:hover {
    background-color: #8E6F3E !important;
}

.videoLink {
    color: #000000 !important;
}

.videoLink:hover {
    color: #FFFFFF !important;
    font-weight: bold;
    text-decoration: none;
}