/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
     /*background-color: rgb(0,0,0); Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 100%;
    min-height:9%;
    text-align:center;
    color:#63655B;
    overflow: hidden;
}
.success
{
    background: rgba(240,249,204,1);
    background: -moz-linear-gradient(top, rgba(240,249,204,1) 0%, rgba(201,222,125,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(240,249,204,1)), color-stop(100%, rgba(201,222,125,1)));
    background: -webkit-linear-gradient(top, rgba(240,249,204,1) 0%, rgba(201,222,125,1) 100%);
    background: -o-linear-gradient(top, rgba(240,249,204,1) 0%, rgba(201,222,125,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,249,204,1) 0%, rgba(201,222,125,1) 100%);
    background: linear-gradient(to bottom, rgba(240,249,204,1) 0%, rgba(201,222,125,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=0 );  
    border-bottom:1px solid #00CC00;
}
.success .titleicon
{
    background-image: url('../images/good_or_tick.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    font-size: 27px;
    font-weight: bold;
    height: 100%;
    border-left:0px solid #CEE282;
}
.warning
{
    background: rgba(237, 236, 198,1);
    background: -moz-linear-gradient(top, rgba(237, 236, 198,1) 0%, rgba(236, 206, 117,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 236, 198,1)), color-stop(100%, rgba(236, 206, 117,1)));
    background: -webkit-linear-gradient(top, rgba(237, 236, 198,1) 0%, rgba(236, 206, 117,1) 100%);
    background: -o-linear-gradient(top, rgba(237, 236, 198,1) 0%, rgba(236, 206, 117,1) 100%);
    background: -ms-linear-gradient(top, rgba(237, 236, 198,1) 0%, rgba(236, 206, 117,1) 100%);
    background: linear-gradient(to bottom, rgba(237, 236, 198,1) 0%, rgba(236, 206, 117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
    border-bottom:1px solid #F79E01;
}
.warning .titleicon
{
    background-image: url('../images/warning.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    font-size: 27px;
    font-weight: bold;
    height: 100%;
    border-left:0px solid #CEE282;
}
.error
{
    background: rgba(250, 202, 213,1);
    background: -moz-linear-gradient(top, rgba(250, 202, 213,1) 0%, rgba(246, 152, 174,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250, 202, 213,1)), color-stop(100%, rgba(246, 152, 174,1)));
    background: -webkit-linear-gradient(top, rgba(250, 202, 213,1) 0%, rgba(246, 152, 174,1) 100%);
    background: -o-linear-gradient(top, rgba(250, 202, 213,1) 0%, rgba(246, 152, 174,1) 100%);
    background: -ms-linear-gradient(top, rgba(250, 202, 213,1) 0%, rgba(246, 152, 174,1) 100%);
    background: linear-gradient(to bottom, rgba(250, 202, 213,1) 0%, rgba(246, 152, 174,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7aeac', endColorstr='#f23030', GradientType=0 );   
    border-bottom:1px solid #D92F59;
}
.error .titleicon
{ 
    background-image: url('../images/exclamation.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    font-size: 27px;
    font-weight: bold;
    height: 100%;
    border-left:0px solid #E5718C;
}



/* The Close Button */
.close
{
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
   /*background-image: url('../images/delete.png');*/
    background-repeat: no-repeat;
    background-size:100% 100%;
 }


.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}