/* nova revisão pra deixa-la na vertical, lado esquerdo*/

.modebar-container
{
    margin          : 0;
    position        : absolute;
    top             : 0%;
    left            : 0%;
    opacity         : 1;
    transform       : translateX(25px) translate(-100%, 0%);

    user-select     : none;
    touch-action    : pinch-zoom double-tap-zoom pan-x pan-y;
    z-index         : 1000;

    pointer-events  : none;  /* container da modebar é um retângulo gigante. Desligamos eventos de mouse nele pra não cagar o gráfico*/

}



a.modebar-btn
{
    pointer-events  : auto;         /* religamos os eventos de mouse dentro do botão */
    position        : relative;
    text-decoration : none;
}


a.modebar-btn :hover::before,
a.modebar-btn :hover::after
{
    pointer-events  : auto;
    opacity         : 1;
}


a.modebar-btn:hover::after
{
    pointer-events  : auto;
    content         : attr (data-title);
    position        : absolute;

    display         : inline-block;
    width           : max-content;

    top             : 50%;
    left            : calc(190%);

    transform       : translateY (25%);

    background-color: rgb(55, 61, 61);
    color           : white;

    padding         : 5px;
    border-radius   : 3px;

    white-space     : nowrap;
    z-index         : 999;

    opacity         : 1;
    transition      : opacity 0.3s;

}

a.modebar-btn:hover::before
{
    pointer-events  : auto;
    content         : '';
    position        : absolute;

    top             : 50%;
    left            : calc(100% + 5px);
    transform       : translateY(25%);

    border-width    : 5px;
    border-style    : solid;
    border-color    : transparent transparent transparent rgb(55, 61, 61);

    z-index         : 999;
    opacity         : 0;
    transition      : opacity 0.3s;
}