/* 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;}
body.sticky-header header { position: fixed; background:rgba(255,255,255,0.9); border-bottom: 1px solid #ccc; z-index: 7; width: 100%; padding:0.6rem 0 ; transition:all 0.5s ease-out; }
header a{text-decoration:none}
.content{margin:0 auto;position:relative;width:80%;max-width:1500px}
body.previewed .content { width:93%; }
.rtl { direction:rtl; }

#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}
}
body.sticky-header #logo { transform: scale(0.8); transition: all 0.3s ease-out; }
.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 .langlist{display:none;position:absolute;z-index:9;right:-2.3rem;padding-top:0.4em;padding-bottom:6px;background-color:#f1f1f1;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)}
.langmenu:active .langlist, .langmenu:hover .langlist {display:block}
.col2 { column-count:2; }
.col3 { column-count:3; }
.col4 { column-count:4; }
.langlist a{font-size:16px;margin-right:0;text-align:left;padding:0 10px 2px 10px;margin-top:7px;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-420x21.png);width:30px;height:21px;display:inline-block;vertical-align: middle;background-position:-240px 0;margin-right:0;}
.flag:hover {border:none;}
.flag-us,.flag-en{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}
.flag-pl{background-position:-270px 0}
.flag-tr{background-position:-300px 0}
.flag-ar{background-position:-330px 0}
.flag-ko{background-position:-360px 0}
.flag-zh{background-position:-390px 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}
.rtl #svg-links {left:unset; right:-250px;}
.rtl #svg-rechts {right:unset; left:-280px;}
@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.about, main.contact { padding:0; min-height:calc(100vh - 636px);} /* contact+about pages have map in the sticky footer */
body.sticky-header main { padding-top:4rem; }
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 !important;}
.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}
.s120 { font-size:120%; }
/* 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:start;justify-content: space-between;}
.teaser{color:#fff;border-radius:10px;padding:1rem;margin-left:auto;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:#222;}
.ulist li::marker { color:#0080c8 }

.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}
.rtl .app li::before{margin-left:0.6rem;margin-right:-2.4rem;}
.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;box-shadow: 0px 0px 10px 20px rgba(255,255,255,1);}
.roundnr{color:#fff;background:#23a6d6;padding:0 0.5em 0.2em 0.5em;border-radius:1em;font-size:small;position:relative;top:-2px;font-weight:600}

ol.convert-howto { counter-reset:LIST-ITEMS 0; display:inline; padding:0; }
ol.convert-howto li { display:inline;padding:0 0.2em; }
ol.convert-howto li:before { content:counter(LIST-ITEMS);counter-increment:LIST-ITEMS;color:#fff;background:#23a6d6;padding:0em 0.5em 0.2em 0.5em;border-radius:1em;font-size:small;position:relative;top:-2px;font-weight:600; }
#convert-howto-ofv ol.convert-howto { display:block; list-style:none; }
#convert-howto-ofv ol.convert-howto li { display:block; list-style:none; font-size:110%; margin-bottom:0.45em; }
#convert-howto-ofv ol.convert-howto li:before { padding:0em 0.55em 0.2em 0.5em;border-radius:1em;font-size:110%;top:0; margin-right:0.3em; }
#convert-howto-ofv span.convert-howto-intro { display:block; font-size:120%; margin-top:1em; }

#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}
#contact_form textarea,#contact_form input[type=text]{border:1px solid #ddd;padding:0.2rem;border-radius:3px;width:100%}
#contact_form .red-border, #contact_form .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 */
/* blur everything except dropzone and ads */
body.blurc>header, body.blurc>a, body.blurc>footer, body.blurc main>.content>.content-top>*:not(#preview-wrapper,.content-top-right), body.blurc main>.content>*:not(.content-top,#billboard_1_container,#billboard_2_container,#b1c,#b2c,#b3c,#b4c,#s1c,#ba1c,#c1c),body.blurc main>.content>.content-top>#preview-wrapper>*:not(#preview-dropzone) { filter:blur(4px) grayscale(90%); }
#preview-wrapper{margin-bottom:2rem}
/*.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 infinite; margin-bottom:0.5rem;padding:1.5rem 1rem;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-initial #recaptcha-area { display:none; }
#preview-dropzone.recap #recaptcha-area{ display:block; }
#preview-dropzone.recap .preview-button, #preview-dropzone.recap #preview-link-area { display:none; }

/*#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}
a#cf { position:absolute; width:100%; display:block; top:0; bottom:0; left:0; border: none; }
#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: 1.2em 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 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, #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%}
#preview-text video {min-width:320px;}

#hdf5-attrs { list-style:none; }
#hdf5-attrs li { border-top: 1px dotted #ddd; }
#hdf5-keys, #hdf5-keys ul { list-style: "\01F4C1"; }
#hdf5-keys, #hdf5-keys ul li.expanded { list-style: "\01F4C2"; }
#hdf5-keys li { cursor:pointer; border-top: 1px dotted #ddd; }
#hdf5-keys ul.dataset { list-style: "\01F520"; }
#hdf5-keys ul.dataset li { cursor:default; }

.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}

.content-top { position:relative; min-height: 620px; }
.content-top-right { position: absolute; width: 300px; min-height: 600px; top:0; right:0; }
.rtl .content-top-right { right:unset; left:0; }

a.button,.button,#recaptcha-area a{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,#recaptcha-area a:hover{text-shadow:0 1px 0 #019;background-color:#0080c8;box-shadow:0 2px 9px #abc}
#recaptcha-area a { min-width:250px; }
#recaptcha-area a[aria-disabled="true"]{ opacity:0; cursor:default; }
#recaptcha-area label { font-size: 1.4rem; color: #fff; margin: 0 2em; white-space: nowrap; display: inline-block; }
#recaptcha-area label input { transform: scale(1.5); margin: 0 1em; opacity:1; transition: all 0.5s ease; }

#preview-wrapper p.recommended-fvp { margin-left:0.1em; }
p.recommended-fvp { position:relative; margin:1.3em 0 0 0; }
.green-checkmark { display: inline-block; font-size: 11px; background-color: #20aa20; color: White; border-radius: 1em; padding: 0 0.4em 0.1em 0.4em; position: absolute; top: 5px; }
p.recommended-fvp strong { display: inline-block; padding: 0 1.3em; }
p.recommended-fvp a { border:none; }
p.recommended-fvp a:hover { border-bottom:1px dotted #7cf; }
p.recommended-fvp em { font-style:normal; border-bottom:1px dotted #7cf;}

#ov { position:fixed; z-index:10; width:100%; height:100%; backdrop-filter:blur(4px); display:flex; justify-content:center; align-items:center; background-color:rgba(0,0,0,0.1); }
#ov-inner, #ctpass-top { text-align: center; margin: 0 0 1.5em 0; background: rgba(237,237,237,.7); border: 1px solid #ddd; border-radius: 3px; padding: 1rem 1rem; position: relative; overflow: hidden; }
#ov-inner { width:80%; min-height:8em; font-size:140%; font-weight:500; border:4px solid #c9c9c9; border-radius:0.4em; background:rgba(255,255,255,.9); }
#ov-close-i { position:absolute; top:0; right:15px; font-size:150%; color:#bbb; cursor:pointer; }
#ov-close { position:absolute; top:5px; right:10px; font-size:200%; color:#aaa; cursor:pointer; }
#ctpass-top a, #ov a { padding: 0.2em 2.1em 0.4em 2.1em; margin: 0.5em 0; border-radius: 2em; font-size: 120%; font-weight: 600; color: #fff; background: #212121; border: none; transition: all .3s ease; cursor: pointer; text-decoration:none; display:inline-block; }
#ctpass-top a:hover, #ov a:hover { opacity:0.8; }
#billboard_1_container, #b1c, #b4c, #ba1c, #c1c {height:100px;margin-bottom:1.5em;display:block;overflow:hidden;}
#billboard_2_container, #b2c, #b3c {height:250px;margin-top:1.5em;display:block;overflow:hidden;}
iframe.a, iframe.ba { border:none; width:100%; overflow:hidden; }
#b1c iframe.a, #b2c iframe.a, #b3c iframe.a, #b4c iframe.a, #st1c iframe.a, #ba1c iframe.a, #c1c iframe.a, iframe.ba { height:100%; }
/* st1c - sticky homebrew ad. Appears on screen after scrolling the page a bit */
#scroll-anchor { position: absolute; width: 1px; height: 1px; top: 200px; left: 0px; }
#st1c { position:sticky; bottom:0; z-index:10; height:0px; overflow:hidden; background:rgba(255,255,255,0.3); opacity:0; transition: all 1s; }
body.scrolled #st1c { height:90px; opacity:1; }
#preview-wrapper #filext\.com_billboard_3 { margin: 1.5em 0; display:none; }
body.previewed #preview-wrapper #filext\.com_billboard_3 { display:block; }
#filext\.com_skyscraper_1, #s1c {max-height:600px;display:block;} /* width:300px */
#adunit-container__filext\.com_skyscraper_1 { position:sticky; top:18px; }
.content-top-right iframe.a, .content-top-right iframe.ba { height:600px; position:sticky; top:18px; }
body.previewed #adunit-container__filext\.com_skyscraper_1, body.previewed .content-top-right iframe.a, .content-top-right iframe.ba { top:67px; } /* 67px after file preview - to place skyscraper ad below top menu */
#filext\.com_skyscraper_2, #s2c {height:600px;display:block;} /* width:300px */
body.cpauthenticated #billboard_1_container, body.cpauthenticated #billboard_2_container, body.cpauthenticated #filext\.com_billboard_2, body.cpauthenticated #filext\.com_billboard_3, body.cpauthenticated #preview-wrapper #filext\.com_billboard_3, body.cpauthenticated #filext\.com_billboard_4, body.cpauthenticated #filext\.com_skyscraper_1, body.cpauthenticated #filext\.com_skyscraper_2, body.cpauthenticated #msoanchor, body.cpauthenticated #ctpass-top, body.cpauthenticated .content-top-right { display:none !important}
body.cpauthenticated #b1c, body.cpauthenticated #b2c, body.cpauthenticated #b3c, body.cpauthenticated #b4c, body.cpauthenticated #s1c, body.cpauthenticated #st1c, body.cpauthenticated #ba1c, body.cpauthenticated #c1c, body.cpauthenticated iframe.a, body.cpauthenticated iframe.ba { display:none !important }
body.cpauthenticated .content-top { padding:0; min-height:unset; }
.stop-scr { height: 100%; overflow: hidden; }

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; }
body.sticky-header #preview-menu { top:0; position:fixed; backdrop-filter:blur(6px); }
#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#save-as 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; }
body.sticky-header #view-another-file { position: fixed; top: 0.45em; right: 1em; z-index: 8; }
#view-another-file span.button { font-size:1.1rem; padding:0.2rem 1rem; margin:0; }

