.Cupload {
    display: block;
}

.cupload-upload-box {
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: rgb(251, 253, 255);
    border: 1px dashed rgb(192, 204, 218);
    border-radius: 6px;
    box-sizing: border-box;
    /* width: 148px; */
    /* height: 148px; */
    /* line-height: 148px; */
}

.cupload-upload-btn {
    position: absolute;
    /* left: 60px; */
    font-size: 28px;
    color: rgb(140, 147, 157);
}

.cupload-upload-input {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    cursor: pointer;
}

.cupload-image-list {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

.cupload-image-box {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    background-color: rgb(251, 253, 255);
    border: 1px solid rgb(192, 204, 218);
    border-radius: 6px;
    box-sizing: border-box;
}

.cupload-image-preview {
    position: absolute;
    inset: 0px;
    margin: auto;
}

.cupload-image-delete {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    text-align: center;
    color: rgb(255, 255, 255);
    opacity: 0;
    cursor: zoom-in;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease 0s;
}

.cupload-delete-btn {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAwUlEQVRYhe2WwQ3CMAxFPxXqOjAAqGwHo3QNCIxSxuBzcaRStcRxcin4XSJHjv2aNkoBRwHJhmSgnhvJpqbAPqN5ZKeprbU8ydhvEgDoJ2uqCHQyXhW5Maf7mrUEyYdhu7WEab+5HXiZzJXPp88Uijsm6tQ7KkZcYF0CckSDNi5i7uudzqXipbkx63oFLuACPymwzcy/4/NKTcV2/Dp2AQBPACB5sBYneRzXyl18qfAXHDlbBFqRGAoaD1KjzRb4G96BvtfyCUSIygAAAABJRU5ErkJggg==);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: right top;
}

.cupload-sort-left {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAABP0lEQVRYhe2UIUsEURRGv7suGza4sCBoENYgGMwWs/4A/4AWwWRyMfgHRCyKGhWsYtegRYOCCGoUk1kwKLiws8dywRFGcXZ23yDMiW8e75z3YK5UUPBfAQbzlK8BEbCa9axySrFJ2pC0klWcGsCALb7Y8aAg8gHgICZfDyJ2eQU4dnEHCPf8QBU4dXkELIaU14BLl7eB+ZDyOnDt8g9gLqR8BHhw+Rsw00/ft98IaEg6lzTmS2eSbnroiyTtm9lT4ldgm/6z+9sLTPoLDPnSraTk2u5oSdo0s7sfdwATwLPXvgBTPQz4G0ADePSIV2A6j4hh4N4j3oHZPCLqwJVHtAg5D2IRNeDCI8JOxFhEFTjxiA6wnEdEBTiKRTTziCgDh7GhspT1zFKazWbWlrQgac+XRrMGdA0wDqS6QEFBEp/yS6NBq8E1tgAAAABJRU5ErkJggg==);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.cupload-sort-right {
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAA4UlEQVRYhe3WMUpDQRCA4XkKWlhIqnQWwc4iKbyBTVohJ/AC2lh4gxxBA7lAqhwgvbWtpYWVnVgI4mfhghKeEPCFSeD93cIu8w+7OzMRLS3bDga4Qy9LYOqbZ5xkCBzjqUi84DRD4giPReIVZxkSXTwUiTcMMyQ6uC8S7xhlSBxgUSQ+cJEhsY95kfjEVYbEHmZ+GNftq2oOHkbETkMeuxExiYjzsh5XVXXz525cWz+Xv2MuZ6qhzFdms66gSVZ9hOsKnvcNZRYimaVYZjOS2Y5lDyQ2YCTr41bWUNrS8l++ABQQn/PCTE8cAAAAAElFTkSuQmCC);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.cupload-overlay {
    display: none;
    position: fixed;
    text-align: center;
    inset: 0px;
    z-index: 9115;
    background-color: rgba(0, 0, 0, 0.3);
}

.cupload-overlay-img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -35px;
    max-width: calc(100% - 10px);
    max-height: calc(100% - 10px);
}