/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.8.7
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2018 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/

/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(100% 100%);
          clip-path: inset(100% 100%);
}

.chosen-container.chosen-with-drop .chosen-drop {
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 25px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(50%, #f6f6f6), color-stop(52%, #eee), to(#f4f4f4));
  background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}

.chosen-container-single .chosen-default {
  color: #999;
}

.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}

.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url(img/6768c1976c2ad78da163.png) -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 100%;
}

.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url(img/6768c1976c2ad78da163.png) no-repeat 0px 2px;
}

.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: url(img/6768c1976c2ad78da163.png) no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
  background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(100% 100%);
          clip-path: inset(100% 100%);
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
  color: #fff;
}

.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: auto;
  border: 1px solid #aaa;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #eee), color-stop(15%, #fff));
  background-image: linear-gradient(#eee 1%, #fff 15%);
  cursor: text;
}

.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 1px 0;
  padding: 0;
  height: 25px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #999;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
  width: 25px;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 5px 3px 0;
  padding: 3px 20px 3px 5px;
  border: 1px solid #aaa;
  max-width: 100%;
  border-radius: 3px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 13px;
  cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 4px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url(img/6768c1976c2ad78da163.png) -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #eee), color-stop(80%, #fff));
  background-image: linear-gradient(#eee 20%, #fff 80%);
  -webkit-box-shadow: 0 1px 0 #fff inset;
          box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 1px solid #5897fb;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #222 !important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}

.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}

.chosen-rtl .chosen-choices li {
  float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: url(img/6768c1976c2ad78da163.png) no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url(img/a0b7f3f18d93f6730bb2.png) !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}

/* @end */

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2021 - 2025
 */

.app-music #app .popovermenu {
	display: block;
	box-sizing: content-box;
	top: 48px;
	padding: 0;
}

.app-music #app .popovermenu ul {
	display: block;
	margin: var(--default-grid-baseline);
}

.app-music #app .popovermenu ul li {
	padding: 0;
	line-height: var(--default-clickable-area, 44px);
}

.app-music #app .popovermenu ul li a {
	padding-left: 0;
	padding-right: 12px;
	line-height: var(--default-clickable-area, 44px);
	background-position: 10px center;
	background-size: 16px;
	width: 100%;
	opacity: .7;
}

.app-music #app .popovermenu ul li a .icon {
	padding-top: calc(var(--default-clickable-area, 44px)/2);
	padding-right: 0;
	padding-bottom: calc(var(--default-clickable-area, 44px)/2);
	padding-left: var(--default-clickable-area, 44px);
	vertical-align: bottom;
	background-size: inherit;
}

.app-music #app .popovermenu ul a:hover {
	opacity: 1.0;
}

.app-music #app .popovermenu ul li.disabled a {
	opacity: .15 !important;
}

.app-music #app .popovermenu ul li.disabled * {
	cursor: default !important;
}

.app-music #app .popovermenu.submenu a {
	padding-left: 0;
}

.app-music #app .popovermenu.submenu span {
	margin-left: 16px;
}

/* Compatibility for Internet Explorer which doesn't support the var() syntax; IE is supported on OC but not on NC */
.ie .app-music #app .popovermenu ul li,
.ie .app-music #app .popovermenu ul li a {
	line-height: 44px;
}

.ie .app-music #app .popovermenu ul li a .icon {
	padding-top: 22px;
	padding-bottom: 22px;
	padding-left: 44px;
}
/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2024
 */

#adv-search-area {
	margin-right: -30px; /* utilize the space which app-view reserves for alphabet-navigation */
}

#adv-search-area h1 {
	margin: 14px;
}

#adv-search-area select {
	scrollbar-width: thin;
}

#adv-search-rules .icon {
	display: inline-block;
	margin: 8px;
	vertical-align: middle;
}

#adv-search-controls {
	margin-left: 14px;
}

#adv-search-rules {
	width: fit-content;
	max-width: 100%;
	white-space: normal;
}

.adv-search-rule-row {
	margin-top: 10px;
}

#adv-search-rules a {
	opacity: .5;
}

#adv-search-rules a:hover {
	opacity: 1;
}

#adv-search-rules input {
	width: unset;
	max-width: unset;
}

#adv-search-rules .add-row:hover,
#adv-search-rules .add-row *:hover {
	background-color: var(--color-background-dark, #ededed);
}

#adv-search-common-parameters {
	margin-bottom: 16px;
}

#adv-search-common-parameters select {
	margin-right: 16px;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Pauli Järvinen 2016 - 2025
 */

/**
 * This style file contains definitions for the Albums view. Some of them are used also in the Podcasts view.
 */

.artist-area {
	clear: both;
	padding-top: 15px;
	display: inline-block;
	width: 100%;
}

.artist-area > h1 {
	margin-left: 14px;
}

.artist-area > h1 span:hover,
.artist-area > h1 span *:hover {
	cursor: pointer;
}

.album-area {
	padding: 14px;
	width: 480px;
	float: left;
}

.album-area > h2 {
	display: table-cell;
	position: relative;
	max-width: 424px;
	padding-bottom: 21px;
	white-space: nowrap;
	margin: 0;
}

.album-area > h2.placeholder {
	overflow: hidden;
}

.album-area > h2 > span {
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.album-area > h2.with-actions:not(.busy) > span {
	max-width: calc(100% - 24px);
}

.album-area > h2 span,
.album-area > h2 button {
	cursor: pointer;
}

.album-area > .albumart,
.album-area > .overlay {
	float: left;
	width: 190px;
	height: 190px;
	line-height: 190px;
	font-size: 105px;
	cursor: pointer;
	border-radius: var(--music-albumart-large-border-radius);
}

.album-area > .overlay {
	margin-left: -190px;
	visibility: hidden;
}

.album-area .albumart:hover ~ .overlay,
.album-area .overlay:hover {
	visibility: visible;
}


/* Albums view compact mode */
.view-container.compact .artist-area h1 {
	font-size: 24px;
}

.view-container.compact .album-area h2 {
	padding-left: 48px;
	font-size: 16px;
	padding-bottom: 8px;
	max-width: 360px;
}

.view-container.compact h1 .play {
	margin-bottom: 1px;
	width: 13px;
	height: 13px;
}

.view-container.compact h2 .play {
	width: 11px;
	height: 11px;
}

.view-container.compact .album-area {
	padding-top: 2px;
	padding-bottom: 10px;
	width: 382px;
}

.view-container.compact .album-area > .albumart,
.view-container.compact .album-area > .overlay {
	position: relative;
	margin-top: -40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	border-radius: var(--music-albumart-small-border-radius);
}

.view-container.compact .album-area > .overlay {
	margin-left: 0;
}


/* Albums and Podcasts view single column layout when there's no room for two columns or more */
.view-container.single-col .album-area,
.view-container.single-col.compact .album-area {
	width: 100%;
}

.view-container.single-col:not(.compact) .album-area > h2 {
	white-space: normal;
}

.view-container.single-col .album-area > h2 {
	max-width: calc(100% - 90px);
}

.view-container.single-col.compact .album-area > h2 {
	/* in the compact mode, specifying width using a percent wouldn't work because the position is not absolute */
	max-width: calc(100vw - 60px);
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2018 - 2020
 */

.alphabet-navigation {
	z-index: 5;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 50px;
	text-align: center;
}

.alphabet-navigation a {
	display: block;
	font-weight: bold;
	opacity: .1;
}

.alphabet-navigation a, .alphabet-navigation a * {
	cursor: default;
}

.alphabet-navigation a.available {
	display: block;
	opacity: .4;
}

.alphabet-navigation a.available, .alphabet-navigation a.available * {
	cursor: pointer;
}

.alphabet-navigation a.available:hover {
	opacity: .8;
}

.alphabet-navigation a.filler.dotted:before
{
	content: "\00b7";
}

.alphabet-navigation a.filler.dotted > span.letter-content
{
	display: none;
}


/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Pauli Järvinen 2017 - 2025
 */

#controls {
	height: 66px;
	padding: 0 20px 0 20px;
	top: 0;
	position: fixed;
	overflow: visible;
	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
	z-index: 1;
}

body:not(.snapjs-left) .app-music.nc14to24 #controls {
	top: 50px;
}

