.single-image {
    padding: 10px;
    background: rgba(77, 89, 149, 0.06);
    margin-top: 15px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: bottom;
    /*box-shadow: var(--bs-box-shadow);*/
}

.single-image>.image-holder {
    cursor: default;
    margin: 0;
    border-radius: 3px;
    background: none;
}

.image-holder {
    position: relative;
    float: right;
    height: 150px;
    width: 150px;
    overflow: hidden;
    margin: 0px 0px 10px 10px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 3px;
    cursor: move;
    background-color: rgba(77, 89, 149, 0.06);
    z-index: 0;
}

.image-holder>i, .image-holder>img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.image-holder>i {
    font-size: 60px;
    color: rgba(77, 89, 149, 0.06);
    z-index: -1;
}
.image-holder>img {
    max-height: 100%;
    max-width: 100%;
    z-index: 1;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.fa-image:before {
    content: "\f03e";
}

.custom-file-input {
    position: absolute;
    z-index: 2;
    width: 50%;
    height: calc(1.5em + 1.3rem + 2px);
    margin: 0;
    opacity: 0;
}

.card-photo-flush {
    background-color: rgba(21,23,28,0.6);
    z-index: 9999999;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

.loader {
    width: 30px;
    height: 30px;
    display: inline-block;
    /* position: relative; */
    position: absolute;
    left: 45%;
    top: 45%;

}
.loader::after,
.loader::before {
    content: '';  
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: rotation 2s ease-in-out infinite alternate;
}
.loader::after {
    border-color: #FF3D00;
    animation-direction: alternate-reverse;
}
  
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.image-holder>.remove-image {
    position: absolute;
    top: -2px;
    right: 4px;
    color: #fff;
    padding: 0;
    background: transparent;
    -webkit-transition: .2s;
    transition: .2s;
    visibility: hidden;
    opacity: 0;
    font-size: 18px;
    font-family: FontAwesome;
    -webkit-text-stroke: 1px #737881;
    -moz-text-stroke: 1px #737881;
    -ms-text-stroke: 1px #737881;
    -o-text-stroke: 1px #737881;
    z-index: 55;
}
.image-holder>.remove-image:after {
    content: "\00D7";
}

.image-holder:hover>.remove-image {
    visibility: visible;
    opacity: 1;
}

.status-title {
    padding: 6px 11.5px 6px;
    color: #99a1b7;
}

.status-placeholder {
    padding: 6px 11.5px 6px;
}

.allowed_files{
    padding: 6px 11.5px 6px;
}

.relative{
    position: relative;
}



.progress-upload {
    position: absolute;
}

.progress-upload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 7px;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #fff;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    bottom: 0px;
    width: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}



.filepond--root {
    font-family: var(--bs-body-font-family) !important;
    width: 100% !important;

}

.filepond--credits{
    display: none !important;
}

.filepond--label-action{
    color: var(--bs-primary);
}


.m-i {
    border: 2px dashed var(--bs-gray-300);
    margin-top: 15px;
}

.multiple-images {
    overflow: hidden;
    padding: 10px 11.5px 0;
    background: rgb(169 171 183 / 6%);
    border-radius: 3px;
}

.progress-upload {
    position: relative;
}

.progress-upload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1px;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: rgba(77, 89, 149, 0.06);
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}