div[id*="popup"]{
    position: absolute;
    top: 0;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100vh;
    &.show{
        display: block;
        z-index: 16;
        position: fixed;
        /*top: 25px;*/
        margin: 0 auto;
        width: 100%;
        form{
            display: inline-block;
            margin-left: 10px;
        }
    }
    &.hidden{
        display: none;
    }

    .popup {
        background: white;
        margin: 0 auto;
        min-width: 300px;
        border-radius: 15px;
        padding: 15px;
        vertical-align: middle;
        margin-top: 100px;
        width: 20%;
        box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);

        span.close {
            color: red;
            border: 1px dashed red;
            padding: 4px 7px;
            border-radius: 18px;
            float: right;
            cursor: pointer;
            margin-top: -5px;
        }
        span#nameDelete {
            color: red;
        }
        h3 {
            text-align: center;
            margin-right: 25px;
        }
        p {
            text-align: center;
            max-height: 250px;
            overflow: auto;
        }

        .popup-action {
            text-align: center;
            button {
                padding: 10px;
                min-width: 120px;
                border: 0;
                margin: 0px 10px;
                font-size: 15px;
                font-weight: 550;
                color: white;
                cursor: pointer;
                border-radius: 5px;
                &.btn-ok {
                    background: red;
                }
                &.btn-no {
                    background: #128C7E;
                }
            }
        }
    }

}

@media (max-width: 600px) {
    div[id*="popup"] {
        .popup {
            margin-top: 25%;
            p {
                max-height: 150px;
            }
        }

    }
}