.ie #controls {
	top: 45px;
}

#controls, #controls * {
	display: none;
}

#controls.started, #controls.started * {
	display: inline-block;
}

#controls > img.right {
	position: absolute;
	top: 0;
	right: 0;
}

.control {
	background-size: contain;
	height: 32px;
	width: 32px;
	padding: 10px;
	margin: 0 12px 15px;
	cursor: pointer;
	opacity: .4;
}

#play-pause-container {
	position: relative;
	margin-top: 19px;
}

#play-controls {
	height: 66px;
	margin-left: 40px;
}

.control.small {
	height: 44px;
	width: 44px;
	margin: 13px 2px 9px;
}

#controls .control:hover, #controls .control:focus {
	opacity: 1;
}

#controls #play-pause-menu,
#controls #play-pause-menu::after /* the carret */ {
	transform: translateX(50%);
	right: 50% ;
}

#controls #context-menu-skip-prev {
	display: none;
}

#controls #playback-rate-control input {
	height: 3px;
	min-height: 3px;
	width: 180px;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 10px;
	background-color: silver;
}

.ie #controls #playback-rate-control input {
	height: auto;
	padding: 0;
}

#controls .albumart {
	position: relative;
	height: 50px;
	width: 50px;
	margin: 8px 12px 8px 46px;
	line-height: 50px;
	font-size: 25px;
	vertical-align: top;
}

#controls .song-info {
	position: absolute;
	height: 58px;
	left: 320px;
	width: 380px;
	margin: 0 4px 4px 4px;
	padding: 8px;
	vertical-align: top;
}

#controls .song-info span {
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: top;
}

#controls .title {
	font-weight: bold;
	font-size: 21px;
	line-height: 29px;
}

#controls .progress-info {
	position: absolute;
	top: 0px;
	left: 710px;
	right: 165px;
	max-width: 35%;
	text-align: center;
	margin: 7px auto 14px auto;
}

#controls .progress-info span {
	line-height: 30px;
}

#controls .progress, #controls .seek-bar {
	width: 100%;
	height: 15px;
	position: relative;
	background-color: #eee;
}

#controls.started .progress, #controls.started .seek-bar, #controls.started .play-bar, #controls .buffer-bar {
	display: block;
}

#controls .play-bar, #controls .buffer-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 15px;
	width: 0%;
	background-color: var(--color-primary, #1d2d44);
}

.ie #controls .play-bar, #controls .buffer-bar {
	background-color: #1d2d44;
}

.translucent {
	opacity: 0.75;
}

#controls .buffer-bar {
	opacity: 0.1;
}

#shuffle {
	position: absolute;
	right: 55px;
}

#repeat {
	position: absolute;
	right: 5px;
}

.control.toggle.active,
.control.toggle:hover {
	opacity: 1;
}

#controls .volume-control {
	position: absolute;
	right: 167px;
}

.ie.lte9 #controls .volume-control {
	display: none;
}

#controls #volume-icon {
	position: absolute;
	top: 0;
	left: 0;
}

#controls .volume-control input[type=range] {
	position: absolute;
	width: 58px;
	height: 3px;
	min-height: 3px;
	top: 31px;
	left: 21px;
	margin: 0;
	-webkit-appearance: none;
	background-color: silver;
	transform: rotate(270deg);
}

.ie #controls .volume-control input[type=range] {
	height:auto;
	top: 3px;
	left: 26px;
	background-color: transparent;
}

::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #666;
	border-radius: 100%;
	width: 10px;
	height: 10px;
}

:hover::-webkit-slider-thumb {
	cursor: pointer;
}

::-moz-range-thumb {
	-moz-appearance: none;
	background-color: #666;
	border-radius: 100%;
	width: 10px;
	height: 10px;
}

:hover::-moz-range-thumb {
	cursor: pointer;
}


/******************************************/
/* Two-line layout used on narrow windows */
/******************************************/

#controls.two-line ~ #app-view.started {
	padding-top: 90px;
}

#app-navigation + #app-content #controls.two-line {
	height: 90px;
}

#controls.two-line #shuffle {
	right: unset;
	left: 65px;
	top: 38px;
}

#controls.two-line #repeat {
	right: unset;
	left: 130px;
	top: 38px;
}

#controls.two-line .volume-control {
	right: 75px;
}

#controls.two-line .song-info {
	width: auto;
	right: 80px;
}

#controls.two-line .progress-info {
	left: 270px;
	right: 20px;
	top: 60px;
	max-width: 100%;
}

#controls.two-line .progress-info .progress-text {
	position: absolute;
	right: 0px;
	top: -8px;
	width: 90px;
}

#controls.two-line .progress-info .progress {
	position: absolute;
	width: auto;
	left: 0;
	right: 90px;
}

#controls.two-line .progress-info {
	left: 212px;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2021 - 2024
 */

.folder-tree {
	margin-top: 16px;
	margin-right: -50px; /* utilize the space reserved for the alphabet navigation */
	white-space: nowrap;
}

