/* styles for file preview area here */
#drop-overlay { visibility:hidden; display:flex; position: fixed; top: 0; left: 0; width:100%; height:100%; min-height:100%; background: rgba(0,0,0,0.8); z-index: -100; text-align: center; justify-content: center; align-items: center; color: #fff; font-size: 5rem; font-size: 11vw; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
#drop-overlay.active { visibility:visible; opacity:0.9; z-index:10; }

#preview-menu { color:#fff; z-index: 4; margin:0 auto; padding:0.6em; font-size: 1.2em; text-align:center; }
#preview-menu li { list-style:none; }
#preview-menu ul li.inactive { cursor:default; }
#preview-menu #save-as { display:inline-block; background:var(--link-color-light-orange); padding: 0.2em 0.7em; border-radius:0.3em; position:relative; cursor:pointer; }
#preview-menu #save-as-menu { visibility:hidden; padding: 0.5em; margin:0 0 -0.6em -2.6em; background: rgba(40,40,40,0.9); font-size:85%; width:13em; min-height:15em; max-height:22em; overflow-y:auto; position:absolute; bottom:3em; color:#fff; text-align:left; cursor:auto; opacity: 0; transition: visibility 0.7s ease-in, opacity 0.7s ease-in; z-index:4; }
#save-as-menu::-webkit-scrollbar { width: 0.5em; }
#save-as-menu::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
#save-as-menu::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.9); border-radius:0.3em; }
#preview-menu #save-as-menu input { margin:0.1em; width:90%; font-size:100%; }
#preview-menu li:hover #save-as-menu, #preview-menu #save-as-menu:focus-within { visibility: visible; opacity:1; transition: visibility 0.3s ease, opacity 0.3s ease;}
#preview-menu #save-as-menu h4 { margin:0; font-size:0.9em; }
#preview-menu #save-as-menu ul { list-style:none; margin:0; padding:0; }
#preview-menu #save-as-menu li { padding:0 1em; margin:0; display:block; border-radius:0.3em; position:relative; }
#preview-menu #save-as-menu li.hide { display:none; }
#preview-menu #save-as-menu li:hover { background:rgba(40,40,40,0.6); cursor:pointer; }
#preview-menu #save-as-show-all { display: block; text-align: center; text-decoration: underline; margin: 0.2em; cursor: pointer; }
#preview-menu #save-as-menu.disabled li { cursor:auto; color:#999; }
#preview-menu #save-as.inactive #save-as-menu { display:none; }

