#page-render {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
}

#page-render li {
    width: 200px;
    height: 250px;
    list-style-type: none;
    position: relative;
    margin: 10px;
}

#page-render li div.file-preview-container {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px -1px 9px -1px rgba(168, 164, 164, 0.75);
    background: #fdfdfd;
    border-radius: 8px;
}

/*Css placeHolder when drag*/
.placeHolder div.file-preview-container {
    background-color: #fcf9f9 !important;
    border: dashed 1px gray !important;
}

#page-render div.file-actions {
    z-index: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
}

#page-render li div.file-preview-container.selected {
    border: 1px solid #9999a2;
    background: #fbfbfb;
}

div.file-actions .btn {
    display: none;
    padding: 3px;
    width: 24px;
    height: 24px;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    text-align: center;
    background: rgba(0, 0, 0, .1);
    background: #ebebf4;
    margin-left: 4px;
    border-radius: 100%;
    cursor: pointer;
    display: -ms-flexbox;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 0;
}

div.file-actions .btn:hover {
    background: #e5322d;
}

div.file-actions .btn:hover svg polygon,
div.file-actions .btn:hover svg path {
    fill: #FFFFFF;
}

#page-render .file-preview-container:hover .btn {
    display: block;
}

#page-render .file-info {
    position: absolute;
    bottom: 2px;
    width: 90%;
    overflow: hidden;
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#page-render .file-info.unlock {
    bottom: 30px;
    font-size: 15px;
}

#page-render .file-unlock {
    position: absolute;
    bottom: 35px;
    width: 90%;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
}


.file-info:hover {
    min-width: 100% !important;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
    background-color: #fff;
    position: absolute;
    left: 50%;
    right: 0;
    cursor: default;
    white-space: pre-wrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: max-content !important;
    transform: translateX(-50%);

}

#page-render .file-page {
    box-shadow: 1px -1px 9px -1px rgba(168, 164, 164, 0.75);
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 190px;
}

#page-render .file-page img {
    max-height: 170px;
}

#page-render .file-page.landscape {
    width: 170px;
    height: 135px;

}

#page-render .file-page.rotate-90 {
    transform: rotate(90deg);
    width: 135px;
    height: 170px;
}

#page-render .file-page.landscape.rotate-90 {
    width: 190px;
    height: 150px;
}

#page-render .file-page.rotate-180 {
    transform: rotate(180deg);
}

#page-render .file-page.rotate-270 {
    transform: rotate(270deg);
    width: 135px;
    height: 170px;
}

#page-render .file-page.landscape.rotate-270 {
    width: 190px;
    height: 150px;
}

.title2 {
    font-weight: 500;
    font-size: 28px;
    line-height: 30px;
    color: #33333b;
}

.text-right {
    text-align: right;
    margin-top: 15px;
}

.before-upload {
    padding: 60px 40px;
}

#loading-page .progress {
    margin: 30px auto;
    width: 70%;
}

#loading-page .progress div {
    background-color: #ff0b00;
}

#loading-page .percentLoading {
    font-weight: 700;
    font-size: 35px;
}

#loading-page .upLoaded {
    font-size: 30px;
}

#loading-page .file_name_convert {
    font-weight: 500;
    margin: 20px;
}
.option__panel__content {
    padding-top: 15px;
}