#tooltip {
    background: #ffffff;
    color: black;
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    transition: opacity 0.3s;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 7px;
    position: relative;
    min-width: 125px;
    text-align: center;
    cursor:not-allowed;
}

    #tooltip::after {
        content: '';
        display: block;
        position: absolute;
        top: -6.6px;
        left: 50%;
        margin-left: -5px;
        width: 10px;
        height: 10px;
        background: #ffffff;
        border-top: 1px solid black;
        border-left: 1px solid black;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.hidden {
    display: none;
}

.zoomIcon {
    width: 100px;
    height: 32px;
}

.gridIcon {
    width: 100px;
    height: 32px;
}

#trialTooltip {
    background: #ffffff;
    color: black;
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    transition: opacity 0.3s;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 7px;
    position: relative;
}

#trialTooltipWord {
    background: #000;
    color: #fff;
    padding: 6px 15px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    transition: opacity 0.3s;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 7px;
    position: absolute;
    max-width: 130px;
    top: 45%;
}

#tooltipNullData {
    color: #7e7e7e;
    border-radius: 5px;
    display: inline-block;
    transition: opacity 0.3s;
    font-family: 'Roboto',sans-serif;
    font-size: 15px;
    z-index: 3;
    margin-top: 7px;
    position: absolute;
    height:71vh;
    font-weight:500;
}

#container-tooltip {
    padding-top: 10px;
    cursor: pointer;
    /* border: 1px solid red;*/
    position: absolute;
}

#toggleZoom {
    display:none;
    background: #ffffff;
    color: black;
    padding: 10px;
    border: 1px solid black;
    transition: opacity 0.3s;
    font-family: 'Roboto',sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 1px;
    position: relative;
}

#toggleOverlayZoom {
    display: none;
    background: #ffffff;
    color: black;
    padding: 10px;
    border: 1px solid #9e9e9e;
    transition: opacity 0.3s;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 0px;
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    z-index: 300;
    cursor: pointer;
    min-width:210px;
}

/*#toggleOverlayZoom {
    display: flex;
    background: #ffffff;
    color: black;
    padding: 10px;
    border: 1px solid #9e9e9e;
    transition: opacity 0.3s;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    z-index: 3;
    margin-top: 0px;
    position: absolute;
    top: 55.9%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    z-index: 300;
    cursor: pointer;
}*/