.pt-tooltip {





     position: relative;





     display: inline-block;





     min-width: 150px;





     text-align: center;





     padding: 12px 24px;





     font-size: .93rem;





     color: #333;





     line-height: 1;





     cursor: pointer;





     transition: all 0.3s ease-in-out;





}





 .pt-tooltip .pt-tooltip-text {





     display: block;





     width: 100%;





     visibility: hidden;





     background-color: black;





     color: #fff;





     text-align: center;





     border-radius: 4px;





     padding: 10px;





     position: absolute;





     z-index: 1;





     font-size: .93rem;





     line-height: 1.3;





}





 .pt-tooltip .pt-tooltip-text::after {





     content: "";





     position: absolute;





     border-width: 5px;





     border-style: solid;





}





 .pt-tooltip:hover .pt-tooltip-text {





     visibility: visible;





}





/* Left */





 .pt-tooltip .pt-tooltip-text.pt-tooltip-left {





     top: 50%;





     right: 100%;





     transform: translateY(-50%);





     margin-right: 10px;





}





 .pt-tooltip:hover .pt-tooltip-text.pt-tooltip-left {





     animation: tooltipLeftIn 300ms ease-in-out;





}





 .pt-tooltip .pt-tooltip-text.pt-tooltip-left::after {





     top: calc(50% - 5px);





     left: 100%;





     border-color: transparent transparent transparent black;





}





/* Right */





 .pt-tooltip .pt-tooltip-text.pt-tooltip-right {





     top: 50%;





     left: 100%;





     transform: translateY(-50%);





     transition: all 0.3s ease-in-out;





     margin-left: 10px;





}





 .pt-tooltip:hover .pt-tooltip-text.pt-tooltip-right {





     animation: tooltipRightIn 300ms linear;





}





 .pt-tooltip .pt-tooltip-text.pt-tooltip-right::after {





     top: calc(50% - 5px);





     right: 100%;





     border-color: transparent black transparent transparent;





}





/* Top */





 .pt-tooltip .pt-tooltip-text.pt-tooltip-top {





     bottom: calc(100%);





     left: 0;





     right: 0;





     margin: 0 auto 10px auto;





}





 .pt-tooltip .pt-tooltip-text.pt-tooltip-top::after {





     margin-top: 0px;





     top: 100%;





     left: calc( 50% - 5px );





     border-color: black transparent transparent transparent;





}





 .pt-tooltip:hover .pt-tooltip-text.pt-tooltip-top {





     animation: tooltipTopIn 300ms linear;





}





/* Bottom */





 .pt-tooltip .pt-tooltip-text.pt-tooltip-bottom {





     top: 100%;





     left: 0;





     right: 0;





     margin: 10px auto 0px auto;





}





 .pt-tooltip .pt-tooltip-text.pt-tooltip-bottom::after {





     margin-top: 0px;





     bottom: 100%;





     left: calc( 50% - 5px );





     border-color: transparent transparent black transparent;





}





 .pt-tooltip:hover .pt-tooltip-text.pt-tooltip-bottom {





     animation: tooltipBottomIn 300ms linear;





}





/* Alignments */





 .pt-tooltip-align-left {





     display: flex;





     width: 100%;





     justify-content: flex-start;





}





 .pt-tooltip-align-right {





     display: flex;





     width: 100%;





     justify-content: flex-end;





}





 .pt-tooltip-align-center {





     display: flex;





     width: 100%;





     justify-content: center;





}





 .pt-tooltip-align-justify .pt-tooltip {





     display: flex;





     justify-content: center;





     align-items: center;





}





/* tooltip Keyframes */





 @keyframes tooltipRightIn {





     0% {





         opacity: 0;





         left: 105%;





    }





     100% {





         opacity: 1;





         left: 100%;





    }





}





 @keyframes tooltipLeftIn {





     0% {





         opacity: 0;





         right: 105%;





    }





     100% {





         opacity: 1;





         right: 100%;





    }





}





 @keyframes tooltipTopIn {





     0% {





         opacity: 0;





         bottom: 110%;





    }





     100% {





         opacity: 1;





         bottom: 100%;





    }





}





 @keyframes tooltipBottomIn {





     0% {





         opacity: 0;





         top: 110%;





    }





     100% {





         opacity: 1;





         top: 100%;





    }





}