/*Sizes for all elements*/
.file-preview { font-size: 20px; perspective: 1000px; }
.file-preview { height: 13.5em; }
.file-preview .card { width: 6.30em; height: 8.91em; }/*single-page card*/
.file-preview .card.multiple { width: 12.6em; }/*multi-page card*/
.file-preview .card.is-open, .card.multiple.is-open { width: 25em; height: 11em; }/*opened card for pagedetails*/
.file-preview .card.is-open.is-password, .file-preview .card.is-open.is-delete, .card.multiple.is-open.is-delete { width: 15em; height: 8.91em; }/*opened card for question*/
.file-preview .card-front > div { width: 4.2em; height: 5.94em; }/*page (host container for icon on front)*/
.file-preview label { font-size: 12px; }



/*root container*/
.file-preview {
    display: none;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin-top: 10px;
}
html.files-loaded .file-preview { display: block;}

/*Page container*/
.file-preview .card {
    display: inline-block;
    transition: opacity 0.5s ease-in, width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    margin-right: 0.25em;
    vertical-align: middle;
}

/*Front face of the page container*/
.file-preview .card-front {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.file-preview .card-front:hover {
    background-color: #eee;
}

/*page*/
.file-preview .card-front > div {
    margin: 0.5em auto 0 auto;
    display: inline-block;
}

/*images on a card*/
.file-preview img {
    max-width: 100%;
    max-height: 100%;
    border: solid 1px #aaa;
}

/*file name on page*/
.file-preview .card-front > span:nth-of-type(2) {
    display: block;
    font-size: 0.6em;
    width: 100%;
    text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 .5em 0 .5em;
}

/*back side of the page container*/
.file-preview .card-back {
    padding: 0.25em;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
    color: #222;
    transform: translateZ(-2px) rotateX(180deg);
    overflow: hidden;
    transition: box-shadow 0.8s ease;
    text-align: left;
}

/* other for cards*/
.file-preview .card.is-open .card-front { pointer-events: none; }
.file-preview .card.is-open .card-back { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }

.file-preview .card[data-direction=left] .card-back,
.file-preview .card[data-direction=right] .card-back { transform: translateZ(-2px) rotateY(180deg); }
.file-preview .card[data-direction=top].is-open { transform: rotateX(180deg); }
.file-preview .card[data-direction=right].is-open { transform: rotateY(180deg); }
.file-preview .card[data-direction=bottom].is-open { transform: rotateX(-180deg); }
.file-preview .card[data-direction=left].is-open { transform: rotateY(-180deg); }


/*--------------------------------------------------------Back side design--------------------------------------------*/
.file-preview .card .card-back > div:first-of-type,
.file-preview .card .card-back > div:nth-of-type(2) { display: none; }
.file-preview .card .card-back > div:last-of-type { display: block; }
.file-preview .card.is-password .card-back > div:nth-of-type(2) { display: block; }
.file-preview .card.is-password .card-back > div:first-of-type,
.file-preview .card.is-password .card-back > div:last-of-type { display: none; }
.file-preview .card.is-delete .card-back > div:first-of-type { display: block; }
.file-preview .card.is-delete .card-back > div:nth-of-type(2),
.file-preview .card.is-delete .card-back > div:last-of-type { display: none; }


/*Delete panel and pwd panel*/
.file-preview .card-back > div:first-of-type,
.file-preview .card-back > div:nth-of-type(2) {
    align-content: center;
    padding: 10px;
}
.file-preview .card-back > div:first-of-type p,
.file-preview .card-back > div:nth-of-type(2) p{
    text-align: center;
    white-space: normal;
}

/*Back pane image, file-name pages count*/
.file-preview .card-body {
    max-height: 100%;
    overflow: hidden;
}
.file-preview .card-back-settings > span {
    white-space: normal;
    display: block;
    font-size: .7em;
    padding-right: 1em;
    margin-right: 8px;
}
.file-preview .card-back-settings > span:nth-of-type(1) { border-bottom: solid 1px #aaa; }
.file-preview .card-back-settings > span:nth-of-type(2) { margin-bottom: 1em;}
.file-preview .no-settings { font-size: .7em;}

/*--------------------------------------------------------------HTML5 buttons-------------------------------------------*/
/*common buttons*/
.file-preview button {
    background-color: transparent;
    border: 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    font-size: 1em;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: background 0.15s ease;
}
.file-preview button:focus { outline: 0; }
.file-preview button.yes { background-color: #2196F3; color: #fff; }
.file-preview button.yes:hover { background-color: #51adf6; }
.file-preview button.no { color: #2196F3; }
.file-preview button.no:hover { background-color: #ddd; }

/*back card buttons*/
.file-preview .card-back > div:first-of-type button,
.file-preview .card-back > div:nth-of-type(2) button { padding: 12px 20px; width: 50%; }

/*front card buttons*/
.file-preview .card-front button {
    padding: 2px;
    width: 2.5em;
    margin: 0;
    font-size: 0.7em;
    color: #aaa;
    transition: opacity 0.45s ease, color 0.15s ease;
    opacity: 0;
}
.file-preview .card-front:hover > button { opacity: 1; }
.file-preview .card-front button:focus { outline: 0; }
.file-preview .card-front button:hover { color: #51adf6; }

/*-------------------------------------------------------Preview description ----------------------------------------------*/
.file-preview-description {
    margin-top: 1em;
    text-align: center;
    color: #999;
    transition: opacity 0.3s ease;
}
.file-preview .card.is-open ~ .file-preview-description { opacity: 0; }


/*--------------------------------------------------------spinner----------------------------------------------*/
.file-preview .loader {
    width: 1.2em;
    height: 1.2em;
    border: 0.2em solid #000;
    border-bottom-color: #FF3D00;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotateLoader 1s linear infinite;
}
.file-preview .card.is-open .card-front .loader { animation: rotateLoader none;}

.file-preview .card-front button.loader > i{visibility:hidden;}
.file-preview .card-front button.loader {
    opacity: 1;
    border: 0.2em solid #000;
    border-bottom-color: #FF3D00;
    width: 1.2em;
    height: 1.2em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
}

.file-preview img.loader {
    opacity: 1;
    border: 0.2em solid #000;
    border-bottom-color: #FF3D00;
    width: 2.2em;
    height: 2.2em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
}


@keyframes rotateLoader {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}