body.mgz-modal-lock {
    overflow: hidden;
}

.mgz-modal-container {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 10000;
    
    background: rgba(200, 200, 200, .7);
    
    overflow-y: scroll;
    
    &.animate-open {
        -webkit-animation: mgz-modal-container-open-animation .4s ease-in-out;
    }
    
    &.animate-close {
        -webkit-animation: mgz-modal-container-open-animation .4s ease-in-out reverse forwards;
    }
}

.mgz-modal {
    display: relative;
    width: 700px;
    margin: 100px auto;
    background: #fff;
    padding: 15px 25px;
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 1px 1px 0 #999;
    
    &.narrow {
        width: 400px;
    }
    
    .mgz-modal-container.animate-open & {
        -webkit-animation: mgz-modal-open-animation .4s ease-in-out;
    }
    
    .mgz-modal-container.animate-close & {
        -webkit-animation: mgz-modal-open-animation .4s ease-in-out reverse forwards;
    }
}

@-webkit-keyframes mgz-modal-container-open-animation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes mgz-modal-open-animation {
    from { margin-top: 300px; opacity: 0; }
    to { margin-top: 100px; opacity: 1; }
}

// Header, buttons...

.mgz-modal h1 {
    font-size: 2em;
    margin: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #aaa;
}

.mgz-modal .mgz-buttons {
    margin-top: 15px;
    overflow: hidden;
}