/**
 * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
 * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
 */

.p-tooltip {
    position: relative;
}
.p-tooltip:hover .p-tooltip-arrow,
.p-tooltip:hover .p-tooltip-content {
    opacity: 1;
}
.p-tooltip-arrow {
    border: 8px solid transparent;
    border-top-color: #00439e;
    bottom: 100%;
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, 8px);
    width: 0;
    z-index: 10;
}
.p-tooltip-content {
    background-color: #00439e;
    border-radius: 2px;
    bottom: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, -8px);
    z-index: 10;
}