/* Common for all popups */

.modal {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

.modal.active {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

.overlay {
    visibility:hidden;
    position: fixed;
    z-index: 100;
    opacity:0;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

.overlay.active {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

.fade {
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: black;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 90;
}


/* simple popups (loading, confirm, message...) */

#popup-loading {
    left: 50%;
    top: 50%;
    color:white;
}

#popup-confirm {
    display: block;
    left: 40%;
    top: 50%;
    width:400px;
    height:100px;
    background:#ffffff;
}