.folder-tree h2 > span {
	max-width: calc(100% - 36px);
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

.folder-tree .subfolders {
	margin-left: 36px;
}

.folder-tree .track-list {
	margin-left: 36px;
}

.folder-tree .track-list > li .ordinal {
	display: none;
}

.folder-tree .track-list > li .title-lines {
	max-width: calc(100% - 36px);
}

.folder-tree .track-list > li.more-less {
	padding-left: 0;
	white-space: normal;
}

.folder-tree .playlist-area {
	padding: 0;
}

.folder-tree .playlist-area h2 {
	margin-top: 4px;
	line-height: 36px;
}

.folder-tree .icon-folder,
.folder-tree .caret-overlay {
	width: 36px;
	height: 36px;
	float: left;
	background-size: contain;
	margin-right: 8px;
}

.folder-tree .caret-overlay {
	margin-left: -44px;
	margin-top: 2px;
	margin-bottom: -2px;
	visibility: hidden;
	cursor: pointer;
}

.folder-tree .icon-folder:hover ~ .caret-overlay,
.folder-tree .caret-overlay:hover {
	visibility: visible;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2022 - 2024
 */

.app-music .icon-audio {
	background-image: url(img/e700e9f6dacefcc89014.svg);
}

.app-music .icon-play-big {
	background-image: url(img/6fd341208c6fb65a349e.svg);
}

.app-music .icon-pause-big {
	background-image: url(img/ed91f97fb295bf00b331.svg);
}

.app-music .icon-stop {
	background-image: url(img/7fc2d5774510cc7b8567.svg);
}

.app-music .icon-skip-prev {
	background-image: url(img/e2acc71c2029173c3c00.svg);
}

.app-music .icon-skip-next {
	background-image: url(img/cbe13473fc4736d5c698.svg);
}

.app-music .icon-time {
	background-image: url(img/e8fa88a9d0540161fd13.svg);
}

.app-music .icon-to-file {
	background-image: url(img/8c0fa7b0d66a7b0ef3a8.svg);
}

.app-music .icon-from-file {
	background-image: url(img/18ced4587fdd6dc48fa5.svg);
}

.app-music .icon-sort-by-alpha {
	background-image: url(img/c30b9000ae24a7e2a45a.svg);
}

.app-music .icon-album {
	background-image: url(img/2b617943f06c23e169cf.svg);
}

.app-music .icon-folder-nav {
	background-image: url(img/f09b82dea166c4654592.svg);
}

.app-music .icon-audiotrack {
	background-image: url(img/c71907576ab22d7b32ab.svg);
}

.app-music .icon-library-music {
	background-image: url(img/29989b5ef89d4dec17d9.svg);
}

.app-music .icon-random-music {
	background-image: url(img/6ad002aa40dc97e983ab.svg);
}

.app-music .icon-radio {
	background-image: url(img/463648f71ce4ea7920a0.svg);
}

.app-music .icon-podcast {
	background-image: url(img/058d667a6bc07395c471.svg);
}

.app-music .icon-reload {
	background-image: url(img/2016b0e4ee0e58661a4c.svg);
}

.app-music .icon-radio-button {
	background-image: url(img/3c95b211b933f5398c04.svg);
}

.app-music .icon-radio-button-checked {
	background-image: url(img/4f46d5994fa6895e1a74.svg);
}

.app-music .icon-playlist {
	background-image: url(img/fcc31280153b30d028b2.svg);
}

.app-music .icon-smart-playlist {
	background-image: url(img/d7ebce8135cdcc74ae22.svg);
}

.app-music .icon-filter {
	background-image: url(img/ac53796a16703fae3404.svg);
}

/* The core does have style definitions for the starred icon but, at least on NC27, they use a css
 * variable which is undefined in our context. On the other hand, the basic gray star icon works fine.
 */
.app-music .icon-starred,
.app-music .icon-star:hover,
.app-music .icon-star:focus {
	background-image: url(img/afb9cc9d510138a3fc43.svg);
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Jan-Christoph Borchardt, http://jancborchardt.net
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Jan-Christoph Borchardt 2014
 * @copyright Pauli Järvinen 2017 - 2023
 */

.mobile #app-view {
	padding-left: 4px;
}

.mobile .artist-area {
	padding-top: 15px;
}

.mobile .artist-area > h1 {
	margin-left: 4px;
}

/* adjust album area to screen width */
.mobile .album-area {
	padding: 10px 30px 0 6px;
}

/* smaller album art */
.mobile .view-container:not(.compact) .album-area > .albumart,
.mobile .view-container:not(.compact) .album-area > .overlay {
	line-height: 50px;
	font-size: 30px;
	width: 50px;
	height: 50px;
	float: left;
	border-radius: var(--music-albumart-small-border-radius);
}
/* also adjust the overlay position */
.mobile .view-container:not(.compact) .album-area > .overlay {
	margin-left: -50px;
}

/* nicely display album name next to cover */
.mobile .view-container:not(.compact) .album-area h2 {
	padding: 0px 15px;
	position: absolute;
	left: 56px;
	height: 50px;
	line-height: 50px;
}
.mobile .view-container.single-col:not(.compact) .album-area h2 {
	white-space: nowrap; /* override multi-line normally allowed in .single-col */
}
.mobile .album-area > h2 > div {
	line-height: 1.2;
}
.mobile #app-view .heading-actions {
	top: 50px;
	right: 5px;
}

/* move track list to the left so it’s visible on small screens */
.mobile .view-container:not(.compact) .album-area .track-list {
	margin-left: 0;
	padding-top: 15px;
	clear: both;
}
/* align track title to the left with album title */
.mobile .view-container:not(.compact) .album-area .track-list > li:not(.more-less) {
	padding-left: 40px;
}
.mobile .view-container:not(.compact) .album-area .track-list > li.more-less {
	padding-left: 57px;
}

/* layout the play bar elements for less space */
#app-navigation + #app-content.mobile #controls {
	padding-left: 20px;
}
.mobile #play-controls {
	margin-left: 20px;
}
.mobile #controls.two-line .control,
.mobile #controls.two-line .song-info,
.mobile #controls .albumart {
	margin-left: 0;
	margin-right: 0;
}
.mobile #controls.two-line .song-info {
	left: 220px;
}
.mobile #controls.two-line .title {
	font-size: 14px;
}
.mobile #controls.two-line #shuffle {
	left: 55px;
}
.mobile #controls.two-line #repeat {
	left: 108px;
}
.mobile #controls.two-line .progress-info {
	left: 172px;
}
.mobile #controls #play-pause-menu {
	right: 0;
}

/* in portrait, there's even less space */
.mobile.portrait #controls #skip-prev-button {
	display: none;
}
.mobile.portrait #controls #context-menu-skip-prev {
	display: block;
}
.mobile.portrait #controls.two-line #shuffle {
	left: 35px;
}
.mobile.portrait #controls.two-line #repeat {
	left: 77px;
}
.mobile.portrait #controls.two-line .song-info {
	left: 172px;
}
.mobile.portrait #controls.two-line .progress-info {
	left: 124px;
}
.mobile.portrait #controls #play-pause-menu {
	right: -54px;
}
.mobile.portrait #controls #play-pause-menu::after /* the carret */ {
	left: 36px;
}

/* extra narrow screen matches small smart phones; drop non-essential elements and margins */
.mobile.portrait.extra-narrow #controls .albumart,
.mobile.portrait.extra-narrow #controls #volume-icon {
	display: none;
}
.mobile.portrait.extra-narrow #controls.two-line .song-info {
	left: 120px;
	right: 25px;
}
.mobile.portrait.extra-narrow .view-container.compact .album-area .track-list {
	margin-left: 0;
}
.mobile.portrait.extra-narrow .view-container:not(.compact) .album-area .track-list > li:not(.more-less) {
	padding-left: 0;
}
.mobile.portrait.extra-narrow .view-container:not(.compact) .album-area .track-list > li.more-less {
	padding-left: 18px;
}

/* min-width screen may result on desktop browser when manually resizing the window; here we need to drop also essential elements */
.mobile.portrait.min-width #controls .progress,
.mobile.portrait.min-width #controls .volume-control {
	display: none;
}
.mobile.portrait.min-width #controls.two-line .song-info {
	right: 10px;
}
.mobile.portrait.min-width #controls .progress-text {
	text-align: right;
}
/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Pauli Järvinen 2016 - 2025
 */

.app-music #app-navigation {
	--music-nav-item-height: var(--default-clickable-area, 44px);

	padding-bottom: calc(2 * var(--music-nav-item-height) + 4 * var(--default-grid-baseline, 0px)) !important;
	z-index: 999;
	overflow: unset;
	contain: content;
	height: 100%;
	top: 0;
}

