.ez-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10050;
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.65);
    outline: 0;

    .modal-dialog {
        position: relative;
        width: auto;
        margin: .5rem auto;
        pointer-events: none;
        max-width: var(--sz-width);
        animation: slidetop .3s;
    }

    &.dark{
        background: var(0,0,0,0.5);
    }

    &.overlay{
        background: var(--background);
    }

    &.sm{
        .modal-dialog{
            max-width: var(--sz-sm-width);
        }
    }

    &:not(.transparent){
        .modal-content{
            background-color: var(--background-light); 
        }
        &:not(.no-border) .modal-content{
            border: var(--border-width) solid var(--border);
            border-radius: var(--border-radius);
        }
        &:not(.no-shadow) .modal-content{
            box-shadow: var(--shadow);
        }
    }

    .modal-content {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 300px;
        width: 100%;
        pointer-events: auto;
        background-clip: padding-box;
        outline: 0;
        transition: .15s;
        overflow: hidden;
    }
    
    .close {
        position: absolute;
        right: 0;
        padding: 20px;
        top: 0;
        cursor: pointer;
        color: var(--text-light);
        z-index: 5;
    }
}


@media (min-width: 576px) {
    .ez-modal {
        .modal-content{
            margin: 1.75rem auto;
        }
        &.modal-scrollable {
            max-height: calc(100% - 3.5rem)
        }
        &.modal-scrollable .modal-content {
            max-height: calc(100vh - 3.5rem)
        }
        &.modal-centered {
            display: flex !important;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center !important;
          
            min-height: calc(100% - (1.75rem * 2)) !important;
        
        }
        &.modal-centered::before {
            height: calc(100vh - 3.5rem)
        }
    }

}

body.ez-dark{
    .ez-modal{
        background: rgba(0,0,0,0.65);
    }
}

@media (min-width: 992px) {
    .ez-modal.lg {
        .modal-dialog {
            max-width:  var(--sz-lg-width);
        }
    }
}

@media (min-width: 1200px) {
    .ez-modal.xl {
        .modal-dialog {
            max-width:  var(--sz-xl-width);
        }
    }
}

