/* Quick.Cms.Ext v6.x default stylesheet */

:root {
  --color-text: #6d6f64;
  --color-primary: #777;
  --color-dark: #222;
  --color-secondary: #ccc;
  --color-white: #fff;
  --color-divider: #aaa;
  --color-bg: #fff;
  --color-bg2: #ddd;
  --color-bg3: rgba(235, 235, 235, 1);
  --color-gray: #444;
  --color-gray2: #989898;
  --color-special: #fb7f3a;
  --color-hover: #dee1e2;
  --color-border: #e8eaee;
  --color-onwite: #555;  
  --color-admin: #009ee8;  
  --color-looped: rgba(207, 212, 217, 1);  
  --color-wave: #ccc;
  --color-wave-progress: #444;
  --color-wave-cursor: #222;
}

.black-theme {
  --color-text: #fff;
  --color-primary: #999;
  --color-dark: #eee;
  --color-secondary: #ccc;
  --color-white: #fff;
  --color-divider: #aaa;
  --color-bg: #17191c;
  --color-bg2: #4b4e4f;
  --color-bg3:rgba(27, 31, 36, 1);
  --color-gray: #898989;
  --color-gray2: #565656;
  --color-special: #fb7f3a;
  --color-hover: #1f1a17;
  --color-border: #454545;
  --color-onwite: #555; 
   --color-admin: #009ee8;  
    --color-looped: rgba(207, 212, 217, 1);  
  --color-wave: #5f6368;
  --color-wave-progress: #a0a0a0;
  --color-wave-cursor: #d0d0d0;
}