#app-navigation > ul {
	height: 100%;
	padding: calc(var(--default-grid-baseline) * 2);
	padding-bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

#app-navigation > ul > li {
	/* The NC server 25-29 uses --border-radius-pill for the nav item highlight but we don't because that 
	   variable is available also at least on NC17-24 where the overall layout is not a good fit for the
	   rounded highlight. The --border-radius-rounded has slightly larger value but that doesn't cause 
	   any visual difference here because the radius already maxes out for line of height 44px with the
	   --border-radius-pill. NC30 introduced the new variable --border-radius-element for this purpose,
	   with somewhat lower value for the refreshed look-and-feel.
	*/
	border-radius: var(--border-radius-element, var(--border-radius-rounded));
	margin-bottom: var(--default-grid-baseline);
	transition: background-color .2s ease-in-out;
}

#app-navigation > ul > li:hover,
#app-navigation > ul > li:focus,
#app-navigation > ul > li:focus-within {
	background-color: var(--color-background-hover);
}

#app-navigation > ul > li.active {
	background-color: var(--color-primary-element-light);
}

#app-navigation .app-navigation-separator {
	border-bottom: 1px solid;
	border-color: var(--color-main-text, #222);
	opacity: 0.15;
}

#app-navigation .music-navigation-item {
	position: relative;
	height: var(--music-nav-item-height);
}

#app-navigation .music-navigation-item-content {
	padding-left: 0 !important;
	height: var(--music-nav-item-height);
	line-height: var(--music-nav-item-height);
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

#app-navigation .music-navigation-item-content * {
	cursor: pointer;
}

#app-navigation .music-navigation-item-content > * {
	display: inline-block;
	height: var(--music-nav-item-height);
}

#app-navigation .music-navigation-item:not(:hover):not(.active):not(.menu-open) .music-navigation-item-content {
	opacity: 0.7;
}

#app-navigation .music-navigation-item-content [class^="icon-"] {
	width: 40px;
	height: var(--music-nav-item-height);
	cursor: pointer;
}

#app-navigation .music-navigation-item-content:not(:hover) [class^="icon-"] {
	opacity: 0.7;
}

#app-navigation .music-navigation-item-content .label {
	padding-left: 4px;
	box-shadow: unset;
	position: absolute;
	width: auto;
	right: 0;
	left: 40px;
}

.app-music #app-navigation-toggle {
	height: 66px;
	top: 0;
}

body:not(.snapjs-left) .app-music.nc14to24 #app-navigation-toggle {
	top: 50px;
}

.app-music.nc14to24 #app-navigation {
	top: 50px;
	bottom: 0;
	height: unset;
}

#app-navigation .action {
	margin-right: 5px;
	float: right;
	width: 24px;
	height: 24px;
	padding: 5px;
}

#app-navigation .action.icon-checkmark, 
#app-navigation .action.icon-close {
	margin-top: calc((var(--music-nav-item-height) - 24px) / 2);
}

#app-navigation .play-pause-button {
	display: inline-block;
	width: 40px;
	height: 100%;
	background-size: 16px;
}

#app-navigation .play-pause-button:hover,
#app-navigation .current .play-pause-button {
	background-image: unset
}

#app-navigation .play-pause {
	margin-left: 16px;
}

#app-navigation .current:not(.playing) :hover .play-pause {
	background-image: url(img/6fd341208c6fb65a349e.svg);
}

#app-navigation .current.playing :hover .play-pause {
	background-image: url(img/ed91f97fb295bf00b331.svg)
}

#app-navigation #new-playlist .track-count-badge {
	background-color: var(--color-primary, #1d2d44);
	color: var(--color-primary-text, #fff);
	border-radius: 50%;
	margin-left: 2px;
	width: calc(var(--music-nav-item-height) - 12px);
	height: calc(var(--music-nav-item-height) - 12px);
	line-height: calc(var(--music-nav-item-height) - 12px);
	text-align: center;
	vertical-align: baseline;
	font-size: smaller;
}

#app-navigation li.drag-hover {
	background-color: var(--color-background-dark, #ededed);
}

#app-navigation .actions {
	position: absolute;
	right: 0;
	height: 100%;
	width: 44px;
}

#app-navigation .item-with-actions .actions {
	height: 100%;
	width: 44px;
	top: 0;
}

#app-navigation .item-with-actions .actions .icon-more {
	display: none;
	padding: 5px;
	opacity: .4;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#app-navigation .item-with-actions.active .actions .icon-more,
#app-navigation .item-with-actions.menu-open .actions .icon-more,
#app-navigation .item-with-actions:hover .actions .icon-more,
#app-navigation .item-with-actions:focus-within .actions .icon-more {
	display: inline-block;
}

#app-navigation .item-with-actions .actions .icon-more:hover {
	opacity: 1.0;
}

#app-navigation .item-with-actions .actions .icon-loading-small {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#app-navigation .item-with-actions .actions .popovermenu a {
	box-shadow: unset; /* older NC versions mistakenly apply also here the blue edge meant for navi pane items */
}

#app-navigation button.disabled {
	opacity: .5;
	pointer-events: none;
}

#app-navigation .input-container {
	position: absolute;
	left: 35px;
	right: 12px;
	width: auto;
}

#app-navigation .input-container input {
	width: 100%;
	margin-left: 0;
	margin-bottom: 4px;
	margin-top: 4px;
	margin-right: 5px;
	height: calc(var(--music-nav-item-height) - 6px);
	max-height: 32px;
	min-height: unset;
	cursor: text;
	box-shadow: unset;
}

#app-navigation .input-container.with-buttons {
	right: 65px;
}

#app-navigation .input-container.with-buttons input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#app-navigation .item-with-actions .input-container:not(.with-buttons) {
	right: 40px;
}

#app-navigation .input-container #search-input {
	padding-right: 32px;
}

#app-navigation .input-container #clear-search {
	position: relative;
	vertical-align: middle;
	left: -40px;
	top: -2px;
	width: 24px;
	height: 24px;
	border: none;
	background-color: transparent;
}

#app-navigation .icon-checkmark {
	position: absolute;
	right: 30px;
	float: none;
}

#app-navigation > ul > li.docked-navigation-item {
	position: fixed;
	width: unset;
	left: 0;
	right: 0;
	height: var(--music-nav-item-height);
	max-width: 300px;
	margin: calc(var(--default-grid-baseline, 0px) * 2);
	z-index: 0;
}

.legacy-layout #app-navigation > ul > li.docked-navigation-item {
	max-width: 250px;
}

#app-navigation #music-nav-search {
	bottom: calc(var(--music-nav-item-height) + var(--default-grid-baseline, 0px));
	z-index: 1;
}

#app-navigation #music-nav-settings {
	bottom: 0;
}

#app-navigation #music-nav-settings > a {
	display: block;
	padding-left: 14px;
	padding-right: 12px;
	line-height: var(--music-nav-item-height);
}

#app-navigation #music-nav-settings > a:first-child img {
	vertical-align: text-top;
	width: 16px;
	height: 16px;
	margin-right: 11px;
	margin-top: 1.5px;
	margin-left: 0;
}

