.tooltip
{
    --tooltip-width: 160px;
    --tooltip-arrow-x: calc(var(--tooltip-width) / 2 - 5px);
    /* --tooltip-height: 100px; */
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tooltip-width);
    height: auto;
    /* height: var(--tooltip-height); */
    background-color: #FFFFFF;
    opacity: 1;
    transition: 0.3s opacity;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid gray;
    z-index: 1;
    font-family: 'Open Sans';
    font-size: 14px;
    text-align: center;
    z-index: 2;
}

.tooltip.fade
{
    opacity: 0;
}

.tooltip::after
{
    content: '';
    display: block;
    position: absolute;
    background-color: #FFFFFF;
    width: 10px;
    height: 10px;
    left: var(--tooltip-arrow-x);
    top: -6px;
    transform: rotateZ(45deg);
    border-left: 1px solid gray;
    border-top: 1px solid gray;
}

.tutorial-tooltip
{
    --tooltip-width: 300px;
}