.le-dialog-overlay{
    position: fixed;
    top:0;
    left: 0;
    z-index: 122;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.05);
}
.le-dialog-close{
    width: 30px;
    height:30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
    position: absolute;
    top: 5px;
    right:5px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /%3E%3C/svg%3E");
}

.le-dialog{
    max-width: 90%;
    position: fixed;
    top:50%;
    left: 50%;
    transform: scale(.8);
    transform-origin: center center;
    z-index: 1024;
    transition: .3s;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    min-width: 320px;

    &.le-dialog-centered{
        transform: scale(.8) translate(-50%, -50%);
        &.le-dialog-opened{
            transform: scale(1) translate(-50%, -50%);
        }
    }

    &.le-dialog-opened{
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: scale(1) ;
    }
    .le-dialog-container{
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
}
