.alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 440px;
    padding: 20px 20px 60px 20px;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    line-height: 20px;
    text-align: center;
    border: 5px solid #FFF;
    opacity: 0;
}
.popup-box {
    position: fixed;
    display: flex;
    top: 50%;
    left: 50%;
    /*max-width: 440px;*/
    width: 100%;
    height: 100%;
    padding: 60px 20px 60px 20px;
    /*background: #FFF;*/
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    line-height: 20px;
    text-align: center;
    opacity: 0;
}
.popup-box > div {
    margin: auto;
    background-color: #fff;
    min-width: 200px;
    padding: 20px;
    border-radius: 4px;
}
.alert-box.show, .popup-box.show {
    opacity: 1;
}
.alert-box b, .popup-box b {
    margin-bottom: 15px;
    display: block;
}
.alert-box .btn {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
}
.popup-box .btn {
    left: 50%;
    top: 50%;
    max-width: 200px;
    text-align: center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
    margin-top: 50px;
}
@media screen and (max-width: 550px) {
    .alert-box, popup-box {
        width: 80%;
    }
}