.image-upload-container {
    border: 1px solid #dfdfdf;
    border-radius: 0.25rem;
    margin: 5px;
}

.image-upload-container .image-column {
    margin: 5px;
}

.image-upload-container .image-column img {
    border-radius: 0.25rem;
}
.loader-upload {
    transform: translate(-50%,-50%);
    position: absolute;
    border-radius: 0.25rem;
}

.loader-upload.process {
    background: #fff;
}

.loader-upload.success {    
    background: #28a745;
    color: #fff;
}

.loader-upload.fail {    
    background: #dc3545;
    color: #fff;
}

.upload-preview{
    min-height: 250px;
    position: relative;
    border: 2px dashed #dfdfdf;
    margin: 1rem;
    cursor: pointer;
}
  
.dragover {
    border: 2px solid #343a40 !important;
}

.image-lists {
    min-height: 700px ;
}


.upload-file{ 
    display: none;
}


.thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;  
    overflow: hidden;
}

.thumbnail .center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;  
    width: 100%;
    height: 100%;
    transform: translate(50%,50%);
}
 
.thumbnail .center > h5,
.thumbnail .center > span,
.thumbnail .center > img {
    transform: translate(-50%,-50%); 
    position: absolute;
}
 
.thumbnail .center > h5 {
    color: #d8d8d8;
}

.thumbnail .center > img.lanscape {
    max-height: 100% !important;
}

.thumbnail .center > img.portrait {
    max-width: 100%!important;
}



.image-thumbnail-container {
    padding: 5px;
    border: 1px solid #c4c4c4;
    height: 120px;     
    width: 120px;
    background-color: #ffffff;
    border-radius: 3px;
}

.image-thumbnail {    
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.image-column-button,
.image-column {
    height: 120px;     
    width: 120px;     
    position: relative;
    margin: 10px;
}

.image-column-button {
    height: 120px;     
    width: 120px;
    margin: 5px 5px 32px 5px;
}

.image-column-button-fluid {
    width: 100%;
    margin: 0;
}

.image-column-table {
    height: 110px !important;
    width: 110px !important;
}

.image-column-button .thumbnail {    
    border: 1px dashed #ced4da;
}