.albm-music-bar {

	flex: 0 0 100%;

	max-width: 100%;

}

.jp-playlist li {

	border: 0;

	padding: 11px 0 13px;

	border-bottom: 1px solid rgba(255,255,255,0.10);

	font-size: 16px;

	color: #ffffff;

	position: relative;

	padding-left: 35px;

}

.jp-playlist li:last-child {

	border-bottom: 0;

}

.jp-playlist li:before {

	content: '\f04b';

	position: absolute;

	top: 50%;

	left: 0;

	font-family: 'Font Awesome 6 Free';

	font-weight: 900;

	color: #fff;

	transform: translateY(-50%);

	font-size: 12px;

	transition: all 0.4s ease-in-out;

}

.jp-playlist li.jp-playlist-current:before {

	content: '\f04c';

	color: var(--wmplayer);

	font-size: 12px;

}

.jp-details, .jp-playlist {

	background-color: transparent;

	border: 0;

}

.jp-audio, .jp-audio-stream, .jp-video {

	background-color: transparent;

	border: 0;

}

a.jp-playlist-item {

	color: #ffffff;

	font-size: 16px;

}

.jp-playlist ul {

	padding: 0;

}

.jp-play i:before,

.jp-play i {

	transition: all 0.4s ease-in-out;

}

span.jp-free-media {

	display: none;

}

a.jp-playlist-item.jp-playlist-current {

	color: var(--wmplayer);

}

.jp-interface {

	background-color: transparent;

}

.jp-progress {

	height: 4px;

	background: #595959;

	border-radius: 30px;

}

.jp-seek-bar {

	border-radius: 30px;

	background: #595959;

}

.albm-music-bar {

	margin-top: 45px;

}

.jp-state-playing .jp-play-bar {

	background: var(--wmplayer);

	border-radius: 30px;

}

.jp-interface .jp-controls {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}

.jp-controls button.jp-stop {

	display: none;

}



.jp-controls button {

	background: inherit !important;

	width: auto;

	height: auto;

	transition: all 0.4s ease-in-out;

	margin: 0 22px;

}

.jp-controls button:last-child {

	margin-right: 0;

}

.jp-controls button {

	text-indent: inherit;

	font-size: 28px;

	color: rgba(255,255,255,0.80);

	float: none;

}

.jp-controls button:hover {

	color: #fff;

}

.jp-controls button.jp-play {

	width: 68px !important;

	height: 68px !important;

	line-height: 74px !important;

	text-align: center;

	border-radius: 50% !important;

	background-color: var(--wmplayer) !important;

	display: inline-block;

	font-size: inherit !important;

}

.jp-controls button.jp-play i {

	color: #fff;

	font-size: 24px;

	position: relative;

	left: 1px;

	top: 1px;

}

.jp-controls button:focus {

	background: inherit;

}

.music-row {

	margin-top: 20px !important;

	align-items: center;

}

.music-details > h3 {

	color: #ffffff;

}

.music-details > span {

	display: block;

	color: #b3b3b3;

}

.jp-time-holder {

	display: inline-block;

	margin-left: auto;

	margin-right: 20px;

}

.jp-time-holder div {

	font-size: 16px;

	color: #ffffff;

	float: none;

	width: auto;

	margin-right: 18px;

	font-style: inherit;

	position: relative;

}

.jp-time-holder div:before {

	content: '/';

	position: absolute;

	top: 0;

	left: 100%;

	margin-left: 7px;

}

.jp-time-holder div:last-child {

	margin-right: 0;

}



.jp-time-holder div:last-child:before {

	display: none;

}



.jp-state-playing .jp-controls button.jp-play i:before {

	content: '\f04c';

}



.jp-volume-controls button.jp-mute {

	background: inherit;

	width:auto;

	height: auto;

	text-indent: inherit;

	position: static;

	color: #fff;

	font-size: 20px;

	overflow: inherit;

}

.jp-volume-controls button.jp-mute:focus {

	background: inherit;

}

.jp-state-muted .jp-volume-controls button.jp-mute i:before {

	content: '\f6a9';

}

.jp-volume-controls {

	position: static;

	display: inline-block;

	width: auto;

}

.oth-controls {

	text-align: right;

}



.album-playlist-section {

	display: flex;

	flex-wrap: wrap;

	background-color: #242323;

	padding: 40px;

	border-radius: 15px;

}

.album-img {

	max-width: 449px;

	flex: 0 0 449px;

}

.album-img > img {

	width: 100%;

	height: 100%;

	object-fit:cover;

}

.album-info {

	padding: 0 25px;

}

.in-head {

	margin-bottom: 14px;

}

.in-head > span.ab-name {

	display: block;

	color: #ffbb50;

	text-transform: uppercase;

}

.in-head > h2 {

	color: #ffffff;

	margin-bottom: 9px;

}

.in-head > h5 {

	color: #b3b3b3;

	margin-bottom: 5px;

}

.in-head > h5 span {

	color: #fff;

}

.in-head > span {

	display: block;

	color: #b3b3b3;

}





.albm-music-bar {

	flex: 0 0 100%;

	max-width: 100%;

}

.jp-playlist li {

	border: 0;

	padding: 11px 0 13px;

	border-bottom: 1px solid rgba(255,255,255,0.10);

	color: #ffffff;

	position: relative;

	padding-left: 35px;

	list-style-type: none;

}

.jp-playlist li:last-child {

	border-bottom: 0;

}

.jp-playlist li:before {

	content: '\f04b';

	position: absolute;

	top: 50%;

	left: 0;

	font-family: 'Font Awesome 6 Free';

	font-weight: 900;

	color: #fff;

	transform: translateY(-50%);

	font-size: 12px;

	transition: all 0.4s ease-in-out;

}

