.jboot-common-component-preview-image-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jboot-common-component-preview-image-wrap li{
    list-style: none;
}
.jboot-common-component-preview-image-wrap > .img-parent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .loading-wrap {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .loading-wrap > i {
    font-size: 32px;
    color: #ffffff;
    animation: jboot3-file-uploading-animate .7s ease-in-out infinite;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > img {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.15s;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .close-parent {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    z-index: 2;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .close-parent > i {
    color: #ffffff;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background-color: #606266;
    border-radius: 22px;
    padding: 7px 25px 5px;
    z-index: 2;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer > li {
    line-height: 20px !important;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer > li:not(:first-child) {
    margin-left: 15px;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer > li > i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer > li > i:not(.disabled):hover {
    color: #ffffff;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .footer > li > i.disabled {
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.4);
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .image-empty {
    color: rgba(255, 255, 255, 0.7);
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .image-empty > i {
    font-size: 120px;
}
.jboot-common-component-preview-image-wrap > .img-parent > .preview-item > .image-empty > p {
    text-align: center;
    font-size: 14px;
}
@keyframes jboot3-file-uploading-animate {
    0%{transform:rotate(0deg);}
    25%{transform:rotate(90deg);}
    50%{transform:rotate(180deg);}
    75%{transform:rotate(270deg);}
    100%{transform:rotate(360deg);}
}