#preview-menu #save-as-menu { visibility:hidden; border: solid 1px #777; padding: 0.5em; margin:0.5em 0 0 0; background: #f5f5f5; font-size:90%; width:13em; min-height:15em; max-height:30em; overflow-y:auto; position:absolute; color:#222; text-align:left; cursor:auto; opacity: 0; transition: visibility 0.7s ease-in, opacity 0.7s ease-in; }
#preview-menu #save-as-menu input { margin:0.1em; }
#preview-menu li:hover #save-as-menu { visibility: visible; opacity:1; transition: visibility 0.3s ease, opacity 0.3s ease;}
#preview-menu #save-as-menu h4 { margin:0.6em 0.2em 0.2em 0.2em; font-size:1em; }
#preview-menu #save-as-menu ul { list-style:none; margin:0; padding:0; }
#preview-menu #save-as-menu li { padding:0.1em 1em; margin:0; display:block; border-radius:0.3em; }
#preview-menu #save-as-menu li.hide { display:none; }
#preview-menu #save-as-menu li:hover { background:#ddd; 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); } }

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:2199px) { .content-top { padding-right:330px; } .rtl .content-top { padding-right:0; padding-left:330px; } }
@media only screen and (max-width:1300px) { .content { width:90%; } .content-top-right { right:0%; }}
@media only screen and (max-width:1100px) { .content { width:93%; } #preview-menu ul li{margin:6px 10px 0 0} #preview-menu #view-another-file{right:1em} }
@media only screen and (max-width:900px) { .content-top { padding-right:170px; } .rtl .content-top { padding-left:170px; padding-right:0; } .content-top-right { width:160px; } #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;align-items:center;} .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} #contact_form .td:last-child{padding-top:2rem} .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; } body.sticky-header #preview-menu { top:unset; } #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%; } #preview-menu #save-as-menu { position:fixed; bottom:4em; right:0; } #preview-menu.padded { padding-bottom:105px; } #preview-menu.padded #save-as-menu { max-height:25em; bottom:10em; } }
@media only screen and (max-width:700px) { .content-top { padding-right:0; } .content-top-right { display:none; } }
@media only screen and (max-width:600px) { .eu{height:auto;} footer{height:auto} #recaptcha-area a { font-size:1.2rem; } #recaptcha-area label { margin:0.5em; font-size:1.2rem; } .langmenu .col3, .langmenu .col4 { column-count: 2; } .td{display:block} .td.txtright{text-align:left} }
@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} .rtl .app li::before{margin-left:0.5rem;margin-right:-2.2rem} /*#technical-data h4,#preview-dropzone h4{left:0;font-size:12rem}*/  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;} }