.jp-playlist li.jp-playlist-current:before {

	content: '\f04c';

	color: var(--wmplayer);

	font-size: 12px;

}

.jp-details, .jp-playlist {

	background-color: transparent;

	border: 0;

}

.jp-audio, .jp-audio-stream, .jp-video {

	background-color: transparent;

	border: 0;

}

a.jp-playlist-item {

	color: #ffffff;

	font-size: 16px;

}

.jp-playlist ul {

	padding: 0;

}

.jp-play i:before,

.jp-play i {

	transition: all 0.4s ease-in-out;

}

span.jp-free-media {

	display: none;

}

a.jp-playlist-item.jp-playlist-current {

	color: var(--wmplayer);

}

.jp-interface {

	background-color: transparent;

}

.jp-progress {

	height: 4px;

	background: #595959;

	border-radius: 30px;

}

.jp-seek-bar {

	border-radius: 30px;

	background: #595959;

}

.albm-music-bar {

	margin-top: 45px;

}

.jp-state-playing .jp-play-bar {

	background: var(--wmplayer);

	border-radius: 30px;

}

.jp-interface .jp-controls {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}

.jp-controls button.jp-stop {

	display: none;

}



.jp-controls button {

	background: inherit !important;

	width: auto;

	height: auto;

	transition: all 0.4s ease-in-out;

	margin: 0 22px;

}

.jp-controls button:last-child {

	margin-right: 0;

}

.jp-controls button {

	text-indent: inherit;

	font-size: 28px;

	color: rgba(255,255,255,0.80);

	float: none;

}

.jp-controls button:hover {

	color: #fff;

}

.jp-controls button.jp-play {

	width: 68px !important;

	height: 68px !important;

	line-height: 74px !important;

	text-align: center;

	border-radius: 50% !important;

	background-color: var(--wmplayer) !important;

	display: inline-block;

	font-size: inherit !important;

}

.jp-controls button.jp-play i {

	color: #fff;

	font-size: 24px;

	position: relative;

	left: 1px;

	top: 1px;

}

.jp-controls button:focus {

	background: inherit;

}



  @media (max-width: 1200px) {

.album-img {

  max-width: 350px;

  flex: 0 0 350px;

}

}



  @media (max-width: 991px) {

.album-img {

  flex: 0 0 300px;

  max-width: 300px;

}

    .album-info {

  max-width: calc(100% - 300px);

  flex: 0 0 calc(100% - 300px);

}

.jp-controls button {

  margin: 0 7px;

}

}



  @media (max-width: 768px) {

    .album-img {

  max-width: 100%;

  flex: 0 0 100%;

  margin-bottom: 50px;

}

.album-info {

  max-width: 100%;

  flex: 0 0 100%;

  padding: 0;

}

.in-head > h2 {

  font-size: 24px;

  line-height: 34px;

}

.music-details {

  display: none;

}

}



  @media (max-width: 576px) {

.jp-interface .jp-controls {

  justify-content: center;

  margin-bottom: 30px;

}

.oth-controls {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

}

.jp-time-holder {

  margin-right: auto;

  margin-left: 0;

}

}



/* Layout 2 */



.album-playlist-section.layout2 {gap: 30px;}



.album-playlist-section.layout2 .album-img {

	order: 2;

}



.album-playlist-section.layout2 .album-info {

	order: 1;

	padding: 0;

}

.album-playlist-section.layout2 .albm-music-bar {order: 3;}



/* Layout 3 */



.album-playlist-section.layout3 {flex-direction: column; gap: 30px;}



.album-playlist-section.layout3 .album-info {

	padding: 0;

}



.album-playlist-section.layout3 .album-img {

	max-width: 100%;

	flex: 0 0 100%;

}



.album-playlist-section.layout3 .album-img img {

	width: auto;

	height: auto;

}



/* MINI PLAYER */



.ms-player {

  align-items: center;

	padding: 20px;

}



.ms-player .jp-controls {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  margin-right: 44px;

}



.ms-player .jp-controls button {

  display: inline-block;

  margin: 0 10px;

}



.ms-player .jp-controls button.jp-play {

  width: 72px;

  height: 72px;

  line-height: 78px;

}



.ms-player .title-bar {

  max-width: 480px;

  flex: 0 0 480px;

}



.ms-top {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 6px;

  align-items: center;

}



.ms-top > h4 {

  color: #ffffff;

  font-size: 12px;

  text-transform: uppercase;

  margin-bottom: 0;

  display: inline-block;

}



.ms-player .jp-time-holder {

  display: inline-block;

  margin-left: auto;

  margin-right: 0;

}



.ms-player .jp-time-holder div {

  font-size: 12px;

}



.ms-player .jp-volume-controls {

  margin-left: auto;

}



@media (max-width: 1200px) {

.ms-player .jp-controls {

    margin-right: 20px;

  }

.ms-player .title-bar {

    max-width: 375px;

    flex: 0 0 375px;

  }

}



@media (max-width: 768px) {

.ms-player .jp-controls {

    max-width: 100%;

    flex: 0 0 100%;

    justify-content: center;

	margin: 0;

    margin-bottom: 30px;

  }

.ms-player .title-bar {

    max-width: 86%;

    flex: 0 0 86%;

  }

}



@media (max-width: 576px) {

.ms-player .title-bar {

    max-width: 100%;

    flex: 0 0 100%;

  }

.ms-player .jp-volume-controls {

    margin-left: auto;

    margin-right: auto;

    margin-top: 20px;

  }

}



.jp-play-bar {

	height: 5px;

	margin-top: -1px;

}



:root {

	--wmplayer: #753a88;

}