#divAppAlert
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:1000;
}

#divAppAlert.show
{
	animation-duration:0.25s;
	animation-name:showAlert;
	display:block;
	opacity:1;
}

#divAppAlert .divAlertPopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
    left:50%;
    max-height:calc(100% - 100px);
    max-width:calc(100% - 100px);
    opacity:0;
	overflow:auto;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
    width:280px;
}

#divAppAlert.autoSize .divAlertPopup
{
    margin:auto;
    max-width:75%;
    min-width:280px;
    width:auto;
}

#divAppAlert.show .divAlertPopup
{
    animation-duration:0.25s;
	animation-name:showAlert;
	opacity:1;
}

#divAppAlert #divAlertMessage
{
    font-size:16px;
    padding-bottom:20px;
}

#divAppAlert #divAlertButtons
{
    text-align:right;
}

#divAppAlert .btnAlert
{
    margin-left:10px;
    min-width:60px;
    padding:0px 15px;
}

#divAppAlert .btnAlert:first-child
{
    margin-left:0px;
}

/* ANIMATION KEY FRAMES */
@keyframes showAlert
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-width: 500px)
{
    #divAppAlert.autoSize .divAlertPopup
    {
        max-height:calc(100% - 80px);
        max-width:calc(100% - 80px);
        padding:20px;
        width:calc(100% - 80px);
    }

    #divAppAlert.autoSize #divAlertMessage
    {
        font-size:14px;
    }
}

@media (max-width: 400px)
{
    #divAppAlert.autoSize .divAlertPopup
    {
        max-height:calc(100% - 70px);
        max-width:calc(100% - 70px);
        padding:15px;
        width:calc(100% - 70px);
    }

    #divAppAlert.autoSize #divAlertMessage
    {
        font-size:13px;
    }
}