@keyframes popupbox-attached {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popupbox-jump {
    0% {
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    }
    100% {
        transform: scale(1.005);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
}

@keyframes popupbox-blink {
    0% {
        opacity: 1;
    }
    20% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes popupbox-fadeout {
    from {
        opacity: 1;
    }
    to   {
        opacity: 0;
    }
}

/**ANIMATIONS**/
.modtrjct-popup-boxes > .popupbox-body.anim-jump {
    animation: 0.8s popupbox-jump ease-in-out infinite alternate;
}

.modtrjct-popup-boxes > .popupbox-body.anim-blink {
    animation: 1s popupbox-blink ease-out infinite
}

.modtrjct-popup-boxes.anim-hide {
    animation: 750ms popupbox-fadeout ease-out;
}

.modtrjct-popup-boxes {
    z-index: 8888;
    visibility: visible;
    margin: 0;
    padding: 0.5em;
    position: absolute;
    animation-duration: 0.5s;
    animation-name: popupbox-attached;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 360px;
}

.modtrjct-popup-boxes > .popupbox-body {
    background-color: #f9f9f9;
    border: 1px solid #e8139f;
    color: #333;
    box-shadow: 0 4px 14px -2px rgba(0,8,16,.08);
    font-size: 0.8rem;
    position: relative;
    border-radius: 4px;
}

.modtrjct-popup-boxes > .popupbox-body > .popupbox-content {
    display: flex;
    position: relative;
    padding: 0.5em;
}

.modtrjct-popup-boxes > .popupbox-body > .popupbox-arrow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
}

.modtrjct-popup-boxes > .popupbox-body.top > .popupbox-arrow:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -9px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: none;
    border-top: 10px solid #f9f9f9;
}

.modtrjct-popup-boxes > .popupbox-body.top > .popupbox-arrow:after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: none;
    border-top: 10px solid #e8139f;
    z-index: -1;
}

/**SIMPLE**/
.modtrjct-popup-boxes.popupbox-simple > .popupbox-body > .popupbox-text {
    padding: 1em;
}