/*track detail*/
 
 .wrapper {
     display: flex;
     width: 378px;
     align-items: flex-start;
     justify-content: center;
     color: white;
     user-select: none;
     letter-spacing: 0.8px;
     background: #181818;
}
 @media screen and (max-height: 600px) {
     .wrapper {
         height: 100% !important;
         min-height: 600px;
    }
}
 .wrapper .content {
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
     height: 100%;
}
 @media screen and (max-width: 640px) {
    .wrapper{
        width: 100%;
    }
     .wrapper .content {
         width: 100%;
         /*height: 100%;*/
         border-radius: 0px;
         margin-bottom: 0px;
         margin: 0px 0;
    }
}
 .wrapper .content .icon {
     width: 24px;
     height: 24px;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     justify-content: center;
     align-items: center;
     background-size: contain;
     background-repeat: no-repeat;
     color: var(--c-main);
     font-size: 12px;
}
 .wrapper .content .icon:before {
     position: absolute;
     content: "";
     width: 24px;
     height: 24px;
     z-index: 1;
     background-size: contain;
     background-repeat: no-repeat;
}
 .wrapper .content .icon:active:before {
     width: 28px;
     height: 28px;
}

.wrapper .content .icon.heart{
    position: absolute;
    left: 15px;
}

 .wrapper .content .icon.shuffle:before {
     background-image: url("/assets/images/shuffle.svg");
     opacity: 0.5;
}
 .wrapper .content .icon.prev:before {
     background-image: url("/assets/images/prev.svg");
}
 .wrapper .content .icon.play:before {
     background-image: url("/assets/images/play.svg");
}
 .wrapper .content .icon.next:before {
     background-image: url("/assets/images/next.svg");
}
 .wrapper .content .icon.repeat:before {
     background-image: url("/assets/images/repeat.svg");
     opacity: 0.5;
}
 .wrapper .content .icon.bottomExpand {
     /*background-image: url("/assets/images/arrow-down.svg");*/
}
 .wrapper .content .icon.topExpand {
    background-image: url("/assets/images/arrow-down.svg");
}
 .wrapper .content .icon.menuHamburguer {
    background-image: url("/assets/images/menu.svg");
}
 .wrapper .content .icon.plus:before {
    background-image: url("/assets/images/plus.svg");
}
 .wrapper .content .icon.heart:before {
    background-image: url("/assets/images/heart.svg");
}
.wrapper .content .icon.heart.fave:before {
    animation: fave 0.3s ease;
    background-image: url("/assets/images/fave.svg");
}

.wrapper .content .icon.tua{
    font-size: 10px;
    color: var(--c-main);
/*    margin: 0 15px;*/
}
.wrapper .content .icon.tua span{
    display: block;
    margin-top: 4px;
}
.wrapper .content .icon.tua-left:before {
     animation: fave 0.3s ease;
     background-image: url("../images/reload-left.png");
}
.wrapper .content .icon.tua-right:before {
     animation: fave 0.3s ease;
     background-image: url("../images/reload-right.png");
}
 @keyframes fave {
     50% {
         width: 40px;
         height: 40px;
    }
     100% {
         width: 24px;
         height: 24px;
    }
}
 .wrapper .content .icon.close:before {
     background-image: url("/assets/images/close.svg");
}

 .wrapper .content .middleContent {
     width: 100%;
     /*height: 100%;*/
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: 1;
}
 .wrapper .content .middleContent .albumContent {
     /*margin: 40px 0 20px 0;*/
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
 .wrapper .content .middleContent .albumContent.small {
     /*width: 200px;*/
}
 .wrapper .content .middleContent .albumContent.small .albumCover {
     /*width: 200px;*/
     /*height: 200px;*/
     transition: all 0.4s ease;
}
 @media screen and (max-height: 600px) {
     .wrapper .content .middleContent .albumContent {
         /*width: 200px;*/
    }
     .wrapper .content .middleContent .albumContent .albumCover {
         /*width: 200px;*/
         /*height: 200px;*/
         transition: all 0.4s ease;
    }
}
 .wrapper .content .middleContent .albumCover {
     width: 100%;
     height: 100%;
     overflow: hidden;
     box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.3);
     /*border-radius: 8px;*/
     position: relative;
     transition: all 0.4s 0.2s ease;
     z-index: -1;
}
 .wrapper .content .middleContent .albumCover:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) -20%, transparent 50%);
}
 .wrapper .content .middleContent .albumCover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
}
 .wrapper .content .middleContent .artistName, .wrapper .content .middleContent .songName {
     text-align: center;
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
     text-align: center;
     letter-spacing: 0.04em;
     z-index: 2;
     display: none;
}
 .wrapper .content .middleContent .artistName {
     text-transform: uppercase;
     margin: 30px 0 10px 0;
     font-size: 16px;
     font-weight: 600;
}
 .wrapper .content .middleContent .settings {
     width: 100%;
     height: 40px;
     position: absolute;
     top: 0;
     z-index: 9;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 20px 0 20px;
     box-sizing: border-box;
     /*position: fixed;*/
     transition: all 0s ease;
     transform: translateY(-100px);
     opacity: 0;
}
 .wrapper .content .middleContent .playlistsContent {
     background-color: rgba(232, 232, 240, 0.6);
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     z-index: 10;
     display: flex;
     flex-direction: column;
     /*justify-content: center;*/
     align-items: center;
     overflow-y: auto;
     padding: 60px 0 40px 0;
     box-sizing: border-box;
     backdrop-filter: blur(10px);
     transform: translateY(calc(-100% - 60px));
     transition: all 0.8s cubic-bezier(0.8, -0.02, 0.25, 1);
}

