#add-activity-modal .image-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

#add-activity-modal .image-list .image-item {
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    margin: 8px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

#add-activity-modal .image-list .image-item .image-wrapper {
    pointer-events: none;
}

#add-activity-modal .image-list .image-item .image-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

#add-activity-modal .image-list .image-item .image-btn-delete {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: .4s ease all;
    opacity: 0;
}

#add-activity-modal .image-list .image-item .image-btn-delete:hover {
    opacity: 1;
}

#add-activity-modal .image-list .image-item .image-btn-delete:before {
    content: '';
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: rgba(255,255,255,.7);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.657.929a1 1 0 111.414 1.414L9.414 8l5.657 5.657a1 1 0 11-1.414 1.414L8 9.414l-5.657 5.657A1 1 0 11.93 13.657L6.586 8 .929 2.343A1 1 0 112.343.93L8 6.586 13.657.929z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    z-index: 2;
    display: block;
}