.default { background-color: #f5f5f5; border-radius:50%;width:50px;height:50px;border:2px solid var(--color-text);margin:1em;}
.black { background-color: #05121d; border-radius:50%;width:50px;height:50px;border:2px solid var(--color-text);margin:1em;}
input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.web-colors { width: 100%; padding: 1em; display: flex; justify-content: center; align-items: center; }

html {
    scroll-behavior: smooth;
}



input, select, textarea, button {
    all: unset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}
/* GLOBAL STYLES */
body, body *, body *:before, body *:after{margin:0;padding:0;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,table{color:var(--color-gray);font-size:1em;font-family:Arial, sans-serif;}

body{padding:0;background:var(--color-bg);text-align:center;}

input[type="text"], input[type="password"], input[type="file"], input[type="email"], select, textarea{padding:2px;border-width:1px;border-style:solid;border-color:var(--color-gray);font-family:Arial, sans-serif;font-size:1rem;border-radius:2px;}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus{border-color:var(--color-dark);box-shadow:0 0 3px rgba(0,103,154,0.6);}
input[type="text"].warning-required, input[type="password"].warning-required, input[type="email"].warning-required, select.warning-required, textarea.warning-required{background:#fbefef;border-color:#bb4c2e;}
input[type="submit"], button[type="submit"]{padding:0.4em 0.9em;border-width:1px;border-style:solid;background:var(--color-bg2);color:var(--color-bg);transition:all 0.3s ease;font-family:Arial, sans-serif;font-size:1rem;border-radius:2px;}
input[type="submit"]:hover, input[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:focus{background-color:var(--color-text);color:var(--color-bg);cursor:pointer;}
label{font-weight:bold;}
select{display: flex;justify-content: center;align-items: center;padding: .5em;}
label span{padding-left:10px;color:var(--color-secondary);font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;font-size:100%;}
tbody, tfoot, thead{margin:0;padding:0;}
caption, tr, th, td{margin:0;padding:2px 4px;border:0px solid var(--color-border);font-size:100%;font:inherit;vertical-align:baseline;}
.form-full fieldset{width:50%;margin:0 auto;}
a{color:var( --color-divider);text-decoration:none;}
a:hover{color:var(--color-text);text-decoration:underline;}
.page img{border-radius:10px;padding:3px;max-width:100%;}
input[type="checkbox"] {padding: 5px;font-size: 14px;margin-left: 5px; }  

input[type="checkbox"] {display:flex;justify-content:center;align-items:center; appearance: none; -webkit-appearance: none; -moz-appearance: none;position: relative;width: 25px;height: 25px; border: 1px solid #999;border-radius: 4px;outline: none;cursor: pointer;transition: all 0.3s ease; }
input[type="checkbox"]:hover {border-color: var(--color-text); }  
input[type="checkbox"]:checked {background-color: var(--color-text);border-color:var(--color-text); } 
input[type="checkbox"]:checked::after { content: '✔';color: white;font-size: 20px;}  
label[for="iRulesAccept"] {margin-left: 8px;color: var(--color-text);cursor: pointer;}  
.rules.option a {color: var(--color-text);text-decoration: none;font-weight: bold; font-size: 13px;}  
.rules.option a:hover { text-decoration: underline; }

.page #container img{max-width:100%;}
.msg{clear:both;overflow:hidden;padding:20px 0;text-align:center;}
.msg.done, .msg.error{height: 100vh;margin: 0;z-index:900;position: fixed;width: 100%;left: 0;top: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 5em;background: var(--color-bg);}
.msg.done a, .msg.error a, .msg.done .icon-heart-line a, .msg.error .icon-heart-line a{color:var(--color-dark);}
.msg.done a:hover, .msg.error a:hover{color:var(--color-hover);}
.msg a.action{display:inline-block;margin:7px 7px;padding:.5em 1em;border:1px solid var(--color-text);text-decoration:none;font-size:.8rem;border-radius:5px;}
.msg a.action:hover{border:1px solid var(--color-bg);color:var(--color-bg);}
.msg.panel a.action{margin-top:13px;}
.msg.error{background-color:var( --color-divider);}
body.is-msg-error404 .msg.error{margin-top:3rem;}
.wai{position:absolute;width:1px;height:1px;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);overflow:hidden;}

#container{position:relative;width:100%;margin:0;text-align:left;background:var(--color-bg);}
#container:after{content:"";display:table;clear:both;}

.link-library{margin:0 5px;}
.link-library a{text-transform:uppercase;font-weight:600;display:flex;justify-content:center;align-items:center;gap:0 .5em;color: var(--color-bg2);}
.link-library span {display:none;}
.link-library a:hover{text-decoration:none;color: var(--color-bg2);opacity:.7;}

#body, #foot{margin:0 auto;padding:0;position:relative;z-index:1;}

/* QUICK LINKS */
#skiplinks{position:absolute;top:0;left:0;}
#skiplinks a{position:absolute;top:-500px;left:0;z-index:10;min-width:200px;padding:10px;color:var(--color-bg);}
#skiplinks a:focus{top:0;background:var(--color-text);color:var(--color-bg);}

/* LOGO, HEADER BACKGROUND AND SLOGAN */
#head1 .container{display:flex;flex-flow:row wrap;justify-content: space-between;align-items: center;position:fixed;top:0;z-index:5000;background:var(--color-dark);width:100%;}
header{}
#logo{padding:.5em 1rem;}
#logo #title a, #sidr-id-title a{color:var(--color-hover);font:bold 2em 'Arial';line-height:1em;text-decoration:none;}
#logo #title a span, #sidr-id-title a span{color:var( --color-divider);background:inherit;}
#logo #title a strong, #sidr-id-title a strong{color:var(--color-bg2);background:inherit;}
#logo #title a em, #sidr-id-title a em{color:var( --color-divider);font-style:normal;}
#logo #slogan{padding:4px 0 0 4px;background:inherit;color:var(--color-bg2);}

.prep-info{background:#0093dd;color:#fff;width:100%;display:flex;justify-content:center;align-items:center;padding:1em;position:absolute;top:50px;z-index:500;}
.prep-info-sub { background: #0093dd; color: #fff; width: 74%; display: flex; justify-content: center; align-items: center; padding: 1em; position: absolute; bottom: 36px; z-index: 500; font-size: .6em; left: 13%; right: 12%; }
/* MENU TOP */
.menu-top .level-0-menu{display:flex;flex-flow:row wrap;list-style:none;}
.menu-top a{display:block;padding:.6em 1em;color:var(--color-primary);text-decoration:none;transition:all 0.5s ease;}
.menu-top a:hover, .menu-top .selected a, .menu-top .selected-parent a{color:var(--color-text);}


/* SLIDER */
/* You will find slider styles in style-slider.css file */

/* BODY/CONTENT STYLES */
#body{clear:both;margin:0;border-top:0px solid #eaeaea;position:relative;z-index:4;padding-top:0;padding-bottom:0px;}
#page1 #body{margin-bottom:0px;padding-top:0;}
#body:after{content:"";display:table;clear:both;}

/* PAGE */
#page{position:relative;margin:0 0 30px;text-align:left;margin: 0 auto;padding-bottom:100px;background:var(--color-bg);padding:0em;order:1;width:100%;}
#page:after{content:"";display:table;clear:both;} 
#page h1, .heading-1{margin:.8em 0 .4em;color:var(--color-text);font-size:1.417rem;font-weight:normal;}
.is-product #page h1, .is-product .heading-1{padding-top:0em;padding:0 1em;text-align:center;}
#page .msg.error h1, #page .msg.error .heading-1{margin-top:.4em;color:var(--color-bg);}
#page .msg.error.panel h1{margin:0;font-size:1rem;}
.is-product #page, .track-list-page #page{margin-top:3em;}

/* PAGE - BREADCRUMB (navigation path) */
.breadcrumb{margin-bottom:1.25rem;text-align:center}
.breadcrumb ol{list-style:none;}
.breadcrumb li{display:inline-block;}
.breadcrumb li:not(:first-child)::before{content:"\203A";display:inline-block;padding:0 .5em;color:var(--color-text);font-weight:bold;}

/* PAGE CONTENT */
#page div.content{width:100%;margin:0 auto;}
#page div.content > ul, #page div.content > ol{padding:0 0 0 2em;}
/* #page div.content > ul:after, #page div.content > ol:after{content:"";display:table;clear:both;} */ /* Uncomment if necessary */
#page div.content > ul li, #page div.content > ol li{margin:.5em 0;padding:0;}
.is-subpages-type-5 .title{font-size:0.8em;}
#page div.content > h2{font-size:1.5rem;line-height:2em;font-weight:normal;}
#page div.content > h3, h3{font-size:1rem;}
#page div.content > p{padding-bottom:1em;}
#content{display:block;}
.is-product #content, .track-list-page #content{display:flex;flex-direction:column;width:100%;}

.left-column{width:300px;padding:1em;background: #d3d7da;order:2;padding-top:5em;}
/* wizytowka kompozytora - widget 33: polowa szerokosci, dosunieta do prawej.
   Prawa krawedz ma sie konczyc tam, gdzie lista utworow ( .audiofilesList ma max-width:1440px
   i marginesy auto ), a nie przy krawedzi okna - stad ten sam odstep policzony z szerokosci */
.composer-card{display:flex;gap:1.2em;align-items:center;width:50%;
  margin:0 max(0px, calc( ( 100% - 1440px ) / 2 )) 1em auto;}
.composer-card__photo{flex:0 0 auto;}
/* okragle zdjecie - aspect-ratio i object-fit pilnuja, zeby nie robilo sie z niego jajko */
.composer-card__photo img{display:block;width:120px;height:120px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;}
.composer-card__text{flex:1;min-width:0;}
.composer-card__name{margin:0 0 .3em;font-size:1.05rem;font-weight:bold;}
.composer-card__name a{text-decoration:none;color:var(--color-text);}
.composer-card__name a:hover{color:var(--color-special);}
.composer-card__description{font-size:.9rem;color:var(--color-primary);}
.composer-card__description p{margin:0 0 .5em;}
@media (max-width:980px){.composer-card{width:100%;margin-left:0;}}
@media (max-width:480px){.composer-card{flex-direction:column;align-items:flex-start;}}

/* POWIAZANE ALBUMY KOMPOZYTORA ( widget listWidgetsViewComposersAlbums )
   W lewej kolumnie albumu wygladaja tak samo jak "powiazane strony" ( #pages-related ):
   ten sam naglowek i te same kafelki. Poza lewa kolumna widget zostaje bez zmian. */
/* naglowek "Rekomendowane" to etykieta nad okladkami, nie tytul sekcji - ma byc maly wszedzie,
   niezaleznie od tego, w ktorej kolumnie stoi widget. !important, bo style widgetow i tresci
   ( np. .composers .head a z 4em ) sa bardziej szczegolowe. */
.composer-albums > h2{margin:1.2em auto .6em;padding-top:0;color:var(--color-divider);font-size:.9rem !important;font-weight:600;letter-spacing:normal;line-height:1.2;text-align:center;}
.composer-albums__toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} /* checkbox tylko do rozwijania */
.composer-albums__more{display:none;} /* przycisk pokazuje sie tam, gdzie lista jest zwijana */

.composer-albums{clear:both;width:90%;margin:0 auto;} /* ten sam uklad co #pages-related, niezaleznie od miejsca widgetu */
/* naglowki widgetow w lewej kolumnie ( h2 ) - polowa dotychczasowego rozmiaru i bez
   rozstrzelenia liter; kolumna jest waska, wiec liczy sie sama lista okladek */
.column-left .composer-albums > h2, .left-column .composer-albums > h2, .right-column .composer-albums > h2,
.column-left .widget h2, .left-column .widget h2,
.column-left #pages-related > h2, .left-column #pages-related > h2{margin:1.2em auto .6em;padding-top:0;font-size:.625rem !important;font-weight:600;letter-spacing:normal;text-align:center;}
/* waska kolumna na desktopie - naglowki mniejsze niz w tresci ( na telefonie kolumna
   jest na cala szerokosc, wiec tam zostaje normalny rozmiar z bloku telefonowego ) */

.composer-albums .pages-gallery{display:flex;flex-wrap:wrap;justify-content:center;}
/* w waskiej kolumnie dwie okladki w rzedzie, a na pelnej szerokosci cztery mniejsze -
   ten sam widget wyglada inaczej w zaleznosci od miejsca, w ktorym stoi */
.composer-albums .pages-gallery .page{width:22%;} /* pelna sciezka, bo pozniej w pliku jest .pages-gallery .page{width:20%} */
.column-left .composer-albums .pages-gallery .page,
.left-column .composer-albums .pages-gallery .page,
.right-column .composer-albums .pages-gallery .page{width:40%;}
.composer-albums .pages-gallery .page img{width:100%;}
.composer-albums .pages-gallery .title{font-size:.7em;}

/* rozwijanie: widac pierwsze 8 okladek, reszte pokazuje zaznaczony checkbox ( bez JS ) */
.composer-albums--collapsible .composer-albums__toggle:not(:checked) ~ ul > .page:nth-child(n+9){display:none;}
.composer-albums--collapsible .composer-albums__more{display:block;margin:.6em auto 1.4em;text-align:center;font-size:.85em;color:var(--color-divider);text-decoration:underline;cursor:pointer;}
.composer-albums--collapsible .composer-albums__more:hover{color:var(--color-special);}
.composer-albums__toggle:not(:checked) ~ .composer-albums__more .less{display:none;}
.composer-albums__toggle:checked ~ .composer-albums__more .more{display:none;}
.composer-albums__toggle:focus-visible ~ .composer-albums__more{outline:2px solid var(--color-special);outline-offset:3px;}

/* dark theme: the column had a fixed light gray, so it stayed bright while the page went dark */
.black-theme .left-column{background:var(--color-bg3);}
.column-pages ul{width:100%;margin:0;justify-content:center;align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;}
.column-pages ul .page{width:100px;margin:0.2em;}


#page > time{color:var(--color-text);}
@media screen and (min-width:960px){
  #page > time{position:absolute;top:2.5rem;right:0;}
}

/* IMAGES STYLES */
/* global */
.albums li img{width:100%;}
#content li img:hover{opacity:1;}
ul[class*='images-']{list-style:none;}
ul[class*='images-'] li{margin:0 auto;background:inherit;text-align:center;}
.images-7 li{height:500px;width:100%;}
.images-6 li{height:200px;width:100%;}

ul[class*='images-'] p{max-width:250px;margin:0 auto;color:var(--color-bg2);font-size:0.875em;}
ul[class*="images-"] img{max-width:90%;box-shadow:0 0 4px rgba(100,100,100,0.4);}
ul[class*="images-"] img:hover{opacity:0.8;}
div.content .images-gallery{padding:0;}
/* list custom */
.images-1{clear:left;margin: 0 auto;float:none;text-align:center;} 
.images-2{clear:right;float:right;margin:.5rem 0 0 1rem;}
.images-gallery{clear:both;display:flex;flex-flow:row wrap;justify-content:space-between;}
.images-gallery li{flex:1 0 auto;padding:.3rem 2rem;}
div.content .images-gallery{clear:none;}
.sub-file .image{text-align:right}
.sub-file .image img{scale:0.7;}
.sub-file{padding-left:6px !important;}
.sub-file .icon-play, .sub-file .icon-pause, .sub-file .icon-forward{width:20px;height:20px;}

/* @media screen and (min-width:960px){ .images-4 li{flex:0 0 25%;} } */ /* - if you want to set static number of columns */

/* FILES LIST STYLES */
.files-list{margin:1rem 0 .5rem;list-style:none;vertical-align:middle;border-left:2px solid #c8cccf;font-size:0.9rem;}
.files-list li{height:20px;margin:0 0 1rem 1rem;padding-left:2rem;background:url('img/files-ext.gif') no-repeat 0 -260px;}
.files-list p{display:inline;color:var(--color-bg2);font-style:italic;}
.files-list p:before{content:" - ";}
.files-list .zip{background-position:0 0;}
.files-list .xml{background-position:0 -20px;}
.files-list .xls{background-position:0 -40px;}
.files-list .web{background-position:0 -60px;}
.files-list .vcf{background-position:0 -80px;}
.files-list .txt{background-position:0 -100px;}
.files-list .sys{background-position:0 -120px;}
.files-list .swf{background-position:0 -140px;}
.files-list .psd{background-position:0 -160px;}
.files-list .pps{background-position:0 -180px;}
.files-list .png{background-position:0 -200px;}
.files-list .pic{background-position:0 -220px;}
.files-list .pdf{background-position:0 -240px;}
.files-list .nn{background-position:0 -260px;}
.files-list .eml{background-position:0 -280px;}
.files-list .media{background-position:0 -300px;}
.files-list .fla{background-position:0 -320px;}
.files-list .exe{background-position:0 -340px;}
.files-list .chm{background-position:0 -360px;}
.files-list .cdr{background-position:0 -380px;}

/* QUICK.BOX */
#quick-box{position:fixed;width:100%;height:100%;left:0;top:0;background:rgba( 0, 0, 0, 0.7 );z-index:200;}
#quick-box .background{height:100%;}
#quick-box .quick-box-container{position:absolute;padding:0;border-radius:5px;box-shadow: 0 0 15px 1px var(--color-text);}
#quick-box .image-wrapper{position:relative;line-height:0;}
#quick-box .image-wrapper img{margin:0;padding:0;border-radius:5px;}
#quick-box .navigation{position:absolute;bottom:0;margin:0;padding:.5em 0;text-align:center;font-size:0.875rem;font-weight:bold;color:#ddd;line-height:normal;background:rgba( 0, 0, 0, 0.2 );width:100%;}
#quick-box .full-size{position:absolute;right:8px;top:2px;width:24px;height:24px;font-size:0.1em;color:transparent;background:url('../admin/img/fullscreen.png') no-repeat;}
#quick-box .description{margin:0;padding:.5em 0;text-align:center;font-size:0.875rem;color:#ddd;font-weight:bold;background:rgba( 0, 0, 0, 0.8 );border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-height:66px;overflow:hidden;}
#quick-box .arrow{position:absolute;display:block;width:50%;top:15%;height:70%;margin:0px;font-family:Verdana;z-index:100;opacity:0.5;text-decoration:none;}
#quick-box .arrow:before, #quick-box .arrow:after{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);}
#quick-box .arrow:before{width:32px;height:32px;margin:0 10px;background:url('img/arrows.png') no-repeat 0 0;z-index:1;}
#quick-box .arrow:after{width:52px;height:52px;background:rgba( 0, 0, 0, 0.2 );z-index:-1;}
#quick-box .arrow.prev:before{background-position:0 -32px;}
#quick-box .arrow.next:before{right:0;}
#quick-box .arrow.next:after{right:0;}
#quick-box .arrow:hover{opacity:0.9;}
#quick-box .prev{left:0px;}
#quick-box .next{right:0px;}
#quick-box .close{position:absolute;top:0;right:0;padding:0.15em 0.4em 0.2em;opacity:0.5;background:var(--color-text);color:var(--color-bg);font-weight:bold;font-family:"Trebuchet MS";text-decoration:none;border:0px solid var(--color-bg);border-top:none;border-right:none;border-top-right-radius:5px;z-index:100;}
#quick-box .close:hover{opacity:0.8;}
#quick-box .close, #quick-box .arrow{line-height:normal;}
#quick-box .loading{display:block;padding:40px 35px;color:white;line-height:1em;}
@media /* High px density (mostly mobile) - so you can magnify something */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
  #quick-box .close{font-size:1.5rem;}
  #quick-box .prev, #quick-box .next{opacity:0.5;text-decoration:none;}
}

/* SUBPAGES LIST STYLES */
/* global */
.title{padding:0 0 0.5em;font-size:1.25rem;}
.title a{color:var( --color-divider);font-weight:normal;background:none;text-decoration:none;}
.title a:hover{color:var(--color-bg2);background:none;text-decoration:underline;}
time.date{display:block;padding:0 0 0.3em;color:var(--color-text);}
[class|="pages"]{clear:both;margin:.5rem 0;list-style:none;}
[class|="pages"] .page:after{content:"";display:table;clear:both;}
[class|="pages"] .more{display:block;margin:0.3em 0 0;}
[class|="pages"] p{padding:0.3em 0;}

.page.sub.selected{opacity:0.3;color:var(--color-text);}
.page.sub.selected:hover{opacity:0.3;color:var(--color-text);}
.page.sub.selected .title a{opacity:1;color:var(--color-text);}
.page.sub.selected .title a:hover{opacity:1;color:var(--color-text);}

 .albums #content li img{width:100%;margin:0;padding:0;}
/* standard list */
.pages-list .page{margin:15px 0;padding:.5rem 2.5%;border:0px solid #e0e0e0;border-top:0px solid var(--color-border);}
.pages-list .page .image{float:left;margin:0 2.5% 5px 0;}
.pages-list ul, .pages-list ol{margin:5px 0 0 4%;padding:0;list-style:disc;}
.pages-list .page li{padding:0;border:0;background:none;}
.pages-list .page ol{list-style:decimal;}

/* subpages gallery/boxes/products etc */
.pages-gallery{display:flex;justify-content: center;flex-direction:column;flex-wrap:wrap;margin:0 auto;}
.pages-gallery .page{margin:5px;padding:0;border:0px solid #e0e0e0;border-top:0px solid var(--color-border);text-align:center;width:100%;}
.pages-gallery .page .image{margin:0 0 5px;}
.pages-gallery div.description{padding:0.3em 0;text-align:justify;}


.pagination{text-align:center;margin:1em;}
.pagination ul, .pagination li{display:inline;}
.pagination li{padding:0 2px;}
.pagination a, .pagination strong{padding:0 3px;}

/* SITE MAP */
#site-map{clear:left;margin:1rem 0;list-style:none;}
#site-map .sitemap__section{padding:.3em 0 .3em 2rem;list-style:none;}
#site-map .sitemap__el{padding:.3em 0;}
#site-map .sitemap__el--0{padding:.5em 0;}
#site-map .sitemap__link--0, #site-map .sitemap__nolink--0{font-size:1.25rem;}
#site-map .sitemap__link--1, #site-map .sitemap__nolink--1{font-size:1.125rem;}

/* FOOTER - SITE AND SCRIPT COPYRIGHTS STYLES */
#foot{background:var(--color-bg);color:var( --color-text);font-size:1.083em;padding: 0;border-top: 1px solid var(--color-border);margin-top: 0em;position: relative;bottom:0px;width: 100%;}
#foot .container{display:flex;flex-wrap:wrap;justify-content:space-between;}
#foot .container > *{padding:1.5rem 2rem;}
#foot a{color:var( --color-text);text-decoration:none;}
#foot a:hover{text-decoration:underline;}
#foot .options ul{display:flex;list-style:none;}
#foot .options li:not(:last-child){margin-right:2rem;}
#foot .options a{display:block;width:16px;height:16px;text-indent:100%;white-space:nowrap;overflow:hidden;font-size:1%;color:transparent;background:url('img/options.png') no-repeat center 0;}
#foot .options .print a:hover{background-position:center -16px;}
#foot .options .back a{background-position:center -32px;}
#foot .options .back a:hover{background-position:center -48px;}
footer{padding:3em 1em 10em;;}
.copy{font-size:.8em;margin:0 1em;color: var(--color-text);} 
#powered .container{clear:both;width:100%;margin-bottom:60px;text-align:center;margin:0 auto;display:flex;flex-direction:column;justify-content:center;}
#powered a{display:inline-block;text-decoration:none;font-size:.8em;margin:1em;color: var(--color-text);} 
#page1 #powered{top:85%;position:relative;z-index:7;width:100%;background:var(--color-bg);}
/* COMMON CLASSES */

.form-full{clear:both;margin:25px auto 0;display:flex;justify-content:center;align-items:center;height:100%;margin-bottom: 2em !important;}

.form-full dt{padding:0 0 7px;}
.form-full dd{margin-bottom:20px;}
.form-full input[type="text"], .form-full input[type="email"], .form-full input[type="password"], .form-full textarea{width:99%;padding:7px;font-size:1em;}
.form-full .save{text-align:center;}
.form-full .save input{padding:0.8em 1.5em;text-transform:uppercase;letter-spacing:1px;}
.captcha{width:40%;}
.captcha input[type="text"]{min-width:60px;width:6%;}
.captcha strong{font-weight:bold;}
.captcha em{font-style:normal;font-weight:bold;}
.captcha ins{padding:0 3px;font-weight:bold;text-decoration:none;}
input.bpm-input{width:70px !important;}
.bpm-text strong, span.bpm-text{font-size:15px;}
.user-files-table tr td{display: flex;flex-direction:row;justify-content: center;align-items: center;gap: .5em;}
.user-files-table tr{display:flex;flex-direction:row;justify-content: space-between;}



/* ADMIN OPTIONS */
#page ul.options{position:absolute;right:3em;top:75px;min-width:100px;list-style:none;text-align:right;}
#page ul.options li{display:inline-block;margin-left:10px;}
.panel-link{display:inline-block;width:21px;height:21px;background:rgba(255,255,255,0.6) url('../admin/img/options.png') no-repeat 0px 0px;text-indent:100%;white-space:nowrap;overflow:hidden;font-size:1%;color:transparent;position:absolute;}
.panel-link.edit:hover{background-position:0 -21px;}
.panel-link.delete{background-position:-21px 0;}
.panel-link.delete:hover{background-position:-21px -21px;}

.dev{padding:5px;text-align:center;color:#f00;font-weight:bold;}

@media print{
  /* PRINT STYLES */
  * {color:var(--color-text) !important;background:var(--color-bg) !important;border-color:var(--color-gray) !important;border-width:1px !important;}

  body{margin:1cm 0;font-size:0.875em;}
  #container{position:static;width:17.2cm;height:auto;margin:0;box-shadow:none;}
  #head1{height:auto;}
  #logo{padding:0 0 0.2cm;}
  #logo #title a{font-size:2em;}
  .menu-top{margin-top:0.3cm;}
  .menu-top li a{padding:0.1cm 0.2cm;border:0;border-right:1px solid var(--color-text);font-size:1em;}
  .menu-top .selected a, .menu-top .selected-parent a{font-weight:bold;}
  #head2 .container{position:static;}

  #body{clear:none;border-top:0;}
  #page{clear:both;position:static;float:none;}
  #page h1{margin:0;}

  #body, #head1, #foot{float:none;}
  .menu-top li:hover:after, .menu-top .selected:after, .menu-top .selected-parent:after, #search-form, #foot .options{display:none;}
}

/* PLUGINS */
/*Rating*/
#pageRating { margin: 5px 0; text-align: center; } 
#pageRating h3{margin:0 auto;text-align:center;}
#pageRating .results { margin: 5px 0 0; font-size: 0.7em; color: #888; } 
#pageRating .results strong { padding: 0 0 0 2px; color: #888; } 
ul.rating { margin: 0 auto; padding: 0; list-style: none; display: flex; justify-content: center; align-items: center; } 
ul.rating li { cursor: pointer; text-indent: -999em; position: relative; width: 17px; height: 17px; } 
ul.rating li a { display: block; width: 100%; height: 100%; position: relative; } 

ul.rating li a svg { width: 17px; height: 17px; fill: black; } 
#pageRating ul.rating li a svg { width: 20px; height: 20px; fill: black; } 
ul.rating li a:hover svg, ul.rating li a:focus svg { fill: #ffab00; }
.star-icon{position:absolute;top:0;left:0;width:17px;height:17px;}
#pageRating .star-icon{position:absolute;top:0;left:0;width:20px;height:20px;}
/* for lists */
.pageRating { margin: 5px 0; text-align: center; }
.pageRating .results { margin: 5px 0 0; font-size: 0.7em; color: #888; }
.pageRating .results strong { padding: 0 0 0 2px; color: #888; }
.song-quantity{font-size:.8em;}

/* TAGS */
ul.tags{clear:both;padding:0.5em 0;list-style:none;}
.tags li{display:inline-block;}
.tags a{display:inline-block;margin:0 5px;padding:3px 6px 3px 21px;background:url('img/tag.png') no-repeat 2px 4px;border:0px solid var(--color-border);}
.tags a:hover{color:var( --color-divider);}
.tags li.head a{margin:0;padding-left:0;border:0;}
.pages-list .tags{margin:0;}

/* USER ORDERS HISTORY */
.details-list .legend{padding:1em 0 0.5em;background:inherit;color:var(--color-gray);font-size:1.2em;font-weight:bold;}
.details-list dl{display:block;width:100%;margin:0;padding:5px 0;border-top:2px solid var(--color-bg2);border-bottom:0px solid var(--color-bg);background:var(--color-bg);}
.details-list dt, .details-list dd{display:inline-block;width:40%;margin:0;padding:3px 0;vertical-align:top;}
.details-list dt{clear:left;text-align:right;}
.details-list dd{padding-left:2%;font-weight:bold;}
.details-list .comment{font-weight:normal;}

/* RELATED PAGES */
#pages-related{clear:both;margin:0 auto;width:90%;display:none;}
#pages-related > h2{padding-top:1em;color:var( --color-divider);font-size:1.25em;}
#pages-related .page{width:100%;}
#pages-related .page img{width:100%;}
/* PAGES PRODUCTS */
div.price{padding:5px 0;color:var( --color-divider);font-size:1em;font-weight:normal;}
div.price em{padding-right:4px;font-style:normal;}
div.price strong{font-size:1.125em;font-weight:bold;color:var( --color-divider);}
div.price.bigger strong{padding:0 2px;font-size:1.222em;}
div.price span{padding-left:4px;}
div.price.old *{color:var(--color-border);}
div.price.old strong{text-decoration:line-through;}
.is-old-price div.price:not(.old) *{color:var( --color-divider);} /* highlight price when it is promotion */

#page > .price{padding-bottom:10px;color:var(--color-gray);font-size:1.125em;}

/* PAGE MODIFICATION DATE AND AUTHOR */ 
.modify-info{clear:both;padding-top:10px;list-style:none;font-size:0.875em;}
.modify-info li{padding:5px 0;}
.modify-info .value{font-weight:bold;}

/* ADVANCED SEARCH */

#search-form a.advanced-search{clear:both;display:block;padding:4px 6px;font-size:0.875em;text-decoration:none;}
#search-form a.advanced-search:hover{text-decoration:underline;}
#search-form a.advanced-search:after{content:' \00bb';}

/* PAGES FEATURES */
#features{margin:0 0 15px;min-width:250px;border-collapse:collapse;border:0px solid var(--color-border);font-size:1em;}
#features caption{padding:5px;background:var(--color-bg2);color:var(--color-bg);border:0px solid var(--color-bg2);text-align:center;font-weight:bold;}
#features tbody td, #features tbody th{padding:5px 7px;background:var(--color-bg);font-weight:normal;text-align:left;}
#features tbody tr:nth-child(even) td, #features tbody tr:nth-child(even) th{background:#f8f8f8;}

/* ORDERING */
.order-box{margin:2em 0 1em;display: flex;justify-content: center;}
.order-link{padding:5px 14px;border-width:1px;border-style:solid;background:var(--color-bg2);color:var(--color-bg);text-decoration:none;transition:all 0.3s ease;border-radius:2px;}
.order-link:hover, .order-link:focus{background:var(--color-dark);color:var(--color-bg);text-decoration:none;cursor:pointer;}

.order-form legend{width:99%;margin-bottom:10px;padding-bottom:15px;color:var( --color-divider);font-size:1.5em;font-weight:normal;border-bottom:0px solid var(--color-bg2);}
.order-form .option{margin:4px 0 10px;font-size:0.875em;}
.order-form .option label{margin:0 4px;font-weight:normal;}
.ordered-elements table{margin:0 0 20px;width:99%;border-collapse:collapse;border:0px solid var(--color-bg2);font-size:1em;}
.ordered-elements tr > *{padding:5px 7px;background:var(--color-bg);font-weight:normal;text-align:left;}
.ordered-elements thead td{padding:5px;background:var(--color-bg);color:var(--color-text);border-bottom:1px solid var(--color-bg2)}
.ordered-elements thead em{padding:0 4px 0 0;font-style:normal;}
.ordered-elements tbody tr:nth-child(even) > *{background:var(--color-bg2);}
.ordered-elements .price{text-align:right;}
.ordered-elements .quantity{width:100px;text-align:right;}
.ordered-elements .quantity input{text-align:right;}
.ordered-elements .quantity label{position:absolute;clip:rect(1px, 1px, 1px, 1px);}
.ordered-elements tfoot .summary > *{padding:10px;font-size:1.25em;background:var(--color-bg2);}
.ordered-elements .recount th{text-align:right;}
.ordered-elements .recount input{padding:3px 8px;font-size:0.875em;}
#basket-options{width:100%;}
#basket-options li{display:inline-block;width:49.3%;}
#basket-options .checkout{text-align:right;font-size:1.125em;}
#basket-options .btn.continue{background:#666;}
#basket-options .btn.continue:hover{background:var(--color-dark);}
#checkout{display:none;margin-top:0;padding-top:30px;}
[class*="menu-"] .products-in-basket{display:inline-block;min-width:20px;margin-left:4px;padding:1px;text-align:center;color:var(--color-bg);background:var(--color-hover);border-radius:2px;font-style:normal;font-size:0.75em;}
[class*="menu-"] a:hover .products-in-basket, [class*="menu-"] .selected a .products-in-basket{background:var(--color-bg2);}

/* NOTICES ACCEPTS */
.notices{list-style:none;}
.notices .option, .option.notice{margin:4px 0 10px;font-size:0.875em;}
.notices .option label, .option.notice label{margin-left:4px;font-weight:normal;}

/* DROP DOWN MENU */
/* it is RECOMMENDED to combine these styles with standard .menu-top styles */
.menu-top ul{list-style:none;}
/* dropdown mark */
.menu-top li.drop-down:before{position:absolute;right:3px;display:block;content:"\25be";color:var(--color-text);}
/* dropdown mark - second level */
.menu-top .level-1-el.drop-down:before{top:50%;transform:translateY(-50%) rotate(-90deg);}
/* global submenus styles */
.menu-top ul ul{display:none;white-space:nowrap;background:#efefef;}
.menu-top li:hover > ul{display:block;} /* show submenu on hover */
.user-page h1{display:flex;justify-content:start;align-items:center;}
.summary-music-time{margin:0 ;padding: .5em;color:var(--color-text);font-size:15px;}

.sidr .level-0-el.open > .level-1-menu {
  display: flex; /* Wyświetl submenu dla otwartych elementów nadrzędnych */
}

.sidr .level-1-menu {  display: none;}

/* DOWNLOAD LIST */
#download-list{width:90%;margin:15px auto 5px;}
#download-list td{padding:7px 12px;}
#download-list thead{text-align:center;}
#download-list thead a{font-weight:bold;}
#download-list tbody .name a:first-child{position:relative;padding-left:26px;}
#download-list tbody .name a:first-child:before{content:'';position:absolute;left:0px;width:16px;height:20px;background:url('img/files-ext.gif') no-repeat 0 -260px;}
#download-list tbody p{margin:5px 0 0 26px;color:#777;font-size:0.938em;}
#download-list tbody .size, #download-list tbody .date-file{width:17%;max-width:170px;text-align:center;vertical-align:middle;font-size:0.938em;}
#download-list tbody .size{text-align:right;}
#download-list tbody .size abbr{font-style:italic;color:#777;}
#download-list tbody .zip .name a:first-child:before{background-position:0 0;}
#download-list tbody .xml .name a:first-child:before{background-position:0 -20px;}
#download-list tbody .xls .name a:first-child:before{background-position:0 -40px;}
#download-list tbody .web .name a:first-child:before{background-position:0 -60px;}
#download-list tbody .vcf .name a:first-child:before{background-position:0 -80px;}
#download-list tbody .txt .name a:first-child:before{background-position:0 -100px;}
#download-list tbody .sys .name a:first-child:before{background-position:0 -120px;}
#download-list tbody .swf .name a:first-child:before{background-position:0 -140px;}
#download-list tbody .psd .name a:first-child:before{background-position:0 -160px;}
#download-list tbody .pps .name a:first-child:before{background-position:0 -180px;}
#download-list tbody .png .name a:first-child:before{background-position:0 -200px;}
#download-list tbody .pic .name a:first-child:before{background-position:0 -220px;}
#download-list tbody .pdf .name a:first-child:before{background-position:0 -240px;}
#download-list tbody .nn .name a:first-child:before{background-position:0 -260px;}
#download-list tbody .msg .name a:first-child:before{background-position:0 -280px;}
#download-list tbody .media .name a:first-child:before{background-position:0 -300px;}
#download-list tbody .fla .name a:first-child:before{background-position:0 -320px;}
#download-list tbody .exe .name a:first-child:before{background-position:0 -340px;}
#download-list tbody .chm .name a:first-child:before{background-position:0 -360px;}
#download-list tbody .cdr .name a:first-child:before{background-position:0 -380px;}
@media screen and (max-width:600px){
  #download-list tr{display:block;border-top:0px solid var(--color-border);}
  #download-list td{display:inline-block;border:0;}
  #download-list tbody td.name{display:block;}
  #download-list tbody td.date-file{min-width:50%;text-align:left;}
  #download-list tbody td.size{min-width:50%;}
}

/* ASK ABOUT LINK - redirects to contact panel */
#ask-about-link{padding:.8em 0;}
#ask-about-link a{color:var( --color-divider);}
#ask-about-link a:before{display:inline-block;content:'';width:24px;height:24px;margin-right:.5em;background:url('img/ask-question.png') no-repeat 0px 0px;vertical-align:middle;}
#ask-about-link a:hover{color:var( --color-divider);}
#ask-about-link a:hover:before{background-position:0px 100%;}



/* CONTACT-PANEL */
.contact-panel{padding:1.5rem 0;border-top:0px solid var(--color-border);border-bottom:0px solid var(--color-border);}

/* COMMENTS */
#comments{padding:1.5rem 0;border-top:0px solid var(--color-border);}
#comments h2{padding-bottom:1rem;color:var(--color-bg2);font-size:1.5rem;font-weight:normal;border-bottom:0px solid #eff0f3;}
#comments article{width:100%;margin:1rem 0;padding-bottom:1rem;border-bottom:0px solid #eff0f3;}
#comments header{margin-bottom:.5rem;}
#comments h3{display:inline-block;font-size:1rem;color:var( --color-divider);}
#comments time{float:right;color:var(--color-border);font-size:0.875rem;}
#comments p{font-size:0.875rem;line-height:1.5em;}
#comments .msg{margin:2rem 0 3rem;}
@media screen and (max-width:1023px){
  #comments .msg{background-image:none;}
}
#comments-form legend{padding-bottom:1.5rem;font-size:1.25rem;color:var( --color-divider);}
.comments-count{display:block;padding:0.3em 0;color:var(--color-text);}
/*qtf*/
.download-list-container { width: 100%; }
.download-list-container .header, .file-entry { padding: 0em; clear:both; }
.file-entry.default-icon{margin:0em auto;}
.file-info { display: flex;justify-content: space-between;align-items: center;gap: 8px;padding:0;padding-right:1em;border-bottom: 0px solid var(--color-bg3);justify-content: space-between;border-radius: 1px;height:70px;}
.file-entry.media:first-child{border-top:1px solid var(--color-bg3);}
.file-entry.media{border-bottom:1px solid var(--color-bg3);}
.expanded .file-info{ background:var(--color-bg3);}
.file-entry.media.expanded .file-info{border-right:0px solid var(--color-bg3);}
.file-entry.media.expanded:first-child{border-top:1px solid var(--color-bg3);}
.file-entry.media.expanded{border:1px solid var(--color-bg3);border-top:0;}
.file-entry.media .file-info {padding:0 1em;}
.file-info:hover{} 
.file-description {font-size:.5em;order:5;}
.file-details { display: flex; gap: 20px;order: 8;display:none; }
.file-id{display: flex; gap: 20px;align-items:center;justify-content:start;order:2; display:none;}

.audio-player { width: 0px; height: 50px; margin: 0;order:6; position:relative ;z-index:0;} 
.time-display { margin: 10px 0; text-align: center; order:3;font-size: .7em;display:flex;}
.file-info .controls { display: flex; gap: 10px;position:relative;z-index:0;order:2; flex-direction:column;padding:0 1em;width: 50px;justify-content: flex-start;align-items: baseline; margin:0 auto;}
.file-info .controls button { padding: 0; cursor: pointer; background:none;color:var(--color-text);}
.file-info .controls .hidden { display: none; }
.file-info .controls .selected { background-color: var(--color-text); color: white; border: none; }
.song{display:none;position:relative;border:1px solid var(--color-secondary);border-top:0;}
.download-button{bottom: 10px; right: 10px; display: inline-block; padding: 5px 10px; color: rgb(125, 125, 125); text-decoration: none; border-radius: 5px; font-size: 1em; }
.download-button:hover{background-color:none;color:var(--color-hover);}
.song-foot{display:flex;}
.file-description {font-size:.9em;width: 100%;line-height: 1.2em;}
.file-description span{font-size:.7em;}
.file-info .image img,.file-info .image {height:50px;order: 1;width:50px;} 
.favorites.playlist-player .file-info .image img{margin-left:6px;}

.album-link{position:absolute;right:100px;}
.fa-solid, .fas{font-size:1em;width:auto;color:var(--color-bg2);}
.file-entry.selected .file-info{background:var(--color-gray2);}
#play-all-button, #next-button, #prev-button{font-size: 1em;background: none;padding: 0 .3em;color:var(--color-bg);border: 0px solid var(--color-bg);opacity:.7;margin: 0;order:99;}
#next-button{font-size:2em;}
#play-all-button:hover, #next-button:hover, #prev-button:hover{background:none;color:var(--color-gray);opacity:1;}
.current-time{font-weight:600;color:var(--color-bg);width:60px;opacity:0;}
.file-entry.selected .current-time{opacity:1;}
.file-entry.selected .current-time, .file-entry.selected .time-display, .file-entry.selected .bpm{color:var(--color-white);}
#current-composer{font-size:.7em;} 
.download-list-container{width:100%;}


.playlist-player label, .favorites-playlist-player label{display:block;}
.playlist-player label, .favorites-playlist-player label{font-weight:300;color:var(--color-white);padding:0 .5em;font-size:10px;}
.playlist-player .icon-play, .playlist-player .icon-pause, .playlist-player .icon-forward, .favorites-playlist-player .icon-play, .favorites-playlist-player .icon-pause, .favorites-playlist-player .icon-forward{fill:var(--color-bg);}
.playlist-player .image img, .favorites-playlist-player .image img{width:50px;}
.playlist-player.fs, .favorites-playlist-player.fs{flex-direction:column;justify-content: center;}
.controls.playlist-player, .controls.favorites-playlist-player{width: 100%; position: fixed; bottom: 0; left: 0; display:flex;align-items:center;background: var(--color-special); color:var(--color-white); padding: 5px 1em; z-index: 990;justify-content: space-between;background-image: url('img/fonaBG.svg');background-size: cover;}
.controls.playlist-player.fs, .controls.favorites-playlist-player.fs{background: rgba(0,0,0,0.9);backdrop-filter: blur(100px);-webkit-backdrop-filter: blur(26px);}
.controls.playlist-player .buttons, .controls.favorites-playlist-player .buttons{margin-right:1em;text-align:center;width:180px;}
.controls.playlist-player .image, .controls.favorites-playlist-player .image{margin-right:1em;}
.contact .form-full{height:auto;}
.fs .controls.playlist-player .buttons, .fs .controls.favorites-playlist-player .buttons{border:1px solid var(--color-bg2);}
.playlist-player button, .favorites-playlist-player button  { border: none; background: none;  cursor: pointer; color:var(--color-white);font-size: 2.3em;}
.playlist-player button i, .favorites-playlist-player button i { color:var(--color-gray); } 
.controls.playlist-player i, .controls.favorites-playlist-player i{color:var(--color-white);}
.playlist-player, .favorites-playlist-player { display: block; align-items: center; margin-bottom: 0px; }
.controls.favorites-playlist-player .file-entry{border-bottom:1px solid #aaa;}



.album-video{width:50px;}
.fs .album-video{width:300px;margin:1em auto;}

.download-list-container .audio-player .album-thumbnail { margin-right: 10px; font-size: 2rem; }
.download-list-container .audio-player .wavesurfer-container { flex-grow: 1; }
.download-list-container .audio-player img.album-thumbnail { width: 50px; height: 50px; object-fit: cover; border-radius: 5px; }
.loop{right:1em;justify-content: center;align-items: center;display: flex;gap: 1em;flex-direction: column;font-size:.7em;width:80px;flex-direction:row;}
.fa-toggle-on{opacity:.5;}
.fa-toggle-off{opacity:1;}
#logo #slogan{display:none;}
.album-info h2{font-size:15px;display:none;}
 
/* licence popup CSS */
.download-popup {display:none;position:absolute;z-index:990;left:0;top:0;width:100%;height:auto;overflow:auto;} 
.download-popup .fa-solid, .download-popup .fas{font-size:2em;width:auto;color:var(--color-onwite);}
.playlist-popup{ position:absolute;z-index:3500;left:0; background:none; margin: 0 auto; padding: 0px; height:auto;border:0; width: 100%; display: flex; gap: 1em; align-items: center; justify-content: space-between;border-radius:10px;}
.playlist-popup button{border-radius:5px;border:1px solid var(--color-text);padding:5px;}
.playlist-popup .popup-content input, .playlist-popup .popup-content select{background:var(--color-bg);}
.playlist-popup button:hover{background:var(--color-text);color:var(--color-bg2);}
.playlist-popup .popup-content{background:var(--color-bg2);flex-direction:column;}
.playlist-popup .popup-content div{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;align-items: center; width: 100%;gap:1em}
.playlist-popup .popup-content button{border:1px solid var(--color-text);} 
.playlist-popup .popup-content button:hover{background:var(--color-text);color:var(--color-bg2);}
.popup-content{ background-color: var(--color-bg2); margin: 0 auto; padding: 20px; height:auto;border: 1px solid var(--color-border); width: 90%; display: flex; gap: 1em; align-items: center; justify-content: space-between;border-radius:10px;}
.popup-button{background:none;}
.popup-content h3{display:flex;flex-direction:column;}
.popup-content h3 span{font-size:.7em;}
.popup-content .image img{height:100%;}
.popup-content p{display:flex;flex-direction:column;gap:1em;justify-content:center;align-items:center;font-size:.7em;}
.pages-plans{display:flex;flex-direction:column;width:100%;justify-content:center;}
.popup-content .close-popup{posiiton:absolute;top:1em;right:1em;}
.popup-content .first, .popup-content .second{display:flex;flex-direction:column;}

.playlist-popup-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:400;display:none;}

#container { position: relative; overflow:hidden;}
#container.show-popup::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: block;
}

.audiofiles-short-list{width:90%;margin:0 auto;}
.audiofiles-short-list h2.head{font-size:4em;margin:2em auto 0;text-align:Center;border-bottom:1px solid var(--color-border);}

.close {color:var(--color-secondary);float:right;font-size:28px;font-weight:bold;}
.close:hover, .close:focus {color:black;text-decoration:none;cursor:pointer;color:var(--color-secondary);opacity:.8;}
.cancel-button {background-color:var(--color-hover);color:white;border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;}
.cancel-button:hover {background-color:#d32f2f;}

#loop-status{color:#fff;opacity:.5;}
#loop-status.selected{opacity:1;background:none;}


 .playlist-popup .popup-content select {
    width: 200px; /* Szerokość selecta */
    padding: 5px; /* Margines wewnętrzny */
    font-size: 14px; /* Rozmiar czcionki */
    border: 1px solid #ccc; /* Obramowanie */
    border-radius: 4px; /* Zaokrąglenie rogów */
    appearance: none; /* Ukrycie domyślnego stylu przeglądarki */
    background-color: #fff; /* Kolor tła */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 0L0 2h4z"/></svg>'); /* Strzałka */
    background-repeat: no-repeat; /* Bez powtarzania tła */
    background-position: right 10px center; /* Pozycjonowanie strzałki */
    background-size: 10px; /* Rozmiar strzałki */
}

 .playlist-popup .popup-content select:focus {
    outline: none; /* Usunięcie domyślnego obramowania przy focus */
    border-color: #007BFF; /* Kolor obramowania na aktywny */
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5); /* Efekt podświetlenia */
}
.playlist-popup .popup-content button.close-popup:hover{background:none}


.song-title{color:var(--color-text);}
.clame {display:flex;justify-content: center;}
.clame h2 strong{color:var(--color-text);} 
.widgets-1 { position: fixed; margin: 0 auto; text-align: left;  width: 100%; height: 100%; z-index: 999; background: black; display: flex; justify-content: center; align-items: center; }
#settings{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);z-index:1000;color:var(--color-text);padding:20px;box-sizing:border-box;}
#settings .close{position:absolute;top:20px;right:20px;font-size:40px;cursor:pointer;}
.settings{margin: 0 0 0 0;color:var(--color-secondary);display:block;}
.settings:hover{color:var(--color-text);}
.composer{display:none;}

.menu-1.menu-top{margin-left:auto;display:none;}content
#sidr-main{background:var(--color-bg);color:var(--color-text);}
.sidr{background:var(--color-bg);}
.sidr ul{margin-top:1em;}
.sidr ul li a, .sidr ul li span{color:var(--color-text);}
.sidr ul li a:hover, .sidr ul li span:hover{color:var(--color-bg);}
.album-description{display:flex;flex-direction:column;}
.album-description .column-1, .album-description .column-2{width:100%;}
.sidr ul li:hover{background:var(--color-text);color:var(--color-bg);}
.sidr-class-level-0-el.sidr-class-selected{background:var(--color-text);color:var(--color-bg);}
#sidr-id-slogan {font-size:.5em;}
.hamburger--stand.is-active .hamburger-inner::before, .hamburger--stand.is-active .hamburger-inner::after{color:var(--color-text) !important;}
.parallax-window{;background: ransparent;clear:both;}
.scene-parallax.images-6{height:200px;margin:50px 0;position:relative;clear:both;margin-bottom:0px;}
.scene-parallax.images-7{height:500px;margin:0 auto 20px;position:relative;clear:both;}
#layers5 .scene-parallax{margin-top:-100px !important;}
.page-description{width:90%;margin:0 auto;}
.recordCount{display:flex;width:95%;margin:0 auto;gap:1em;justify-content: center;flex-direction:column;align-items:center;}
.fullscreen-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; }
.fullscreen-popup .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 80%; background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
.fullscreen-popup .audio-player-fullscreen { width: 100%; height: 100%; }
.fullscreen-popup .close { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px; }
.fa-heart.fa-solid, .fa-heart.fa-regular{font-size:1em;order:9;}
.foot-list{width: 90%;margin:0 auto;display: flex;justify-content: center;}
.audiofilesList {width: 90%;margin:2em auto;max-width:1440px;}
.audiofiles-list{width: 90%;margin:0 auto;max-width:1440px;}
.audiofiles-list i{color:var(--color-gray);}
.song-info{width:40%;text-align:center;}
.composers img, .about-composer img, .page-composers img{border-radius:50%;}

.volume{width:100px;order:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap: 8px;}
.volume label{font-size:12px;padding: 0 5px;}
#volume-control{width:50px;height:2px;background:var(--color-white);}
.user-info{width:auto;color:var(--color-text);padding:.5em 0;display:flex;justify-content:end;}
.user-info a{color:var(--color-text);margin: 0 .3em 0 0;}
.user-info a:hover{color:var(--color-text);opacity:.5;text-decoration:none;}
.sidr-class-logged{margin-top:1em;}
.promo .slider.quick-slider, .widgets-list.widgets-1, .promo-slider.quick-slider-slide, .promo .quick-slider img, .promo .quick-slider-slide{height:100% !important;}

 .login-page .widgets-list ul{height:100%}
#menus{width: auto;display: flex;justify-content: center;align-items: center;}

#menus .fa-regular,  #menus .far, #menus .fa-solid {font-size: 25px !important;}
#settings .fas,  #settings .fa-regular, #settings .far{font-size: 56px !important;}
#menus .fa-solid.fa-arrow-right-from-bracket{}
#menus .fas.fa-search{margin:0 .2em;}
.noLink img:hover{opacity:1 !important;}
.user-files-table{width:100%;border: 1px solid var(--color-hover);display: flex;flex-direction: column;}
.user-files-table tr.wav{flex-direction:row;justify-content:start;}
.user-files-table tr.wav td.file-name{width:400px;font-size:15px;}
.user-files-table thead{background:var(--color-gbg);color:var(--color-text);}
.user-files-table thead th{display:flex;justify-content:center;align-items:center;}
.user-files-table thead a {color:var(--color-text);text-decoration:underline;}
.user-files-table tr td{padding:.5em;}
.user-files-table .image img{width:50px;}
.user-files-table th{font-size:12px; display:block; white-space:wrap; max-width: 100%;}
.user-files-table tr td, .user-files-table th{display:flex;justify-content:center}
.user-files-table tr td.id, .user-files-table th.id{width:40px;order:1;}
.user-files-table tr td.space, .user-files-table th.space{width:50px;order:1;}
.user-files-table tr td.file-name, .user-files-table th.file-name{width:200px;order:2;}
.user-files-table tr td.song-title, .user-files-table th.song-title{width:200px;order:3;}
.user-files-table tr td.album, .user-files-table th.album{width:70px;order:4;}
.user-files-table tr td.totaltime, .user-files-table th.totaltime{width:50px;order:5;}
.user-files-table tr td.instruments, .user-files-table th.instruments{width:100px;order:6;display:flex;}
.user-files-table tr td.bpm, .user-files-table th.bpm{width:50px;order:7;display:flex;flex-direction:column;}
.user-files-table tr td.performance, .user-files-table th.performance{width:40px;order:8;}
.user-files-table tr td.key-song, .user-files-table th.key-song{width:100px;order:9;}
.user-files-table tr td.zaiks, .user-files-table th.zaiks{width:150px;order:10;display:flex;flex-direction:column;}
.user-files-table tr td.download, .user-files-table th.download{width:40px;order:11;}
.user-files-table tr td.available, .user-files-table th.available{width:40px;order:12;}
.user-files-table tr td.likes, .user-files-table th.likes{width:40px;order:13;}
.user-files-table tr td.downloads, .user-files-table th.downloads{width:40px;order:14;}
.user-files-table tr td.zaiks-registration, .user-files-table th.zaiks-registration{width:100px;order:10;display:flex;flex-direction:column;}
.user-files-table tr td input.zaiks-registration-input, .user-files-table tr td input.zaiks-id-input{width:120px;}
.user-files-table tr td.zaiks-name, .user-files-table th.zaiks-name{width:200px;order:10;display:flex;flex-direction:column;}
.smallplayer{order:9;}



.user-downloads-table{width:100%;border: 1px solid var(--color-hover);}
.user-downloads-table tr:nth-child(even){background:var(--color-bg2);border:none;}
.user-downloads-table thead{background:var(--color-gbg);color:var(--color-text);}
.user-downloads-table thead a {color:var(--color-text);text-decoration:underline;}
.user-downloads-table tr td{vertical-align: middle;padding:.5em;text-align:center;}
.user-downloads-table i{color:var(--color-gray);}
.user-downloads-table .image img{width:50px;}
.song-list input[type="submit"], .song-list button[type="submit"]{float:right;margin:1em;background:var(--color-gray2);}
.file-name{color:var(--color-text);}
.song-list input[type="text"], .song-list input[type="password"], .song-list input[type="file"], .song-list input[type="email"], .song-list select, .song-list textarea{width:90px;background-color:var(--color-primary);color:var(--color-bg);border-color:var(--color-gray);}
.song-list input[type="text"]{width:200px;padding:.5em 1em;background:var(--color-bg);color:var(--color-text);}
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);backdrop-filter: blur(100px);-webkit-backdrop-filter: blur(30px); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 0; border: 0px solid #888; width: 80%;border-radius:20px; }
.left-content{padding:1em;}
.search-modal{display:flex;justify-content:center;align-items:center;}
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
.modal-content #search-form .field{font-size:3em;padding:.8em;width:100%;margin:0;}
.modal-content #search-form fieldset{width:100%;}
.modal-content #search-form{display:flex;justify-content:center;align-items:center;}
.modal-content .fa-solid, .modal-content .fas{font-size:4em;}
.modal-content .fas.fa-search{margin:0 auto 0 0;}
.showWaveFiles button{padding:1em;background:var(--color-bg2);margin:.3em;}
.navi-list{display:flex;justify-content:start;align-items:center;gap:1em}
.user-files-table tr.paired{background:var(--color-bg);}
tr.wav {display: none;}
tr.wav.odd{background:var(--color-bg2);}
tr.wav.even{background:var(--color-bg);}
tr.mp3{background: var(--color-hover);border: 1px solid var(--color-bg2);border:1px solid var(--color-bg);}
tr.mp3.odd{background:var(--color-bg2);}
tr.mp3.even{background:var(--color-bg);}
tr.expanded .file-name {font-weight: bold; color: green;}
tr.wav {display: none;}
tr td.file-name{width:150px;word-wrap: break-word;   word-break: break-word;   overflow-wrap: break-word;      hyphens: auto; font-size:.7em; }
tr.mp3:nth-child(3n){opacity:4;}
tr td.instruments{width:300px;}
.search fieldset {border: none;padding: 0;margin: 0; }  
.search label {display: inline-block;margin-right: 15px;font-size: 14px; } 

.search input[type="date"], .search input[type="checkbox"] {padding: .1em .7em;font-size: 14px;margin-left: 5px; }  
.search input[type="submit"], .search input[type="submit"][name="resetFilter"] {padding: 5px 10px;font-size: 14px;margin-left: 10px;cursor: pointer; }  
.search {margin-bottom: 20px; }
#sDateTo, #sDateFrom{display:inline-flex;font-size:1.2em;}
.available i{font-size:1em;}
.favorite{order:90;display:none;}
.favorite span{padding:0 .2em;margin:1em auto;font-size:12px;text-align:center;}
.popup-button{order:91;}
.upload-profile-foto{display:flex;flex-direction:column;}
.profile-image{display:flex;flex-direction:column;margin-bottom: 2em;}
.profile-image img{margin-right:1em;margin-bottom:1em;}
.profile-image ul{display:flex;flex-direction:column;gap:.4em 0;margin-top:2em;}
.profile-image ul li{display:flex;flex-wrap:wrap;gap:1em .3em}
.form.form-full.register .profile-image{flex-direction:column;}
.fa-regular.fa-pen-to-square.edit-icon{opacity:.3 !important;}
.fa-regular.fa-pen-to-square.edit-icon:hover{opacity:1 !important;}
.zaiks{display:flex;flex-direction:column;justify-content: center; align-items: center; gap: 0 .1em;}
sup{font-size:9px;padding:0 0 0 5px;color:var(--color-bg);}
#icon-cd sup{padding:0 5px 0 0}
.user-info .fa-solid.fa-heart sup{font-size:9px;padding:0 .4em;}
.fa-solid.fa-file-arrow-down sup{font-size:9px;padding:0 .4em;}
.fa-solid.fa-user sup{font-size:9px;letter-spacing:.2em}
.fa-solid.fa-compact-disc sup{font-size:9px;padding:0 .4em;}
#search-form input[type="text"] {border:0;}
#search-form input[type="text"]:focus{box-shadow:none !important;border:0 !important;outline:0 !important;}
/*
.tape-container {background: url('img/tapeBoxBW.svg') no-repeat center center; position: width: 110px; height: 85px; margin: 0 auto;display: none;display: flex;justify-content: center;align-items:center; gap: 1em;    padding-bottom: .7em; } 
.tape-reel {width: 25px;height: 25px;background: url('img/tapeBW.svg') no-repeat center center;background-size: contain;animation: spin 4s linear infinite; }  @keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); } }  
.tape-reel.paused {animation-play-state: paused; }
*/
.tape-container {width: 110px; height: 50px; margin: 0;display: flex;display: none;justify-content: center;align-items:center; gap: 1em; position:relative;} 
.tape-reel {width: 50px;height: 50px;background: url('img/tapeBW.svg') no-repeat center center;background-size: contain;animation: spin 4s linear infinite; }  @keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); } }  
.tape-reel.paused {animation-play-state: paused; }
.file-entry{position:relative;}
 .file-entry.media {transition: height 0.3s ease;position: relative;min-width: 360px; }  
 .audio-player.large { min-width: 100%;width: 100%;height: 150px; /* Adjust height as needed */margin-top: 20px; }  
 .audio-player.small {width: 100%;height: 50px; }  .file-entry.expanded {height: auto;padding-bottom: 0px; }  
 .expand-player {margin-left: 10px;cursor: pointer; }  
 .file-info {position: relative;border-bottom: 1px solid var(--color-bg2); }  
 .file-info.looped, .file-entry.selected .file-info.looped, .file-entry.selected .file-info.looped wave{background:var(--color-looped);}
 .file-entry .expand-player {position: absolute;top: 5px;right: 10px; }   

.playlist-player .image img, .favorites-playlist-player .image img{width:50px;}
.fs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1em; }
.fullscreen-exit { position: fixed; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.8); border: none; cursor: pointer; padding: 10px; font-size: 24px; z-index: 10000; border-radius: 50%; }
.fullscreen-exit i { color: #000; }
.tape-reel, .tape-container:before {display:none;}
.player-settings{display:flex;}

.fs .tape-reel {width: 100px;height: 100px;display:block;}
#loop-playlist-button {font-size:14px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap: 0 1em}
.controls.playlist-player{display:flex;gap:1em}
.fs .loop{position:relative;display:flex;flex-direction:row;}
.fs .image{order:1;}
.fs .album-info{order:0;opacity:.3;display:flex;}
.fs .song-info{font-size:1em;flex-direction:column;display:flex;width:100%;order:3;}

.fs .tape-container {width: 230px; height: 100px;order:4;opacity:.3;}
.fs #fullscreen-button{display:none;}
.playlist-player.fs, .favorites-playlist-player.fs{flex-direction:column;justify-content: center;}
.playlist-player .head, .favorites-playlist-player .head{display:none;}
.playlist-player.fs .head, .favorites-playlist-player.fs .head{display:flex;flex-direction:column;order:-1;opacity:.3;font-weight:200;font-size:15px;letter-spacing:.3em;justify-content:center;align-items:center;}
.fs #current-composer{font-size:1em;justify-content: center; align-items: center; display: flex; padding: 0; flex-direction:column;line-height:1.1em;} 
.fs #current-composer label{font-size:.4em;font-weight:300;display:block;}
.fs #current-track{display:flex;flex-direction:column;justify-content: center; align-items: center;gap:.5em;font-size:2em;}

.fs .clock{display:block;width:400px;height:400px;background:none;}
.clock{height:auto;width:auto;width:70px;height:70px;}
.fona-clock, .clock{display:none;position:absolute;}
.fs .fona-clock { display:block;width: 400px; height: 400px; border: 10px solid var(--color-black); border-radius: 50%; position: absolute; background-color: var(--color-black);z-index:991; }
.fs .fona-clock div { position: absolute; background-color: var(--color-text); top: 50%; left: 50%; transform-origin: 50% 100%; transform: translateX(-50%) translateY(-100%); }
.fs .hour { width: 10px; height: 100px; background-color: #333; }
.fs .minute { width: 4px; height: 140px; background-color: #555; }
.fs .second { width: 2px; height: 180px; background-color: red; }
.fs .fona-clock::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background-color: var(--color-black); border-radius: 50%; transform: translateX(-50%) translateY(-50%); }

.fs .current-time-display{font-size:1.5em;order: 4;margin: 0 1em;opacity:.6;}
.fs .current-time-display #player-current-time{font-weight:600;}
.current-time-display #current-track-duration{font-weight:300;opacity:.4;}

.end-of-playlist-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center;
}

.end-of-playlist-modal .modal-content button {
    margin: 10px; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;
}

.end-of-playlist-modal .modal-content button:hover {
    background-color: #f0f0f0;
}

.fs.hidden {
    display: none;
}




.reset.nb.palette-light.nb-standalone{width:100%;height:100%;}
.palette-light .cc-nb-okagree, .palette-light .cc-nb-reject, .palette-light .cc-cp-foot-save{background-color:#ccc !important;}
/* pasek na dole ekranu - tylko baner; okno "Centrum ustawien cookie" ma byc modalem ( nizej ) */
.cc-nb-main-container{padding:0;background:#fff;position:fixed;bottom:0;z-index:600;width:100%;height:auto;}
.cc-nb-buttons-container button{padding:.5em 1em;margin:1em;}
.cc-cp-body{display:flex;min-height:0;}
.cc-cp-body-tabs{display:flex;flex-direction:column;flex:0 0 14em;width:14em;margin:0;padding:0;
  list-style:none;overflow-y:auto;}
.cc-cp-body-tabs li button{display:block;width:100%;height:auto;margin:0;padding:.8em 1em;text-align:left;}
.cc-cp-foot-byline{font-size:.55em;opacity:.6;}
.cc-nb-text{font-size:.7em;padding:1em;width:100%;text-align:left;}
.cc-cp-body-content{flex:1 1 auto;min-width:0;padding:1em 1.4em;font-size:.75em;text-align:left;overflow-y:auto;}
.cc-pc-head-close{padding:1em;margin:0 1em;}
.cc-pc-head-title, .cc-pc-head, .cc-pc-head-title-text{display: flex; padding: 0 1rem;justify-content:center; align-items:center;}
.cc-cp-foot-save{padding:.5em 1em;}
.cc-cp-foot-save:hover{background:#999;}
.cc-nb-title{font-weight:700;}
/* przelacznik ( "Aktywne / Nieaktywne" ) rysuje sama biblioteka pseudoelementami etykiety,
   a sam <input> ma byc niewidocznym uchwytem. Nasz globalny styl checkboxa ( ciemny kwadrat
   25x25 z ramka ) kladl sie na suwak i wygladalo to na zepsute - tu go zdejmujemy */
/* selektory musza byc od #preferences-center - biblioteka wstawia swoj <style> pozniej niz
   ten arkusz, wiec przy tej samej specyficznosci to ona wygrywa */
/* <input> chowamy zupelnie ( etykieta ma "for", wiec klikniecie w suwak i tak przelacza ),
   inaczej nasz globalny styl checkboxa kladl na suwaku ciemny kwadrat, a przy marginesach
   niewidzialne pole zostawalo nad suwakiem i lapalo kliki w tekst */
#preferences-center input[type="checkbox"].cc-custom-checkbox,
#preferences-center input[type="checkbox"].cc-custom-checkbox:checked{position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;border-radius:0;background:none;opacity:0;overflow:hidden;clip-path:inset(50%);}
/* slad klawiatury - skoro input jest schowany, obrysowujemy tor suwaka */
#preferences-center input[type="checkbox"].cc-custom-checkbox:focus-visible + label::before{
  outline:2px solid currentColor;outline-offset:2px;}
#preferences-center input[type="checkbox"].cc-custom-checkbox + label{display:inline-block;
  margin:1.2em 0 .4em;padding:0 0 0 56px;min-height:24px;line-height:24px;font-weight:700;}
/* biblioteka liczy suwak w "em", a tresc zakladki ma u nas mniejsza czcionke - kulka wychodzila
   dokladnie tej samej wysokosci co tor i nie dojezdzala do konca, wiec wymiary dajemy w px */
#preferences-center input[type="checkbox"].cc-custom-checkbox + label::before{top:0;left:0;
  width:44px;height:24px;border-radius:12px;}
#preferences-center input[type="checkbox"].cc-custom-checkbox + label::after{top:2px;left:2px;
  width:20px;height:20px;border-radius:10px;margin-left:0;}
#preferences-center input[type="checkbox"].cc-custom-checkbox:checked + label::after{margin-left:20px;}
.cc-cp-body-content-entry a{text-decoration:underline;font-weight:bold;}
.cc-cp-body-content-entry{display:block;}
.cc-cp-body-content-entry-title{margin:0 0 .4em;font-weight:700;}
.cc-cp-body-content-entry-text{margin:0 0 .8em;line-height:1.5;}
.cc-custom-checkbox input:hover,.cc-custom-checkbox input:selected{background:#eee;}
.cc-cp-body-tabs-item-link:hover, .cc-pc-head-close:hover{background:#000;color:#fff;}
.cc-pc-head-lang-select{display:none;}
.cc-pc-head-title-headline{font-size:1em;}
/* to musi dotyczyc wylacznie banera ( #nb ) - wczesniej bylo ".reset div" i ten sam
   "display:flex !important" rozwalal uklad okna z ustawieniami */
#nb div{display:flex !important;flex-direction:column;justify-content:flex-end}
.palette-light.nb{background:none !important;}

/* ---- okno "Centrum ustawien cookie": modal na przyciemnionym tle ---- */
/* "is-visible" w selektorze jest konieczne: chowaniem zajmuje sie biblioteka ( .pc-overlay{display:none} ),
   wiec regula bez tej klasy trzymalaby okno otwarte takze po zapisaniu ustawien */
#preferences-center.pc-overlay.is-visible{display:flex;align-items:center;justify-content:center;padding:1.5em;}
#preferences-center.pc-overlay{background:rgba(0,0,0,.5);}
.pc-dialog{position:relative;display:flex;width:min(60em,100%) !important;max-width:100% !important;
  max-height:85vh;}
.pc-dialog .cc-pc-container{position:static;display:flex;flex-direction:column;width:100%;max-height:85vh;
  overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35);}
.pc-dialog .cc-pc-head{flex:0 0 auto;border-bottom:1px solid #e3e3e3;}
.pc-dialog .cc-cp-body{flex:1 1 auto;}
.pc-dialog .cc-cp-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:.7em 1.2em;border-top:1px solid #e3e3e3;}

.cc-nb-buttons-container button{height:50px;}

.pc-dialog .cc-cp-body-tabs-item-link{padding:.8em 1.2em !important;}
.pc-dialog .cc-pc-head-title{display:flex;flex-direction:row !important;}
.palette-light .cc-cp-body-tabs, .palette-light .cc-cp-body-tabs{background:#fff !important;}

/* dopoki nikt nie wybral ustawien ciasteczek, klikniecie w strone podswietla pasek
   i pokazuje podpowiedz ( plugins/cookie-consent-gate.js ) */
.cookie-gate-hint{position:fixed;left:50%;bottom:7em;z-index:601;transform:translate(-50%,1em);
  max-width:min(34em,calc(100% - 2em));margin:0 0 .8em;padding:.7em 1.1em;border-radius:.4em;
  background:var(--color-text);color:var(--color-bg);text-align:center;font-size:.9rem;line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
.cookie-gate-hint.is-visible{opacity:1;transform:translate(-50%,0);}
#nb.is-asking .cc-nb-main-container{animation:cookie-gate-pulse 1s ease-in-out 2;}
@keyframes cookie-gate-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
  50%{box-shadow:0 0 0 3px var(--color-text);}
}
@media (prefers-reduced-motion:reduce){
  #nb.is-asking .cc-nb-main-container{animation:none;box-shadow:0 0 0 3px var(--color-text);}
}

/* telefon: okno na caly ekran, a zakladki jako pasek u gory zamiast kolumny */
@media screen and (max-width:760px){
  #preferences-center.pc-overlay.is-visible{padding:0;align-items:stretch;}
  .pc-dialog{width:100% !important;max-height:100vh;margin:0;}
  .pc-dialog .cc-pc-container{max-height:100vh;border-radius:0;}
  /* naglowek ustawia sie w kolumne sama biblioteka ( jej @media max-width:600px ) */
  .pc-dialog .cc-pc-head{padding:.5em .8em;}
  .pc-dialog .cc-pc-head-title{padding-left:0;}
  .pc-dialog .cc-pc-head-title-text{display:none;} /* adres serwisu - na telefonie nie ma na to miejsca */
  .pc-dialog .cc-pc-head-title-headline{margin:0;}
  .cc-cp-body{flex-direction:column;}
  .cc-cp-body-tabs{flex:0 0 auto;width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;}
  .pc-dialog .cc-cp-body-tabs-item{float:none;width:auto;border-right:1px solid #ccc;}
  .cc-cp-body-tabs li button{width:auto;padding:.7em 1em;white-space:nowrap;}
  .cc-cp-body-content{padding:.9em 1em;}
}



.file-entry.media.selected .song-title, .file-entry.media.selected .file-description{color:var(--color-white);}

.fs .image img{width:200px;margin:1em auto;}
.song-head{display:none;text-align:center;}
.fs .player-settings{margin-top:0em;order:10;}
.fs .buttons{order:9;margin:0 1em;}

#current-composer label, #current-track label{display:none;}
.songs-quantity{text-align:center;font-size: .7em;padding: 1em;}
.songs-time{margin:0 auto;font-size:12px;text-align:center;padding:1;margin-top:1em;}

.loop-toggle button{background:none;color:var(--color-text);opacity:1;}
.loop-toggle button.active {    opacity:.3;  }
.loop-toggle button.active i {    transform: rotate(90deg); transition: transform 0.3s ease; }

.loop-toggle button i {    cursor: pointer;}
.loop-toggle span{margin:0 1em;}
.loop-toggle{display:flex;margin-left: auto;margin-bottom: 1em;justify-content: right;align-items: end;}
.loop-toggle .icon.icon-rotate{order:100;}
.loop-toggle span{order:99;}

.tape-container:before {content: "";display: none;width: 70px;height: 2px;position: absolute;top: 2px;  background: linear-gradient(to right, #ffffff 50%, transparent 50%);background-size: 10px 4px;  border-radius: 50%;animation: dashmove .5s linear infinite; }  
.tape-container.paused:before {animation-play-state: paused; } 
.fs .tape-container:before {content: "";display: block;width: 140px;height: 4px;position: absolute;top: 2px;  background: linear-gradient(to right, #ffffff 50%, transparent 50%);background-size: 10px 4px;  border-radius: 50%;animation: dashmove .5s linear infinite; }  
.fs .tape-container.paused:before {animation-play-state: paused; }  
@keyframes dashmove {0% { background-position: 0 0; }100% { background-position: 20px 0; } /* Dopasuj do prędkości przesuwania */ }
#playlist-current-time-display, #playlist-total-time-display{display:none;}
.fs #playlist-current-time-display, .fs #playlist-total-time-display{display:block;}
img.composer-photo {display:none;}
.fs img.composer-photo {display:block;}
.bpm{order:4;display:flex;flex-direction:column;justify-content:center;align-items:center;width:50px;display:none;}
.bpm span{font-size:.2em;}

.song-list input[type="text"].instruments-input{width:290px;}
.song-list input[type="text"].key-song-input{width:60px;}

.info { padding: 10px; margin: 10px 0; border: 1px solid #ccc; background-color: #f9f9f9; color: #333; position: relative; border-radius: 4px; }
.info button { margin-top: 10px; padding: 5px 10px; cursor: pointer; border: none; background-color: #007bff; color: #fff; border-radius: 4px; }
.info button:hover { background-color: #0056b3; }

.circle.default{width:50px;height:50px;border-radius:50%;border:2px solid var(--color-text);background:white;}
.circle.black{width:50px;height:50px;border-radius:50%;border:2px solid var(--color-text);background:black;}
.share-popup { position: absolute;border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 1em; z-index: 1000; width: 450px; border-radius: 5px; top: -4em; right: 0; background:var(--color-gray);}
.share-popup-content { display: flex; align-items: center; justify-content: space-between; width:80%;}
.share-popup  label{color:var(--color-bg2);font-weight:300;font-size:.7em;padding:1em;}
input[type="text"].share-popup-link { flex: 1; margin-right: 10px; padding: 5px; border: 1px solid #ddd; border-radius: 3px;width:100px;order:1; background:var(--color-bg2);}
.share-popup-copy { background: none; border: none; cursor: pointer; padding: 5px; font-size: 24px;order:2; }
.share-popup-close { background: none; border: none; cursor: pointer; padding: 5px; font-size: 24px;position:absolute;top:0;right:0; order:3;}
.share-popup .fa-regular.fa-circle-xmark, .share-popup .fa-solid.fa-copy{color:var(--color-bg);}
.home-slider img{position:fixed;top:0;z-index:0;}
.latest-in-column {display:none;}
.details-expanded{height:0;overflow:hidden;transition:max-height 0.3s ease-out;clear:both;}
.file-entry.expanded .details-expanded{height:auto;}
.full-file-details{flex-direction:column;text-align:left;}

.full-file-details{display:flex;flex-direction:row;gap:1em}
.toggle-details, .toggle-details-for-users{display:flex;order:115;}
.toggle-details i{transition:transform 0.3s ease-out;}
.fa-chevron-down, .fa-chevron-up{font-size:17px;}

.download-for-plan-users{order:10;display:none;} 
.share{order:8}
.icon {  width: 24px;  height: 24px;  fill: currentColor; }
.icon-play, .icon-plus, .icon-pause, .icon-forward, .icon-toggle, .icon-check, .icon-xmark, .icon-compress, .icon-download, .icon-add-list, .icon-minus-circle, .icon-share, .icon-down, .icon-up, .icon-heart-solid, .icon-add-file, .icon-remove-file, .icon-heart-line, .icon-rotate, .icon-copy , .icon-lock, .icon-plus-square{width:25px;height:25px;fill:var(--color-text);}
.icon-copy,  .icon-cd, .icon-list, .icon-files, .icon-user, .icon-user-solid, .icon-log-out,  .icon-search, .icon-expand, .icon-close, .icon-toggle-off, .icon-toggle-on,  #menus .icon-heart-solid, #menus .icon-play, #menus .icon-headphones, .icon-edit{width:25px;height:25px;fill:var(--color-bg);}
td .icon-edit{width:20px;height:20px;fill:var(--color-text);float:right;opacity:.5;min-width: 20px;}
.icon-settings{width:8px;height:25px;fill:var(--color-bg);}
 .icon-close{width:40px;height:40px;}
 .fs .icon-play, .fs .icon-pause, .fs .icon-forward{fill:var(--color-text) !important;}
 #icon-minus-square{width:25px;height:25px;fill:red;}
 .icon-svg{width:25px;height:25px;opacity:.5;}
.add-to-playlist{order:7;color:#000;opacity:.7;background:none;position:absolute:left:0;}
.remove-from-playlist .icon-minus-square{width:20px;height:20px;fill:var(--color-bg);}
.remove-from-playlist, .delete-playlist{order:20;margin-left:2em;margin-right:1em;}
.delete-playlist .icon-minus-square{width:20px;height:20px;fill:var(--color-bg);}
.icon-minus-circle{fill:var(--color-bg2)}
.icon-minus-circle:hover{fill:var(--color-grey2)}
.add-to-playlist img{width:25px;height:25px;}
.general-files-time, .general-files-number{width: 100%;display: flex;justify-content: center;align-items: center;font-size: 2em;flex-direction:column;}
.general-files-time span, .general-files-number span{font-weight:600;margin:0 .5em;}
 #icon-cd-1,  #icon-search-2{fill:var(--color-text);margin-right:.5em;width:40px;height:40px;}
 .icon.icon-plus{width:25px;height:25px;color:var(--color-text) !important;}
 #settings .icon-close{fill:var(--color-text);width:40px;height:40px;position:absolute;top:2em;right:2em;}
.icon-search{margin:0 .5em;}

.icon-2.icon-cd{margin-left:7px;}
#page5 h1, #page14 h1{display:none;}

.full-file-details{clear:both;display:flex;margin:2em 1em 1em;gap:1em 2em}
.details-expanded .audio-player {    width: 100%;    height: 120px;padding:1em 0;}
.file-entry.expanded.selected .audio-player wave wave{background:var(--color-bg2);}
#order .form-full{height:auto;}
.audiofilesList .fa-solid, .audiofilesList .fas, .audiofilesList .fa-heart.fa-solid, .audiofilesList .fa-heart.fa-regular{color:var(--color-gray);}
.audiofilesList .fa-lock{font-size:.8em;}
.images-column.images-1{margin-top:2em;}
.full-screen{display:flex;order:90;margin:.5em;padding:0 1em;}
.fs .full-screen{display:none;}
.audiofilesList .image img{width:50px;height:50px}
.file-date, .file-size, .file-id, .file-plays{text-align:left;}
.file-info .audio-player{display:block;}
.details-expanded .audio-player{display:block;}
.breadcrumb .fa-compact-disc{color:var(--color-text);margin-right:.5em;font-size:2em;}
.breadcrumb .fa-compact-disc a:hover{color:var(--color-text);opacity:.5;}


.tabs{display:flex;justify-content:center;align-items:center;gap:1em;margin:0 auto;}
.tabs .title a{font-size:2em;font-weight:600;padding:1em .2em;text-decoration:none;}
.search-files-form{margin: 0 auto 1em;width:100%;display: flex;justify-content: center;gap: .2em;padding:0 1em;}
.search-files-form input[type="text"]{padding:.5em;}
/* UWAGA: nie pisz regul po samej klasie ".reset" - ma ja korzen okna zgody na ciasteczka
   ( plugins/cookie-consent.js ), wiec taki styl malowal cale okno na czerwono.
   Przycisk "wyczyść" w wyszukiwarce ma wlasna regule: #searchForm button.reset */

#content:before{display:none;}
.recordsPerPage{margin-bottom:1em;}
.loading-indicator{display:none;position:absolute;padding:10px;right:100px;z-index:990;top:0;font-size:20px;color:var(--color-gray);text-align:center;}
.file-entry.media.selected .loading-indicator{background-color:none}

        .spinner {
   border: 4px solid rgba(0, 0, 0, 0.1);
   border-left-color: #000;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   animation: spin 1s linear infinite;
   background:none;
        }
        @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
        }


@media screen and (min-width:670px){
 
}

@media screen and (min-width:960px){
  .pages-gallery .page{width:40%;}
  .pages-gallery:after{content:"";} /* so last row is align to left */
  .albums{display:flex;justify-content:center;flex-direction:column} 
  .albums .pages-gallery{flex-direction: row;display: flex;justify-content: center;align-items: center;width: auto;margin: 0 auto;}
  .albums .pages-gallery .page{width:15%;margin:0;padding:0;}
  .albums #content li img{width:100%;margin:0;padding:0;}
  .albums .head a, .subscribe .head a, .composers .head a{font-size: 4em;color: var(--color-gray);font-weight: 900;line-height:2em;}
  .subscribe .head a strong, .albums .head a strong, .composers .head a strong{color:var(--color-gray2);}

.latest-in-column, .download-for-plan-users, .favorite{display:block;}
.bpm{display:flex;}
.latest-in-column .pages-5{display:flex;flex-wrap: wrap;justify-content:center;}
.latest-in-column .pages-5 .page{width:40%;}
    .songs-quantity{text-align:left}
.volume{flex-direction:row;width:100px;}
.file-info .image{order:-1;}
.file-description {font-size:.9em;order: 4;width: 450px;line-height: 1.2em;}
.file-details { display: flex; gap: 20px;order: 8;display:flex;} 
.file-zaiksId{margin:1em;}
.controls{width:100px;flex-direction:row;}
.file-info{gap:20px}
.images-1{clear:left;margin:.5rem 1.5rem 0 0;float:left;} 
.is-product #page h1, .is-product .heading-1{padding-top:0em;text-align:left;}
.is-product .breadcrumb{padding-top:3em;}
.breadcrumb{text-align:left;}
.images-6 .layer.custom-position.element{height:200px;}
.images-7 .layer.custom-position.element{height:500px;}
.file-description{display:block;}
.audio-player{width: 100%;display:block;}
.file-id{display: block;}
.time-display { font-size: 1em;}
.time-display.current { font-size: 1.2em;order:5;color:var(--color-bg);margin:0 ;}
.menu-top a{font-size:.9rem;}
#logo { padding: .7rem; display: flex; justify-content: center; align-items: center; gap: 0 1em; }
.pages-plans{display:flex;flex-direction:row;width:100%;justify-content:center;}
.loop{flex-direction:row;gap: .5em;padding:1em;width:100px;}

.albums .pages-gallery .page .image img {   transition: transform 0.3s ease;   scale: .75;}
.albums .pages-gallery .page .image:hover img { transform: scale(1.25); }

.popup-content{width:100%;}
.composer{display:block;}
.modal-content #search-form fieldset{display:flex;}
#logo #slogan{display:block;}
#search-form{display:block;}

.control{width:90%;}
.modal-content #search-form .field{width:90%;}
#powered .container{flex-direction:row;justify-content:space-between;align-items:center;}
.album-description{flex-direction:row;width:90%;margin:0 auto;}
.album-description .column-1, .album-description .column-2{width:50%;}
.audio-player wave{    overflow: hidden !important;background: none}
.details-expanded .audio-player wave, .file-entry.expanded .details-expanded .audio-player wave{ background: none;}
.details-expanded .audio-player wave wave canvas, .file-entry.expanded .details-expanded .audio-player wave wave canvas{ background: var(--color-bg3);}

.audio-player wave wave{background: var(--color-bg2);}
.file-entry.selected wave{    background: none;}
.file-entry.selected .time-display.current{color:var(--color-white);}
.file-entry.selected .details-expanded wave{    background: none;}
.file-entry.selected .audio-player wave wave {background: var(--color-gray2);}
.user-info{display:flex;}
.sidr-class-logged{margin-top:1em;display:none;}
.player-settings{display: flex; gap: 0 1em; justify-content: center; align-items: center; }
.pages-gallery{flex-direction:row;flex-wrap: wrap;}
.composer-info{display:flex;flex-direction:column;}

.song-head{display:block;}
.fs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1em; }
.fullscreen-exit { position: fixed; top: 10px; right: 10px;  background:rgba(1,1,1,0);border: none; cursor: pointer; padding: 10px; font-size: 24px; z-index: 10000; border-radius: 50%;border: 2px solid var(--color-text); }
.fullscreen-exit:hover{background:var(--color-bg);color:var(--color-text);}
.fullscreen-exit i { color: #000; }
.tape-reel{display:block;}
.fs .buttons button i{font-size: 8em;padding: .3em;}
.fs .tape-reel {width: 150px;height: 150px;}
.fs .tape-container {width: 330px; height: 150px;}
.song-info{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0 1em}
.fs .song-info{font-size:2em;flex-direction:column;display:flex;width:100%;}
.fs .loop{position:relative;display:flex;flex-direction:row;}
.fs #fullscreen-button{display:none;}

.fs #current-composer{font-size:.7em;justify-content: center; align-items: center; display: flex; padding: 0 0 1em; flex-direction:column;line-height:1.2em} 
.fs #current-composer label{font-size:.8em;font-weight:300;}
.fs #current-track{display:flex;flex-direction:column;justify-content: center; align-items: center;gap:.5em}
.fs #current-track label{font-size:.8em;font-weight:300;}
.fs .title-song{font-size:2.2em;line-height:1em;}
.fs .image img{width:200px;margin:1em auto;}
.fs .song-head{opacity:.3;}
.fs .player-settings{margin-top:0em;}
.fs .tape-container:before { width: 184px;height: 4px;   top: 2px;  animation: dashmove .5s linear infinite; }  
.tape-container:before{display:block;}
#playlist-current-time-display, #playlist-total-time-display{display:none;}
.fs #playlist-current-time-display, .fs #playlist-total-time-display{display:block;}
.form-full, #profile{display:flex; align-items:center;justify-content:center;margin-bottom:8em;height:100vh;}
.page .image img{max-width:100%;}
.images-column.images-1{margin-top:0em;}
#pages-related{clear:both;margin:0 auto;width:90%;display:block;}
#pages-related .page{width:10%;}
#pages-related h2{text-align:center;margin:2em auto 1em;}
.pages-gallery .page{width:20%;}
.user-page .form-full{height:auto !important;}
.is-parent-page-4 #content{display:flex;flex-direction:row;}
.is-product .column-left{width:20%;background:var(--color-bg3);display:flex;flex-direction:column;justify-content:start;align-items:center;padding-top:3em;}
.is-product .column-right{width:80%;}
.is-product #pages-related .page{width:40%;}
.is-product #pages-related .title{font-size:.7em;}
.is-product .column-left .images-1{margin:1em;}



#search-form{width:100%;margin:0;padding:1rem;display:none;}
#search-form .field, #search-form .btn{}
#search-form .field{min-width:100px;width:78%;background:none;color:var(--color-gray);}
#search-form .field, #search-form .btn{background:none;}
#search-form .fas.fa-search{line-height:0.8em;color:var(--color-gray);}
#search-form .fas.fa-search:hover{color:var(--color-dark);transition:all 0.5s ease;}
#search-form input[type="submit"], #search-form button[type="submit"]{border:none;}


#page1 #powered{top:85%;position:relative;z-index:7;width:100%;background:var(--color-bg);}
#page1 #foot{bottom:0}
.profile-image{flex-direction:row;}
.loop-button-on {color: green;}
.loop-button-off {color: gray;}
}

@media screen and (min-width:1920px){
.user-files-table tr td.instruments, .user-files-table tr td.performance, .user-files-table tr td.file-name, .user-files-table tr td.song-title, .user-files-table tr td.song-title, .user-files-table tr td.zaiks-name{width:200px;}
.user-files-table th.instruments, .user-files-table th.performance, .user-files-table th.file-name, .user-files-table th.song-title, .user-files-table th.song-title, .user-files-table th.zaiks-name{width:200px;}
.user-files-table tr td.zaiks-registration, .user-files-table th.zaiks-registration, input.zaiks-registration-input{width:100px;}
.home #content:before{top: -830px;}
.audiofiles-short-list{width:60%;margin:0 auto;}
.images-6 .layer.custom-position.element, .scene-parallax.images-6{height:500px;}
.images-7 .layer.custom-position.element, .scene-parallax.images-7{height:900px;}

      
}
@media screen and (min-width:2600px){
.user-files-table tr td.instruments, .user-files-table tr td.performance, .user-files-table tr td.file-name, .user-files-table tr td.song-title, .user-files-table tr td.song-title, .user-files-table tr td.zaiks-name, .user-files-table tr td.zaiks-registration{width:300px;}
.user-files-table th.instruments, .user-files-table th.performance, .user-files-table th.file-name, .user-files-table th.song-title, .user-files-table th.song-title, .user-files-table th.zaiks-name, .user-files-table th.zaiks-registration {width:300px;}
}


@media screen and (min-width:1280px){
.is-page-description #page div.content{width:1100px;}
.audiofiles-short-list{width:70%;margin:0 auto;}
.composer-info{flex-direction:column;text-align:left;}
}



@media screen and (min-width:960px){
.menu-top .level-0-menu{justify-content:flex-end;padding-right:.6rem;margin-left: auto;}
.pages-gallery{flex-direction:row;}
.file-info .image img,.file-info .image{display:block}
.link-library span{display:flex;}
.volume{display:flex;}
.file-date, .file-size, .file-id, .file-plays { text-align: center; font-size:.7em;}
#page{padding:0;}
.user-info a{color:var(--color-text);margin: 0 1em 0 0;}
.file-entry.expanded .details-expanded{height:300px;}
.full-file-details{flex-direction:row;}
.recordCount{flex-direction:row;justify-content: space-between;}
.controls.favorites-playlist-player .image{margin-left:6px !important;}
}

@media screen and (min-width:801px){ /* Bottom underline */
#search-form{background:none;}
.home #content:before{top: -630px;}
.playlist-popup .popup-content{flex-direction:row;}
    .cc-nb-buttons-container,.palette-light .cc-nb-text{width:90%;}
    #nb div{display:flex !important;flex-direction:row;justify-content:flex-end}
    .cc-nb-title-container{width:30%;font-size:.8em;}
.menu-top li{position:relative;}
.menu-top li:after{content:'';display:block;position:absolute;bottom:0;width:10%;height:5px;transition:all 0.5s ease;}
.menu-top li:hover:after, .menu-top .selected:after, .menu-top .selected-parent:after{width:99%;background:var(--color-bg2);}
.menu-top a{font-size:1rem;}
.search-files-form{gap:0 2em}
#profile.form-full, .askUs .form-full{height:100vh;}
.user-files-table tr td em{display:none;}
.user-files-table tr td.file-name{width:300px}
.general-files-time, .general-files-number{flex-direction:row;}
.is-product #content, .track-list-page #content{display:flex;flex-direction:row}
.left-column{order:1;width:300px;}
#page{order:2;width: 100%;padding-top:5em;}
.is-product #page, .track-list-page #page{width: 80%;}
.column-left{background:var(--color-bg3);}

}
@media screen and (max-width:800px){ /* Small screens only */

.images-column.images-1{margin-top:2em;}
 #profile.form-full, .askUs .form-full{height:auto;}
.form-full{height:auto;margin-top:200px;}
.form-full fieldset{width:90%;}
.menu-top .level-0-menu{flex-flow:column wrap;}
.menu-top a{font-size:1rem;border-bottom:0px solid var(--color-border);}
.menu-top a:before{content:"";display:block;float:left;width:16px;height:16px;margin:1px .6em 0 0;}
.menu-top a:hover:before, .menu-top .selected a:before, .menu-top .selected-parent a:before{background-position:center -80px;}
#page h1{text-align:center;padding:0 1em;}
.form-full dd{margin-bottom:7px;}
label{font-size:.8em;margin-right:1em;}
#profile .option{padding:1rem 0 1rem;display:flex;justify-content: start;align-items: center;}
.widgets-list #profile .save{margin-top:0;}
.login-page .widgets-list ul{height:auto;}
#page div.content{display:flex;width:100%;flex-direction:column;padding:2em;}
.user-files-table,  .user-files-table tbody,  .user-files-table tfoot, .user-files-table thead {display:flex;flex-direction:column;width:100%;}  
.user-files-table thead{display:flex;flex-wrap:wrap;width:100%;}
.user-files-table caption, .user-files-table tr, .user-files-table th, .user-files-table td{display:flex;flex-wrap:wrap;width:auto;}
tr td.file-name{font-size:15px;width:100%;}
.user-files-table tr{display:flex;}
.user-files-table tr td.toggle-icon{order:-20;font-size: 50px;padding:0;}
.page-description{width:100%;}
.user-files-table tr{justify-content:start;}
.user-files-table thead tr{display:none;}
.user-files-table tr td{display: flex;flex-direction: row-reverse;justify-content:start;}
.user-files-table tr td.file-name{width:100%}
.user-files-table tr td.song-title{width:100%;}
.user-files-table tr td.instruments, .user-files-table tr td.performance, .user-files-table tr td.key-song{width:100%;}
.user-files-table tr td.zaiks{width:100%;}
.user-files-table tr td em{display:block;}
.user-files-table tr td.album, .user-files-table th.album{order:1;}
.user-files-table tr td.id, .user-files-table th.id{order:2;}
.user-files-table tr td.totaltime, .user-files-table th.totaltime{order:3;width:100px;}
.user-files-table tr td.file-name{order:4;}
.user-files-table tr td.song-title, .user-files-table th.song-title{order:5;}
.toggle-icon2{order:-1;}
.left-column{order:2;width:100%;}
.general-files-time, .general-files-number{font-size:1em;flex-direction:row;flex-wrap:wrap;padding:0 3em;text-align:center;}
#page{order:1;padding-top:5em;}
.is-product #page{order:1;padding-top:0em;}
.fs .current-time-display{display:flex;font-size:1em;}
#current-composer, #current-track-title{display:none;}
.playlist-player label, .favorites-playlist-player label{display:none;}
.fs .playlist-player label, .fs .favorites-playlist-player label{display:block;}
.fs #current-composer, .fs #current-track-title{font-size:15px;margin-bottom: 1em;display:block;}
.file-entry.media .file-info{padding:0;}
.icon.icon-down, .icon.icon-up{margin-right:1em;}
.full-file-details{flex-direction:column;font-size:.9em;}
#menus{margin-right:.2em;width:83%;}
.tabs .title a{font-size:1.4em;}
.user-page h1{display:flex;flex-direction:column;}
.icon-search{margin:0 auto;}
.song-info h2{font-size:15px;}
.song-info .image{width:50px;}
.song-info .image img{width:50px;}
.fs label#composer-label{display:block !important;}
label#composer-label{display:none !important;}
.fs .song-info .image{width:120px;}
.fs .song-info .image img{width:120px;}
.controls.playlist-player .image, .controls.favorites-playlist-player .image img{margin:0 auto;}
.controls.playlist-player.fs h2{font-size:12px;margin-top:1em;}
.fs .player-settings{margin-top:0em;}
#foot a{    font-size: 16px;    line-height: 37px;}
.file-description {font-size:.7em;}
.images-column.images-1{margin-top:5em;}
.is-product #page, .is-product #page, .track-list-page #page{margin-top:0;}
.fs .album-video{width:200px;margin:1em auto;}
.song-info{display:flex;gap:1em}
}



@media screen and (min-width:600px){
  .pages-gallery .page{}
  .album-info h2{display:block;opacity:.3;}


}
@media screen and (max-width:599px){

  }
  
@media screen and (min-width:960px){
#menus .icon-search{margin:0 1em;}
}


@media screen and (min-width:641px){
  .menu-top ul ul{position:absolute;top:100%;left:-1px;z-index:10;width:auto;height:auto;}
  .menu-top .level-1-el a{font-size:1.063rem;}
  .menu-top .level-2-el a{font-size:0.875rem;}
  /* third level submenu */
  .menu-top .level-2-menu{top:0;left:100%;border-left:5px solid var(--color-bg2);}
}
@media screen and (max-width:640px){
  .menu-top ul ul{top:10%;left:5px;}
  .menu-top li:hover > .level-2-menu{display:none;}
  #title strong, #title em, #menus sup{display:none;}
   
  .file-entry.media{min-width:100%;}
   
 
 
  
}

/* STRONA LOGOWANIA: opis widgetu ( pole "Treść" przy widgecie logowania ).
   Formularz ma height:100vh, wiec opis ladowal nad nim - pod gornym paskiem, poza widokiem.
   Widget robimy kolumna wysrodkowana w pionie, a formularz zajmuje tyle, ile potrzebuje. */
.widgets-1 .widget.login-widget{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100%;gap:1.2em;}
.widgets-1 .widget.login-widget > .description{max-width:30em;padding:0 1.5em;text-align:center;}
.widgets-1 .widget.login-widget > .head{text-align:center;}
.widgets-1 .widget.login-widget #user-panel{height:auto;margin-bottom:0 !important;width:100%;}

/* Zle haslo: formularz zostaje na ekranie, a komunikat jest nad polami ( _lists_widgets_users.php ).
   Wczesniej caly panel zamienial sie w .msg.error, czyli komunikat na cale okno ( position:fixed ) -
   po naszej zmianie wysokosci panelu zostawal z tego pasek przyklejony do gory, na pasku menu. */
/* FORMULARZ KONTAKTOWY: potwierdzenie i blad maja byc w tresci strony.
   .msg.done / .msg.error to normalnie warstwa na cale okno ( position:fixed ) - z komunikatu
   "e-mail zostal wyslany" nie dalo sie wyjsc inaczej niz przyciskiem wstecz przegladarki */
.contact-panel.send{max-width:34em;margin:2em auto;padding:1.4em;border:1px solid rgba(128,128,128,.35);
  border-radius:.4em;text-align:center;}
.contact-panel.send .msg.done, .contact-panel.send .msg.error{position:static;display:block;width:auto;
  height:auto;min-height:0;margin:0 0 .8em;padding:0;background:none;}
.contact-panel.send .msg h2{margin:0;font-size:1.15rem;}
.contact-panel__back{margin:0;}
/* zle wypelniony formularz - komunikat nad polami, formularz zostaje z tym, co juz wpisano */
.contact-error{max-width:28em;margin:0 auto 1.2em;padding:.7em 1em;border:1px solid var(--color-primary);
  border-left-width:3px;border-radius:.3em;color:var(--color-text);font-size:.9rem;font-weight:bold;}

#user-panel .login-error{max-width:28em;margin:0 auto 1.2em;padding:.7em 1em;border:1px solid var(--color-primary);
  border-left-width:3px;border-radius:.3em;background:none;color:var(--color-text);font-size:.9rem;font-weight:bold;}

/* pozostale komunikaty panelu ( kod wygasl, potwierdzenie rejestracji, wyslane haslo ) tez maja
   byc zwyklym blokiem w kolumnie widgetu, a nie warstwa na cale okno */
.widget.login-widget #user-panel.msg{position:static;display:block;width:auto;max-width:34em;height:auto;
  min-height:0;margin:0 auto;padding:1.2em 1.4em;border:1px solid rgba(128,128,128,.35);border-radius:.4em;
  background:none;text-align:center;font-size:1rem;}
.widget.login-widget #user-panel.msg a.action{margin-top:.8em;}

/* Second step of login - field for the code from the e-mail ( config: enable_users_login_code ) */
#user-panel.login-code .login-code-field{width:8em;padding:.5em;font-size:1.6rem;letter-spacing:.35em;
  text-align:center;font-variant-numeric:tabular-nums;}
/* .msg.done / .msg.error to normalnie komunikat na cale okno ( position:fixed ) - w tym
   formularzu ma byc zwyklym akapitem, inaczej zasłania pole na kod */
#user-panel.login-code .msg, .login-code-panel .msg{position:static;display:block;width:auto;height:auto;
  padding:0;margin:0 0 1em;background:none;text-align:center;}
#user-panel.login-code .login-code-hint{margin:.8em 0 0;font-size:.85rem;color:#777;}
/* "wyslij kod ponownie" - dyskretny przycisk pod podpowiedzia */
#user-panel.login-code .login-code-resend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;margin:.6em 0 0;}
#user-panel.login-code .login-code-resend input[type="submit"]{padding:.35em .9em;border:1px solid currentColor;
  border-radius:5px;background:none;color:inherit;font-size:.8rem;text-transform:lowercase;cursor:pointer;opacity:.75;}
#user-panel.login-code .login-code-resend input[type="submit"]:hover{opacity:1;background:var(--color-text);color:var(--color-bg);}
/* to samo pole, gdy na stronie nie ma panelu logowania ( templates/default/header.php ) */
.login-code-panel{max-width:34em;margin:5rem auto 2em;padding:1.2em 1.4em;border:1px solid rgba(128,128,128,.35);
  border-radius:.4em;} /* 5rem = pasek gorny jest przyklejony i zaslonilby komunikat */
.login-code-panel #user-panel.login-code{margin:0 !important;height:auto;min-height:0;display:block;}
.login-code-panel #user-panel.login-code fieldset{width:100%;margin:0;}
@media all and (max-width:760px){
  .login-code-panel{margin:4.5rem 1rem 1.2em;padding:1em;}
}

/* FONA version in footer ( version.php ) */
#powered .version{font-size:.75rem;opacity:.6;}
/* link, ktorym wraca sie do okna wyboru ciasteczek ( plugins/cookie-consent.js ) */
#powered .cookies-settings a{margin:0;font-size:.75rem;opacity:.6;}
#powered .cookies-settings a:hover{opacity:1;}

/* Playlists: sharing ( widget 104, plugins/playlist-accordion.js ) */
.share-playlist{order:19;margin-left:2em;}
.share-playlist button, .delete-playlist button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:background-color .15s, box-shadow .15s;}
.share-playlist button .icon, .delete-playlist button .icon{width:20px;height:20px;fill:var(--color-gray);transition:fill .15s;}
.share-playlist button:hover, .share-playlist button:focus-visible, .playlist-item.is-sharing .share-playlist button,
.delete-playlist button:hover, .delete-playlist button:focus-visible{background:var(--color-text);box-shadow:0 0 0 3px var(--color-bg3);outline:none;}
.share-playlist button:hover .icon, .share-playlist button:focus-visible .icon, .playlist-item.is-sharing .share-playlist button .icon,
.delete-playlist button:hover .icon, .delete-playlist button:focus-visible .icon{fill:var(--color-bg);}
.playlist-share-popup{margin:.5em 0 1em;padding:1em;background:var(--color-bg2);border-radius:5px;}
.playlist-share-popup[hidden]{display:none;}
.playlist-share-popup label{display:block;font-size:.8em;margin-bottom:.5em;}
.playlist-share-row{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;}
input[type="text"].playlist-share-link{flex:1 1 260px;min-width:0;padding:.4em .6em;}
.playlist-share-row button{border:1px solid var(--color-text);border-radius:5px;padding:.3em .8em;background:none;cursor:pointer;color:inherit;}
.playlist-share-row button:hover{background:var(--color-text);color:var(--color-bg2);}
.playlist-share-row button[hidden]{display:none;}
.shared-playlist .playlist-header{cursor:default;}
.playlist-share-popup{position:relative;}
.playlist-share-popup .playlist-share-close{position:absolute;top:.3em;right:.5em;background:none;border:0;font-size:1.4em;cursor:pointer;color:inherit;}
.playlist-share-setup label{display:inline;margin:0;font-size:.85em;}
input[type="date"].playlist-share-expires{min-width:11.5em;padding:.45em .6em;border:1px solid var(--color-gray2);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:1rem;cursor:pointer;}
input[type="date"].playlist-share-expires:hover, input[type="date"].playlist-share-expires:focus{border-color:var(--color-text);box-shadow:0 0 0 3px var(--color-bg3);outline:none;}
input[type="date"].playlist-share-expires::-webkit-calendar-picker-indicator{opacity:.9;cursor:pointer;}
/* strzalka rozwijania playlisty - taka sama jak przy utworach */
.playlist-toggle{display:flex;align-items:center;justify-content:center;width:30px;flex:0 0 auto;cursor:pointer;}
.playlist-toggle .icon{width:18px;height:18px;fill:var(--color-gray);}
.playlist-item .playlist-toggle .icon-up{display:none;}
.playlist-item.selected .playlist-toggle .icon-down{display:none;}
.playlist-item.selected .playlist-toggle .icon-up{display:block;}

/* udostepnianie i usuwanie pod lista utworow - w belce zostaje sama nazwa i liczba utworow */
.playlist-actions{display:none;gap:1.5em;align-items:center;flex-wrap:wrap;padding:.7em 1em;border-top:1px solid var(--color-bg2);}
.playlist-item.selected .playlist-actions, .playlist-actions--empty{display:flex;}
.playlist-action{display:inline-flex;align-items:center;gap:.5em;padding:.35em .2em;border:0;background:none;color:var(--color-gray);font-size:.9em;cursor:pointer;}
.playlist-action .icon{width:18px;height:18px;fill:currentColor;}
.playlist-action:hover, .playlist-action:focus-visible{color:var(--color-text);outline:none;}
.playlist-action--share{margin-left:auto;} /* udostepnianie przy prawej krawedzi, kasowanie po lewej */

/* opis pod przelacznikiem w ustawieniach */
.settings-row__info{margin:.4em 0 0;font-size:.8rem;opacity:.7;max-width:34em;}

/* ostatnio oglądane albumy ( widget 107 ) - te same kafelki co w innych listach albumow,
   tylko z podpisem pod okładką */
/* miniaturki najwyzej 100px - to tylko skrot do wczesniej ogladanych plyt, a nie galeria.
   Okladki bywaja kwadratowe i prostokatne, wiec kazda ma to samo pudelko 100x100 i miesci sie
   w nim w calosci ( bez przycinania ) - dzieki temu podpisy sa w jednej linii */
.pages-gallery.pages-visited{gap:10px;}
.pages-gallery.pages-visited .page{width:100px;max-width:100px;flex:0 0 auto;margin:0;}
.pages-gallery.pages-visited .page .image{display:flex;align-items:center;justify-content:center;
  height:100px;margin:0;}
.pages-gallery.pages-visited .page .image img{display:block;width:auto;height:auto;
  max-width:100px;max-height:100px;}
.pages-gallery.pages-visited .name{padding:.4em .2em 0;font-size:.85rem;line-height:1.3;}
.pages-gallery.pages-visited .name a{text-decoration:none;color:var(--color-text);}
.pages-gallery.pages-visited .name a:hover{color:var(--color-hover);}

/* lista utworow: doczytywanie kolejnych porcji ( plugins/files-lazy.js ) */
.files-lazy{display:flex;justify-content:center;align-items:center;gap:1em;margin:1.5em 0;}
.files-lazy[hidden]{display:none;}
.files-lazy-button{padding:.5em 1.4em;border:1px solid var(--color-text);border-radius:5px;background:none;color:inherit;cursor:pointer;}
.files-lazy-button:hover{background:var(--color-text);color:var(--color-bg);}
.files-lazy-info{font-size:.85em;color:var(--color-gray);}
.files-lazy-sentinel{height:1px;}

/* utwór tylko dla zalogowanych, oglądany przez gościa ( templates/default/_lists.php ):
   wiersz jest kompletny - miniatura, tytuł, fala, czasy - ale nic w nim nie zagra,
   a po prawej stronie stoi kłódka prowadząca do logowania */
.file-entry.locked{opacity:.75;}
.file-entry.locked .audio-player,
.file-entry.locked .controls{pointer-events:none;}
.file-entry.locked .audio-player{opacity:.55;}
.file-entry.locked .locked-lock a{display:inline-flex;align-items:center;justify-content:center;}
.file-entry.locked .locked-lock .icon{width:18px;height:18px;fill:var(--color-gray);}
.file-entry.locked .locked-lock a:hover .icon{fill:var(--color-text);}
.file-entry.locked .file-description .album{margin-left:.6em;font-size:.85em;opacity:.7;}

/* "+ dodaj caly album do playlisty" - pasek nad lista utworow albumu ( core/files.php ) */
/* pasek trzyma sie tej samej szerokosci co lista utworow ( .audiofilesList ma max-width
   i marginesy auto ), zeby przycisk nie wystawal poza blok listy */
.album-playlist-bar{position:relative;display:flex;justify-content:flex-end;width:100%;max-width:1440px;
  margin:0 auto;padding:.4em 0 .2em;}
.album-playlist-add{display:inline-flex;align-items:center;gap:.5em;padding:.35em .2em;border:0;background:none;
  color:var(--color-gray);font-size:.9em;cursor:pointer;}
.album-playlist-add .icon{width:16px;height:16px;fill:currentColor;}
.album-playlist-add em{font-style:normal;opacity:.7;}
.album-playlist-add:hover, .album-playlist-add:focus-visible{color:var(--color-text);outline:none;}
/* okienko tej samej szerokosci co lista */
.album-playlist-bar .playlist-popup{left:0;right:auto;width:100%;}

/* zmiana nazwy playlisty - okienko jak przy udostepnianiu */
.playlist-rename-popup{position:relative;margin:.5em 0 1em;padding:1em;background:var(--color-bg2);border-radius:5px;}
.playlist-rename-popup[hidden]{display:none;}
.playlist-rename-row{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;}
.playlist-rename-popup label{font-size:.85em;}
input[type="text"].playlist-rename-name{flex:1 1 220px;min-width:0;padding:.45em .6em;border:1px solid var(--color-gray2);border-radius:6px;
  background:var(--color-bg);color:var(--color-text);font-size:1rem;}
input[type="text"].playlist-rename-name:focus{border-color:var(--color-text);box-shadow:0 0 0 3px var(--color-bg3);outline:none;}
.playlist-rename-row button{border:1px solid var(--color-text);border-radius:5px;padding:.3em .8em;background:none;cursor:pointer;color:inherit;}
.playlist-rename-row button:hover{background:var(--color-text);color:var(--color-bg2);}

/* generator playera na wlasna strone ( okienko wyglada jak udostepnianie linkiem ) */
.playlist-embed-popup{position:relative;margin:.5em 0 1em;padding:1em;background:var(--color-bg2);border-radius:5px;}
.playlist-embed-popup[hidden]{display:none;}
.playlist-embed-popup .playlist-share-close{position:absolute;top:.3em;right:.5em;background:none;border:0;font-size:1.4em;cursor:pointer;color:inherit;}
.playlist-embed-row{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;}
.playlist-embed-popup label{display:inline;margin:0;font-size:.85em;}
input[type="text"].playlist-embed-domains{flex:1 1 220px;min-width:0;padding:.45em .6em;border:1px solid var(--color-gray2);border-radius:6px;
  background:var(--color-bg);color:var(--color-text);font-size:1rem;}
input[type="text"].playlist-embed-domains:focus{border-color:var(--color-text);box-shadow:0 0 0 3px var(--color-bg3);outline:none;}
.playlist-embed-popup textarea.playlist-embed-code{width:100%;margin:.4em 0 .6em;padding:.5em;border:1px solid var(--color-gray2);border-radius:6px;
  background:var(--color-bg);color:var(--color-text);font-family:monospace;font-size:.8rem;resize:vertical;}
.playlist-embed-row button, .playlist-embed-popup .playlist-embed-preview{border:1px solid var(--color-text);border-radius:5px;padding:.3em .8em;
  background:none;cursor:pointer;color:inherit;font-size:.9em;text-decoration:none;}
.playlist-embed-row button:hover, .playlist-embed-popup .playlist-embed-preview:hover{background:var(--color-text);color:var(--color-bg2);}
.playlist-embed-popup .playlist-embed-off{margin-left:auto;}
.playlist-embed-status{margin:0 0 .7em;padding-right:2em;font-size:.9em;}
.playlist-embed-status:empty{margin:0;}

.playlist-share-status{margin:0 0 .7em;padding-right:2em;font-size:.9em;}
/* dlugi opis linku zajmowal caly wiersz - teraz siedzi w dymku ikonki */
.playlist-share-hint{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--color-gray2);border-radius:50%;font-size:.8em;font-weight:600;font-style:italic;line-height:1;cursor:help;}
.playlist-share-hint:hover, .playlist-share-hint:focus-visible{border-color:var(--color-text);background:var(--color-text);color:var(--color-bg);outline:none;}
.playlist-share-result[hidden]{display:none;}
.shared-playlist-info{display:flex;flex-wrap:wrap;gap:.5em 2.5em;margin:1em 0 1.5em;}
.shared-playlist-info span{font-size:1em;}
.shared-playlist-info strong{font-weight:600;}

/* PLAYLISTY NA TELEFONIE ( Moje listy utworow, strona udostepnionej playlisty )
   Lista na cala szerokosc strony, staly uklad kolumn w naglowkach i 10 px przerwy miedzy
   playlistami. Same wiersze utworow uklada blok "LISTA UTWOROW NA TELEFONIE" nizej -
   tutaj dokladana jest tylko kolumna z koszem. */
@media screen and (max-width:959px){
  body .user-playlists-accordion{width:100%;max-width:100%;margin:0;box-sizing:border-box;}
  body .user-playlists-accordion .file-entry.media{min-width:0;}

  /* NAGLOWEK PLAYLISTY
     Staly uklad kolumn, zeby ikony staly w jednej linii we wszystkich playlistach,
     a kasowanie bylo po lewej - przy prawej krawedzi za latwo bylo je trafic kciukiem. */
  /* belka w jednej linii: nazwa | data | liczba utworow | strzalka */
  body .user-playlists-accordion .playlist-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto 30px;grid-template-rows:auto;column-gap:8px;align-items:center;padding:8px 10px;}
  body .user-playlists-accordion .playlist-header > sup{display:none;} /* numer playlisty tylko zabiera miejsce */
  body .user-playlists-accordion .playlist-header .playlist-name{grid-column:1;display:block;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body .user-playlists-accordion .playlist-header .playlist-name > sup{display:none;} /* etykieta "playlist" */
  body .user-playlists-accordion .playlist-header .playlist-date{grid-column:2;display:block;margin:0;white-space:nowrap;font-size:.75rem;}
  body .user-playlists-accordion .playlist-header .playlist-date > sup:first-child{display:none;} /* etykieta "created" */
  body .user-playlists-accordion .playlist-header .playlist-date sup{padding:0 0 0 .2em;font-size:.85em;}
  body .user-playlists-accordion .playlist-header .playlist-date strong{font-weight:400;}
  body .user-playlists-accordion .playlist-header .playlist-quantity{grid-column:3;display:block;margin:0;white-space:nowrap;text-align:right;}
  body .user-playlists-accordion .playlist-header .playlist-quantity sup{display:none;} /* etykieta "songs" */
  body .user-playlists-accordion .playlist-header .playlist-toggle{grid-column:4;justify-self:end;}
}

/* My files page ( core/users.php listUserFiles, plugins/my-files.js ) */
.my-files{--mf-line:var(--color-bg3);text-align:left;width:100%;}
.my-files-search{display:flex;flex-direction:column;gap:.7em;margin:0 0 1em;}
.my-files-search__main{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;}
.my-files-search__main input[type="search"]{flex:1 1 220px;min-width:0;padding:.55em .8em;border:1px solid var(--color-divider);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:1rem;}
.my-files button, .my-file-dialog button{padding:.5em 1.1em;border:1px solid var(--color-text);border-radius:6px;background:none;color:var(--color-text);cursor:pointer;font-size:.95rem;}
.my-files-search button:hover, .my-file-dialog__footer button:hover{background:var(--color-text);color:var(--color-bg);}
.my-files-search__reset{font-size:.9em;}
.my-files-search__more summary{cursor:pointer;font-size:.9em;width:max-content;}
.my-files-search__filters{display:flex;flex-wrap:wrap;gap:.6em 1.4em;padding:.7em 0 0;}
.my-files-search label, .my-files-search__view label{display:flex;align-items:center;gap:.4em;margin:0;font-size:.9rem;}
.my-files-search select, .my-files-search input[type="date"]{padding:.35em .5em;border:1px solid var(--color-divider);border-radius:6px;background:var(--color-bg);color:var(--color-text);}
.my-files-search__view{display:flex;flex-wrap:wrap;gap:.5em 1.2em;align-items:center;}
.my-files-summary{display:flex;flex-wrap:wrap;gap:.3em 1.6em;margin:.3em 0 1em;font-size:.9rem;}
.my-files-list{border-top:1px solid var(--mf-line);}
.my-files-empty{padding:1.5em 0;}
.my-file{border-bottom:1px solid var(--mf-line);}
.my-file__row{display:grid;grid-template-columns:56px 3.2em minmax(140px,1.2fr) minmax(220px,2fr) auto auto;align-items:center;gap:.5em 1em;padding:10px;}
.my-file__album{display:block;width:56px;height:56px;border-radius:4px;overflow:hidden;background:var(--mf-line);}
.my-file__album img{display:block;width:56px;height:56px;object-fit:cover;}
.my-file__id{font-size:.8em;opacity:.7;font-variant-numeric:tabular-nums;white-space:nowrap;}
.my-file__main{min-width:0;}
.my-file__title{font-weight:600;line-height:1.25;overflow-wrap:anywhere;color:var(--color-text);}
.my-file__album-name{font-size:.85em;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.my-file__player{display:flex;align-items:center;gap:.6em;min-width:0;}
.my-file .audio-player{flex:1 1 auto;width:auto;min-width:0;height:40px;margin:0;order:0;}
.my-files .my-file__play{flex:0 0 auto;padding:0;border:0;line-height:0;}
.my-file__play .icon{width:26px;height:26px;}
.my-file__time{flex:0 0 auto;font-size:.8em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.my-file.selected .current-time{color:inherit;}
.my-file.selected{box-shadow:inset 4px 0 0 var(--color-gray2);}
.my-files-list .my-file:nth-child(even){background:var(--color-bg3);}
.my-file.is-saved{box-shadow:inset 0 0 0 2px var(--color-gray2);}
/* file edited in the dialog - negative colours */
.my-files-list .my-file.is-editing{background:var(--color-text);color:var(--color-bg);}
.my-file.is-editing .my-file__title, .my-file.is-editing .my-file__details dd, .my-file.is-editing .current-time, .my-file.is-editing a{color:var(--color-bg);}
.my-file.is-editing .icon, .my-file.is-editing .my-file__actions .icon, .my-file.is-editing .my-file__stats .icon{fill:var(--color-bg);opacity:1;}
.my-files .my-file.is-editing .my-file__actions button:hover{background:transparent;}
.my-file__stats{display:flex;gap:.9em;font-size:.85em;white-space:nowrap;}
.my-file__stats span{display:inline-flex;align-items:center;gap:.25em;}
.my-file__stats .icon{width:15px;height:15px;opacity:.7;}
.my-file__actions{display:flex;gap:.2em;}
.my-files .my-file__actions button{padding:.35em;border:0;border-radius:4px;line-height:0;}
.my-files .my-file__actions button:hover{background:var(--mf-line);}
.my-file__actions .icon{width:20px;height:20px;fill:var(--color-text);opacity:.8;}
.my-files .my-file__actions button:hover .icon{opacity:1;}
.my-file.is-open .my-file__toggle .icon{transform:rotate(180deg);}
.my-file__details{margin:0;padding:1.2em 10px 2em calc(10px + 56px + 1em);}
.my-file__files{display:flex;flex-wrap:wrap;gap:.7em 2.5em;margin:0 0 .9em;}
.my-file__files .my-file__filename{flex:0 1 auto;min-width:0;max-width:100%;}
.my-file__meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7em 1.6em;margin:0;}
.my-file__details[hidden]{display:none;}
.my-file__details div{min-width:0;}
.my-file__details dt{font-size:.72em;opacity:.65;text-transform:uppercase;letter-spacing:.03em;}
.my-file__details dd{margin:.1em 0 0;overflow-wrap:anywhere;}
.my-file__details .empty{opacity:.45;}
/* olowek przy kazdej danej, ktora da sie zmienic - olowek w naglowku wiersza zostaje przy
   rozwinietych szczegolach wysoko nad ekranem, wiec edycja jest tez tutaj, na wysokosci danej */
.my-file__details dd[data-field] .my-file__value{overflow-wrap:anywhere;}
/* olowek idzie zaraz za tekstem, wiec przy dluzszej wartosci jest na koncu ostatniego wiersza */
.my-files .my-file__field-edit{display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:.3em;padding:.15em .25em;border:0;border-radius:3px;background:none;
  line-height:0;cursor:pointer;opacity:.4;}
.my-files .my-file__field-edit .icon{width:14px;height:14px;fill:var(--color-text);}
.my-files .my-file__field-edit:hover, .my-files .my-file__field-edit:focus-visible{opacity:1;background:var(--mf-line);}
.my-files .my-file.is-editing .my-file__field-edit .icon{fill:var(--color-bg);}
/* pole, od ktorego zaczyna sie edycja po kliknieciu w ten olowek */
.my-file-dialog label.is-target input{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-divider);}
.my-file__details .my-file__filename dt, .my-file__details .my-file__filename dd{white-space:nowrap !important;}
.my-file__details .my-file__filename dd{overflow-x:auto;overflow-wrap:normal !important;word-break:keep-all !important;word-wrap:normal !important;hyphens:none !important;-webkit-hyphens:none !important;}
.my-file__fname{display:inline-block;white-space:nowrap !important;overflow-wrap:normal !important;word-break:keep-all !important;word-wrap:normal !important;hyphens:none !important;-webkit-hyphens:none !important;}
.my-files-pagination{display:flex;flex-wrap:wrap;gap:.3em;margin:1em 0;}
.my-files-pagination a, .my-files-pagination span{padding:.3em .7em;border:1px solid var(--mf-line);border-radius:4px;}
.my-files-pagination .current{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text);}
.my-files-pagination .gap{border-color:transparent;}
.my-file-dialog{position:fixed;inset:0;margin:auto;height:max-content;width:min(560px,calc(100vw - 2em));max-height:calc(100vh - 2em);overflow:auto;padding:0;border:0;border-radius:10px;background:var(--color-bg);color:var(--color-text);text-align:left;box-shadow:0 10px 40px rgba(0,0,0,.35);}
.my-file-dialog::backdrop{background:rgba(0,0,0,.3);}
.my-file-dialog.is-fallback{z-index:10000;}
.my-file-dialog-shade{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.3);}
.my-file-dialog__header{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;padding:1em 1.2em .5em;}
.my-file-dialog__header h3{margin:0;font-size:1.1rem;}
.my-file-dialog__title{margin:.2em 0 0;font-size:.9rem;opacity:.75;}
.my-file-dialog .my-file-dialog__close{border:0;padding:0 .2em;font-size:1.6rem;line-height:1;}
.my-file-dialog__body{padding:0 1.2em;}
.my-file-dialog fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em 1em;margin:0 0 1em;padding:0;border:0;}
.my-file-dialog fieldset.my-file-dialog__song{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);}
.my-file-dialog fieldset.my-file-dialog__zaiks{grid-template-columns:repeat(2,minmax(0,1fr));}
.my-file-dialog label.is-full{grid-column:1 / -1;}
.my-file-dialog fieldset{align-items:end;}
.my-file-dialog legend{grid-column:1 / -1;margin-bottom:.4em;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65;}
.my-file-dialog label{display:flex;flex-direction:column;gap:.3em;margin:0;font-size:.85rem;}
.my-file-dialog input{width:100%;box-sizing:border-box;padding:.5em .6em;border:1px solid var(--color-divider);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:1rem;}
.my-file-dialog__status{min-height:1.2em;margin:0;padding:0 1.2em;font-size:.85rem;}
.my-file-dialog__status[data-state="error"]{color:#c62828;}
.my-file-dialog__footer{display:flex;justify-content:flex-end;gap:.6em;padding:.8em 1.2em 1.2em;}
.my-file-dialog__footer .primary{background:var(--color-text);color:var(--color-bg);}
@media screen and (max-width:760px){
  .my-file__row{grid-template-columns:50px auto minmax(0,1fr) auto;grid-template-areas:"album id main actions" "player player player player" "stats stats stats stats";gap:.45em .7em;}
  .my-file__album{grid-area:album;width:50px;height:50px;}
  .my-file__album img{width:50px;height:50px;}
  .my-file__id{grid-area:id;align-self:start;padding-top:.15em;}
  .my-file__main{grid-area:main;}
  .my-file__actions{grid-area:actions;align-self:start;}
  .my-file__player{grid-area:player;}
  .my-file__stats{grid-area:stats;}
  .my-file__details{padding:1.2em 10px 2em;}
  .my-file__meta{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .my-files-search__main button{flex:1 1 auto;}
  .my-file-dialog fieldset{gap:.6em .6em;}
  .my-file__fname{font-size:.8rem;}
  .my-file-dialog fieldset.my-file-dialog__song{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);}
}

/* dark theme: track data white, labels stay gray */
.black-theme .file-entry .song-title,
.black-theme .file-entry .time-display,
.black-theme .file-entry .bpm,
.black-theme .full-file-details .composer,
.black-theme .full-file-details strong,
.black-theme .full-file-details .value{color:var(--color-text);}
.black-theme .file-entry .bpm span,
.black-theme .full-file-details .composer span{color:var(--color-gray);}
/* my downloads: format of the downloaded file next to the check icon */
.user-downloads-table .download-format{white-space:nowrap;}
.user-downloads-table .download-format span{margin-left:.4em;font-size:.85em;font-weight:600;vertical-align:middle;}

/* dark theme: "My playlists" (colors of style-widgets.css are fixed for the light theme) */
.black-theme .user-playlists-accordion{border-color:var(--color-border);}
.black-theme .user-playlists-accordion .playlist-item{border-color:var(--color-border);}
.black-theme .user-playlists-accordion .playlist-header{background-color:var(--color-bg3);color:var(--color-gray);}
.black-theme .user-playlists-accordion .playlist-header:hover{background-color:#23272c;}
.black-theme .user-playlists-accordion .playlist-item.selected .playlist-header{background-color:#2c3035;}
.black-theme .user-playlists-accordion .playlist-name,
.black-theme .user-playlists-accordion .playlist-date strong,
.black-theme .user-playlists-accordion .playlist-quantity{color:var(--color-text);}
.black-theme .user-playlists-accordion .playlist-date,
.black-theme .user-playlists-accordion sup{color:var(--color-gray);}
.black-theme .user-playlists-accordion .playlist-files-container{background-color:var(--color-bg);}

/* dark theme: "+" (add to playlist) is a black image */
.black-theme .add-to-playlist{color:var(--color-text);}
.black-theme .add-to-playlist img{filter:invert(1);}

/* my downloads: softer zebra rows, icons (images) visible in the dark theme */
.user-downloads-table tr:nth-child(even){background:var(--color-bg3);}
.black-theme .user-downloads-table img.icon-svg{filter:invert(1);}

/* tracklist search: reset text stays white on red */
#searchForm button.reset{padding:.45em 1.1em;background-color:#fff;color:#000;border:1px solid #000;border-radius:4px;cursor:pointer;}
#searchForm button.reset:hover, #searchForm button.reset:focus-visible{background-color:#d32f2f;border-color:#d32f2f;color:#fff;outline:none;}

/* X clearing search fields (core/common.js) */
.search-clear-wrap{position:relative;display:inline-block;max-width:100%;vertical-align:middle;}
.search-clear-wrap.is-block{display:block;}
.search-clear-wrap input[name="sSearch"]{padding-right:calc(1.1em + 16px);box-sizing:border-box;}
.search-clear-wrap.is-block input[name="sSearch"]{width:100%;}
body .search-clear-wrap .search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin:0;padding:0;border:0;border-radius:50%;background:var(--color-gray2);color:#fff;line-height:1;cursor:pointer;float:none;}
body .search-clear-wrap .search-clear span{font-size:.85em;line-height:1;margin-top:-.08em;}
body .search-clear-wrap .search-clear:hover, body .search-clear-wrap .search-clear:focus-visible{background:var(--color-gray);color:#fff;outline:none;}
body .search-clear-wrap .search-clear[hidden]{display:none;}

/* player bar has its own background - icons stay white in both themes */
.controls.playlist-player .icon, .controls.favorites-playlist-player .icon{fill:#fff;}

/* player bar minimized to the title and the play button (plugins/player.js) */
.controls.playlist-player .song-head, .controls.playlist-player .album-info,
.controls.favorites-playlist-player .song-head, .controls.favorites-playlist-player .album-info{cursor:pointer;}
.controls.playlist-player.is-minimized:not(.fs), .controls.favorites-playlist-player.is-minimized:not(.fs){width:auto;right:auto;gap:.8em;padding:5px 1em;border-radius:0 12px 0 0;}
.controls.is-minimized:not(.fs) > :not(.bar-title):not(.buttons){display:none !important;}
.controls.is-minimized:not(.fs) > .bar-title{display:block !important;}
.controls.is-minimized:not(.fs) .buttons{width:auto;margin:0;}
.controls.is-minimized:not(.fs) #next-button{display:none !important;}

/* back to top icon */
body .back-to-top-widget{bottom:80px;}
body .back-to-top-widget a{width:auto;opacity:.6;color:var(--color-text);}
body .back-to-top-widget a:before{display:none;}
.back-to-top-widget .back-to-top-icon{display:block;width:44px;height:44px;fill:var(--color-text);transition:fill .2s, transform .2s;}
body .back-to-top-widget a:hover{opacity:1;}
body .back-to-top-widget a:hover .back-to-top-icon{fill:var(--color-special);transform:translateY(-3px);}

/* my files dialog: title of the song clearly visible */
.my-file-dialog .my-file-dialog__title{opacity:1;color:#000;font-weight:600;}
.black-theme .my-file-dialog .my-file-dialog__title{color:#fff;}

/* settings icon in the menu */
svg.settings.icon-settings{margin:0 1em;cursor:pointer;}

/* settings panel: font size and keyboard shortcuts */
#settings{overflow-y:auto;justify-content:safe center;}
#settings > div{flex-shrink:0;}
.settings-group{display:flex;flex-direction:column;align-items:center;gap:.4em;}
.font-scale{display:flex;align-items:center;justify-content:center;gap:1em;padding:1em 1em .3em;}
body .font-scale .font-scale__button{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;text-indent:0;text-align:center;line-height:1;border:2px solid var(--color-text);border-radius:50%;background:none;color:var(--color-text);font-size:1.1em;font-weight:600;cursor:pointer;transition:background-color .2s, color .2s;}
body .font-scale .font-scale__button:hover:not(:disabled), body .font-scale .font-scale__button:focus-visible{background:var(--color-text);color:var(--color-bg);outline:none;}
body .font-scale .font-scale__button:disabled{opacity:.3;cursor:default;}
.font-scale__value{min-width:3.5em;color:var(--color-text);font-weight:600;}
.hotkeys-switch{position:relative;display:inline-flex;align-items:center;gap:.6em;margin-top:1em;color:var(--color-text);cursor:pointer;}
.hotkeys-switch input{position:absolute;width:1px;height:1px;margin:0;opacity:0;}
.hotkeys-switch__track{position:relative;flex:0 0 44px;height:24px;border-radius:12px;background:var(--color-gray2);transition:background-color .2s;}
.hotkeys-switch__track:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;}
.hotkeys-switch input:checked + .hotkeys-switch__track{background:var(--color-special);}
.hotkeys-switch input:checked + .hotkeys-switch__track:after{transform:translateX(20px);}
.hotkeys-switch input:focus-visible + .hotkeys-switch__track{box-shadow:0 0 0 3px var(--color-bg3);}
.hotkeys-switch__state:after{content:attr(data-off);opacity:.6;}
html[data-hotkeys="on"] .hotkeys-switch__state:after{content:attr(data-on);}
.settings-hotkeys{max-width:30em;margin:.3em auto 1em;font-size:.85em;text-align:left;color:var(--color-gray);transition:opacity .2s;}
.settings-hotkeys ul{margin:0;padding-left:1.2em;}
.settings-hotkeys strong{color:var(--color-text);}
html[data-hotkeys="off"] .settings-hotkeys{opacity:.4;}

/* the description of shortcuts is shown in the settings panel */
body li.widget.shortcuts{display:none;}

/* font size of the whole site (settings panel) */
html[data-font-scale="1"] body{zoom:1.1;}
html[data-font-scale="2"] body{zoom:1.2;}
html[data-font-scale="3"] body{zoom:1.35;}

/* my files: title and album name also open the details */
.my-file__title, .my-file__album-name{cursor:pointer;}
.my-file__title:hover, .my-file__album-name:hover{text-decoration:underline;}

/* settings panel: reset buttons */
#settings-2{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em 1.5em;}
.settings-reset-info{flex-basis:100%;margin:.3em 0 0;font-size:.85em;color:var(--color-special);}

/* my files: search while typing (plugins/my-files.js) */
.my-files-search.is-live .my-files-search__main button[type="submit"]{display:none;}
.my-files .my-files-list, .my-files .my-files-summary{transition:opacity .15s;}
.my-files.is-loading .my-files-list, .my-files.is-loading .my-files-summary, .my-files.is-loading .my-files-pagination{opacity:.45;}

/* settings panel: option names on the side, dotted lines between options, tiles */
#settings{align-items:center;justify-content:safe center;overflow-y:auto;padding:4.5em 1.2em 2em;}
#settings .settings-panel{width:100%;max-width:760px;text-align:left;}
#settings .settings-row{display:grid;grid-template-columns:11em minmax(0,1fr);gap:.8em 2em;align-items:center;padding:1.3em 0;border-bottom:1px dotted var(--color-gray2);}
#settings .settings-row:last-child{border-bottom:0;}
#settings .settings-row__label{color:var(--color-text);font-weight:600;font-size:.9em;letter-spacing:.02em;}
#settings .settings-row__control{display:flex;flex-wrap:wrap;align-items:center;gap:.8em 1em;min-width:0;}
#settings .web-colors{width:auto;padding:0;justify-content:flex-start;gap:1em;}
#settings .web-colors .circle{width:44px;height:44px;margin:0;box-sizing:border-box;cursor:pointer;}
#settings .font-scale{padding:0;justify-content:flex-start;}
#settings .hotkeys-switch{margin:0;}
#settings .hotkeys-switch__track{flex:0 0 46px;height:26px;box-sizing:border-box;border:2px solid var(--color-text);background:transparent;}
#settings .hotkeys-switch__track:after{top:4px;left:4px;width:14px;height:14px;background:var(--color-text);}
#settings .hotkeys-switch input:checked + .hotkeys-switch__track{background:var(--color-text);}
#settings .hotkeys-switch input:checked + .hotkeys-switch__track:after{background:var(--color-bg);transform:translateX(20px);}
#settings .hotkeys-switch__state:after{opacity:1;color:var(--color-text);}
#settings .settings-hotkeys{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill, minmax(11em, 1fr));gap:.6em;max-width:none;margin:0;padding:0;list-style:none;font-size:.85em;text-align:left;}
#settings .settings-hotkey{display:flex;flex-direction:column;gap:.35em;margin:0;padding:.7em .85em;border:1px solid var(--color-gray2);border-radius:8px;}
#settings .settings-hotkey__name{color:var(--color-text);font-weight:600;line-height:1.25;}
#settings .settings-hotkey__key{color:var(--color-gray);line-height:1.25;}
#settings .settings-tile{margin:0;padding:.75em 1.2em;border:1px solid var(--color-gray2);border-radius:8px;background:none;color:var(--color-text);font-size:.95em;cursor:pointer;transition:border-color .2s, background-color .2s;}
#settings .settings-tile:hover, #settings .settings-tile:focus-visible{border-color:var(--color-text);background:var(--color-bg3);outline:none;}
#settings .settings-reset-info{flex-basis:100%;margin:0;}
@media screen and (max-width:600px){
  #settings .settings-row{grid-template-columns:1fr;gap:.7em;}
  #settings .settings-hotkeys{grid-template-columns:1fr 1fr;}
}
#settings #settings-4{align-items:start;}
#settings #settings-4 .settings-row__label{padding-top:.35em;}

/* footer: copyright and version in the middle - the minimized player bar (bottom left) does not cover them */
body #powered .container{flex-direction:column;justify-content:center;align-items:center;gap:.2em;text-align:center;padding-bottom:4.5em;}
body #powered .copy{margin:0 1em;}

/* language switcher PL / EN in the header ( core/translations.php displayLanguageSwitcher ) */
#menus .lang-switch{display:flex;align-items:center;gap:.15em;list-style:none;margin:0 .4em;padding:0;}
#menus .lang-switch li{margin:0;padding:0;list-style:none;}
#menus .lang-switch a, #menus .lang-switch .current span{display:block;padding:.35em .45em;border-radius:4px;font-size:.72rem;font-weight:700;line-height:1;letter-spacing:.04em;text-decoration:none;}
#menus .lang-switch a{color:var(--color-bg);opacity:.55;transition:opacity .2s;}
#menus .lang-switch a:hover, #menus .lang-switch a:focus-visible{opacity:1;outline:none;}
#menus .lang-switch .current span{background:var(--color-bg);color:var(--color-text);}

/* registration confirmed by a link ( core/users-register-confirm.php ) */
#user-panel .register-resend{margin:.8em 0 0;}
#user-panel .register-resend input[type="submit"]{padding:.5em 1.1em;border:1px solid currentColor;border-radius:5px;background:none;color:inherit;cursor:pointer;}
#user-panel .register-resend input[type="submit"]:hover{background:var(--color-text);color:var(--color-bg);}

/* search suggestions from keywords ( plugins/search-suggest.js ) */
.search-suggest{position:absolute;left:0;top:100%;z-index:1200;min-width:16em;width:100%;box-sizing:border-box;margin:.3em 0 0;padding:.3em 0;list-style:none;text-align:left;background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-gray2);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.18);max-height:min(22em,60vh);overflow-y:auto;font-size:1rem;}
.search-suggest[hidden]{display:none;}
.search-suggest li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin:0;padding:.55em .95em;line-height:1.3;cursor:pointer;list-style:none;}
.search-suggest li.is-active, .search-suggest li:hover{background:var(--color-bg3);}
.search-suggest mark{background:none;color:inherit;font-weight:700;}
.search-suggest__count{flex:0 0 auto;font-size:.75em;color:var(--color-gray);}
.search-suggest__name{flex:1 1 auto;min-width:0;}
.search-suggest__type{flex:0 0 auto;padding:.1em .5em;border:1px solid var(--color-gray2);border-radius:999px;font-size:.68em;line-height:1.4;color:var(--color-gray);text-transform:lowercase;}
.search-suggest__type--composer{border-color:var(--color-special);color:var(--color-special);}
.modal-content .search-suggest{font-size:1.4rem;}

/* track length filter in search results ( plugins/duration-filter.js ) */
.search-files-form{flex-wrap:wrap;align-items:center;}
.duration-filter{display:flex;flex-wrap:wrap;flex-basis:100%;justify-content:center;align-items:center;gap:.5em 1em;margin:.7em 0 0;font-size:.9em;color:var(--color-text);}
.duration-filter__label{font-weight:600;}
.duration-filter__values{min-width:7em;text-align:center;font-variant-numeric:tabular-nums;}
.duration-filter__track{position:relative;flex:0 1 22em;min-width:12em;height:1.8em;}
.duration-filter__track:before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--color-bg2);}
.duration-filter__fill{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--color-special);}
.duration-filter input[type="range"]{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;}
.duration-filter input[type="range"]::-webkit-slider-runnable-track{background:none;border:0;}
.duration-filter input[type="range"]::-moz-range-track{background:none;border:0;}
.duration-filter input[type="range"]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-special);cursor:pointer;}
.duration-filter input[type="range"]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-special);cursor:pointer;}
.duration-filter input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--color-bg3);}
.duration-filter input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--color-bg3);}
.duration-filter__clear{padding:.3em .9em;border:1px solid var(--color-gray2);border-radius:999px;background:none;color:var(--color-text);font-size:.85em;cursor:pointer;}
.duration-filter__clear:hover, .duration-filter__clear:focus-visible{border-color:var(--color-text);outline:none;}
.duration-filter-form{margin-bottom:1em;}

