.discographyList {
  
}

#discography > .playerBlock {
  display: none;
}

.albumListItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  padding: 24px 0;
  
  font-family: 'Roboto Mono';
  font-size: 12px;
}

.discoAlbumYear {
  margin-left: 24px;
}

.discoItemBorderBody,
.discoItemBorderTop
{
  width: 100%;
}

.discoItemBorderBody {
  height: 100%;
}

/*
.discoItemBorder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.discoItemContent {
  padding: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
*/

.discoAlbumName {
  margin-left: 24px;
  margin-right: 48px;
}

.playerBlock {
  background-color: #fff;
}

.hr2 {
  clear: both;
  float: none;
  width: 100vw;
  height: 1px;
  background-color: #c9c9c9;
}

.playerControlls {
  display: none;
  width: 100%;
  height: 106px;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  box-sizing: border-box;
}

.playerControlls > div {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  padding: 12px;
}

.playPause {
  padding: 6px !important;
}

#playSvg,
#pauseSvg
{
  display: none;
}

.playAudio #pauseSvg{
  display: block;
}

.pauseAudio #playSvg{
  display: block;
}


.playPause svg{
  fill: #000;
  width: 100%;
}

.forwars svg{
  fill: #000;
  width: 100%;
}

.repeatMy svg{
  fill: #bcbcbc;
  width: 100%;
}

.loopActive svg {
  fill: #000000;
}

.shuffleMy svg{
  fill: #bcbcbc;
  width: 100%;
}

.shuffleActive svg {
  fill: #000000;
}

.backward svg{
  fill: #000;
  width: 100%;
}

.showPlayIcon::before {
  content: '';
  width: 10px;
  height: 10px;
  background: red;
  position: absolute;
  left: 10px;
}

.playlistItem {
  position: relative;
  height: 30px;
}

.playerHeader {
  background-image: url('data:image/png;base64,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UmVhZHlxyWU8AAADaWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMTEgNzkuMTU4MzI1LCAyMDE1LzA5LzEwLTAxOjEwOjIwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjUwYzc3OWI2LTIxYWItNWM0Mi1iM2FhLTlkZWVmZWFlNjY0MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MzREQzFDOEZGMkQxMUU2QThGMUQzNTE3QzQwQjBEMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MzREQzFDN0ZGMkQxMUU2QThGMUQzNTE3QzQwQjBEMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTM0NzRENDlGRjJDMTFFNjhCN0FENTAyNzJDQkQ3MzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTM0NzRENEFGRjJDMTFFNjhCN0FENTAyNzJDQkQ3MzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6I//HvAAABO0lEQVR42pSQUQoAIAhDnR2u63XhsKiPQMyVX+rGmwhrVQziyuSyKcywC94Qj3pR8YnSNGVBnBokIlZPrw8QYRAQ50wx+jfEak/v4TR19iGAGP/3exCdMnAnjv9kOIuJOO2MhAKLiZDnCaUwPCkDLXEQ72sC0YBHJRMp0YkncRCZPxnxWA0QQIzYSw4GBsIphoACZopNQE/HBBSQYD4Tadpxhg8jYXv/08I9tHAMag4h3yVMFHgBLsVIThT/xxYgBGKQoGOYyE9y/3E4hpi0+peBJkkOaz1Gqq/BJgAEaK5KkgCAYNik/v/mmnFyQdEE9ywajVYcy8nGj7NJisjGOQMSDHg61vi62J4S67K7KJMrBsaikBuFiEdBxN6ty9fqrB4pPpFs8sqnqTd3BgRRdPaX/9pyCwbosu48VECbmSp/VyG/AAAAAElFTkSuQmCC');
  background-repeat: repeat-y;
  background-size: contain;
}

.playerAlbumName {
  font-family: 'Roboto Mono';
  font-size: 14px;
  color: #fff;
  padding: 24px 40px 12px;
}

.playerTrackName {
  font-family: 'Roboto Mono';
  font-size: 12px;
  padding: 0 40px 24px;
  color: #fff;
}

.modalDisco ul {
  list-style: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.playlist li {
  position: relative;
  margin: 0 48px 16px;
  display: flex;
  justify-content: space-between;
}

.playlistTrackName {
  font-family: 'Roboto Mono';
  font-size: 12px;
  color: #747474;
  width: 100%;
  padding: 0 16px;
  flex: 100% 1 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.hasTrack,
.hasText
{
  width: 24px;
  position: relative;
  flex: 16px 1 0;
}

.hasTrack::before {
  display: none;
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0px;
  top: 0px;
  background-image: url(../../img/play.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.hasText::after {
  display: none;
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0px;
  top: 0px;
  background-image: url(../../img/note.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.hasTrackShow::before,
.hasTextShow::after
{
  display: block;
}

.discoItemContent {
  font-family: 'Roboto Mono';
  font-size: 12px;
  color: #747474;
  padding: 0 32px 32px 32px;
}

.trackNameItem {
  font-family: 'Anonymous Pro';
  font-weight: 700;
  font-size: 24px;
  color: #747474;
  margin-bottom: 32px;
}