.playlistsContent::-webkit-scrollbar {
  width: 5px;
  border-radius: 5px;
  cursor: pointer;
  /*display: none;*/
}

.playlistsContent:hover::-webkit-scrollbar  {
    /*display: block;*/
}

/* Track */
.playlistsContent::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 5px;
}
 
/* Handle */
.playlistsContent::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
  border-radius: 5px;
}



 .wrapper .content .middleContent .playlistsContent .close {
     position: absolute;
     top: 20px;
     right: 20px;
}
 .wrapper .content .middleContent .playlistsContent .playlist {
     width: calc(100% - 40px);
     height: 100px;
     min-height: 60px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     align-items: center;
     margin-bottom: 10px;
     overflow: hidden;
     position: relative;
     border-radius: 8px;
     z-index: 3;
     transition: all 0.2s ease;
     border: 0px solid white;
     cursor: pointer;
     opacity: 0.8;
}
 .wrapper .content .middleContent .playlistsContent .playlist:last-child {
     margin-bottom: 0;
}
 .wrapper .content .middleContent .playlistsContent .playlist .checkbox {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 24px;
     height: 24px;
     background-color: rgba(255, 255, 255, 0.2);
     z-index: 2;
     position: absolute;
     right: 10px;
     top: 10px;
     border-radius: 4px;
}
 .wrapper .content .middleContent .playlistsContent .playlist .checkbox:before {
     position: absolute;
     content: "";
     width: 0%;
     height: 0%;
     z-index: 1;
     background-size: contain;
     background-image: url("/assets/images/check.svg");
     opacity: 0;
     transition: all 0.2s cubic-bezier(0.6, 0.02, 0.18, 1.25);
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistThumb {
     /*width: 80px;*/
     height: calc(100% - 20px);
     border-radius: 4px;
     overflow: hidden;
     z-index: 1;
     margin-left: 10px;
     margin-top: 10px;
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistThumb img {
     /*width: 100%;*/
     height: 100%;
     object-fit: cover;
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistBg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #5a5a5a;
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistBg img {
     width: 120%;
     height: 160%;
     object-fit: cover;
     filter: blur(8px) grayscale(1);
     opacity: 0.6;
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistBg:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     z-index: 1;
     background: linear-gradient(145deg, rgba(0, 0, 0, 0.8) -20%, transparent 50%);
}
 .wrapper .content .middleContent .playlistsContent .playlist .playlistTitle {
     z-index: 1;
     margin-left: 20px;
     text-transform: uppercase;
     font-size: 14px;
     /*font-weight: 600;*/
     color: white;
}
 .wrapper .content .middleContent .playlistsContent .playlist.selected {
     transition: all 0.2s ease;
     opacity: 1;
}
 .wrapper .content .middleContent .playlistsContent .playlist.selected .checkbox:before {
     width: 20px;
     height: 20px;
     opacity: 1;
}
 .wrapper .content .middleContent .playlistsContent .playlist.selected .playlistBg img {
     filter: blur(8px) grayscale(0);
}
 .wrapper .content .middleContent .swiper-container {
     height: 100%;
     width: 378px;
}
 .wrapper .content .middleContent .swiper-slide {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .wrapper .content .middleContent .swiper-slide.open {
     transform: translateY(0);
}
 .wrapper .content .middleContent .settings {
     transition: all 0.4s 0.4s ease;
     opacity: 1;
     transform: translateY(0px);
}
 .wrapper .content .middleContent.open .playlistsContent {
     transform: translateY(0);
}
 .wrapper .content .bottomContent {
     width: 100%;
     /*min-height: 150px;*/
     /*max-height: 150px;*/
     background-color: #181818;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
     backdrop-filter: blur(5px);
     transition: all 0.4s 0.2s ease;
     padding: 5px 30px 20px 30px;
     box-sizing: border-box;
     position: relative;
     z-index: 9;
}
 .wrapper .content .bottomContent .bottomExpand {
    margin-top: -29px;
    /*position: absolute;*/
    /*top: -50px;*/
    text-align: center;
    width: auto;
    height: auto;
    flex-wrap: wrap;
     /*transform: rotate(-180deg);*/
     /*opacity: 0.5;*/
     background: url('../images/arrow-top.png') no-repeat center top;
}
.wrapper .content .bottomContent .bottomExpand span{
    display: block;
    width: 100%;
    color: #C9934B;
    font-size: 16px;
}
.wrapper .content .bottomContent .bottomExpand i {
    color: #C9934B;
    font-size: 30px;
    /*margin-left: 10px;*/
    margin-top: -5px;
}

 .wrapper .content .bottomContent .progressBar {
     width: 100%;
     /*visibility: hidden;*/
     height: 35px;
     /*opacity: 0;*/
     transition: all 0.4s ease;
     /*transform: translateY(-60px);*/
     margin-bottom: 10px;

    position: relative;
    display: flex;
    align-items: center;
}

.slider-full:before{
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 90px;
    height: 45px;
    background: url('../images/full-icon.png') no-repeat center center;
    background-size: contain;
    z-index: 9;
}

 @media screen and (max-width: 640px) {
    .track-single .container{
        /*padding: 0;*/
    }
    .track-single-col{
        padding: 0;
    }

    .wrapper .content .bottomContent{
        padding: 5px 10px 20px 10px;
    }

     .wrapper .content .bottomContent .progressBar {
         box-sizing: border-box;
    }

    .wrapper .content .middleContent .swiper-container{
        /*width: 250px;*/
        width: 100%;
        margin: 0;
    }
    .track-info-top {
        padding: 20px;
    }
}
 .wrapper .content .bottomContent .progressBar .timer {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     font-size: 12px;
     line-height: 1;
     color: var(--c-main);

    flex: 1;
    margin-bottom: 0;
}
 .wrapper .content .bottomContent .progressBar .barTimer {
     width: 100%;
     height: 2px;
     background-color: #726023;
     border-radius: 5px;
     position: relative;
     cursor: pointer;

     position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
 .wrapper .content .bottomContent .progressBar .barTimer .progress {
     position: absolute;
     background-color: var(--c-main);
     height: 100%;
     width: 0%;
     border-radius: 4px;
     transition: all 0.4s ease;
}
 .wrapper .content .bottomContent .player {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.2s 0.2s ease;
}
.player .player-left{
    display: flex;
    justify-content: right;
    flex: 1;
}
.player .player-right{
    display: flex;
    justify-content: left;
    flex: 1;
}

 .wrapper .content .bottomContent .player .btnPlay {
     /*background-color: rgba(255, 255, 255, 0.2);*/
     width: 55px;
     height: 55px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.2s ease;
     border: 2px solid var(--c-main);
     margin: 0 25px;
}
 .wrapper .content .bottomContent .player .btnPlay.pause {
     /*background-color: rgba(255, 255, 255, 0.4);*/
}
 .wrapper .content .bottomContent .player .btnPlay.pause .play:before {
     background-image: url("/assets/images/pause.svg");
}
 .wrapper .content .bottomContent.expand {
     transition: all 0.4s ease;
     min-height: 150px;
     max-height: 200px;
     padding: 10px 30px 20px 30px;
}
 .wrapper .content .bottomContent.expand .bottomExpand {
     /*transform: rotate(0deg);*/
     /*opacity: 1;*/
}
 .wrapper .content .bottomContent.expand .progressBar {
     opacity: 1;
     visibility: visible;
     height: 50px;
     transition: all 0.4s 0.2s ease;
     transform: translateY(-10px);
}
 .wrapper .content .bottomContent.expand .player .btnPlay {
     width: 60px;
     height: 60px;
}
 .wrapper .content .bottomContent.expand .player .btnPlay .icon:before {
     width: 32px;
     height: 32px;
}
 .wrapper .content .bottomContent.expand .player .btnPlay .icon:active:before {
     width: 38px;
     height: 38px;
}
 .wrapper .content .albumBg {
     position: absolute;
     width: 100%;
     max-height: 760px;
     height: 100%;
     top: 0;
     z-index: -1;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
}
 @media screen and (max-width: 640px) {
     .wrapper .content .albumBg {
         max-height: 100vh;
    }
}
 @media screen and (max-height: 600px) {
     .wrapper .content .albumBg {
         max-height: 100%;
         height: 100%;
         min-height: 600px;
    }
}
 .wrapper .content .albumBg:before, .wrapper .content .albumBg:after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     top: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) -40%, transparent 50%);
     z-index: 1;
}
 .wrapper .content .albumBg:after {
     top: initial;
     bottom: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) -60%, transparent 50%);
}
 .wrapper .content .albumBg .bg {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .wrapper .content .albumBg .bg:before {
     position: absolute;
     content: "";
     width: 150%;
     height: 150%;
     z-index: 2;
     backdrop-filter: blur(10px);
}
 .wrapper .content .albumBg .bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .wrapper .content .albumBg.animeBg .bg {
     animation: animeBg 0.6s ease-in-out both;
}
 @keyframes animeBg {
     0% {
         width: 100%;
         height: 100%;
    }
     50% {
         width: 130%;
         height: 130%;
    }
     100% {
         width: 100%;
         height: 100%;
    }
}
 .wrapper .content .albumBg.animeBg .bg:before {
     animation: animeBg2 0.6s ease-in-out both;
}
 @keyframes animeBg2 {
     0% {
         width: 150%;
         height: 150%;
         backdrop-filter: blur(10px);
    }
     50% {
         backdrop-filter: blur(40px);
    }
     100% {
         width: 150%;
         height: 150%;
         backdrop-filter: blur(10px);
    }
}
 .swiper-button-prev, .swiper-button-next {
     all: unset;
}


 
/*track detail*/

.barTimer .progress {
    overflow: unset;
}
.barTimer .pin {
  background-color: white;
  border-radius: 8px;
  height: 8px;
  position: absolute;
  pointer-events: all;
  right: -5px;
  top: -3px;
  width: 8px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  -webkit-transition: transform 0.25s ease;
  -moz-transition: transform 0.25s ease;
  -ms-transition: transform 0.25s ease;
  -o-transition: transform 0.25s ease;
  transition: transform 0.25s ease;
}
.barTimer .pin:active {
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.barTime-wrap{
    width: 100%;
    color: var(--c-main);
    font-size: 12px;
    padding: 10px 0;
}
.barTime-wrap .progressbar{
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
.barTime-wrap .ball{
    width: 8px !important;
    height: 8px !important;
    left: calc(100% - 4px) !important;
    top: -3px !important;
}
.barTime-wrap .current-time{
    min-width: 50px;
    text-align: right;
}
.barTime-wrap .duration{
    min-width: 50px;
}


/*range slider ?*/

.range-slider {
/*  margin: 60px 0 0 0;*/
}

.range-slider {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 45px;
}
.range-slider span{
    display: block;
    min-width: 50px;
    text-align: right;
    padding-right: 8px;
    color: var(--c-main);
    font-size: 12px;
}
.range-slider span:last-child{
    padding-right: 0;
    padding-left: 8px;
    text-align: left;
}

.range-slider__range {
  -webkit-appearance: none;
  flex: 1;
  height: 2px;
  border-radius: 5px;
  background: rgb(114, 96, 35);
  outline: none;
  padding: 0;
  margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
  background: var(--c-main);
}
.range-slider__range:active::-webkit-slider-thumb {
  background: var(--c-main);
}
.range-slider__range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--c-main);
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}


.range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}
.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: "";
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

@media(max-width: 767px)
{
    .range-slider__range::-webkit-slider-thumb{
        width: 15px;
        height: 15px;
    }
}
/*range slider ?*/