.popup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .67);
    z-index: 8888;
    animation: animation-popup-fadein 1s ease-out;
}

    .popup-scroller {
        position: relative;
        max-width: calc(100% - 40px);
        max-height: 100%;
        overflow: auto;
        transition: .4s;
        z-index: 1;
    }

    .popup-closer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .popup {
            position: relative;
            background-color: rgb(255, 255, 255);
            margin: 20px 0;
            animation: animation-popup-fadein .4s, animation-popup-slidedown .4s;
            min-width: 400px;
            padding: 20px;
        }

        .popup-title {
            margin-top: 0;
        }

        .popup-actions {
            margin-top: 16px;
            text-align: right;
        }

        .popup-actions button + button {
            margin-left: 8px;
        }


@keyframes animation-popup-fadein {

    0%   { opacity: 0; }
    100% { opacity: 1; }
}


@keyframes animation-popup-slidedown {

    0%   { top: -20px; }
    100% { top: 0; }
}


@media only screen and (min-width: 768px) {
}


@media only screen and (min-width: 1025px) {
}