.circle-progress { height:24px; width: 24px; position: absolute; right:10px; top:1px; }
.circle-progress .inner { background: #f5f5f5; position: absolute; z-index: 2; top: 50%; left: 50%; height: 80%; width: 80%; margin: -40% 0 0 -40%; border-radius: 100%; }
.circle-progress .outer { position: absolute; z-index:1; height: 100%; width: 100%; border-radius: 100%; clip: rect(0px, 55px, 24px, 0px); animation: rotate-cw 2s infinite linear; }
.circle-progress .outer { background: linear-gradient(20deg, #f5f5f5 20%, #18d 60%); }
#preview-menu #save-as-menu li:hover .circle-progress .inner { background:#ddd; }
@keyframes rotate-cw { 100%{ transform: rotate(360deg); } }

#preview-wrapper { background-color:#fff; color: #222;margin-top:1em;}
#preview-wrapper iframe { border:none !important; }
#preview-wrapper .button { display: inline-block; color:#fff; background:#f56b00; padding: 0.2em 0.7em; border-radius: 0.3em; cursor: pointer; margin:0.3em 0; }
#preview-all { text-align:center; }

#recaptcha-area a{text-decoration:none;display:inline-block;font-size:1.4rem;color:#fff;background-color:#f56b00;padding: 0.2em 0.7em; border-radius: 0.6em;margin:0.3em 0;cursor:pointer;transition: all 0.5s ease; animation: shadow-pulse 4s 1s 8; }
#recaptcha-area a:hover{text-shadow:0 1px 0 #a20;background-color:#f56b22;box-shadow:0 2px 9px rgb(204, 200, 170)}
#recaptcha-area a { min-width:250px; }
#recaptcha-area a[aria-disabled="true"]{ opacity:0; cursor:default; }
#recaptcha-area label { font-size: 1.4rem; color: #444; margin: 0 2em; white-space: nowrap; display: inline-block; }
#recaptcha-area label input { accent-color: #f56b00; transform: scale(1.5); margin: 0 1em; opacity:1; transition: all 0.5s ease; }

body.previewed #preview-hint, body.previewed #preview-meta { padding:1em 0; }
body.previewed #preview-file-info { padding: 1em 0 2em 0;}
#preview-hint a { color:#333; }
#preview-hint a:hover { color:#555; }
#preview-file-info h5, #preview-meta h5 { margin:0.5em 0; font-size:1.1em; }
#preview-file-info hr, #preview-meta hr { margin:0.3em 0; }
#preview-file-info table, #preview-meta table { border-spacing:0; font-size:95%; }
#preview-file-info table td:first-child { min-width:6em; }
#preview-file-info table td, #preview-meta table td { padding-right:1em; }
.preview--ok{color:#555;font-weight:600}
.preview--error{color:red;font-weight:600}
#preview-text{padding:0.5em;font-family:Consolas, Monaco, monospace;margin:0;overflow:hidden;border:1px solid #ddd;background:#fff;word-wrap:break-word;display:none;min-height:12em;}
body.index #preview-text {min-height:16em;}
#preview-text b{font-weight:bold;color:#000}
#preview-text pre, #preview-text pre code, #preview-meta pre { white-space:pre-wrap; line-height:140%; overflow-x:hidden;}
#preview-text.preview--text{color:#000;white-space:pre-wrap;}
#preview-text.preview--binary{color:#aaa;white-space:pre-wrap;overflow-x:auto;}/* A: #ccc */
#preview-text.preview--words{color:#000;white-space:pre-wrap;overflow-x:auto;}
#preview-text.no-border { border:none; }
#preview-text.no-bg { background:none; }
#preview-text img,#preview-text video{display:block;margin:0 auto 0.7rem auto;max-width:100%}
#preview-text video {min-width:320px;}
#preview-text iframe, #preview-text embed { width: 100%; height: 100%; background: #fff; overflow: hidden; min-height: 1000px }

@keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 60px 0; } }
@keyframes width-expand { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes text-blink { 50% {opacity:0.5; } }
.progress { position:relative;display:none; height: 30px; margin-bottom: 10px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.progress-bar { float: left; width: 0%; min-width:2%; height: 100%; font-size: 16px; line-height: 30px; color: #fff; text-align: center; padding:0; background-color: #f36d00; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition: width 0.6s ease; }
.progress-text { position:absolute; left:0.5em; font-size:16px; line-height:30px; color:#cfcfcf; animation: text-blink 1.4s ease-in-out infinite; }
.progress .progress-bar { background-size: 60px 60px; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
.progress .progress-bar.active { animation: progress-bar-stripes 1.5s linear infinite, width-expand 1.5s ease-in forwards; }
.progress .progress-bar.manual-width { animation: progress-bar-stripes 1.5s linear infinite; }

#preview-dropzone .progress-bar { display:none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; width: 100%; z-index: 1; }

.wellenlinie{text-align:center;background:0 center repeat-x url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6"><path stroke="#f56b00" d="M4.5 4.5L0 0v1.208l4.5 4.5 4.5-4.5V0z"/></svg>');margin:2rem 0} /* https://codepen.io/rogie/pen/HnrjB */
.wellenlinie strong{display:inline-block;color:#f56b00;background:#fff;font-family:sans-serif;box-shadow:0 0 5rem 2rem #fff;white-space:pre-wrap}

.opennewtab {padding-right: 1.25em;}
.opennewtab::after {position: absolute;content: '';display: inline-block;width: 1em;height: 1em;margin-left: 0.15em; transform: translateY(0.32em); background-size: 100%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5H8.2c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C5 6.52 5 7.08 5 8.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h7.606c1.118 0 1.677 0 2.104-.218.377-.192.683-.498.875-.874.218-.428.218-.987.218-2.105V14m1-5V4m0 0h-5m5 0-7 7'/%3E%3C/svg%3E");	}

/* ofv more */
.preview-link, .download-link { cursor:pointer; display:inline-block; border-bottom:1px dotted #7cf; color:#07c; line-height:100%; }
.preview-link:hover, .download-link:hover { border-bottom:1px solid #07c; }

#preview-image-wrapper { text-align:center; position:relative; margin-top:1em; padding:0.5em 0.2em; overflow-x:auto; }
#preview-image-wrapper img { max-width:100%; }
#prev-page, #next-page { height:100%; width:30%; position:absolute; right:0; top:0; cursor:pointer; }
#prev-page { left:0; }

#prev-page span, #next-page span { display:block; height:50px; width:50px; position:absolute; top:46%; right:0; background: 
url('/assets/graphics/prev_next_arrows.png') 0 0 no-repeat; }
#prev-page span { left:0; background-position: 0 -50px; }
#next-page:hover span { background-position: 100% -100px; }
#prev-page:hover span { background-position: 0 -150px; }
#preview-image-summary { font-size:150%; }
#preview-error { display:none; color:Maroon; }
#preview-message { color:#222; display:none; margin:0 0 0.5em 0; min-height:30px; }

/* styles for archives preview */
#preview-archive { color:#000; padding:1em; overflow:hidden; border:1px solid #ddd; background:#fff; display:none; }
#preview-archive p:first-child { color: #222; margin:0 0 0.5em 0; padding: 0 0 6px 0px; line-height: 34px; border-bottom: 1px solid #ccc; }
#preview-archive p:first-child span.icon { display:inline-block; width:24px; height:24px; margin: 0 6px -6px 0; background: url(/assets/graphics/d20-icons-24x24-sprite.png) -120px 0 no-repeat; }
#preview-archive p:first-child strong { color:#111; }
#preview-archive ul { list-style:none; padding:0; margin:0; max-height:414px; overflow-y:auto; }
#preview-archive ul li { height:36px; }
  /* ident tree view list - the deeper subfolders is, the more space in the beginning */
#preview-archive li.dir-level-1 { padding-left:0.7em; }
#preview-archive li.dir-level-2 { padding-left:1.4em; }
#preview-archive li.dir-level-3 { padding-left:2.1em; }
#preview-archive li.dir-level-4 { padding-left:2.8em; }
#preview-archive li.dir-level-5 { padding-left:3.5em; }
#preview-archive li.dir-level-6 { padding-left:4.2em; }
#preview-archive li.dir-level-7 { padding-left:4.9em; }
#preview-archive li.dir-level-8 { padding-left:5.6em; }
  /* END ident tree view list */
.arc-file .arc-icon, .arc-other .arc-icon { width:24px; height:24px; display:inline-block; background:url(/assets/graphics/arc-file-icon.svg); background-size:24px 24px; margin:0 0.3em -6px 0; }
.arc-dir .arc-icon { width:24px; height:24px; display:inline-block; background:url(/assets/graphics/arc-dir-icon-yellow.svg); background-size:24px 24px;  margin:0 0.3em -6px 0; }
.arc-path { padding:0.3em; display:inline-block; }
.arc-path-short { padding:0.3em; display:none; }
.arc-txt { min-width:3em; display:inline-block; }
.arc-file .arc-path:hover, .arc-file .arc-path-short:hover, .arc-file.selected .arc-path, .arc-file.selected .arc-path-short { background:#e7e7e7; color:#57f; cursor:pointer; }
.arc-file .arc-path .arc-dl, .arc-file .arc-path-short .arc-dl { width:30px; height:24px; display:none; background:#e7e7e7 url(/assets/graphics/arc-download-icons.svg); background-size:24px 48px; margin:0 0 -6px 0; }
.arc-file .arc-path .arc-dl { margin-left:0; }
.arc-view { width: 20px; height: 20px; background-image: url(/assets/graphics/view-icon.svg); background-size: 20px 20px; display: none; opacity: 0.4; margin: 0 0.5em -4px 6px; }
.arc-view:hover { opacity:0.7; }
.arc-file .arc-path:hover .arc-dl, .arc-file .arc-path-short:hover .arc-dl, .arc-file.selected .arc-path .arc-dl, .arc-file.selected .arc-path-short .arc-dl, .arc-file.selected .arc-path .arc-view, .arc-file .arc-path:hover .arc-view { display:inline-block; }
.arc-file .arc-path:hover .arc-dl:hover, .arc-file .arc-path-short:hover .arc-dl:hover { background-position:0 -24px; }
.arc-file .arc-path .arc-size { color:#888; display:none; font-size:90%; }
.arc-file .arc-path:hover .arc-size, .arc-file.selected .arc-path .arc-size { display:inline-block; }
#preview-archive-as-pdf { text-align:center; }
#preview-archive-as-pdf .button { margin-bottom:0; }
@media only screen and (max-width : 510px) { .arc-path { display:none; } .arc-path-short { display:inline-block; } #preview-archive p:first-child span {display:none;} }

/* END styles for archives preview */
@media only screen and (max-width:700px) { #preview-menu { position:fixed; left:0; right:0; bottom:0; width:100%; color: #fff; background-color:rgba(0, 0, 0, 0.8); } #preview-menu #save-as { display:inline-block; text-align:center; } }
@media only screen and (max-width:500px) { #preview-menu { font-size:1em; } }

#preview-menu.sticky-bottom { position:fixed; left:0; right:0; bottom:0; width:100%; color: #fff; background-color:rgba(0, 0, 0, 0.8); } #preview-menu.sticky-bottom #save-as { display:inline-block; text-align:center; }
#preview-menu.sticky-bottom.padded { padding-bottom:105px; }

.ab #preview-wrapper { position:relative; }
.ab #preview-text, .ab #preview-archive, .ab #preview-image-wrapper, .ab #preview-wrapper iframe, .ab #preview-message { filter:blur(6px); animation: ab_blur 4s; }
@keyframes ab_blur { 0% {filter:blur(0px)} 100% {filter:blur(6px)} }
#preview-wrapper .an { display:none; }
.ab #preview-wrapper .an { display:block; position:absolute; height:100%; width:100%; top:-130px; text-align:center; background:rgba(0,0,0,0.05); }
.ab #preview-wrapper .an span { display:inline-block; padding:1em; margin:2px 0 0 0; background:#fff; font-weight:600; width:360px; border-radius:0.5em; color:#333; }
.ab #preview-wrapper .an span h3 { margin:0.2em 0 0.5em 0; }
.ab #preview-wrapper .an span em { word-break: break-all; color:#07c; }
.ab #preview-wrapper .an span strong { color:white; display:inline-block; background:#08d; border-radius:5px; cursor:pointer; padding:0.3em 1em; margin:0 0.5em; font-weight:400; }
.ab #preview-wrapper .an span strong:hover { text-shadow:0 1px 0 #019;background-color:#0080c8;box-shadow:0 2px 9px #abc }
.ab #preview-wrapper .an span img { display:block; height:60px; opacity:0.7; margin:0.1em auto; }
.ab #preview-menu ul, .ab #preview-error, .ab #preview-message { display:none; }
.ab #preview-wrapper .an iframe { filter:none; animation:none; border:none; width:650px; height:600px; position:absolute; top:0; left:0; right:0; margin:0 auto; overflow:hidden; border-radius:0.5em; box-shadow: #aaa 0px 2px 2px; }
@media only screen and (max-width:650px) { .ab #preview-wrapper .an iframe { width:100%; } }