/* Quick.Cms.Ext v6.x widgets stylesheet */
/* WIDGETS
  to style widgets in specific location use:
  .widgets-1 ... - type: top header
  .widgets-2 ... - type: header below menu
  .widgets-3 ... - type: footer after content
  .widgets-4 ... - type: footer under page footer
  #content ... - type: inside page content
*/

/* GLOBAL */
.widgets-1 { position: fixed; margin: 0 auto; text-align: left;  width: 100%; height: 100%; z-index: 500; background: var(--color-bg); display: flex; justify-content: center; align-items: center; }

.widgets-1 > ul > li{float:left;margin:0px 0;color:var(--color-grey);}
.widgets-1 div.head{margin-bottom:10px;text-align:center;font-size:1em;color:var(--color-primary);}
.widgets-2 > ul, .widgets-2 > ul > li, .widgets-3 > ul, .widgets-3 > ul > li{padding: 0;}
.widget div.head{margin-bottom:10px;text-align:center;font-size:1.25em;color:var(--color-primary);}
.widgets-1 > ul, .widgets-2 > ul, .widgets-3 > ul, .widgets-4 > ul{display:flex;flex-flow:row wrap;justify-content:start;list-style:none;width:100%;}
.widget > div.description{padding-bottom:5px;}
.widget ul{list-style:none;}
.widget{flex:0 0 98%;}

.widgets-list.widgets-3 .widget{flex:0 0 20%;}

