/* Create span element is child of main object for apply effect*/
/* Example ::
    button.tooltip View Offline
	    span.tooltiptextBottom This is tooltip
*/



.tooltip {

    position: relative;
    display: inline-block;
    
}

    .tooltip .tooltiptextTop {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: rgb(36, 222, 255);
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 6;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 5s;

    }
    .tooltip .tooltiptextBottom {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 6;
        top: 100%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 3s;
        
    }

    .tooltip:hover .tooltiptextTop {
        visibility: visible;
        opacity: 1;
    }
    .tooltip:hover .tooltiptextBottom {
        visibility: visible;
        opacity: 1;
        z-index: 6;
    }


.tooltipright {
        /* position: relative; */
        /* border-bottom: 1px dotted black; */
        top: 50%;

      }
      
.tooltipright .tooltiptextright {
        visibility: hidden;
        width: 150px;
        height: auto;
        background-color: #0e0e0ec7;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        transition: all .01s ease-in-out 0.2s;
        top: auto;
        left: 50%;
        transform: translate(0%, -50%);
      }
      
.tooltipright .tooltiptextright::after {
        content: "";
        z-index: 6;
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
      }
.tooltipright:hover .tooltiptextright {
        visibility: visible;
      }




.tooltiprightGroup {
        /* position: relative; */
        /* border-bottom: 1px dotted black; */
        top: 50%;

      }
      
.tooltiprightGroup .tooltiptextrightGroup {
        visibility: hidden;
        width: 150px;
        height: auto;
        background-color: #0e0e0ec7;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        transition: all .01s ease-in-out 0.2s;
        top: auto;
        left: 50%;
        transform: translate(0%, 0%);
      }
      
.tooltiprightGroup .tooltiptextrightGroup::after {
        content: "";
        z-index: 6;
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
      }
.tooltiprightGroup:hover .tooltiptextrightGroup {
        visibility: visible;
      }

/* .tooltip-ex { 
        display: inline-block;
        cursor: help;
        color: #8512d5;
        margin-right: 20px;
        display: inline-block;
    }
    
    .tooltip-ex-right {
        top: -5px;
        left: 125%;
    }
    
    .tooltip-ex-text {
        visibility: hidden;
        position: absolute;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        z-index: 1;
        opacity: 0;
        transition: opacity .6s;
    }
    
    .tooltip-ex:hover .tooltip-ex-text {
        visibility: visible;
        opacity: 1;
    } */

      /* .tooltip {
        position: relative;
        padding: 5px 10px;
        margin-left: 15px;
        margin-right: 15px;
        background-color: rgb(56, 56, 56);
        border-radius: 50%;
        color: #fff;
        cursor: help;
        transition: all 0.2s ease-out;
      }
      
      .tooltip:hover {
        box-shadow: 0 0 6px 0 black;
      }
      
      
      .tooltip::before, .tooltip::after {
         position: absolute;
         left: 50%;
         opacity: 0;
         transition: all 0.2s ease-out;
      }
      
      .tooltip::before {
        content: "";
        border-width: 5px 4px 0 5px;
        border-style: solid;
        border-color: rgba(56, 56, 56, 0.8) transparent;
        margin-left: -4px;
        top: -8px;
      }
      
      .tooltip::after {
        content: attr(data-tooltip);
        top: -8px;
        width: 150px;
        margin-left: -75px;
        padding: 5px;
        font-size: 12px;
        background-color: rgba(56, 56, 56, 0.8);
        border-radius: 4px;
        transform: translate3d(0, -100%, 0);
        pointer-events: none;
      }
      
      /* 4 tooltip positions */
      
      .tooltip[data-tooltip-position='left']::before {
        margin-left: -21px;
        top: 12px;
        transform: rotate(-90deg);
      }
      
      .tooltip[data-tooltip-position='left']::after {
        transform: translate3d(-65%, 40%, 0);
      }
      
      .tooltip[data-tooltip-position='right']::before {
        margin-left: 14px;
        top: 12px;
        transform: rotate(90deg);
      }
      
      .tooltip[data-tooltip-position='right']::after {
        transform: translate3d(60%, 40%, 0);
      }
      
      .tooltip[data-tooltip-position='bottom']::before {
        margin-left: -4px;
        top: 32px;
        transform: rotate(-180deg);
      }
      
      .tooltip[data-tooltip-position='bottom']::after {
        transform: translate3d(0, 186%, 0);
      }
      
      /* end of 4 tooltip positions */
      
      .tooltip:hover::before, .tooltip:hover::after {
        opacity: 1;
      }