/* ALERT BOX FORMS */
.alert_content_full{
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:rgba(0,0,0,0.8);
    overflow: hidden;
    opacity:0;
    pointer-events:none;
    z-index:999999999;

    display: -ms-flex;
    display: -webkit-flex;
    display: flex;

    /* centraliza na vertical */
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    /* centraliza na horizontal */
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* transitions */
    transition-duration:0.35s;
    -webkit-transition-duration:0.35s;
    -moz-transition-duration:0.35s;
}
.alert_content_full.show{
    pointer-events:auto;
    opacity:1;
}
    .alert_content_full .alert_content_box{
        position:relative;
        width:96%;
        max-width:500px;
        height:auto;
        display:table;
        padding:25px;
        border-radius:8px;
        background:#fff;
        opacity:0;
        z-index: -55555;

        transform: scale(0.5) rotate(0deg);
        transition-duration:0.35s;
        -webkit-transition-duration:0.35s;
        -moz-transition-duration:0.35s;
    }
    .alert_content_full.show .alert_content_box{
        opacity:1;
        z-index:99999;
        transform: scale(1) rotate(0deg);    
    }
        .alert_content_full .alert_data{
            width:100%;
            height:auto;
            display:table;
        }
            .alert_content_full .alert_icon{
                width:100%;
                display:table;
                margin-bottom:5px;
            }
                .warning{
                    height:65px;
                    background:url("icons/i_warning.png") no-repeat center center;
                }
                .error{
                    height:97px;
                    background:url("icons/i_error.jpg") no-repeat center center;
                }
                .success{
                    height:97px;
                    background:url("icons/i_success.jpg") no-repeat center center;
                }
                .information{
                    height:65px;
                    background:url("icons/i_info.png") no-repeat center center;
                }

            .alert_content_full .alert_loader{
                width:100%;
                height:auto;
                display:table;
            }
                .spinner{
                    display:table;
                }
                .spinner {
                    margin: 40px auto 15px;
                    width: 70px;
                    text-align: center;
                }
                .spinner > div {
                    width: 14px;
                    height: 14px;
                    background-color: #F3AD3A;
                    border-radius: 100%;
                    display: inline-block;
                    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                }
                .spinner .bounce1 {
                    -webkit-animation-delay: -0.32s;
                    animation-delay: -0.32s;
                }
                .spinner .bounce2 {
                    -webkit-animation-delay: -0.16s;
                    animation-delay: -0.16s;
                }
                @-webkit-keyframes sk-bouncedelay {
                    0%, 80%, 100% { -webkit-transform: scale(0) }
                    40% { -webkit-transform: scale(1.0) }
                }
                @keyframes sk-bouncedelay {
                    0%, 80%, 100% { 
                        -webkit-transform: scale(0);
                        transform: scale(0);
                    } 40% { 
                        -webkit-transform: scale(1.0);
                        transform: scale(1.0);
                    }
                }
                
            .alert_content_full .alert_response{
                text-align:center;
                font-size:15px;
                width:100%;
                display:table;
                color:#999;
            }
        .alert_content_full .alert_close{
            width: 40px;
            height: 40px;
            display: table;
            background: #1b1b1b url("icons/icon_close.png") no-repeat center center;
            background-size: 40%;
            position: absolute;
            top: 0px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 4px;
            right: 0px;
            border: 0px;
            cursor: pointer;
        }

/* POPUP BOX */
.modal_wrap{
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:rgba(0,0,0,0.8);
    overflow: hidden;
    opacity:0;
    pointer-events:none;
    z-index:888888888;

    display: -ms-flex;
    display: -webkit-flex;
    display: flex;

    /* centraliza na vertical */
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;

    /* centraliza na horizontal */
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* transitions */
    transition-duration:0.35s;
    -webkit-transition-duration:0.35s;
    -moz-transition-duration:0.35s;
}
.modal_wrap.show{
    pointer-events:auto;
    opacity:1;
}
    .modal_wrap .modal_box{
        position:relative;
        width:94%;
        max-width:500px;
        height:auto;
        display:table;
        padding:25px;
        border-radius:8px;
        background:#fff;
        opacity:0;
        pointer-events:none;

        transform: scale(0.8) rotate(0deg);
        transition-duration:0.35s;
        -webkit-transition-duration:0.35s;
        -moz-transition-duration:0.35s;
    }
    .modal_wrap.show .modal_box{
        opacity:1;
        pointer-events:auto;
        transform: scale(1) rotate(0deg);    
    }
        .modal_wrap .modal_data{
            width:100%;
            height:auto;
            display:flex;
            flex-direction: column;

        }
        .modal_wrap .modal_data img{
            width:100%;
        }
        .modal_wrap .modal_close{
            width: 40px;
            height: 40px;
            display: table;
            background: #333 url("icons/icon_close.png") no-repeat center center;
            background-size: 40%;
            position: absolute;
            top: 0px;
            border-top-right-radius: 4px;
            border-bottom-left-radius: 4px;
            right: 0px;
            border: 0px;
            cursor: pointer;
        }