/* search window: solid background ( white in the light theme ), hints with examples under the field */
#search-modal{background-color:var(--color-bg);backdrop-filter:none;-webkit-backdrop-filter:none;}
#search-modal .modal-content{background:transparent;box-shadow:none;border:0;border-radius:0;}
#search-modal #search-form fieldset{border:1px solid #e3e3e0;border-radius:20px;background:var(--color-bg);box-shadow:none;}
#search-modal .close .icon-close{fill:var(--color-text);}
.modal-content #search-form{flex-wrap:wrap;}
.search-hints{flex-basis:100%;box-sizing:border-box;padding:3em 1.4em 0;text-align:left;color:var(--color-text);font-size:1rem;}
.search-hints__intro{margin:0 0 .8em;font-size:.95em;}
.search-hints__list{display:grid;gap:.55em;margin:0;}
.search-hints__row{display:grid;grid-template-columns:9em minmax(0,1fr);gap:.8em;align-items:baseline;}
.search-hints__row dt{margin:0;font-weight:600;font-size:.85em;color:var(--color-text);}
.search-hints__row dd{display:flex;flex-wrap:wrap;gap:.4em;margin:0;}
.search-hints__chip{padding:.3em .8em;border:1px solid var(--color-bg2);border-radius:999px;background:transparent;color:var(--color-text);font-size:.85em;line-height:1.3;cursor:pointer;transition:border-color .15s, background-color .15s, color .15s;}
.search-hints__chip:hover, .search-hints__chip:focus-visible{border-color:var(--color-text);background:var(--color-text);color:var(--color-bg);outline:none;}
@media screen and (max-width:600px){
  .search-hints{padding:2em .4em 0;}
  .search-hints__row{grid-template-columns:1fr;gap:.3em;}
}