/* TYPE: HEADER|FOOTER - GLOBAL */
.widgets-2 > ul > li, .widgets-3 > ul > li{margin:0;border-top:0px solid #e8eaee;}
.widgets-list.widgets-3{width: 70%;display:flex;}

/* INSIDE PAGE CONTENT - GLOBAL */
.home #content .widget{clear:both;margin:2rem 0;padding:3rem 0;}
#content .widget{clear:both;margin:2rem 0;padding:.1rem 0;}
.user-page #content .widget, .is-product #content .widget{margin:0;}
#content .widget.downloaded{margin:0;}

/* Display option: CONTENT */
.widget.type-1 ul, .widget.type-1 ol{padding:0 0 0 30px;overflow:hidden;}
.widget.type-1 li{margin:5px 0;padding:0;border-left:0;}
.widget.type-1 p{padding-bottom:7px;}

/* Display option: PAGE */
.widget.type-2 img{margin:0;box-shadow:0 0 4px rgba(100,100,100,0.4);margin-left:0em;}
.widget.type-2 img:hover{opacity:0.8;}
.widget.type-2 div.description{margin-top:0.3em;text-align:justify;}
#content .widget.type-2{border:0px solid #e8eaee;}
.widget.type-2 .more{display:block;padding-top:0.3em;}

/* Display option: SLIDER
   slider styles in style-slider.css file */
.widget.type-3{padding-left:0;padding-right:0;}

/* Display option: MENU */
.widget.type-4 nav ul{list-style:none;}

.widget.type-4 .level-0-el{font-size:.7em;}
.widget.type-4 .level-0-el a{text-decoration:none;}
.widget.type-4 .level-0-el ul{font-size:0.895em;}
.widget.type-4 .level-0-menu li{padding-top:2px;text-align:center;}
.widget.type-4 .level-1-menu li:before{content:'>';margin:0 0.4em 0 -1.1em;font-size:0.824em;color:var(--color-primary);font-weight:bold;}
#content .widget.type-4{border:0px solid #e8eaee;}

/* Display option: SUBPAGES
   other subpages styles you will find in style.css file in SUBPAGES LIST STYLES section
   just move it here and add .widgets-2 to create custom version */


/* ADMIN OPTIONS */
.widget-edit{position:absolute;display:block;left:2em;}
.widget-edit a{position:absolute;left:-15px;top:-21px;opacity:0.6;}
.widget-edit a:hover{opacity:1;}

.about-composer img{width:50px;} 
.about-composer .image{float:left;margin-right:1em;}

@media print{
  /* PRINT STYLES */
  .widgets-1{position:static;width:17.2cm;height:auto;margin:0;overflow:visible;}
}

/* PLUGINS */

.user-playlists-accordion {     margin: 20px 0;     border: 1px solid #ddd;     border-radius: 8px;     overflow: hidden; width:90%;margin:0 auto;max-width:1440px;} 
.playlist-item .play-all{display:none;}
.playlist-item.selected .play-all{display:block;}
.playlist-item {     border-bottom: 1px solid #ddd; }  
.playlist-item.selected .playlist-header{background-color: #ccc;}
.playlist-item.selected:before{content:'';margin-right:7px;background:#000;width:40px;height:100%;}
.playlist-header {     padding: 5px;    background-color: #f1f1f1;     cursor: pointer;     display: flex;     justify-content: space-between;     align-items: center; }  
.playlist-item.selected .playlist-header button{}
.playlist-header:hover {     background-color: #eee; }  
.playlist-name {     font-weight: bold;font-size:1em; }  
.playlist-date {     font-size: 0.9em;     color: #666; }  
.playlist-status svg {     width: 16px;     height: 16px;     fill: #4caf50; /* Zielony dla aktywnych */ }  
.playlist-status .icon-xmark {     fill: #f44336; /* Czerwony dla nieaktywnych */ }  
.playlist-item.selected .playlist-files-container {padding:1em 0}
.playlist-files-container {     padding: 0;     background-color: #fff; }  
.playlist-files-container .file-entry {     margin-bottom: 10px; }
.playlist-name {    font-weight: bold;}
.user-playlists-accordion  sup {    color: #999;    font-weight: 300;padding:.2em 1em;}
.playlist-header span{width:auto;text-align:left;display:flex;flex-direction:column;}
.user-playlists-accordion #current-image img{width:200px;}
/* USERS */
/* login panel */
#user-panel{margin:0 auto;}
#user-panel .button input{padding:.6em 1.2em .6em 3em;background-repeat:no-repeat;background-position:1em center;text-transform:uppercase;}
#user-panel .button input:hover{background-color:var(--color-text);color:var(--color-bg);}
#user-panel .links{margin:.4em 0;text-transform:lowercase;}
#user-panel .links:before{content:'>';margin-right:7px;font-size:0.824em;color:var(--color-primary);font-weight:bold;}
/* messages */
#user-panel.msg.error{background-image:none;font-size:1.25em;height: 100vh;display: flex;justify-content: center;align-items: center;}
.msg#profile, .msg#user-panel{padding:3rem 0;background-position:center 15px;}
/* checkboxes (e.g. acceptance ) in register form */
#profile .option{margin:0 0 1.25rem;display: flex;justify-content: start;align-items: center;}
#profile .option label{margin-left:.4rem;font-weight:normal;}
/* not required fields are default hidden */
#profile.register #user-not-required{display:none;}
/* send button for profile in widgets list (outside of page content) */
.widgets-list #profile .save{text-align:left;}
.widgets-list ul{list-style:none;}
/* links for logged users */
.widget.type-26 .user-link{display:block;padding:.5em 0 .5em 2em;background:url('img/users_profile.png') no-repeat left center;}
.widget.type-26 .logout{background-image:url('img/users_logout.png');}
.widget.type-26 .orders{background-image:url('img/users_orders.png');}

/* Display option: ADVANCED SEARCH */
.widget.type-29{width:98%;border-top:0px solid #e8eaee;}
#search-form-advanced{margin:10px auto 0;padding:10px;}
#search-form-advanced ul{list-style:none;}
#advanced-fields .phrase input, #advanced-fields select{min-width:250px;max-width:95%;}
#advanced-fields:after{content:'';clear:left;display:table;}
#advanced-fields > li{padding-bottom:15px;}
#advanced-fields label{display:block;margin-bottom:4px;}
#advanced-fields ul .head{font-weight:bold;padding-bottom:5px;}
#advanced-fields ul label{font-weight:normal;}
#advanced-fields .features label{margin:0;}
#advanced-fields .features li{padding-bottom:5px;}
#advanced-fields .button{padding:20px 0 0;}
  .composers-albums h2.head, .composers-tracklist h2.head{font-size:3em;margin:2em  auto 1em;text-align:center;}
/* ORDERING */
.widget.type-31{width:98%;}
.widget.type-32{width:98%;} /* user orders */

/* Display option: NEXT PREVIOUS PAGE */
.widget.type-28{flex-basis:94%;border:0;}
.widget.type-28 .next-prev{list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;padding:0 4em;}
.widget.type-28 .next{margin-left:auto;}
.widget.type-28 li a{display:inline-block;margin:.5rem 0;padding:5px 10px;text-decoration:none;background:none;color:var(--color-text);border:1px solid var(--color-text);font-size:.8em;}
.widget.type-28 li a:hover{background:var(--color-text);color:var(--color-bg);}


.widget.shortcuts div.head{font-size:2em;}
.widget.shortcuts .description{display:flex;align-items:center;justify-content:center;margin:2em;}
button.toggle-description{border:1px solid var(--color-text);padding:5px;}

/* Display option: COMMENTS */
.widget.type-24 .name{margin-bottom:0.5em;font-weight:bold;color:#0070b8;}
.widget.type-24 p{line-height:1.4375rem;}

/* Display option: SOCIAL LINKS */
.type-13 ul{display:inline-block;list-style:none;}
.type-13 li{display:inline-block;margin:0 8px;vertical-align:middle;}
#content .type-13 img{box-shadow:none;}

/* SIDE TAB */
.side-tab-widget{position:fixed;right:-100px;top:50%;z-index:51;background:#222;font-size:0.75em;border-top-left-radius:15px;border-top-right-radius:15px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);}
.side-tab-widget a{display:block;padding:13px;text-decoration:none;color:#fff;font-size:1.633em;}
.subscribe .pages-plans{padding: 2em}
/* Display option: CONTACT PANEL
   other contact panel styles you will find in style.css file in CONTACT-PANEL section
   just move it here and add .widgets-1 to create custom version */
.type-7{flex-basis:93%;}
.type-7 div.head, #content .widget.type-7 div.head{text-transform:none;}
.column-left-pages .pages-gallery .page{width:100px;}
.column-left-pages.type-5 .pages-gallery{display:flex;flex-wrap:wrap;flex-direction:row;}
.column-left-pages.type-5 .pages-gallery .page{width:100px;flex-grow:0;}


/* SCROLL BACK TO TOP */
.back-to-top-widget{position:fixed;bottom:30px;right:0.5%;z-index:500;}
.back-to-top-widget a{display:block;width:80px;text-align:center;color:#666;text-transform:uppercase;text-decoration:none;transition:1s;opacity:0.3;}
.back-to-top-widget div.head{color:#666;font-size:1em;transition:1s;}
.back-to-top-widget a:hover, .back-to-top-widget a:hover div.head{opacity:1;color:#0093dd;text-decoration:none;}
.back-to-top-widget a:before{content:'';display:block;width:100%;height:90px;margin-bottom:7px;background:#607380 url('img/back_to_top.png') no-repeat center center;border-radius:15px;transition:1s;}
.back-to-top-widget a:hover:before{background-color:#0093dd;}
@media screen and (min-width:640px){
  .widget{flex:0 0 50%;}
  .widget.third-size{flex:0 0 31%;}
  .widget.half-size{flex:0 0 48%;}
  .widget.full-size{flex:0 0 98%;}
}
@media screen and (min-width:1024px){
  #advanced-fields{display:grid;grid-template-columns:1fr 1fr;}
  #advanced-fields .phrase{grid-column:1;}
  #advanced-fields .features{grid-column:2;grid-row:1 / span 3;}
  #advanced-fields .category{grid-column:1;}

  #advanced-fields .features ul{display:flex;flex-flow:row wrap;}
  #advanced-fields .features li.head{flex-basis:100%;}
  #advanced-fields .features li{flex-basis:50%;}
}

@media screen and (min-width:1280px){
  .widgets-1{}
  .widget{flex: 0 0 50%;}
}
@media screen and (min-width:801px){
  .widget.type-4 .level-0-menu li{text-align:left;}
  #user-panel.msg.error{width:50%;}
    .pageOffer .form-full{height:auto;}
  }
@media screen and (min-width:1280px){
  .back-to-top-widget{right:1.5%;}
  .back-to-top-widget a{opacity:0.6;}
  #user-panel, #profile { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }


}
@media screen and (max-width:800px){
    .widget.type-2 img{margin-left:0em;}
    .widgets-1{margin-top:3em;position:relative;}
    .form-full fieldset{width:80%;}
    .widget.promo{display:none;}
    #content .widget{padding:0;}
  .back-to-top-widget a{width:40px;}
  .back-to-top-widget a:before{height:40px;border-radius:22px;background-position:center top;border:2px solid #607380;}
  .back-to-top-widget a:hover:before{border-color:#0093dd;}
  .back-to-top-widget .description{display:none;}
  .widgets-3 > ul{flex-direction:column;font-size:1.7em;}
  .widgets-list.widgets-3{width:100%;}
  .albums .pages-gallery{flex-direction:row;flex-wrap:wrap;}
  .albums .pages-gallery .page{width:40%;}
  .widgets-1 > ul, .widgets-2 > ul, .widgets-3 > ul, .widgets-4 > ul{flex-flow:column nowrap;}
  .column-2 aside{width:85%;margin:0 auto;}
  .column-2 .head{margin-top:3em;}
  .widget.type-28 .next-prev{padding:1em;}
  .browse .image { position: relative; width: 100%; height: 30vh; overflow: hidden; }
    .browse .image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }
#user-panel.msg.error{width:100%;}
.widget.type-5 .pages-gallery .page{flex-grow:0;min-width:9rem;}
.composers-albums .page{max-width:19vh;}
.composers-albums ul{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;}
}
.subscribe .image{text-align:center;margin-bottom:2em;}
.close{position:absolute;z-index:2100;top:1em;right:1em;}
.widget.type-3 .slider .description{height: 100%; display: flex; justify-content: center; align-items: center;flex-direction:column;}