/* Compatibility for Internet Explorer which doesn't support the var() syntax; IE is supported on OC but not on NC */
.ie #app-navigation .music-navigation-item,
.ie #app-navigation .music-navigation-item-content,
.ie #app-navigation .music-navigation-item-content > *,
.ie #app-navigation .music-navigation-item-content [class^="icon-"],
.ie #app-navigation #music-nav-settings > a {
	height: 44px;
	line-height: 44px;
}

.ie #app-navigation #new-playlist .track-count-badge {
	background-color: #1d2d44;
	color: #fff;
	width: 32px;
	height: 32px;
	line-height: 32px;
}

.ie #app-navigation .action.icon-checkmark, 
.ie #app-navigation .action.icon-close {
	margin-top: 10px;
}

.ie #app-navigation .app-navigation-separator {
	border-color: #222;
}

.ie #app-navigation li.drag-hover {
	background-color: #ededed;
}

.ie #app-navigation-toggle {
	top: 45px;
}

.ie #app-navigation #music-nav-search {
	bottom: 44px;
}

.ie .app-music #app-navigation {
	padding-bottom: 88px !important;
}
/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2016 - 2024
 */

/**
 * This file contains rules both for the playlist view specifically and for the other similar views like 'All tracks' and 'Genres' etc.
 */

/**
 * Generic rules for multiple views
 */

.playlist-area {
	clear: both;
	padding-top: 15px;
}

.playlist-area > h1 {
	margin-left: 14px;
	margin-bottom: 11px;
}

.playlist-area > h1 > span:hover,
.playlist-area > h1 > span:hover * {
	cursor: pointer;
}

.playlist-area h2 {
	margin-left: 14px;
	margin-top: 12px;
	margin-bottom: 0;
}

.playlist-area .track-list > li {
	padding-bottom: 4px;
	padding-top: 5px;
	white-space: nowrap;
}

.playlist-area .track-list > li > div {
	max-width: calc(100% - 36px);
	white-space: nowrap;
}

.playlist-area .track-list .ordinal {
	min-width: 30px;
	text-align: right;
}

.playlist-area .track-list .albumart {
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 18px;
	margin-right: 6px;
}

.playlist-area .track-list .play-pause.overlay {
	width: 36px;
	height: 36px;
	margin-left: -46px;
}

.playlist-area .current.playing .play-pause.overlay,
.playlist-area :hover > .play-pause.overlay,
#app-content .playlist-area .current:not(.playing):hover .play-pause.overlay {
	background-image: url(img/5eab5e6d83c92fec787d.svg);
}

.playlist-area .current:not(.playing) .play-pause.overlay,
#app-content .playlist-area .current.playing:hover .play-pause.overlay {
	background-image: url(img/bea9433490c8d9ef12be.svg)
}

.playlist-area .track-list .title-lines {
	max-width: calc(100% - 72px);
}

.playlist-area .track-list > li .title-lines > div {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
}

.playlist-area .track-list.insert-above > li.drag-hover {
	padding-top: 40px;
}

.playlist-area .track-list.insert-below > li.drag-hover {
	padding-bottom: 40px;
}

.playlist-area .track-list > li > div,
.playlist-area .track-list > li > div * {
	display: inline-block;
	cursor: pointer;
}

#app-content .playlist-area .track-list li .action {
	visibility: hidden;
	border: none;
	background-color: transparent;
	vertical-align: middle;
	margin: 0;
	opacity: 0.5;
	padding: 16px;
}

#app-content .playlist-area .track-list li .action:hover {
	opacity: 1;
}

#app-content .playlist-area .track-list li:hover .action {
	visibility: visible;
}

#app-content .playlist-area .track-list .icon-loading-small {
	margin-bottom: -3px;
}

/**
 * Rules specific for the playlist/smartlist/radio views
 */

#playlist-view,
#smartlist-view {
	margin-right: -50px; /* utilize the area reserved for the alphabet navigation in most views */
}

#playlist-view .track-list > li > div,
#radio-view .track-list > li > div {
	max-width: calc(100% - 72px); /* more space needs to be reserved as there are two action icons instead of just one */
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2020 - 2023
 */

/* Only matching items should be shown when the searchmode is active */
.searchmode .track-list li:not(.matched):not(.placeholder),
.searchmode .track-list li.more-less,
.searchmode .album-area .track-list li:not(.matched):not(.placeholder),
.searchmode .album-area:not(.matched),
.searchmode .artist-area:not(.matched),
.searchmode .folder-area:not(.matched),
.searchmode .genre-area:not(.matched),
.searchmode .track-bucket:not(.matched) {
	display: none;
}
/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Pauli Järvinen 2018 - 2024
 */

.invisible {
	visibility: hidden;
}

#music-user {
	margin-top: 14px;
	margin-left: 14px;
	margin-right: -30px; /* utilize the space which app-view reserves for alphabet-navigation */
}

#music-user h1 {
	font-size: 32px;
}

#music-user h2 {
	font-size: 22px;
	margin-top: 40px;
}

#music-user a:not(.icon),
#music-user .warning a {
	font-weight: normal !important; /* use !important to override the core style within .warning */
	text-decoration: underline;
}

#music-user a:not(.icon):after,
#music-user .warning a:after {
	content: " ↗";
}

#music-user ul.info-list {
	list-style: unset;
	list-style-position: inside;
	padding-left: 10px;
}

#music-user .label-container {
	display: inline-block;
}

#music-user input:invalid {
	box-shadow: #F00 0px 0px 1.5px 1px;
	outline: 0;
}

#music-user #excluded-paths .key-action {
	width: 52px;
}

#music-user .reset-button {
	border: 0;
	background-color: transparent;
	vertical-align: middle;
	margin-bottom: 8px;
}

#music-user .operation-in-progress,
#music-user input[type=checkbox] {
	display: inline-block;
	vertical-align: middle;
	top: -3px;
	left: 5px;
	cursor: pointer;
}

#music-user .clipboardButton {
	background-size: 16px 16px;
	padding: 16px;
	opacity: .5;
}

#music-user .clipboardButton:hover {
	opacity: 1;
}

#music-user div {
	margin: 10px 0;
}

/* Table rules borrowed from nextcloud/settings/css/settings.scss */
#music-user table.grid {
	width: 100%;
}

#music-user table.grid th {
	height: 2em;
	color: #999;
	border-bottom: 1px solid #ebebeb;
	padding: 0 0.5em;
	padding-left: 0.8em;
	text-align: left;
	font-weight: normal;
}

#music-user table.grid td {
	border-bottom: 1px solid #ebebeb;
	padding: 0 0.5em;
	padding-left: 0.8em;
	text-align: left;
	font-weight: normal;
}

/* TABLE FIXES */
#music-user table.grid tr.head:hover, #music-user table tr.head:active {
	background-color: inherit;
}

#music-user table.grid {
	max-width: 650px;
	white-space: normal;
}

#music-user table.grid td {
	padding: 10px;
}

#music-user table.grid th.key-action {
	padding-right: 15px;
}

#music-user table.grid td.key-action, #music-user table th.key-action {
	text-align: right;
}

#music-user table.grid td.key-action a,
#music-user table.grid .add-row td a {
	padding: 10px 16px;
	opacity: .5;
}

#music-user table.grid td.key-action a:hover,
#music-user table.grid .add-row td a:hover {
	opacity: 1;
}

