﻿.preview-images-zone {
    
    border: 1px solid #ddd;
    min-height: 200px;
    /* display: flex; */
    padding: 5px 5px 0px 5px;
    position: relative;
    overflow: auto;
}
/*第一張寬高*/
    .preview-images-zone > .preview-image:first-child {
        height: 200px;
        width: 200px;
        position: relative;
        margin-right: 5px;
    }
    /*第二張寬高*/
    .preview-images-zone > .preview-image {
        height: 200px;
        width: 200px;
        position: relative;
        margin-right: 5px;
        float: left;
        margin-bottom: 5px;
    }

        .preview-images-zone > .preview-image > .image-zone {
            width: 100%;
            height: 100%;
        }

            .preview-images-zone > .preview-image > .image-zone > img {
                width: 100%;
                height: 100%;
            }

        .preview-images-zone > .preview-image > .tools-edit-image {
            position: absolute;
            z-index: 100;
            color: #fff;
            bottom: 0;
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            display: none;
        }

        .preview-images-zone > .preview-image > .image-cancel {
            font-size: 18px;
            position: absolute;
            top: 0;
            right: 0;
            font-weight: bold;
            margin-right: 10px;
            cursor: pointer;
            display: none;
            z-index: 100;
        }

.preview-image:hover > .image-zone {
    cursor: move;
    opacity: .5;
}

.preview-image:hover > .tools-edit-image,
.preview-image:hover > .image-cancel {
    display: block;
}

.ui-sortable-helper {
    width: 90px !important;
    height: 90px !important;
}