/* Notification System Styles */
.notification { position: fixed; top: 20px; right: 20px; max-width: 400px; min-width: 300px; padding: 16px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; z-index: 10000; transform: translateX(100%); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); }
.notification-show { transform: translateX(0); opacity: 1; }
.notification-hiding { transform: translateX(100%); opacity: 0; }
.notification-error { background: linear-gradient(135deg, #ff6b6b, #ee5a52); color: white; border-left: 4px solid #d63031; }
.notification-success { background: linear-gradient(135deg, #00b894, #00a085); color: white; border-left: 4px solid #00a085; }
.notification-info { background: linear-gradient(135deg, #74b9ff, #0984e3); color: white; border-left: 4px solid #0984e3; }
.notification-icon { font-size: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.notification-message { flex: 1; line-height: 1.4; word-wrap: break-word; }
.notification-close { background: none; border: none;color: inherit; font-size: 20px; font-weight: bold; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; flex-shrink: 0; opacity: 0.8; }
.notification-close:hover { background-color: rgba(255, 255, 255, 0.2); opacity: 1; }

/* Mobile responsive notifications */
@media (max-width: 480px) { .notification { top: 10px; right: 10px; left: 10px; max-width: none; min-width: auto; transform: translateY(-100%); } .notification-show { transform: translateY(0); } .notification-hiding { transform: translateY(-100%); } }

/* Animation for multiple notifications */
.notification + .notification { top: 90px; }
.notification + .notification + .notification { top: 160px; }

/* 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; }

.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%; } }

  /* 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; 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:#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; }
#preview-archive-as-pdf { text-align:center; }
#preview-archive-as-pdf .button { margin-bottom:0; }

/* 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; } }
@keyframes width-expand { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes text-blink { 50% {opacity:0.5; } }
.progress { display:none; height: 30px; margin:10px 0; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.progress-bar { float: left; 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: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; }
@keyframes airplane-lr { from { left:5% } to { left:75%; } }
.airplane { color:#fff; font-size:110px; display:block; position:absolute; top:37%; left:20%; animation: airplane-lr 4s linear infinite; }
.airnote { color:#fff; font-size:12px; text-align:left; display:block; position:absolute; left:14px; bottom:5px; animation: text-blink 1s ease-in-out infinite; }

/* END ofv more */