#music-user table.grid .add-row,
#music-user table.grid .add-row * {
	border: none;
	cursor: pointer;
}

#music-user table.grid .excluded-path-row td {
	padding-top: 3px;
	padding-bottom: 3px;
}

#music-user table.grid .excluded-path-row input[type="text"] {
	max-width: unset;
}

#music-user .info, #music-user .warning {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 650px;
	text-align: center;
	padding: 10px;
	border-radius: 3px;
}

#music-user .info {
	color: rgb(255, 255, 255);
	background-color: rgb(71, 164, 71);
}

#music-user .warning {
	color: rgb(255, 255, 255);
	background-color: rgb(236, 167, 0);
}

#music-password-info dl {
	display: inline-block;
	font-size: 22px;
	padding: 0;
}

#music-password-info dt,
#music-password-info dd {
	float: left;
	padding-bottom: 0;
	padding-top: 12px;
	padding-right: 12px;
	padding-left: 0;
}

#music-password-info dt {
	width: 40%;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
}

#music-password-info dd {
	width: 60%;
	text-align: left;
	word-wrap: break-word;
	font-weight: bold;
}

#music-user code {
	overflow-wrap: break-word;
}

#music-user input[type="text"] {
	max-width: 330px;
	width: 100%;
}

#music-user .logotype {
	max-width: 340px;
	width: 100%;
}

#music-user .dimmed {
	opacity: .4;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2018 - 2025
 */

#app-sidebar {
	position: fixed;
	height: 100%;
	top: 0;
	right: 0;
	overflow-y: hidden;
	contain: content;
}

.nc14to24 #app-sidebar {
	top: var(--header-height, 50px);
	bottom: 0;
	height: unset;
}

#app-sidebar #app-sidebar-scroll-container {
	height: 100%;
	width: 100%;
	padding-top: 8px;
	overflow-y: auto;
}

#app-sidebar .sidebar-content {
	height: 100%;
	width: 100%;
}

#app-sidebar .fav-button {
	display: block;
	position: static;
	float: left;
	margin-bottom: -16px;
	margin-left: 8px;
	cursor: pointer;
}

#app-sidebar .close {
	position: fixed;
	top: 0;
	right: 0;
	border-radius: 50%;
	margin: 6px;
	padding: 14px;
	width: 44px;
	height: 44px;
	opacity: 0.5;
	z-index: 1;
	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
}

/* IE doesn't support the var() syntax */
.ie #app-sidebar .close {
	top: 45px;
	right: 0;
	background-color: rgba(255, 255, 255, .95);
}

#app-sidebar .close:hover {
	opacity: 1;
}

#app-sidebar .sidebar-content > .albumart {
	width: 100%;
	height: 35%;
	background-size: contain;
	display: table;
}

#app-sidebar .sidebar-content > .albumart span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	opacity: 0.4;
}

#app-sidebar #path {
	width: auto;
	text-align: center;
	display: table;
	margin: 0 auto 16px auto;
}

#app-sidebar .tabHeaders {
	margin-top: 16px;
}

#app-sidebar .tabsContainer {
	width: 100%;
}

#app-sidebar .sidebar-container {
	padding: 15px;
}

#app-sidebar dl {
	width: 100%;
	overflow: hidden;
	padding: 0 0 16px 0;
}

#app-sidebar #radio-station-details dl {
	padding-top: 6px;
}

#app-sidebar dt {
	float: left;
	width: 30%;
	padding-top: 0;
	padding-bottom: 6px;
	padding-right: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	opacity: .5;
}

#app-sidebar dd {
	float: left;
	width: 70%;
	padding-top: 0;
	padding-bottom: 6px;
	padding-right: 0;
}

#app-sidebar .clickable button {
	border: none;
	background-color: transparent;
	opacity: 0.5;
	vertical-align: middle;
	margin-top: -3px;
	margin-bottom: -3px;
	height: 16px;
	width: 16px;
}

#app-sidebar h2 .icon-info {
	margin-bottom: -2px;
	margin-left: 4px;
}

#app-sidebar :hover > button,
#app-sidebar button:hover {
	opacity: 1.0;
}

#app-sidebar dd textarea,
#app-sidebar dd input {
	width: 100%;
	margin-top: -6px;
	margin-left: -6px;
	cursor: text;
}

#app-sidebar .icon-info {
	padding-left: 20px;
	padding-right: 0;
}

#app-sidebar #artist-content-counts dt {
	width: 65%;
}

#app-sidebar #artist-content-counts dd {
	width: 35%;
}

#app-sidebar #album-content-counts dt {
	width: 55%;
}

#app-sidebar #album-content-counts dd {
	width: 45%;
}

#app-sidebar .tabsContainer .tab {
	width: 100%;
	margin-bottom: 32px;
}

#app-sidebar #lyricsTabView {
	width: 100%;
}

#app-sidebar .lyrics {
	width: 100%;
	white-space: pre-wrap;
	text-align: center;
}

#app-sidebar .lyrics.highlight {
	background-color: var(--color-background-dark, #ededed);
}

/* IE doesn't support the var() syntax */
.ie #app-sidebar .lyrics.highlight {
	background-color: #ededed;
}

#app-sidebar #follow-playback {
	position: fixed;
	right: var(--body-container-margin, 0);
	bottom: var(--body-container-margin, 0);
	border-radius: 50%;
	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
	margin: 6px;
	padding: 12px;
}

/* IE doesn't support the var() syntax */
.ie #app-sidebar #follow-playback {
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, .95);
}

#app-sidebar .icon-loading:not(.inline) {
	position: absolute;
	left: 50%;
	top: 50%;
}

/* to set size of the loading indicator, we actually have to modify the ::after element */
#app-sidebar .icon-loading.inline::after {
	height: 16px;
	width: 16px;
	margin-top: -7px;
	margin-left: -5px;
}

#app-sidebar #favorite-toggle .icon-loading.inline::after {
	margin-top: 4px;
	margin-left: 6px;
}

#app-sidebar #favorite-toggle {
	position: absolute;
	z-index: 10;
}

#app-sidebar h1 {
	font-size: 24px;
	text-align: center;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

#app-sidebar #album-details h1 {
	margin-top: 8px;
}

#app-sidebar h2 {
	text-align: center;
	width: 100%;
	margin-top: 16px;
	margin-bottom: 0;
	margin-left: 0;
}

#app-sidebar #lastfm-info {
	width: 100%;
	margin-bottom: 48px;
}

#app-sidebar #lastfm-info .missing-content {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: 40px;
	opacity: 0.4;
}

#app-sidebar #lastfm-info p {
	white-space: pre-wrap;
	text-align: center;
	margin-left: 16px;
	margin-right: 16px;
	margin-bottom: 16px;
}

#app-sidebar #lastfm-info dt {
	width: 20%;
}

#app-sidebar #lastfm-info dd {
	width: 80%;
}

#app-sidebar #lastfm-info .similar-artists .icon-info {
	padding: 0;
	margin-right: -3px;
}

#app-sidebar #lastfm-info .show-all {
	opacity: .5;
	cursor: pointer;
}

#app-sidebar #lastfm-info a,
#app-sidebar #podcast-details a,
#app-sidebar #podcast-details a *,
#app-sidebar #radio-station-details a,
#app-sidebar .tutorial a,
#app-sidebar .hint a {
	text-decoration: underline;
	display: inline-block;
}

