div.file-actions .btn.delete{
    background-image: url("/images/svg/closeBlack.svg");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: center center;
}

div.file-actions .btn.rotate{
    background-image: url("/images/svg/rotateBlack.svg");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: center center;
}

div.file-actions .btn.delete:hover{
    background-image: url("/images/svg/closeWhite.svg");
}

div.file-actions .btn.rotate:hover{
    background-image: url("/images/svg/rotateWhite.svg");
}


.custom-popup.loading.show {
    background: #ffffff61;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.custom-popup.loading.show img{
    width: 80px;
    margin: 24px 0;
}
.custom-popup.loading.show p{
    color: #e5322d;
    font-size: 20px;
    font-weight: 600;
}
.file__info{
    height: 32px!important;
}

#page-render li {
    width: unset;
    height: unset;

}
div.page .file-image{
    width: 80%;
    max-height: 100%;
    overflow: hidden;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
}
div.page.blank .file-image{
    background: #FFFFFF;
}
.file__info:hover .file__info__name{
    min-width: 150px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,.14);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.14);
}

.file__info:hover .file__infoMore{
    display: inline;
}

.option {
    transition: all .4s linear;
}

.filesOrder {
    margin-top: 15px;
}
ul.form__group {
    padding-inline-start: unset;
}

.filesOrderItem {
     padding: unset;
}

.icoDrag {
    -ms-flex: 0 0 25px;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    background-image: url(/images/svg/drag-up-down.svg);
    cursor: move;
    margin: 12px;
    background-repeat: no-repeat;
}
.filesOrderItem .filename {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}


.filesOrderItem .close {
    display: none;
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: auto;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url("/images/svg/close.svg");
    background-repeat: no-repeat;
}

.page {
    position: relative;
    border-radius: 8px;
}

.page:hover .pageAdd {
    display: block;
}

.pageAdd:first-child {
    right: auto;
    left: -34px;
}

.pageAdd {
    position: absolute;
    right: -34px;
    width: 42px;
    z-index: 99;
    display: none;
    opacity: .6;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 42px;
    border-radius: 100%;
    background: #fff url(/images/svg/add-pages.svg) no-repeat 50%;
    cursor: pointer;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,.14);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.14);
}

.page:hover div.file-actions .btn{
    display: flex;
}

div.file-actions {
    display: flex;
    top: 8px;
    right: 8px;
    position: absolute;
    z-index: 9;
}

.filesOrderItem.active, .filesOrderItem:hover {
    border: 1px solid #47474f;
}

.filesOrderItem:hover .close {
    display: block;
}

li.placeholder .filesOrderItem .close {
    display: block;
}

.filesOrderItem .close {
    display: none;
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: auto;
    width: 24px;
    height: 24px;
    background: url(/images/svg/close.svg) no-repeat 50%;
    cursor: pointer;
}


.fileA, .fileA:after {
    background: #ffcdd2 !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #ef9a9a
}

.fileA.active, .fileA.active:after, .fileA:hover, .fileA:hover:after {
    background: #ef9a9a !important;
}

.fileB, .fileB:after {
    background: #b2ebf2 !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #80deea
}

.fileB.active, .fileB.active:after, .fileB:hover, .fileB:hover:after {
    background: #80deea !important;
}

.fileC, .fileC:after {
    background: #fff9c4 !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #fff59d
}

.fileC.active, .fileC.active:after, .fileC:hover, .fileC:hover:after {
    background: #fff59d!important;
}

.fileD, .fileD:after {
    background: #c5cae9!important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #9fa8da
}

.fileD.active, .fileD.active:after, .fileD:hover, .fileD:hover:after {
    background: #9fa8da!important;
}

.fileE, .fileE:after {
    background: #b2dfdb !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #80cbc4
}

.fileE.active, .fileE.active:after, .fileE:hover, .fileE:hover:after {
    background: #80cbc4 !important;
}

.fileF, .fileF:after {
    background: #ffe0b2 !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #ffcc80
}

.fileF.active, .fileF.active:after, .fileF:hover, .fileF:hover:after {
    background: #ffcc80 !important;
}

.fileG, .fileG:after {
    background: #cfd8dc!important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #b0bec5
}

.fileG.active, .fileG.active:after, .fileG:hover, .fileG:hover:after {
    background: #b0bec5 !important;
}

.fileH, .fileH:after {
    background: #dcedc8!important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #c5e1a5
}

.fileH.active, .fileH.active:after, .fileH:hover, .fileH:hover:after {
    background: #c5e1a5 !important;
}

.fileI, .fileI:after {
    background: #fce4ec!important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #f8bbd0
}

.fileI.active, .fileI.active:after, .fileI:hover, .fileI:hover:after {
    background: #f8bbd0 !important;
}

.fileJ, .fileJ:after {
    background: #bbdefb !important;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border: 1px solid #90caf9
}

.fileJ.active, .fileJ.active:after, .fileJ:hover, .fileJ:hover:after {
    background: #90caf9 !important;
}