/*custom-tooltip Box*/
.con-custom-tooltip {
    position: relative;
    /*background: #337ab7;
    color: white;*/
    text-align: center;
    font-size: 16px;

    border-radius: 5px;
    padding: 10px 20px 10px 20px;

    display: inline-block;

    transition: all 0.3s ease-in-out;
    cursor: default;

}

/*custom-tooltip */
.custom-tooltip {
    visibility: hidden;
    z-index: 2;

    width: 100%;
    padding: 5px 5px;

    background-color: #2d2d2d;
    color: #b8ac9d;

    position: absolute;
    top: -140%;
    left: -25%;

    border-radius: 9px;
    font: 16px;
    text-align: left;

    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
}


/* custom-tooltip  after*/
.custom-tooltip::after {
    content: " ";
    width: 0;
    height: 0;

    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #333 transparent transparent transparent;

    position: absolute;
    left: 40%;
}

.con-custom-tooltip:hover .custom-tooltip {
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite alternate;
}

@keyframes odsoky {
    0% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(1px);
    }

}

/*hover custom-tooltip*/
.left:hover {
    transform: translateX(-6px);
}

.top:hover {
    transform: translateY(-6px);
}

.bottom:hover {
    transform: translateY(6px);
}

.right:hover {
    transform: translateX(6px);
}



/*left*/

.left .custom-tooltip {
    top: -20%;
    left: -170%;
}

.left .custom-tooltip::after {
    top: 40%;
    left: 90%;
    transform: rotate(-90deg);
}




/*bottom*/

.bottom .custom-tooltip {
    top: 115%;
    left: 0;
}

.bottom .custom-tooltip::after {
    top: -12%;
    left: 45%;
    transform: rotate(180deg);
}

/*right*/

.right .custom-tooltip { top:-20%; left:115%; }

.right .custom-tooltip::after{
  top:40%;
  left:-12%;
  transform: rotate(90deg);
}