.ui-drag-modal-box-hide {
    display: none;
}
.ui-drag-modal-box {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1024;
    transition: opacity 0.3s, z-index 0.3s;
    .ui-drag-modal-dialog {
        position: relative;
        min-width: 340px;
        min-height: 380px;
        display: inline-block;
        border-radius: 5px;
        z-index: 8001;
        background: #f5f6f8;
        box-shadow: 0 16px 24px 0 rgba(26,26,26,0.12), 0 2px 12px 0 rgba(26,26,26,0.10);
        .ui-drag-modal-dialog-header {
            position: relative;
            display: flex;
            align-items: center;
            .ui-drag-modal-dialog-title {
                flex: 1;
                cursor: all-scroll;
                user-select: none;
                padding: 15px 14px 2px;
            }
            .ui-drag-modal-dialog-close {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                cursor: pointer;
                margin-right: 15px;
                font-size: 20px;
                transition: opacity 0.3s;
                &:hover {
                    opacity: .6;
                }
            }
        }
        .ui-drag-modal-dialog-body {
            position: relative;
            height: calc(100% - 75px);
            margin: 14px;
        }
        .ui-drag-modal-resize {
            position: absolute;
            width: 15px;
            height: 15px;
            right: 0;
            bottom: 0;
            cursor: se-resize;
        }
    }
    &.ui-drag-modal-show {
        opacity: 1;
        z-index: 8000;
    }
}