.recent-file {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 0px;
    background: #FFF;
    z-index: 9999;
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

    .recent-file.open {
        width: 150px;
    }

    .recent-file .recent-head {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #e5e5e5;
    }

    .recent-file .recent-head h5 {
        text-align:center;
        margin-top:10px;
    }

    .recent-file .recent-body {
        display: block;
        position: relative;
        padding: 15px;
        margin-top: 30px;
        width: 100%;
        height: 97%;
        overflow: auto;
        overflow-x: hidden;
        background: #FFF;
        text-align: center;
    }

        .recent-file .recent-body::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        .recent-file .recent-body::-webkit-scrollbar {
            width: 6px;
            background-color: #F5F5F5;
        }

        .recent-file .recent-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }


        .recent-file .recent-body .content-thumbnails {
            margin: 10px 0 0 0;
        }


        .recent-file .recent-body .square {
            border: 1px solid lightgray;
            background-color: #ddd;
            position: relative;
            text-align: center;
            width: 100%;
            border-radius: 5px;
        }

            .recent-file .recent-body .square .content {
                position: absolute;
                width: 100%;
                height: 100%;
                padding: 5px;
            }

                .recent-file .recent-body .square .content .img-thumb {
                    display: unset;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    max-height: 100%;
                    max-width: 100%;
                    margin: auto;
                }

                .recent-file .recent-body .square .content .img-exten {
                    display: unset;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    max-height: 40%;
                    max-width: 40%;
                    margin: auto;
                }

            .recent-file .recent-body .square:hover {
                box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 10px;
                border: 1px solid lightgray;
                cursor: pointer;
            }

            .recent-file .recent-body .square.selected {
                border: 1px solid gray;
                box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
                animation: zoom-in-zoom-out 1s ease infinite;
                -webkit-animation: zoom-in-zoom-out 1s ease infinite;
            }

            .recent-file .recent-body .square:after {
                content: "";
                display: block;
                padding-bottom: 100%;
            }

    .recent-file .recent-body h5 {
        line-height:2rem;
    }

    .recent-file .recent-toggle {
        display: block;
        position: absolute;
        top: 45%;
        right: -30px;
        width: 30px;
        height: 70px;
        background: #FFF;
        border-end-start-radius: 15px;
        border-start-start-radius: 15px;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

        .recent-file .recent-toggle:hover {
            
        }

        .recent-file .recent-toggle:hover span {
            animation: animateC 2s infinite;
        }

    .recent-file.open .recent-toggle:hover span {
        animation: none;
    }

    .recent-file .recent-toggle span {
        display: block;
        position: absolute;
        top: 37%;
        left: 0px;
        width: 17px;
        height: 17px;
        border-bottom: 5px solid #243747;
        border-right: 5px solid #243747;
        transform: rotate(-45deg);
        margin: 0;
        padding: 0;
        overflow: hidden;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        animation: animateC 2s 1;
    }

    .recent-file.open .recent-toggle span {
        transform: rotate(135deg);
        left: 7px;
        animation: animateO 2s 1;
    }

    .recent-file .recent-toggle span:nth-child(2) {
        animation-delay: -0.3s;
    }

    .recent-file .recent-toggle span:nth-child(3) {
        animation-delay: -0.6s;
    }



@keyframes animateC {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(-15px, -15px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: rotate(-45deg) translate(0px, 0px);
    }
}

@keyframes animateO {
    0% {
        opacity: 0;
        transform: rotate(135deg) translate(-15px, -15px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: rotate(135deg) translate(0px, 0px);
    }
}