.ngImageUpload{
    margin: 10px 0;
    .thumb{
        ul{
            &::after{
                content: '';
                display: block;
                clear: both;
            }
            li{
                float: left;
                width: 110px;
                height: 110px;
                border-radius: 2px;
                background: #F3F4F7;
                font-size: 13px;
                margin-right: 10px;
                color: #6E7382;
                position: relative;
                .upload-box{
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    border: 1px dashed #DADDE4;
                    label{
                        cursor: pointer;
                        display: block;
                        width: 100%;
                        height: 100%;
                        font-weight: 100;
                        margin-bottom: 0;
                        span{
                            display: block;
                            font-size: 30px;
                            padding-top: 20px;
                            margin-bottom: 5px;
                        }
                    }
                    &:hover{
                        border-color: #50A0FC;
                        color: #50A0FC;
                    }
                    &:active{
                        border-color: #2C87EF;
                        color: #2C87EF;
                    }
                }
                .images-box{
                    position: absolute;
                    top:0;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    border: 1px dashed #DADDE4;
                    padding: 5px;
                    .images-box-img{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        text-align: center;
                    }
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                    .typeImgFILE{
                        background: url('./img/file.png') no-repeat center;
                        background-size: auto 100%;
                    }
                    .typeImgWORD{
                        background: url('./img/w.png') no-repeat center;
                        background-size: auto 100%;
                    }
                    .typeImgEXCEL{
                        background: url('./img/x.png') no-repeat center;
                        background-size: auto 100%;
                    }
                    .typeImgPDF{
                        background: url('./img/p.png') no-repeat center;
                        background-size: auto 100%;
                    }
                    .barrier{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 100px;
                        height: 100px;
                        background: rgba(0, 0, 0, 0.6);
                        margin-left: -50px;
                        margin-top: -50px;
                        padding: 35px 0;
                        // display: flex;
                        display: none;
                        a{
                            color: #fff;
                            font-size: 19px;
                            flex: 1;
                            text-align: center;
                        }
                    }
                    &:hover{
                        .barrier{
                            display: flex;
                        }
                    }
                    &.error{
                        border: 1px solid #FE3824;
                    }
                }
                .loading-box{
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    border: 1px dashed #DADDE4;
                    p{
                        padding: 45px 0;
                    }
                    div{
                        width: 80px;
                        height:1px;
                        background: #DDDDDD;
                        margin:0 auto;
                        margin-top: -15px;
                        span{
                            display: block;
                            width: 50%;
                            height: 100%;
                            &.succeed{
                                background: #6AC10A;
                            }
                            &.error{
                                background: #FE3824;
                            }
                            &.loading{
                                background: #3B98E0;
                            }
                        }
                    }
                }
            }
        }
    }

    .noThumb{
        label{
            cursor: pointer;
            border: 1px solid #DADDE4;
            border-radius: 3px;
            font-size: 13px;
            color: #4B5564;
            line-height: 30px;
            width: 105px;
            text-align: center;
            font-weight: 100;
            &:hover{
                border-color: #74B5FF;
                color: #74B5FF;
            }
            &:active{
                border-color: #2C87EF;
                color: #2C87EF;
            }
        }
        ul{
            width: 100%;
            li{
                line-height: 30px;
                padding-left: 5px;
                &::after{
                    content: '';
                    display: block;
                    clear: both;
                }
                &>span,
                &>div{
                    float: left;
                }
                &>div{
                    margin-left: 10px;
                    width: 89%;
                    a.succeed{
                        color: #51A1FD;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    .succeed{
                        float: left;
                        a{
                            color: #51A1FD;
                            &:hover{
                                text-decoration: underline;
                            }
                        }
                    }
                    a.error{
                        color: #FE3824;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    a.loading{
                        color: #6E7382;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    .schedule{
                        height: 1px;
                        width: 100%;
                        background: #E4E7EF;
                        span{
                            display: block;
                            width:20%;
                            height: 100%;
                            background: #3B98E0;
                        }
                    }
                }
                .remove{
                    float: right;
                    color: #9BA0AA;
                    font-size: 13px;
                    margin-right: 5px;
                    display: none;
                }
                &:hover{
                    background: #F6F8FC;
                    .remove{
                        display: block;
                    }
                }
            }
        }
    }

    .example{
        position: relative;
        .bgImg{
            width: 260px;
            height: 180px;
            border: 1px solid #d8d6d6;
            border-radius: 5px;
            padding:5px;
            div{
                width:100%;
                height:100%;
            }
        }
        label{
            cursor: pointer;
            border-radius: 3px;
            font-size: 13px;
            color: #fff;
            line-height: 33px;
            width: 90px;
            text-align: center;
            font-weight: 200;
            background: #FF6600e0;
            &:hover{
                background: #FF6600e8;
            }
            &:active{
                background: #FF6600;
            }
        }
        .operation{
            margin-top: 15px;
            .hint{
                margin-left:15px;
                width: 155px;
                font-size: 12px;
                color: #777;
            }
        }
        .type{
            width: 260px;
            height:1px;
            background: #DDDDDD;
            margin-top: 2px;
            span{
                display: block;
                width: 50%;
                height: 100%;
                &.succeed{
                    background: #6AC10A;
                }
                &.error{
                    background: #FE3824;
                }
                &.loading{
                    background: #3B98E0;
                }
            }
        }
        .errorText{
            color:#FE3824;
        }
    }
}