.wui-modal-root {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: auto;
    pointer-events: none;
    right: 0;
    top: 0;
    z-index: 999;
}
.wui-modal-root[data-state=open] {
    display: block;
}
.wui-modal-root[data-state=close] {
    display: none;
}

.wui-modal-dialog-container {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100%;
    outline: none;
    pointer-events: auto;
    width: 100%;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,.5);
    bottom: 0;
    left: 0;
    /*opacity: 0;*/
    right: 0;
    top: 0;
    transition: opacity .4s;
    transition-timing-function: cubic-bezier(.2,.8,.4,1);
}

.wui-modal-dialog {
    background: white;
    border-radius: 5px;
    /*color: var(--text-default);*/
    margin: 20px 12px;
    max-width: 100%;
    width: 50%;
    /*opacity: 0;*/
    /*position: relative;*/
    /*-webkit-transform: translateY(20px);*/
    /*transform: translateY(20px);*/
    transition: opacity .4s,-webkit-transform .4s;
    transition: transform .4s,opacity .4s;
    transition: transform .4s,opacity .4s,-webkit-transform .4s;
    transition-timing-function: cubic-bezier(.2,.8,.4,1);
    -webkit-user-select: text;
    user-select: text;
}

.wui-modal-header {
    font-size: 20px;
    line-height: 28px;
    margin: 10px 14px 6px 14px;
}

.wui-modal-body {
    font-size: 14px;
    margin: 6px 14px 14px 14px;
}

.wui-modal-footer {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: 22px 14px 14px;
}
