.ui-popup {
    position: absolute;
    z-index: 9000;

    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .4);

    animation: ui_popup_animation .1s ease-out;
}

.ui-popup::before,
.ui-popup__tail {
    position: absolute;

    display: none;

    width: 10px;
    height: 10px;

    content: '';

    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .4);

    transform: rotate(45deg);
}

.ui-popup__content {
    position: relative;

    background: #fff;
}

@-moz-keyframes ui_popup_animation {
    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

@-webkit-keyframes ui_popup_animation {
    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

@-o-keyframes ui_popup_animation {
    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes ui_popup_animation {
    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}
