.mind-map {
    display: flex;
    flex-direction: column;
    padding: 2px;
}

.mind-map-row {
    display: flex;
    flex-direction: row;
    padding: 1px;
}

.mind-map-tile {
    padding-left: 3px;
    padding-right: 3px;

    position: relative;
    /*display: inline-block;*/
}

/* from https://www.w3schools.com/css/css_tooltip.asp */
.hoverable .tooltiptext {
    visibility: hidden;
    width: 160px;
    padding: 5px;
    background-color: #555;
    color: #fff;
    text-align: center;
    /*padding: 4px 0;*/
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
}

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