#app-sidebar #lastfm-info a:after,
#app-sidebar #podcast-details a:after,
#app-sidebar #radio-station-details a:after,
#app-sidebar .tutorial a:after {
	content: " ↗";
}

#app-sidebar #lastfm-info .in-lib-artist {
	display: inline-block;
}

#app-sidebar #lastfm-info .in-lib-artist .separator {
	margin-right: 5px;
}

#app-sidebar .truncated:after {
	content: "…";
}

#app-sidebar .tutorial {
	padding: 15px 15px 45px 15px;
}

#app-sidebar .tutorial h2,
#app-sidebar .tutorial li,
#app-sidebar .tutorial p {
	margin-bottom: 10px;
}

#app-sidebar .tutorial ol {
	list-style: decimal outside;
	margin-left: 15px;
}

#app-sidebar .tutorial li {
	display: list-item;
}

#app-sidebar .editor-buttons button {
	height: 24px;
	width: 24px;
	padding-left: 12px;
	padding-right: 12px;
}

#app-sidebar button.disabled {
	opacity: .5;
	pointer-events: none;
}

#app-sidebar #podcast-details .tags {
	margin-top: 24px;
}

#app-sidebar #smartlist-filters > div {
	margin: 12px;
}

#app-sidebar #smartlist-filters label {
	display: inline-block;
	width: 90px;
}

#app-sidebar #smartlist-filters input {
	width: calc(50% - 65px);
}

#app-sidebar #smartlist-filters select,
#app-sidebar #smartlist-filters .chosen-container {
	width: calc(100% - 98px);
}

#app-sidebar #smartlist-filters select {
	background: var(--color-main-background, #fff);
}

#app-sidebar #smartlist-filters .chosen-choices,
#app-sidebar #smartlist-filters .chosen-single {
	background: var(--color-main-background, #fff);
	border: var(--border-input);				/* value of the var is set in our javascript */
	border-radius: var(--border-radius-input);	/* value of the var is set in our javascript */
	box-shadow: unset;
	text-overflow: ellipsis;
	cursor: pointer;
}

#app-sidebar #smartlist-filters .chosen-choices:hover,
#app-sidebar #smartlist-filters .chosen-single:hover {
	border-color: var(--color-input-border-hover); /* value of the var is set in our javascript */
}

#app-sidebar #smartlist-filters .chosen-choices input {
	margin-top: -1px;
	margin-bottom: -1px;
	color: var(--color-main-text, #222) !important;
	height: 36px;
}

#app-sidebar #smartlist-filters .chosen-choices .search-choice {
	margin-top: 6px;
	background-color: var(--color-background-dark, #eee);
	color: var(--color-main-text, #333);
	background-image: unset;
}

#app-sidebar #smartlist-filters .chosen-drop {
	background-color: var(--color-main-background, #fff);
	border-radius: var(--border-radius-large);
	padding: var(--default-grid-baseline);
}

#app-sidebar #smartlist-filters .chosen-drop li {
	padding: 10px 5px;
}

#app-sidebar #smartlist-filters .chosen-drop li.highlighted {
	background-color: var(--color-background-hover, #f5f5f5);
	background-image: unset;
	color: var(--color-main-text, #222);
	border-radius: var(--border-radius-large);
}

#app-sidebar #smartlist-filters .chosen-container .chosen-results {
	color: var(--color-main-text, #444);
	padding: 0;
	margin: 0;
}

#app-sidebar #smartlist-filters .chosen-container .chosen-results li.no-results {
	color: var(--color-main-text, #333);
	background: var(--color-background-dark, #eee);
	opacity: .5;
}

#app-sidebar #smartlist-filters .chosen-container-multi .chosen-drop .result-selected {
	color: unset;
	opacity: .5;
}

#app-sidebar #smartlist-filters .chosen-single  {
	height: 36px;
	background-image: unset;
}

#app-sidebar #smartlist-filters .chosen-single > * {
	margin-top: 5px;
	color: var(--color-main-text, #222);
}

#app-sidebar #smartlist-filters #filter_history_chosen {
	width: calc(100% - 178px);
}

#app-sidebar #smartlist-filters #filter-history-strict-label {
	width: 50px;
	text-align: right;
}

#app-sidebar #smartlist-filters #filter-history-strict {
	vertical-align: middle;
	width: 16px;
}

#app-sidebar #smartlist-filters #update-button {
	width: 100%;
}

#app-sidebar #smartlist-filters .hint {
	color: var(--color-text-lighter, #a5a5a5);
	margin-top: 60px;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Jan-Christoph Borchardt, http://jancborchardt.net
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Jan-Christoph Borchardt 2014
 * @copyright Pauli Järvinen 2016 - 2022
 */

/* Adjust layout so that there is room for the toggle button of the collapsible navigation pane.
   The rule has to match the one used by the core to make the pane collpsible.
 */
@media only screen and (max-width: 1024px) {
	#app-view {
		padding-top: 66px;
	}

	#content.app-music:not(.legacy-layout) #app-navigation:not(.hidden) + #app-content {
		left: 0;
	}
}

#app-navigation + #app-content.tablet #controls {
	padding-left: 20px;
}

.tablet #play-controls {
	margin-left: 20px;
}

.tablet #controls .albumart {
	margin-left: 8px;
	margin-right: 0;
}

.tablet #controls .song-info {
	left: 260px;
}

.tablet #controls:not(.two-line) .song-info {
	width: 200px;
}

.tablet #controls:not(.two-line) .progress-info {
	left: 460px;
	max-width: 350px;
}

.tablet #controls .title {
	font-size: 14px;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2018 - 2024
 */

/**
 * Common rules for the track-list directive
 */

.track-list li {
	line-height: 20px;
}

.track-list li * {
	cursor: pointer;
}

.track-list .more-less {
	cursor: pointer;
}

.track-list > li > div {
	display: table-cell;
}

.track-list > li > div > * {
	vertical-align: middle;
}

.track-list > li.placeholder {
	padding: 0;
	border: none;
}

#app-view:not(.searchmode) .track-list.collapsed .collapsible {
	display: none !important;
}

.track-list > li.more-less {
	padding-left: 18px;
	padding-top: 6px;
	padding-bottom: 5px;
	display: none;
}

#app-view:not(.searchmode) .track-list.collapsed li.more-less:not(.collapsible),
#app-view:not(.searchmode) .track-list:not(.collapsed) li.more-less.collapsible {
	display: inline-block;
}

/**
 * View specific rules for the track-list directive in the 'Albums' view
 */

.album-area .track-list {
	margin-left: 195px;
}

.album-area .track-list li:not(.more-less) {
	display: table;
	padding-left: 2px;
	padding-top: 6px;
	padding-bottom: 5px;
	white-space: nowrap;
}

.album-area .track-list .item-info {
	max-width: 240px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.album-area .track-list .item-info > span {
	vertical-align: bottom;
}

.view-container.single-col .album-area .track-list .item-info {
	max-width: unset;
	overflow: initial;
}

.view-container.single-col .album-area .track-list .item-info > span {
	display: inline-block;
	white-space: normal;
	vertical-align: top;
}

#albums.compact .album-area .track-list {
	margin-left: 30px;
}

