.pn-pop {position: relative;}
.pn-pop-trigger {cursor: pointer; padding: 0;}
.pn-pop-box {position: absolute; z-index: 999; top: 100%; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateX(50%); right: 50%; pointer-events: none; transition: ease all .3s; width: 240px;}
.pn-pop.is-open .pn-pop-box {opacity: 1; visibility: visible; pointer-events: auto;}
.pn-pop-box::before, .pn-pop-box::after {content: "\f0d8"; position: absolute; display: block; font-family: fontAwesome; font-size: 42px; top: 3px; color: #eee; right: 106px; line-height: 20px;}
.pn-pop-box::after {color: var(--surface-light-primary) !important; top: 5.5px; font-size: 46px; right: 105px;}
.pn-pop-content {padding: 12px; background: var(--surface-light-primary); border: 1px solid var(--border-light-primary); box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.1); border-radius: 4px;}
/* hover só funciona se NÃO estiver fixado */
@media (hover: hover) {
	.pn-pop:not(.is-locked):hover .pn-pop-box {opacity: 1; visibility: visible; pointer-events: auto;}
}