/* no results in the track lists - a plain line in the content, not a full screen board */
.files-empty{margin:2em 0;padding:1.5em 1em;text-align:center;color:var(--color-text);font-size:1.1rem;border-top:1px dotted var(--color-bg2);border-bottom:1px dotted var(--color-bg2);}

/* cart: status of the order / active service - a box in the content with a way back, not a full screen board */
.msg.order-status{max-width:40em;margin:3em auto;padding:2em;border:1px dotted var(--color-bg2);border-radius:12px;text-align:left;color:var(--color-text);}
.msg.order-status ul{margin:0 0 .5em;padding-left:1.2em;line-height:1.8;}
.order-status__actions{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1em;}
.order-status__actions .action{margin:0;}

/* searched phrases ( renderSearchTags in core/libraries/trash.php ): each one removed with x */
.search-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;width:95%;margin:1em auto;text-align:center;}
.search-tags__label{font-size:.85em;color:var(--color-text);}
.search-tags ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;margin:0;padding:0;list-style:none;}
.search-tag{display:inline-flex;align-items:center;gap:.45em;padding:.3em .5em .3em .85em;border:1px solid var(--color-bg2);border-radius:999px;color:var(--color-text);font-size:.9em;line-height:1.2;text-decoration:none;transition:border-color .15s, background-color .15s, color .15s;}
.search-tag__remove{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--color-bg2);color:var(--color-bg);font-size:1em;line-height:1;}
.search-tag:hover, .search-tag:focus-visible{border-color:#d32f2f;color:#d32f2f;text-decoration:none;outline:none;}
.search-tag:hover .search-tag__remove, .search-tag:focus-visible .search-tag__remove{background:#d32f2f;color:#fff;}
.search-tags__clear{font-size:.85em;color:var(--color-text);text-decoration:underline;}
.search-tags__clear:hover{color:#d32f2f;}

/* page content from the editor ( sDescriptionFull ): the global reset ( body * ) removes every margin -
   spacing and sizes like in the editor; widgets shown in the same block keep their own styles */
#page .page-description div.content{line-height:1.65;font-size:1rem;}
#page .page-description div.content :is(p, ul, ol, blockquote, table, pre, figure):not(.widget *):not(.widgets-list):not(.widgets-list *){margin:0 0 1em;padding-bottom:0;}
#page .page-description div.content :is(h1, h2, h3, h4, h5, h6):not(.widget *):not(.widgets-list):not(.widgets-list *){margin:1.8em 0 .6em;padding:0;color:inherit;line-height:1.3;font-weight:700;}
#page .page-description div.content :is(h1, h2, h3, h4, h5, h6):first-child:not(.widget *):not(.widgets-list):not(.widgets-list *){margin-top:0;}
#page .page-description div.content h1:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:2rem;font-weight:400;}
#page .page-description div.content h2:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:1.6rem;font-weight:400;}
#page .page-description div.content h3:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:1.3rem;}
#page .page-description div.content h4:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:1.1rem;}
#page .page-description div.content h5:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:1rem;}
#page .page-description div.content h6:not(.widget *):not(.widgets-list):not(.widgets-list *){font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;}
#page .page-description div.content :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol):not(.widget *):not(.widgets-list):not(.widgets-list *){margin-top:0;}
#page .page-description div.content :is(strong, b):not(.widget *):not(.widgets-list):not(.widgets-list *){font-weight:700;color:inherit;}
#page .page-description div.content :is(em, i):not(.widget *):not(.widgets-list):not(.widgets-list *):not(.icon){font-style:italic;}
#page .page-description div.content :is(u):not(.widget *):not(.widgets-list):not(.widgets-list *){text-decoration:underline;}
#page .page-description div.content a:not(.widget *):not(.widgets-list):not(.widgets-list *):not(.action){color:var(--color-special);text-decoration:underline;text-underline-offset:.15em;}
#page .page-description div.content a:not(.widget *):not(.widgets-list):not(.widgets-list *):not(.action):hover{text-decoration-thickness:2px;}
#page .page-description div.content :is(ul, ol):not(.widget *):not(.widgets-list):not(.widgets-list *){padding:0 0 0 1.6em;}
#page .page-description div.content ul:not(.widget *):not(.widgets-list):not(.widgets-list *){list-style:disc;}
#page .page-description div.content ol:not(.widget *):not(.widgets-list):not(.widgets-list *){list-style:decimal;}
#page .page-description div.content li:not(.widget *):not(.widgets-list):not(.widgets-list *){margin:.35em 0;padding:0 0 0 .2em;}
#page .page-description div.content li :is(ul, ol):not(.widget *):not(.widgets-list):not(.widgets-list *){margin:.35em 0 .5em;}
#page .page-description div.content li > p:not(.widget *):not(.widgets-list):not(.widgets-list *){margin:0;}
#page .page-description div.content blockquote:not(.widget *):not(.widgets-list):not(.widgets-list *){margin:1.5em 0;padding:.8em 1.2em;border-left:3px solid var(--color-special);background:var(--color-bg3);font-style:italic;}
#page .page-description div.content blockquote > :last-child:not(.widget *):not(.widgets-list):not(.widgets-list *){margin-bottom:0;}
#page .page-description div.content hr:not(.widget *):not(.widgets-list):not(.widgets-list *){height:0;margin:2em 0;border:0;border-top:1px dotted var(--color-bg2);}
#page .page-description div.content table:not(.widget *):not(.widgets-list):not(.widgets-list *){width:100%;border-collapse:collapse;}
#page .page-description div.content :is(th, td):not(.widget *):not(.widgets-list):not(.widgets-list *){padding:.5em .8em;border-bottom:1px solid var(--color-bg2);text-align:left;vertical-align:top;}
#page .page-description div.content th:not(.widget *):not(.widgets-list):not(.widgets-list *){font-weight:700;}
#page .page-description div.content img:not(.widget *):not(.widgets-list):not(.widgets-list *){max-width:100%;height:auto;}
#page .page-description div.content figcaption:not(.widget *):not(.widgets-list):not(.widgets-list *){margin-top:.4em;font-size:.85em;opacity:.8;}
#page .page-description div.content pre:not(.widget *):not(.widgets-list):not(.widgets-list *){padding:1em;overflow:auto;background:var(--color-bg3);font-size:.9em;}

/* search page without phrases ( page.php ): message and a button opening the search window */
.search-empty{max-width:40em;margin:2em auto 3em;padding:2em 1em;text-align:center;border-top:1px dotted var(--color-bg2);border-bottom:1px dotted var(--color-bg2);}
.search-empty__title{margin:0 0 .4em;font-size:1.3rem;color:var(--color-text);}
.search-empty__info{margin:0 0 1.3em;font-size:.95em;color:var(--color-text);opacity:.85;}
.search-empty__open{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.3em;border:1px solid #000;border-radius:4px;background:#fff;color:#000;cursor:pointer;transition:background-color .15s, border-color .15s, color .15s;}
.search-empty__open .icon{width:1em;height:1em;fill:currentColor;}
.search-empty__open:hover, .search-empty__open:focus-visible{border-color:#d32f2f;background:#d32f2f;color:#fff;outline:none;}

/* "Polecane" in the left column on phones: centred grid with bigger covers - 2 columns, 3 when there is room */
@media screen and (max-width:800px){
  .left-column .column-left-pages .head{margin:0 0 .8em;font-size:1.2rem;text-align:center;}
  .left-column .column-left-pages .pages-gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(max(8.5rem, calc((100% - 2em) / 3)), 1fr));gap:1em;width:100%;max-width:40em;margin:0 auto;}
  .left-column .column-left-pages .pages-gallery .page{width:auto;min-width:0;margin:0;}
  .left-column .column-left-pages .pages-gallery .page .image{margin:0;}
  .left-column .column-left-pages .pages-gallery .page img{display:block;width:100%;height:auto;}
}

/* adding a plan / album to the order: a tile with the name of the page and the plus on black */
.order-box{margin:2em 0 1em;display:flex;justify-content:center;}
.order-link{display:inline-flex;align-items:center;gap:.8em;max-width:32em;padding:.9em 1.4em;border:1px solid var(--color-bg2);border-radius:10px;background:var(--color-bg);color:var(--color-text);font-size:1.05rem;line-height:1.3;text-align:left;text-decoration:none;transition:border-color .15s, box-shadow .15s;}
.order-link-plus{display:inline-flex;align-items:center;justify-content:center;flex:0 0 2.2em;width:2.2em;height:2.2em;border-radius:50%;background:#1d1f22;color:#fff;font-size:1.2em;line-height:1;}
.order-link:hover, .order-link:focus-visible{border-color:#1d1f22;box-shadow:0 2px 10px rgba(0,0,0,.12);color:var(--color-text);text-decoration:none;outline:none;}
.order-link:hover .order-link-plus, .order-link:focus-visible .order-link-plus{background:var(--color-special);}
html.black-theme .order-link-plus{background:#fff;color:#1d1f22;}
html.black-theme .order-link:hover{border-color:#fff;}

/* "ask about ..." under the content - black, not the colour of links in the content */
#page #ask-about-link a, #page #ask-about-link a:hover, #page .page-description div.content #ask-about-link a{color:#1d1f22;}
html.black-theme #page #ask-about-link a, html.black-theme #page #ask-about-link a:hover, html.black-theme #page .page-description div.content #ask-about-link a{color:#fff;}

/* albums of the composer ( widget composers-albums ): covers smaller in the same grid and bigger on hover -
   the same as on the albums page ( .albums .pages-gallery ) */
.composers-albums .pages-gallery .page .image img{transition:transform .3s ease;scale:.75;}
.composers-albums .pages-gallery .page .image:hover img{transform:scale(1.25);}

/* tags under the search field: expandable, clicking adds or removes a phrase */
.search-hints__toggle{display:inline-flex;align-items:center;gap:.4em;margin-bottom:.8em;padding:.25em 0;color:var(--color-text);font-size:.9em;cursor:pointer;list-style:none;}
.search-hints__toggle::-webkit-details-marker{display:none;}
.search-hints__toggle:before{content:'';display:inline-block;width:0;height:0;border-left:.45em solid currentColor;border-top:.32em solid transparent;border-bottom:.32em solid transparent;transition:transform .15s ease;}
.search-hints[open] .search-hints__toggle:before{transform:rotate(90deg);}
.search-hints__chip.is-chosen{border-color:var(--color-special);background:var(--color-special);color:#fff;}
button.search-hints__go{display:inline-block;margin-top:1em;padding:.55em 1.6em;border:1px solid #000;border-radius:4px;background:#000;color:#fff;font-size:1rem;cursor:pointer;}
button.search-hints__go:hover, button.search-hints__go:focus-visible{background:var(--color-special);border-color:var(--color-special);outline:none;}
button.search-hints__go[hidden]{display:none;}
.search-files-form .search-hints{flex-basis:100%;padding:.5em 0 0;text-align:left;}
.search-files-form .search-hints__go{margin-top:.6em;}

/* telefon: dolny pasek odtwarzacza ma sie zmiescic w szerokosci ekranu -
   przy 375 px tresc miala 418 px i ikona pelnego ekranu byla ucieta.
   Prog 959 px, bo uklad desktopowy zaczyna sie dopiero od 960 - inaczej telefon
   w poziomie ( ok. 850-930 px ) nie dostawal ani jednego, ani drugiego. */
@media screen and (max-width:959px){
  .controls.playlist-player, .controls.favorites-playlist-player{gap:.5em;padding:5px .5em;}
  .controls.playlist-player .buttons, .controls.favorites-playlist-player .buttons{margin-right:.5em;}
  .controls.playlist-player .volume, .controls.favorites-playlist-player .volume{width:80px;}
  .controls.playlist-player .full-screen, .controls.favorites-playlist-player .full-screen{margin:.25em;padding:0 .5em;}
}

/* MENU MOBILNE - pelnoekranowy panel z wchodzeniem w podmenu ( plugins/mobile-nav.js ).
   Zastapilo wysuwany sidr, w ktorym nazwy stron uciekaly za prawa krawedz.
   Uklad jest pod obsluge jedna reka: lista przy dolnej krawedzi, a przyciski
   "wstecz" i "zamknij" w zasiegu kciuka. Dlatego panel przykrywa takze gorny pasek
   ( #head1 .container ma z-index 5000 ) i musi byc nad nim. */
.mobile-nav[hidden], .mobile-nav-backdrop[hidden]{display:none;}
.mobile-nav-backdrop{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.45);}
.mobile-nav{position:fixed;inset:0;z-index:6001;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text);}
body.mobile-nav-open{overflow:hidden;}

.mobile-nav__panels{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.5rem 1.5rem 0;text-align:right;}
.mobile-nav__logo{margin:0 0 auto;padding:.5rem 0 2rem;text-align:right;}
.mobile-nav__logo a{text-decoration:none;color:inherit;}
.mobile-nav.is-drilled .mobile-nav__logo{display:none;} /* w podmenu liczy sie sama lista */

.mobile-nav__panels .mobile-nav__menu{display:block !important;margin:0;padding:0;} /* kopie menu maja wlasne reguly ( .menu-1.menu-top ma display:none i margin-left:auto ) */
.mobile-nav__panels ul{display:none !important;margin:0;padding:0;list-style:none;} /* !important, bo .menu-top .level-0-menu jest bardziej szczegolowe */
.mobile-nav__panels ul.is-shown{display:block !important;}
.mobile-nav__panels li{margin:0;padding:0;list-style:none;border:0;background:none;}
.mobile-nav__panels a{display:block;padding:.4em 0;border:0;color:var(--color-text);font-size:1.5rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-decoration:none;}
.mobile-nav__panels a:hover, .mobile-nav__panels .selected > a{color:var(--color-divider);} /* podswietlenie szare, nie kolorem akcentu */
.mobile-nav__panels a:before, .mobile-nav__panels li:before{content:none;} /* stare ikonki i strzalki menu nie pasuja do duzych napisow */
.mobile-nav__parent > a{font-size:1.1rem;font-weight:400;opacity:.75;}

/* pasek sterowania na dole - tam siega kciuk */
.mobile-nav__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.5rem max(1rem, env(safe-area-inset-bottom));border-top:1px solid var(--color-bg2);}
.mobile-nav__bar button{min-height:2.75rem;padding:.4rem .9rem;border:0;background:transparent;color:var(--color-text);font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;}
.mobile-nav__bar button:hover{color:var(--color-divider);}
#menus .lang-switch{display:none;} /* zmiana jezyka jest tylko w panelu menu ( takze na desktopie ) */
.mobile-nav__lang{display:flex;gap:.4em;margin:0 auto;padding:0;list-style:none;}
.mobile-nav__lang li{margin:0;padding:0;list-style:none;}
.mobile-nav__lang a{display:block;padding:.4rem .7rem;color:var(--color-text);font-size:1rem;font-weight:600;text-decoration:none;}
.mobile-nav__lang a:hover{color:var(--color-divider);}
.mobile-nav__back{visibility:hidden;} /* powrot pojawia sie dopiero w podmenu */
.mobile-nav.is-drilled .mobile-nav__back{visibility:visible;}
.mobile-nav__back:before{content:'\2039';margin-right:.4rem;font-size:1.6rem;font-weight:300;line-height:0;vertical-align:-.15em;}
.mobile-nav__close:after{content:'\00d7';margin-left:.5rem;font-size:1.6rem;font-weight:300;line-height:0;vertical-align:-.15em;}

/* na telefonie panel zastepuje sidr calkowicie */
@media screen and (max-width:959px){
  #sidr-main, .sidr{display:none !important;}

}

/* LISTA UTWOROW NA TELEFONIE
   Wiersz ma teraz siatke: okladka | play | czasy jeden pod drugim | tytul | strzalka.
   Dzieki temu miesci sie tytul i rozwijanie szczegolow ( to samo, co na desktopie ),
   a sama lista idzie na cala szerokosc - odstep od krawedzi daje juz padding wiersza.
   Prog 959 px - uklad desktopowy wiersza siedzi w @media (min-width:960px). */
@media screen and (max-width:959px){
  /* kazda lista utworow na cala szerokosc - wczesniej 90% i marginesy, przez co byla wezsza
     niz strona; odstep od krawedzi daje juz padding wiersza */
  .audiofiles-list, .audiofilesList, .audiofiles-short-list, .playlist-files{width:100%;max-width:none;margin-left:0;margin-right:0;}

  .file-entry.media .file-info{display:grid;grid-template-columns:50px 40px 3.6em minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:.5em;height:auto;min-height:70px;padding:.5em 1em;}
  /* miniatura: na liscie utworow opakowana linkiem, na stronie albumu to samo .image -
     bez obu selektorow okladka wypadala z siatki i rozpychala wiersz */
  .file-entry.media .file-info > a, .file-entry.media .file-info > .image{grid-column:1;grid-row:1 / span 2;}
  .file-entry.media .file-info .controls{grid-column:2;grid-row:1 / span 2;width:auto;padding:0;margin:0;align-items:center;}
  .file-entry.media .file-info .time-display{grid-column:3;grid-row:1;margin:0;justify-content:flex-start;text-align:left;} /* czas trwania */
  .file-entry.media .file-info .time-display.current{grid-column:3;grid-row:2;} /* odliczanie - pod spodem, zeby zostalo miejsce na tytul */
  /* odliczanie ma span na cala szerokosc pudelka i wysrodkowany tekst - bez tego cyfry nie staly
     w jednej linii z czasem trwania */
  .file-entry.media .file-info .time-display > *{flex:0 0 auto;width:auto;text-align:left;}
  /* odliczanie tym samym kolorem co ikonka odtwarzania ( .controls button ) */
  .file-entry.media .file-info .time-display.current,
  .file-entry.media .file-info .time-display.current .current-time,
  .file-entry.media.selected .file-info .time-display.current,
  .file-entry.media.selected .file-info .time-display.current .current-time{color:var(--color-text);}
  .file-entry.media .file-info .file-description{grid-column:4;grid-row:1 / span 2;min-width:0;}
  /* fala nie moze wchodzic na tytul: w zwinietym wierszu jest schowana ( tak jak przed zmiana,
     gdzie miala zerowa szerokosc ), a po rozwinieciu i tak przenosi sie do .audio-player-full.
     !important, bo player.js po zwinieciu ustawia jej wymiary stylem w atrybucie. */
  .file-entry.media .file-info .audio-player{grid-column:1 / -1;grid-row:3;}
  .file-entry.media:not(.expanded) .file-info .audio-player{display:none !important;}
  .file-entry.media .file-info .file-details{grid-column:5;grid-row:1 / span 2;display:flex;align-items:center;gap:.5em;}

  /* w wierszu zostaje sama strzalka - ikony akcji przenosi na dol plugins/track-actions-mobile.js */
  .file-entry.media .file-info .file-details > *:not(.toggle-details-for-users){display:none;}

  .details-expanded .full-file-details{flex-direction:column;margin:1em;gap:.6em;}
  /* ikony utworu pod opisami, w jednym wierszu z zapetleniem */
  .details-expanded .track-actions{display:flex;align-items:center;justify-content:flex-start;gap:1.4em;padding-top:.6em;border-top:1px solid var(--color-bg2);}
  .details-expanded .track-actions > *{display:flex;align-items:center;order:0;} /* ikony maja wlasne order z wiersza listy - tu liczy sie kolejnosc w kodzie */
  .details-expanded .track-actions .loop-toggle{order:1;margin:0 0 0 auto;} /* mial wlasny dolny margines i siedzial 7 px wyzej niz reszta */
  /* okienka pobierania / udostepniania / playlist pokazuja sie dopiero po kliknieciu w ikone */
  .details-expanded .track-actions .share-popup,
  .details-expanded .track-actions .playlist-popup,
  .details-expanded .track-actions .download-popup{display:none;}
}

/* WIERSZ UTWORU W PLAYLISCIE
   Ta sama siatka co na liscie albumu, tylko z dodatkowa kolumna na kosz - przed okladka,
   zeby przy przewijaniu kciukiem nie kasowac utworow. Wieksza szczegolowosc niz reguly
   listy utworow powyzej, bo to one ustawiaja kolumny wierszom .file-entry.media. */
@media screen and (max-width:959px){
  .user-playlists-accordion .file-entry.media .file-info{grid-template-columns:34px 50px 40px 3.6em minmax(0,1fr) auto;}
  .user-playlists-accordion .file-entry.media .file-info > .remove-from-playlist{display:flex;align-items:center;grid-column:1;grid-row:1 / span 2;margin:0;justify-self:start;}
  .user-playlists-accordion .file-entry.media .file-info > .remove-from-playlist button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;padding:0;}
  .user-playlists-accordion .file-entry.media .file-info > a,
  .user-playlists-accordion .file-entry.media .file-info > .image{grid-column:2;}
  .user-playlists-accordion .file-entry.media .file-info .controls{grid-column:3;}
  .user-playlists-accordion .file-entry.media .file-info .time-display{grid-column:4;}
  .user-playlists-accordion .file-entry.media .file-info .time-display.current{grid-column:4;}
  .user-playlists-accordion .file-entry.media .file-info .file-description{grid-column:5;}
  .user-playlists-accordion .file-entry.media .file-info .file-details{grid-column:6;}
}

/* opis kompozytora czyta sie lepiej do lewej - justowanie rozciagalo odstepy miedzy slowami */
.composer-card__description, .composer-card__description p{text-align:left;}

/* POWIAZANE ALBUMY NA TELEFONIE I TABLECIE
   #pages-related ma w podstawowych stylach display:none, a widoczne robi sie dopiero
   w @media (min-width:960px) - ponizej tego progu sekcja znikala i w lewej kolumnie
   zostawala dziura. Pokazujemy ja tak samo jak okladki: dwie kolumny na cala szerokosc. */
@media screen and (max-width:959px){
  #pages-related, .composer-albums{display:block;clear:both;width:100%;margin:0 0 1.5em;padding:0 1em;} /* ten sam odstep od krawedzi co wiersze listy utworow */
  #pages-related > h2{margin:1.5em auto .8em;padding-top:0;color:var(--color-divider);font-size:1.25em;text-align:center;}
  /* siatka sama dobiera liczbe kolumn: dwie na telefonie, wiecej na tablecie,
     zamiast sztywnych 50% ( na tablecie robily sie okladki po 370 px ) */
  #pages-related .pages-gallery, .composer-albums .pages-gallery{display:grid;grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr));gap:10px;margin:0;}
  #pages-related .pages-gallery .page, .composer-albums .pages-gallery .page{width:auto;min-width:0;margin:0;} /* ta sama szczegolowosc co reguly desktopowe, inaczej 22% wygrywa */
  #pages-related .pages-gallery .page img, .composer-albums .pages-gallery .page img{display:block;width:100%;height:auto;}
  #pages-related .title, .composer-albums .title{font-size:.8em;}

  /* kolejnosc na telefonie: okladka i dane albumu, potem lista utworow, a powiazane albumy
     na samym koncu. Lewa kolumna oddaje swoje dzieci do #content ( display:contents ),
     dzieki czemu mozna im ustawic kolejnosc niezaleznie od tresci strony. */
  .column-left{display:contents;}
  .column-left > *{order:3;}                                   /* ocena, czas, liczba utworow, widgety - pod tresc */
  .column-left > .images-column{order:1;}                      /* okladka zostaje na samej gorze */
  #content > #page, #content > .column-right{order:2;}         /* tytul, lista utworow, kompozytor, poprzedni/nastepny */
  #pages-related, .composer-albums{order:4;}      /* powiazane albumy na koncu */

  /* na stronie albumu nie powtarzamy odnosnika "Albumy" - i tak jestesmy w albumie */
  .is-product #page .breadcrumb{display:none;}

  /* przejscie do poprzedniego / nastepnego albumu ( widgets-14 ) tez pod liste utworow -
     na gorze wchodzilo miedzy dane albumu a tytul */
  #page.column-right{display:flex;flex-direction:column;}
  #page.column-right > .widgets-list.widgets-14{order:99;}

  /* wizytowka kompozytora ( widgets-12 w .column-2 ) tez pod liste utworow.
     .album-description oddaje swoje dwie kolumny do artykulu, zeby dalo sie im
     ustawic kolejnosc osobno: tytul zostaje na gorze, kompozytor idzie na dol. */
  #page.column-right > .album-description{display:contents;}
  #page.column-right .album-description > .column-1{order:1;}
  #page.column-right > .controls{order:2;}
  #page.column-right > .audiofilesList{order:3;}
  #page.column-right .album-description > .column-2{order:50;}
  #page.column-right > .widgets-list.widgets-11{order:60;} /* np. "Zaloguj sie i odkryj wiecej" - pod liste utworow */

  /* strona "Utwory": kolumna z polecanymi ( widgets-16 ) pod lista, nie nad nia */
  #content > .widgets-list.widgets-16{order:50;}
}

/* wyszukiwarka w okienku ( telefon ): lupka na bialym tle, tak jak na desktopie.
   Szare tlo bralo sie z ogolnej reguly dla button[type="submit"], a zdejmowala je
   tylko regula w @media (min-width:960px). */
#search-form .field, #search-form .btn{background:none;}
#search-form .btn{border-color:transparent;}

/* Za duze napisy w widgetach zmniejsza na telefonie plugins/widget-headings-mobile.js -
   decyduje pomiar ( wiecej niz 20 px => polowa ), bo rozmiary bywaja wpisane w tresci widgetu. */

/* GORNY PASEK NA WASKICH EKRANACH
   Przy 320 px pasek lamal sie na dwie linie ( logo w pierwszej, ikony w drugiej ), a ikona
   wyszukiwarki i ustawien scisnely sie do zera. Trzymamy jedna linie i przycinamy odstepy. */
/* pasek nie lamie sie na dwie linie na zadnej szerokosci ponizej desktopu */
@media screen and (max-width:959px){
  #head1 .container{flex-wrap:nowrap;}
  #logo{min-width:0;}
  #menus{flex:1 1 auto;min-width:0;justify-content:flex-end;}
  #menus > *{flex:0 0 auto;}
  #menus .user-info .user-link{margin-right:.35em;}
  #menus .settings{margin:0 .6em;}
}

@media screen and (max-width:480px){
  #menus .icon-search{width:20px;height:20px;margin-right:.3em;}
  #menus .settings{margin:0 .4em;width:18px;height:18px;}
  #menus .link-library{margin:0 .3em;}
  #menus .user-info{padding:0;}
  #menus .user-info .user-link{margin-right:.25em;}
  #menus .hamburger{padding:.5em;}
}

/* najwezsze telefony ( 320-400 px ): same ikony musza sie zmiescic obok logo */
@media screen and (max-width:400px){
  #menus .user-info .user-link{margin-right:.15em;}
  #menus .user-info .icon{width:20px;height:20px;}
  #menus .link-library .icon-2{width:26px;height:26px;}
  #menus .hamburger{padding:.35em;}
  #menus .hamburger-box{width:28px;}
}

/* PANEL MENU NA DESKTOPIE
   Na telefonie lista trzyma sie dolnej krawedzi ( obsluga kciukiem ), ale na duzym ekranie
   lepiej wyglada wysrodkowany uklad: logo nad calascia, a menu w trzech kolumnach obok siebie. */
@media screen and (min-width:960px){
  .mobile-nav__panels{flex-flow:row wrap;justify-content:center;align-items:flex-start;align-content:center;gap:2rem 4rem;padding:3rem 2rem 1rem;text-align:center;}
  .mobile-nav__logo{flex:0 0 100%;margin:0 0 1.5rem;padding:0;text-align:center;}
  .mobile-nav__menu{flex:0 1 auto;min-width:15rem;max-width:24rem;}
  .mobile-nav__panels a{font-size:1.725rem;padding:.35em 0;} /* na desktopie napisy o polowe wieksze */
  .mobile-nav__parent > a{font-size:1.425rem;}
  /* w podmenu zostaje jedna lista - puste kolumny znikaja, zeby dalo sie ja wysrodkowac */
  .mobile-nav.is-drilled .mobile-nav__panels .mobile-nav__menu{display:none !important;}
  .mobile-nav.is-drilled .mobile-nav__panels{align-content:center;}
  .mobile-nav.is-drilled .mobile-nav__panels > ul.is-shown{flex:0 1 auto;min-width:16rem;max-width:32rem;}
}

/* SZCZEGOLY PLIKU ( rozwiniety utwor )
   Data dodania i rozmiar to krotkie wartosci - nie moga sie lamac na dwie linijki. */
.file-date .value, .file-size .value{white-space:nowrap;}
.file-date, .file-size{white-space:normal;}

/* Licznik odtworzen utworu ( core/libraries/file-stats.php ) - zachowuje sie jak sasiednie wiersze */
.file-plays .value{font-weight:600;white-space:nowrap;}

/* PASEK ODTWARZACZA I TRYB PELNOEKRANOWY
   Czas i odliczanie stykaly sie ze soba, glosnosc byla waska i tuz przy play/pause. */
.current-time-display{display:inline-flex;align-items:baseline;gap:.45em;}
.current-time-display #player-current-time:after{content:'/';margin-left:.45em;opacity:.35;font-weight:300;}
.tape-container{cursor:pointer;} /* szpule zatrzymuja i wznawiaja utwor */

.fs .current-time-display{gap:.7em;}
.fs .buttons{margin:0 1em 2.5rem;}
.fs .buttons .icon{width:48px;height:48px;} /* play/pause pod kciuk, nie 25px */
.fs .player-settings{width:100%;justify-content:center;margin-top:.5rem;order:10;}
/* wyzsza waga niz reguly telefonu ( .controls.playlist-player .volume{width:80px} ) */
.fs .volume,
.controls.playlist-player.fs .volume,
.controls.favorites-playlist-player.fs .volume{width:90%;max-width:none;flex-direction:row;align-items:center;justify-content:center;gap:1em;} /* sam suwak wychodzi wtedy na ~80% ekranu */
.fs .volume label{flex:0 0 auto;font-size:.8rem;opacity:.5;}

/* na duzym ekranie suwak przez pol ekranu wyglada dziwnie - wystarczy 300 px */
@media screen and (min-width:960px){
  .fs .volume,
  .controls.playlist-player.fs .volume,
  .controls.favorites-playlist-player.fs .volume{width:300px;max-width:300px;}
}
/* identyfikator, bo #volume-control z gory pliku ustawia szerokosc 50px i wysokosc 2px */
.fs .volume #volume-control{flex:1 1 auto;width:auto;height:6px;border-radius:3px;background:rgba(255,255,255,.25);-webkit-appearance:none;appearance:none;}
.fs .volume #volume-control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border:0;border-radius:50%;background:#fff;cursor:pointer;}
.fs .volume #volume-control::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.25);}
.fs .volume #volume-control::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;cursor:pointer;}

/* OKIENKO UDOSTEPNIANIA UTWORU
   Szersze niz wczesniej, a na gorze - w jednej linii - miniatura albumu, tytul i czas,
   tak samo jak w okienku pobierania i dodawania do playlisty. */
.share-popup{width:min(520px, 92vw);padding:1.2em;}
.share-popup-content{display:block;width:100%;}
.share-popup-head{display:flex;align-items:center;gap:.8em;margin:0 1.8em .9em 0;}
.share-popup-thumb{flex:0 0 auto;}
.share-popup-thumb img{display:block;width:56px;height:56px;object-fit:cover;}
.share-popup-thumb .image{width:56px;height:56px;margin:0;}
/* tlo okienka jest ciemne ( #444 ) - napisy musza byc jasne, tak jak podpis pod adresem */
.share-popup-title{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;margin:0;color:var(--color-bg2);font-size:1em;line-height:1.25;overflow:hidden;}
.share-popup-title span{font-size:.75em;opacity:.7;}
.share-popup-title a{color:inherit;text-decoration:none;}
.share-popup-time{flex:0 0 auto;color:var(--color-bg2);font-size:.85em;opacity:.7;white-space:nowrap;}
.share-popup-row{display:flex;align-items:center;gap:.5em;}
.share-popup .share-popup-row label{padding:0;font-size:.75em;white-space:nowrap;}
input[type="text"].share-popup-link{flex:1 1 auto;width:auto;min-width:0;margin:0;}
.share-popup-copy{font-size:1em;}

/* ZAKLADKI "ALBUMY / UTWORY" ( widget type 27 )
   Podswietlenie oznacza strone, na ktorej jestesmy: ciemny kafelek z bialym napisem,
   bez odnosnika. Druga zakladka to zwykly napis - w nia sie klika. */
.tabs .page{border-radius:0;} /* kafelek bez zaokraglen */

/* biezaca zakladka - podswietlona */
.tabs .page.selected{background:var(--color-dark);cursor:default;opacity:1;}
.tabs .page.selected:hover{background:var(--color-dark);opacity:1;cursor:default;}
.tabs .page.selected .title, .tabs .page.selected .title .current,
.tabs .page.selected:hover .title, .tabs .page.selected:hover .title .current{color:var(--color-bg);}

/* druga zakladka - zwykly odnosnik, bez tla */
.tabs .page:not(.selected){background:none;}
.tabs .page:not(.selected) .title a{color:var(--color-dark);}
.tabs .page:not(.selected):hover{background:none;}
.tabs .page:not(.selected):hover .title a{color:var(--color-gray);}

/* oba napisy jako inline-block z tym samym odstepem - kafelek jest wtedy rowny, a biezaca
   zakladka zajmuje tyle samo miejsca co klikalna */
/* h1 ( biezaca zakladka ) i h2 maja rozne rozmiary domyslne, a napisy maja byc rowne -
   dlatego rozmiar idzie w rem, nie w em liczonym od naglowka */
.tabs .page .title, #page .tabs .page .title{margin:0;padding:0;line-height:1;} /* h1 ma wlasne marginesy z #page h1 - stad selektor z id */
.tabs .title a, .tabs .page.selected .title .current{display:inline-block;font-size:2.5rem;padding:.25em .45em;}
.tabs .page.selected .title .current{font-weight:600;} /* rozmiar ustawia regula wyzej ( w rem ) */
@media screen and (max-width:800px){
  .tabs .title a, .tabs .page.selected .title .current{font-size:1.75rem;}
}

/* MOJE POBRANE: zaznaczanie utworow i licencja zbiorcza */
.downloads-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1.2em;margin:0 0 1em;padding:.6em 0;}
.downloads-bar__all{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;font-size:.9em;}
.downloads-bar__count{font-size:.85em;opacity:.7;}
.downloads-bar__button{margin-left:auto;padding:.5em 1.1em;border:1px solid var(--color-text);border-radius:6px;background:none;color:var(--color-text);font-size:.9rem;cursor:pointer;}
.downloads-bar__button:hover:not(:disabled){background:var(--color-text);color:var(--color-bg);}
.downloads-bar__button:disabled{opacity:.4;cursor:default;}
.user-downloads-table td.downloads-check, .user-downloads-table th.downloads-check{width:2.2em;text-align:center;}
.user-downloads-table .downloads-select, .user-downloads-table .downloads-select-all{width:18px;height:18px;cursor:pointer;}
@media screen and (max-width:959px){
  .downloads-bar__button{margin-left:0;width:100%;}
}

/* "+" w okienku pobierania i pozycje oczekujace w moich pobranych */
.download-popup .queue-button{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border:1px solid var(--color-text);border-radius:6px;background:none;color:var(--color-text);font-size:.95rem;cursor:pointer;}
.download-popup .queue-button .icon{width:16px;height:16px;fill:currentColor;}
.download-popup .queue-button:hover:not(:disabled){background:var(--color-text);color:var(--color-bg);}
.download-popup .queue-button.is-added{border-color:#2f8f4e;color:#2f8f4e;}
.download-popup .queue-button.is-error{border-color:#b4433a;color:#b4433a;}
.download-pending{display:inline-block;padding:.15em .6em;border:1px solid var(--color-gray2);border-radius:10px;font-size:.8em;opacity:.8;}
.downloads-bar__link{padding:0;border:0;background:none;color:var(--color-text);font-size:.85em;text-decoration:underline;cursor:pointer;}
.downloads-bar__link:hover{opacity:.7;}
.downloads-bar__form{display:none;}
.downloads-bar__button--main{margin-left:.6em;border-color:var(--color-dark);background:var(--color-dark);color:var(--color-bg);}
.downloads-bar__button--main:hover:not(:disabled){background:var(--color-text);border-color:var(--color-text);}
@media screen and (max-width:959px){
  .downloads-bar__button--main{margin-left:0;width:100%;}
}

/* OKIENKO "UTWOR NIEDOSTEPNY DO POBRANIA"
   Tytul z okladka zajmuje 2/5 szerokosci, komunikat 3/5 - wczesniej tytul lamal sie
   po jednym slowie, a tekst zlewal sie z tlem. */
.download-popup.not-available .popup-content{flex-wrap:nowrap;align-items:center;gap:1.5em;}
.download-popup.not-available .popup-content > a,
.download-popup.not-available .popup-content > .image{flex:0 0 auto;}
.download-popup.not-available .popup-content > h3{margin:0;min-width:0;}
.download-popup.not-available .popup-content > h3:nth-of-type(1){flex:2 1 0;font-size:1.05em;line-height:1.25;}
/* .popup-content h3 jest kolumna flex - odnosnik "wiadomosc" wypadal przez to do nowej linii */
.download-popup.not-available .popup-content > h3:nth-of-type(2){display:block;flex:3 1 0;font-weight:400;font-size:.95em;line-height:1.45;color:var(--color-dark);}
.download-popup.not-available .popup-content > h3:nth-of-type(2) a{color:var(--color-dark);text-decoration:underline;}
.download-popup.not-available .popup-content > .cancel-button{flex:0 0 auto;align-self:center;}

/* przycisk Anuluj byl bialym napisem na jasnym tle */
.cancel-button{background-color:var(--color-dark);color:#fff;border-radius:6px;}
.cancel-button:hover{background-color:var(--color-text);}

@media screen and (max-width:800px){
  .download-popup.not-available .popup-content{flex-wrap:wrap;}
  .download-popup.not-available .popup-content > h3:nth-of-type(1),
  .download-popup.not-available .popup-content > h3:nth-of-type(2){flex:1 1 100%;}
}

/* MOJE PRZESLUCHANIA ( widget 105 ) */
.user-plays-table{width:100%;border-collapse:collapse;}
.user-plays-table th{text-align:left;font-size:.8em;font-weight:500;color:var(--color-gray);padding:.4em .6em;border-bottom:1px solid var(--color-bg2);}
.user-plays-table td{padding:.5em .6em;border-bottom:1px solid var(--color-bg3);vertical-align:middle;}
.user-plays-table td.icon{width:2.2em;}
.user-plays-table td.icon .icon{width:20px;height:20px;fill:var(--color-gray);}
.user-plays-table td.thumb{width:56px;}
.user-plays-table td.thumb img{display:block;width:48px;height:48px;object-fit:cover;}
.user-plays-table td.title a{color:var(--color-text);}
.user-plays-table th.count, .user-plays-table td.count{text-align:right;}
.user-plays-search{margin:0 0 1em;}
@media screen and (max-width:959px){
  .user-plays-table thead{display:none;}
  .user-plays-table tr{display:grid;grid-template-columns:2.2em 56px minmax(0,1fr) auto;align-items:center;column-gap:.6em;padding:.4em 0;border-bottom:1px solid var(--color-bg3);}
  .user-plays-table td{border:0;padding:.15em .2em;}
  .user-plays-table td.icon{grid-column:1;grid-row:1 / span 2;}
  .user-plays-table td.thumb{grid-column:2;grid-row:1 / span 2;}
  .user-plays-table td.title{grid-column:3;grid-row:1;}
  .user-plays-table td:nth-child(4){grid-column:3;grid-row:2;font-size:.8em;opacity:.7;}
  .user-plays-table td:nth-child(5), .user-plays-table td:nth-child(6){display:none;}
  .user-plays-table td.count{grid-column:4;grid-row:1;}
  .user-plays-table td:last-child{grid-column:4;grid-row:2;font-size:.75em;opacity:.7;text-align:right;}
}

.user-plays-note{margin:.8em 0 0;font-size:.85em;opacity:.7;}

/* MOJE PRZESLUCHANE NA TELEFONIE
   Lista utworow ma isc na cala szerokosc, tak jak pozostale listy - tresc strony
   ma po bokach 2em paddingu ( #page div.content ), wiec widget wychodzi poza nie. */
@media screen and (max-width:959px){
  #page div.content .widget.type-105{margin-left:-2em;margin-right:-2em;}
  #page div.content .widget.type-105 .user-plays-search,
  #page div.content .widget.type-105 .user-plays-note,
  #page div.content .widget.type-105 .files-empty,
  #page div.content .widget.type-105 .pagination{padding-left:2em;padding-right:2em;} /* filtr i opisy zostaja przy tresci */
  /* okladka nie moze dotykac krawedzi ekranu - taki sam odstep jak w liscie utworow albumu */
  #page div.content .widget.type-105 .file-entry .file-info{padding-left:1em;}
}

/* Jednakowe paski fali w calej liscie.
   Wiersz to flex: tytul ma baze 450px, fala 100% i oba sie kurcza. Bez min-width:0 tytul
   nie moze zejsc ponizej najdluzszego slowa, wiec dluzszy tytul zjadal szerokosc fali
   i pierwszy utwor mial krotszy pasek. Numer pliku dostaje stala szerokosc z tego samego powodu. */
.file-entry .file-info > .file-id{flex:0 0 4.2em;width:4.2em;}
.file-entry .file-info > .file-description{min-width:0;}
.file-entry .file-info > .file-description .song-title{overflow-wrap:anywhere;}

/* IKONKI W GORNYM PASKU
   Przygaszone, a ta od strony, na ktorej jestesmy, swieci pelna moca. */
#menus .user-link, #menus .link-library .library-link, #menus #search-icon, #menus .settings{opacity:.5;transition:opacity .2s ease;}
#menus .user-link:hover, #menus .user-link:focus-visible, #menus .user-link.selected,
#menus .link-library .library-link:hover, #menus .link-library .library-link:focus-visible,
#menus .link-library .library-link.selected,
#menus #search-icon:hover, #menus #search-icon.selected,
#menus .settings:hover, #menus .settings.selected{opacity:1;}