#albums.compact:not(.single-col) .album-area .track-list .item-info {
	max-width: 305px;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Morris Jobke <hey@morrisjobke.de>
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Morris Jobke 2013, 2014
 * @copyright Pauli Järvinen 2016 - 2025
 */

/**
 * This style file contains definitions which are common to many views or parts of the Music app.
 */

#notification a {
	text-decoration: underline;
}

/* Override background-color definition made by NC18, which seems like a bug and breaks the dark theme (#739) */
body#body-user.dark {
	background-color: var(--color-main-background);
}

#app {
	width: 100%;
}

.app-music:not(.legacy-layout) #app-navigation:not(.hidden) + #app-content {
	position: absolute;
	top: 0px;
	left: 300px;
	right: 0px;
	margin-left: 0;
}

.app-music:not(.nc14to24) #app {
	contain: content;
}

#app-content.with-app-sidebar {
	margin-right: 27%;
}

/* angular JS wrapper for main controller */
#app > div {
	width: 100%;
	height: 100%;
}

/* Nextcloud versions 22.2.1+ have a button min-height which messes up our layout */
#app button {
	min-height: unset;
}

#app-view {
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	position: absolute;
	padding-left: 14px;
	padding-right: 50px;
}

#app-view.started {
	padding-top: 66px;
}

.view-container {
	padding-bottom: 60px;
}

.view-container h2 {
	font-size: 21px;
	line-height: 30px;
}

.play {
	display: inline;
	visibility: hidden;
	opacity: .7;
	height: 10px;
}

h1 {
	font-size: 34px;
	line-height: 36px;
}

h1 .play {
	margin-bottom: 2px;
	margin-left: 10px;
	cursor: pointer;
	width: 16px;
	height: 16px;
}

h2 .play {
	margin-left: 10px;
	cursor: pointer;
	width: 13px;
	height: 13px;
}

h1 span:hover .play,
h2 span:hover .play {
	visibility: visible
}

.albumart {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--music-albumart-small-border-radius);
}

.play-pause {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 0px;
	margin-right: 6px;
	background-image: none;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .6;
}

#app-content :hover > .play-pause {
	opacity: 1.0;
}

.current.playing .play-pause,
div:hover > .play-pause,
#app-content .current:not(.playing) div:hover .play-pause {
	background-image: url(img/6fd341208c6fb65a349e.svg);
}

.current:not(.playing) .play-pause,
#app-content .current.playing div:hover .play-pause {
	background-image: url(img/ed91f97fb295bf00b331.svg)
}

#app-content button.icon-details,
#app-content button.icon-more {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	border: none;
	background-color: transparent;
	visibility: hidden;
	opacity: 0.5;
	padding: 7px 18px;
	width: auto;
}

#app-content :hover > button.icon-details,
#app-content :hover > button.icon-more {
	visibility: visible;
}

#app-content button.icon-details:hover,
#app-content button.icon-more:hover {
	opacity: 1;
}

#app-view h2 .icon-loading-small {
	top: 11px;
	left: 3px;
	overflow: visible;
}

#app-view h2:not(.busy) .icon-loading-small {
	display: none;
}

#app-view h2.busy .icon-more {
	display: none;
}

#app-view .heading,
#app-view .heading * {
	cursor: pointer;
}

#app-view .heading-actions {
	display: block;
	font-size: 13px;
	top: 40px;
	right: -10px;
}

.muted {
	opacity: .5;
	display: inline;
}

.clickable, .clickable * {
	cursor: pointer;
}

#app-content .emptycontent {
	position: fixed;
	top: 0;
	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
	padding: 20px 50px;
	z-index: 1;
}

#app-content .emptycontent.collapsed {
	top: unset;
	bottom: 0;
	padding: 5px 20px;
}

#app-content .emptycontent.collapsed > * {
	display: inline-block;
	margin: 0;
	height: 40px;
	background-size: 40px;
}

#app-content .emptycontent.collapsed h2 {
	margin: 0;
}

#app-content .emptycontent.clickable * {
	opacity: 0.85;
}

#app-content .emptycontent.clickable:hover * {
	opacity: 1;
}

#app-view .emptycontent {
	margin-left: -14px; /* to cancel out the #app-view padding */
}

/* hide popups and navigation until the angularjs framework is up and running and can do the dynamic hiding and interpolation */
#app:not(.loaded) .emptycontent,
#app:not(.loaded) #searchContainer,
#app:not(.loaded) #updateData,
#app:not(.loaded) #app-navigation {
	display: none;
}

#updateData {
	position: fixed;
	width: 60px;
	height: 60px;
	padding: 20px;
	bottom: var(--body-container-margin, 0);
	z-index: 101;
	opacity: .4;
}

.ie #updateData {
	bottom: 0;
}

#updateData:hover, #updateData:focus {
	opacity: 1;
}

.highlight {
	background-color: var(--color-background-hover, #f5f5f5);
}

.ie .highlight {
	background-color: #f5f5f5;
}

.flip-vertically {
	transform: scaleY(-1);
}
 
.svg,
:not(.svg) > .play-pause {
	filter: var(--background-invert-if-dark);
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2023
 */

/**
 * Constant definitions shared between the Music app and the embedded Files/Share player
 */

:root {
	--music-albumart-small-border-radius: var(--border-radius);
	--music-albumart-large-border-radius: var(--border-radius);
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2024
 */

.music-progress-info {
	text-align: center;
	overflow: hidden;
}

.music-progress-info span {
	line-height: 30px;
}

.music-progress-info .seek-bar {
	width: 100%;
	height: 15px;
	margin: 0 auto 0 auto;
	position: relative;
	background-color: #eee;
}

.music-progress-info .seek-bar, .music-progress-info .play-bar, .music-progress-info .buffer-bar {
	display: block;
}

.music-progress-info .play-bar, .music-progress-info .buffer-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 15px;
	width: 0%;
	background-color: var(--color-primary, #1d2d44);
}

.ie .music-progress-info .play-bar, .ie .music-progress-info .buffer-bar {
	background-color: #1d2d44;
}

.music-progress-info .translucent {
	opacity: 0.75;
}

.music-progress-info .buffer-bar {
	opacity: 0.1;
}

/**
 * ownCloud - Music app
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
 * @copyright Pauli Järvinen 2023, 2024
 */

.music-volume-control .volume-icon {
	position: absolute;
	top: 0;
	left: 0;
}

.music-volume-control .volume-slider {
	position: absolute;
	width: 58px;
	height: 3px;
	min-height: 3px;
	top: 31px;
	left: 21px;
	margin: 0;
	-webkit-appearance: none;
	background-color: silver;
	transform: rotate(270deg);
}


.ie .music-volume-control .volume-slider {
	height:auto;
	top: 3px;
	left: 26px;
	background-color: transparent;
}

.music-volume-control .volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #666;
	border-radius: 100%;
	width: 10px;
	height: 10px;
}

.music-volume-control .volume-slider:hover::-webkit-slider-thumb {
	cursor: pointer;
}

.music-volume-control .volume-slider::-moz-range-thumb {
	-moz-appearance: none;
	background-color: #666;
	border-radius: 100%;
	width: 10px;
	height: 10px;
}

.music-volume-control .volume-slider:hover::-moz-range-thumb {
	cursor: pointer;
}


/*# sourceMappingURL=webpack.app.8c86fbb354f819e11b6b.css.map*/