/* FILExt */
body{margin:0; padding:0;}

body,textarea,input,select,button{font:17px '-apple-system',BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;letter-spacing:0.015rem;color:#222}

header{height:2rem;padding:1rem 0;text-align:right;z-index:-5;}
header a{text-decoration:none}
.content{margin:0 auto;position:relative;width:80%;max-width:1500px}
#logo{float:left;text-align:center;margin-top:0.1em; font-size:35px;font-weight:900;line-height:14px;background-image:linear-gradient(transparent 32%,#0080c8 33%);border-radius:3px;color:#adf}/* IE11&non-webkit */
@supports (-webkit-text-stroke:0.2em #0080c8){
#logo{color:white;position:relative;z-index:0}
#logo:before{content:attr(data-text);position:absolute;z-index:-1;-webkit-text-stroke:0.2em #0080c8}
}
.subtitle{font-size:11px;font-weight:400;letter-spacing:0.35em;padding:7px 0 0 3px;color:#fff}
nav{z-index:1}
nav ul {list-style-type:none;margin:0;padding:0;white-space:nowrap}
nav li a {font-size:20px;color:#222;margin-right:2rem}
nav li a:hover{color:#000;border-bottom:2px solid #000}

.langmenu{font-size:20px;color:#222;position:relative;padding:0 1rem;display:inline-block;cursor:pointer}
.langmenu:hover .langlist{display:block}
.langlist{display:none;position:absolute;z-index:9;right:-2.3rem;padding-bottom:6px;background-color:#f1f1f1;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)}
.langlist a{font-size:16px;margin-right:0;text-align:left;padding:7px 10px 2px 10px;text-decoration:none;display:block}
.langlist a:hover{background-color:#ddd;border:none}
@media only screen and (max-width:900px){ .langlist{right:-0.7rem} .langmenu{padding-right:0} }
.flag{background-image:url(/assets/graphics/flags.png);width:30px;height:21px;display:inline-block;vertical-align: middle}
.flag-us{background-position:0 0}
.flag-ja{background-position:-30px 0}
.flag-fr{background-position:-60px 0}
.flag-de{background-position:-90px 0}
.flag-it{background-position:-120px 0}
.flag-pt{background-position:-150px 0}
.flag-ru{background-position:-180px 0}
.flag-es{background-position:-210px 0}

.suche,nav li {display:inline;white-space:nowrap}
.suche input{padding:0 0.5rem;width:90px;background:#fefefe;border:1px solid #aaa;border-radius:3px}
.suche input:hover{background:#fff}
.suche button{background-color:transparent;border:none;cursor:pointer}
.suche svg{vertical-align:text-bottom}
#svg-links{z-index:-3;position:absolute;top:30rem;left:-250px;fill:#cef;width:400px;height:450px; animation:links 120s cubic-bezier(0.1, 0.01, 0.8, 0.9) forwards;transform-origin:200px 200px}
#svg-rechts{z-index:-2;position:fixed;top:100px;right:-280px;fill:#cef;width:400px;height:450px;transform:rotate(-260deg); animation:rechts 300s ease-out forwards;transform-origin:200px 200px}
@keyframes links {75% {transform:rotate(270deg) translateX(100px) translateY(-100px)} 100% {transform:rotate(360deg);fill:#e9f8ff} }
@keyframes rechts {100% {transform:rotate(100deg);fill:#e9f8ff} }
main{padding:2.2rem 0; min-height: calc(100vh - 29.5rem);}	/* 29.5rem is total height (with paddings) of header+EU logo+footer+main paddings. main height takes the rest and footer always sticks to the bottom */
main a{text-decoration:none;color:#07c;border-bottom: 1px dotted #7cf}
main a:hover{border-bottom: 1px solid #69d}
main a.nodecor{border-bottom:none}
#head{font-size:38px;margin:0 0 0.5rem 0}
table.head{border-spacing:0;margin:0}
.head td{padding:0;vertical-align:top}
.head img{padding:8px 0 0 0}
.head img[src$='generic.jpg']{}
.kreis{width:60px;height:60px;margin-right:1rem;background:#fff;border-radius:40px;text-align:center}
.isgeneric{display:inline-block!important;position:absolute;font-size:12px;font-weight:bold;line-height:13px;margin-top:29px;padding:0 4px;border-radius:2px;box-shadow:1px 1px 2px #abc;color:#fff;background:#0080c8;}

h1{font-weight:500;line-height:1.2;font-size:2rem;margin-top:0.6rem;color:#2a2a33}
h2,h3,h4,h5{font-weight:500;line-height:1.2;margin:1.5rem 0 0.5rem 0} /* sieht frischer aus: color: #3777c7;    h1{font-weight:100} bei neuem Design */
h2,h3{font-size:1.5rem}
h4,h5{font-size:1.4rem}
.fadein {animation:fadein 1s ease}
@keyframes fadein{0%{letter-spacing:-0.05rem;transform:translateY(20%)} 100%{letter-spacing:0.015rem;transform:translateY(0)}}
p{margin:0 0 0.5rem 0;word-break:break-word;hyphens:auto}
.txtcenter{text-align:center}
.txtright{text-align:right}
.kleinschreibung{text-transform:lowercase}
.firstletter::first-letter{text-transform:uppercase}
.halfbr{padding-bottom:0.5rem}
.nobr{white-space:nowrap}
.blue{color:#07c}
pre{overflow-y:auto; margin:0; }
.redline{background:url(/assets/graphics/redline.png) left bottom / 0% 3px no-repeat; animation:unterstreichen 0.4s ease 6s forwards}
@keyframes unterstreichen{100%{background-size: 100% 3px}}
.redText{color:#e80}
.hide{display:none}
.table{display:table;border-collapse:collapse}
.tr{display:table-row}
.td{display:table-cell;vertical-align:top;padding-left:10px}
.td:first-child{padding-left:0}
strong{font-weight:600}
/* deprecated: @media only screen and (max-device-width: 480px), only screen and (min-device-width: 768px) and (max-device-width: 1024px)  { strong{font-weight:500} }	480px=Smartphone, 768px+1024px = iPad */

/* External link redirect-page */
.backlink{display:inline-block;transform:scale(-1, 1);border:none!important}

.flex-container {display:flex;flex-direction:row;align-items: center;justify-content: space-between;}
.teaser{color:#fff;border-radius:10px;padding:1rem;margin-left:1rem;background:linear-gradient(-45deg, #ee7753, #e73c7f, #23a6d6, #23d5ac);background-size:400% 400%;  animation:gradient 14s ease infinite}
.teaser a{color:#fff;border-bottom:1px dotted #def}
@keyframes gradient {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position: 0% 50%}}

/* for index.html outdated + not used */
#leftcolumn{display:table-cell;padding:1rem 3rem 0 0}
body.zoom #leftcolumn{padding:0;}
#rightcolumn{display:table-cell;width:264px;padding-top:1rem;text-align:right;vertical-align:top}
#top20{background:rgba(237, 237, 237, 0.7);width:233px;border-radius:10px;margin:auto;text-align:left;padding:1px 15px 15px 15px}
#top20 ul{padding-left:15px;margin:0}
#top20 li{list-style:none;padding-bottom:3px}

.listtable{overflow-x:auto}
.listtable table{border-collapse:collapse;width:100%}
.listtable td{padding:8px;text-align:left;vertical-align:top;border-bottom: 1px solid #ddd}
.listtable tr:hover{background-color:rgba(237, 237, 237, 0.7)}

select#os-selector{appearance:none;outline:none;border:1px dashed #aaa;padding:0 4px;background:#f2f2f2;border-radius:4px}
.ulist{list-style-type:square;padding-left:1.2rem;margin:0 0 0.5rem 0}
.ulist li{padding:0 0 5px 0;color:#0080c8}
.ulist li span{color:#222}/* =Textfarbe*/

.app{list-style:none;padding-left:2.4rem;margin:0.5rem 0;counter-reset:app-counter}
.app li{counter-increment:app-counter;margin-bottom:0.8rem}
.app li::before{content:counter(app-counter);color:#fff;background:#0080c8;font-weight:bold;border-radius:3px;display:inline-block;text-align:center;width:1.6rem;margin-left:-2.4rem;margin-right:0.6rem;line-height:1.5}
.smalltext{padding-top:0.2rem;font-size:95%}

#recommended-yellow{background:rgba(237,237,211,0.7);padding:0 1rem;margin:1.5rem auto;border:solid 1px #ddd}
#recommended-yellow img{float:right;width:100%;height:auto;max-width:471px;margin:1rem 0;padding-left:1rem}
.eu-contact{width:100%;height:auto;max-width:600px;border:none}
.eu{width:100%;height:8rem;max-width:600px;margin:auto;display:block;border:none}
.eu img {max-width:100%;height:auto;}

#contact_form{width:100%;margin:2rem 0}
#contact_form .td:first-child{background:rgba(237, 237, 237, 0.7);border-radius:3px;padding:1.5rem 2rem 2rem 2rem}
#contact_form .td:last-child{text-align:center;padding:2rem 0 0 1rem}
#contact_form textarea,#contact_form input[type=text]{border:1px solid #ddd;padding:0.2rem;border-radius:3px;width:100%}
#contact_form textarea.red-border, #contact_form textarea.red-border:focus { outline: none !important; border:2px solid IndianRed; }
#message-note{ color:IndianRed; display:none; }
.big{font-size:2rem;line-height:1.5rem}
#map{height:350px;background:rgba(237, 237, 237, 0.7) url('/assets/graphics/filext-infographic.png') no-repeat center;border-top:1px solid #e5e5e5}

/* Online RAW File Viewer */
#preview-wrapper{margin-bottom:3rem}
/*.preview-wrapper-active{background:rgba(237,237,237,0.7);border:1px solid #ddd;border-radius:3px;padding:0.5rem 1rem;margin-bottom:3rem}*/
/*.preview-wrapper-active .button{font-size:1.2rem;font-family:sans-serif;padding:0.5rem 1rem}*/
#preview-dropzone{position:relative;overflow:hidden;text-align:center;transition:padding 1s, outline-offset .15s ease-in-out, background-color .15s linear}
.preview-dropzone-initial{background:linear-gradient(-45deg, #ee7753aa, #e73c7faa, #23a6d6aa, #23d5acaa); background-size:400% 400%; animation:gradient 14s ease infinitemargin-bottom:0.5rem;padding:2rem 2rem 1.5rem 2rem;border:1px solid #999;border-radius:10px}
#preview-dropzone .button{background:unset; color:#fff;border:2px solid #fff}
#preview-dropzone .button:hover{box-shadow:0 0 4px #fff; background:rgba(1,1,1,0.1);}
#os-tipp{color:#fff}

/*#preview-dropzone.is-dragover{outline:5px dashed #fff;outline-offset:-20px;border:3px solid #89a;background-image:radial-gradient(#cde,#89a)}*/
/*#preview-dropzone.active{opacity:0.5}*/
.preview-button{position:relative;overflow:hidden}
.preview-button > input{position:absolute;font-size:200px;top:0;bottom:0;left:0;width:100%;opacity:0;cursor:pointer}
#os-tipp{display:inline-block;text-align:justify}
#preview-hint{padding:0.5em; margin-bottom:0.5rem;overflow:hidden;display:none;}
#preview-file-info, #preview-meta { padding:0.5em; margin: 0 0 0.5em 0; overflow-x: auto; background: #fff; border: 1px solid #ddd; display:none;}
#preview-file-info h5, #preview-meta h5 { margin: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, #preview-meta table td { padding-right:1em; }
.preview--ok{color:#07C;font-weight:600}
.preview--error{color:red;font-weight:600}
#preview-text{padding:0.2rem;font-family:Consolas, Monaco, monospace;margin:1.5rem 0 0 0;overflow:hidden;border:1px solid #ddd;background:#fff;word-wrap:break-word;display:none;}
#preview-text b{font-weight:bold;color:#000}
#preview-text pre { font-size:90%; line-height:140%; overflow-x:hidden; }
#preview-text pre code { white-space:pre-wrap; }
#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%}
.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="red" 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:red;background:#fff;font-family:sans-serif;box-shadow:0 0 5rem 2rem #fff;white-space:pre-wrap}
#preview-all{text-align:center;border-top:1px solid #ddd;margin-top:2rem;padding-top:0.8rem}
#preview-wrapper p{margin-left:0.5rem}

#technical-data{background:rgba(237, 237, 237, 0.7);border:1px solid #ddd;border-radius:3px;padding:0.5rem 1rem;margin:3rem 0;position:relative;overflow:hidden}
#technical-data h3{margin:.5rem 0 1rem 0;text-align:center;color:#445}
/* svg background: #technical-data h4,#preview-dropzone h4{font-size:25rem;font-weight:900;position:absolute;width:90%;text-align:center;right:0;bottom:-25%;opacity:0.03;transform: rotate(352deg)}*/
hr{border:0;border-top:1px solid #ddd;color:#fff;margin:0;padding:0}
.proglist{font-size:0.8rem;padding:3px 15px;overflow:hidden}
#to-top{display:none}
#showBlockLink {cursor:pointer}
#showBlock {overflow:hidden}
a.button,.button{display:inline-block;font-size:1.4rem;color:#fff;background-color:#08d;border-radius:3px;padding:0.5rem 2rem;margin:1rem 0;cursor:pointer;transition: all 0.5s ease}
a.button:hover,.button:hover{text-shadow:0 1px 0 #019;background-color:#0080c8;box-shadow:0 2px 9px #abc}
#billboard_1_container{height:100px;margin-bottom:40px;display:flex;justify-content:center;align-items:center} 
#filext\.com_billboard_2 {height:250px;display:block !important}
#filext\.com_sidebar_1 {height:600px;display:block !important} /* width:300px */
#filext\.com_sidebar_2 {height:600px;display:block !important} /* width:300px */

footer {height:10.6rem;padding:1.5rem 0 1rem 0;font-size:1rem;z-index:5;font-weight:300;background:#4b5560;color:#f2f2f2}
footer a{color:#f2f2f2;text-decoration:none;border:none}
footer a:hover{color:#fff;text-decoration:underline;border:none}
footer .table{width:100%}
.foot .td{padding-left:2rem;display:table-cell}
footer .txtcenter,footer .txtcenter a{color:#abb}

br{clear:both;}
.mobile-only{display:none}

#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; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
#drop-overlay.active { visibility:visible; opacity:0.9; z-index:10; }

#preview-menu { text-align: center; position:absolute; top:10px; left:0; right:0; margin-left:auto; margin-right:auto; width:640px; z-index:7; }
#preview-menu ul { list-style-type:none; margin:0; padding:0; }
#preview-menu ul li { margin:6px 16px 0 0; cursor:pointer; padding:4px 5px 6px 5px; display:inline-block; white-space:nowrap; position:relative; }
#preview-menu ul li span.i { background: url(/assets/graphics/d20-icons-24x24-sprite.png) 0 0 no-repeat; }
#preview-menu ul li span.i { display:inline-block; width:24px; height:24px; margin:0 6px -6px 0; }
#preview-menu ul li#zoom span.i { background-position-x: 0; }
body.zoom #preview-menu ul li#zoom span.i { background-position-x: -24px; }
#preview-menu ul li#share span.i { background-position-x: -48px; }
#preview-menu ul li#print span.i { background-position-x: -72px; }
#preview-menu ul li#download span.i { background-position-x: -96px; }
#preview-menu ul li:hover { color:#07c; }
#preview-menu ul li:hover span.i { background-position-y: -24px; }
#preview-menu ul li.inactive { cursor:default; color:#bbb; border:none; }
#preview-menu ul li.inactive span.i { background-position-y: -48px; }
#view-another-file { position: absolute; top: 1em; right: 1em; z-index:8; }
#view-another-file span.button { font-size:1.1rem; padding:0.2rem 1rem; margin:0; }
body.zoom header, body.zoom footer, body.zoom #view-another-file { display:none; }
body.zoom #preview-menu { top:0; }
body.zoom #preview-menu ul li { margin-top:0; }
body.zoom #preview-text { padding:0; margin:0.8em 0 0 0; }
body.zoom main div.content { width:unset; max-width:unset; }
body.grad { background: linear-gradient(0deg, rgba(213,213,213,1) 0%, rgba(255,255,255,1) 56%) fixed; }

.tooltiptext, .tooltiptext-share-link { font-size: 80%; color: #fff; background-color: #3b3b3b; text-align: center; visibility: hidden; width: 270px; padding: 1em 0.5em; border-radius: 6px; box-shadow: 0px 7px 14px rgba(0,0,0,0.4); position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -135px; white-space:normal; opacity: 0; transition: opacity 0.3s ease; }
.tooltiptext::after, .tooltiptext-share-link::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #3b3b3b transparent; }
.tooltiptext-share-link { width:390px; margin-left:-195px; cursor:auto; }
li.inactive:hover .tooltiptext { visibility: visible; opacity:0.9; }
li:not(.inactive):hover .tooltiptext-share-link { visibility: visible; opacity:0.9; }

@media only screen and (max-width:1100px) { #preview-menu ul li{margin:6px 10px 0 0} #preview-menu #view-another-file{right:1em} }
@media only screen and (max-width:900px) { #svglogo{left:-80px;} .fil{background-image:linear-gradient(160deg,#0080c8 20%,#fff 25%,#fff 50%,#ddd 70%)} .desktop-only{display:none} .mobile-only{display:inline} nav li a {margin-right:1rem} .content{width:unset;padding:0 4%} .flex-container {flex-direction: column;} .teaser{margin-left:0} #leftcolumn,#rightcolumn{display:block} #leftcolumn {padding:0} #rightcolumn{width:initial;margin:auto;text-align:center} .eu-logo{margin:2rem auto 0 auto} .app li::before,.nr1::before{padding-top:2px} /*#technical-data h4,#preview-dropzone h4{left:5%;bottom:0;font-size:16rem}*/ #contact_form .td{display:block} .foot .td{padding-left:1rem} #preview-menu { position:fixed; bottom:0; top:unset; width:100%; padding:0.7em 0; background:#fafafa; box-shadow:0px -1px 1px #ddd; } #preview-menu ul li { margin:0; } #preview-menu #print { display:none; } body.zoom #preview-menu { top:unset; padding:0.1em; } .tooltiptext, .tooltiptext-share-link { top:auto; bottom:100%; width:200px; margin-left:-100px; } .tooltiptext::after, .tooltiptext-share-link::after { top:100%; bottom:auto; border-color: #3b3b3b transparent transparent transparent; } .tooltiptext-share-link { width:345px; margin-left:-135px; cursor:auto; } .tooltiptext-share-link::after { left:40%; }}
@media only screen and (max-width:600px) { .eu{height:auto;} footer{height:auto}}
@media only screen and (max-width:400px) { #svglogo{left:-96px;} .fil{background-image:linear-gradient(160deg,#0080c8 18%,#fff 22%,#fff 50%,#ddd 70%)} #svg-links{left:-290px} #svg-rechts{right:-360px} nav li a {margin-right:0.5rem} .suche button{padding:0} #head{font-size:31px} .app{padding-left:2rem} .app li::before{margin-left:-2.2rem;margin-right:0.5rem} /*#technical-data h4,#preview-dropzone h4{left:0;font-size:12rem}*/ .td{display:block} .td.txtright{text-align:left} blockquote{margin:0 1rem} .button{padding:0.5rem 1rem} .foot .td:nth-child(1),.foot .td:nth-child(2){padding-left:0} #preview-archive p:first-child span {display:none;} }

/* 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; }
#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-status { height:30px; display:none; margin:0.5em 0; }
#preview-status-text { color:#222; animation: status-blink 1.4s ease-in-out infinite; display:none; }
@keyframes status-blink { 50% {opacity:0.5; } }
#preview-status-text.no-animation { animation:none; }
#preview-error { display:none; color:Maroon; }
  /* styles for archives preview */
#preview-archive { color:#333; padding:1em; margin-top:0.5em; overflow:hidden; border:1px solid #ddd; background:#fff; display:none; }
#preview-archive p:first-child { color: #777; 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:#555; }
#preview-archive ul { list-style:none; padding:0; margin:0; }
#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:#07c; 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; }

/* archives on smartphones - display shorter filenames (hide .arc-path, show .arc-path-short) */
@media only screen and (max-width : 510px) {
  .arc-path { display:none; }
  .arc-path-short { display:inline-block; }
}
  /* END styles for archives preview */
#share-link-copy-icon, #share-link-delete-icon { display: inline-block; color:#FFF; font-size:95%; line-height:1.2em; background-color:#08d; border-radius:3px; padding:0.5em 1em; margin:0.5em 1em; cursor: pointer; transition: all 0.2s ease; }
#share-link-copy-icon:hover { background-color:#07d; }
#share-link-delete-icon { background-color:#b00; }
#share-link-delete-icon:hover { background-color:#a00; }
#share-link-input { line-height: 1; border:none; background:none; color:#fff; font-size:95%; text-align:center; padding:0.6em 0; margin:0.3em 0; }

#preview-progress-bar { width: 100%; border-radius:5px; box-shadow: 0 1px 5px #eee inset; background-color: #9ab; margin-top:2px; display:none; }
#preview-progress-bar span { width: 1%; height: 12px; display:block; border-radius:5px; box-shadow: 0 1px 5px #eee inset; background-image: linear-gradient(rgba(224,245,255,0.7) 30%,rgba(206,231,255,0.7) 50%); }
#preview-text iframe, #preview-text embed {width:100%; height:100%; border: 1px solid #ddd; background:#fff; overflow:hidden; min-height:1000px; }

@keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 60px 0; } }
.progress { 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: #0980d0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition: width 0.6s ease; }
.progress-text { position:absolute; left:1em; font-size:16px; line-height:30px; color:#bbb; animation: status-blink 1.4s ease-in-out infinite; }
.progress-striped .progress-bar, .progress-bar-striped { 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.active .progress-bar, .progress-bar.active { animation: progress-bar-stripes 1.5s linear infinite; }
/* END ofv more */