@charset "utf-8";
*:focus {
    outline: none !important;
}
div#player-screen{
width: 100%;
padding-top: 25px;
background-color: #000000;
float: left;
}
div#player-progress-bar-container {
height: 17px;
background-color: #192029;
position: relative;
width: 95%;
border-radius: 5px;
left: 2.5%;
border: 1px solid #A00;
}

div#player-progress-bar-container progress#song-played-progress {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 15px;
display: block;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
z-index: 9;
border: none;
cursor: pointer;
background: transparent;
}
div#player-progress-bar-container progress#song-buffered-progress {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 15px;
display: block;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
border: none;
background: transparent;
}
div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {
background:#F00;
border-radius:5px 0px 0px 5px;
}
div#player-progress-bar-container progress#song-buffered-progress[value]::-moz-progress-bar {
background:#800000;
border-radius:5px 0px 0px 5px;
}

div#player-middle {

padding-top: 20px;
padding-bottom: 20px;
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
div#player-middle div#time-container {
color: white;
width: 100%;
background-color: #000;
font-size: 14px;
font-weight: bold;
}
div#player-middle div#time-container span.amplitude-current-time {
position: absolute;
top: 0px;
left: 5px;
}
div#player-middle div#time-container span.amplitude-duration-time {
position: absolute;
top: 0px;
right: 5px;
}
div#player-middle span.song-name {
font-size: 16px;
color: #fff;
letter-spacing: 0.5px;
line-height: 24px;
display: block;
}
div#player-middle div.song-artist-album {
opacity: 0.5;
font-size: 14px;
color: #fff;
letter-spacing: 0.5px;
line-height: 16px;
}

div#player-bottom {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #000000;
width: 100%;
}

div#player-bottom div#control-container {
display: flex;
justify-content: space-around;
/*justify-content: center;*/
flex-wrap: wrap;
height: 52px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #192029;
width: 95%;
border-radius: 5px;
}

/*shuffle buttons*/
div#player-bottom div#control-container div#shuffle-container {
display: flex;
justify-content: center;
flex-wrap: wrap;	
/*width: 20%;*/
height: 44px;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle {
width: 40px;
height: 40px;
cursor: pointer;
margin: auto; 
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-on {
position: relative;
font-size: 30px;
color: #F00;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-on:hover {
color: #DF0000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-on:before {
content: "\f074";  
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;
top: 0;
left: 0px;
right: 0px;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-off {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-off:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-off:before {
content: "\f074"; 
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position:absolute;
top: 0;
left: 0px;
right: 0px;
}
/*shuffle buttons*/
/*previous buttons*/
div#player-bottom div#control-container div#prev-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*width: 20%;*/
height: 44px;
}
div#player-bottom div#control-container div#prev-container div#previous {
width: 40px;
height: 40px;
cursor: pointer;
margin: auto; 
}
div#player-bottom div#control-container div#prev-container div#previous.amplitude-prev {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#prev-container div#previous.amplitude-prev:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#prev-container div#previous.amplitude-prev:before {
content: "\f048";  
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;
top: 0;
left: 0px;
right: 0px;
}
/*previous buttons*/
/*play-pause buttons*/
div#player-bottom div#control-container div#play-pause-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*width: 20%;*/
height: 44px;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause {
width: 40px;
height: 40px;
cursor: pointer;
margin: auto; 
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-playing {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-playing:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-playing:before {

font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04c"; 
position: absolute;
top: 0;
left: 0px;
right: 0px;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-paused {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-paused:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-paused:before {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04b"; 
position:absolute;
top: 0;
left: 0px;
right: 0px;	
}
/*play-pause buttons*/
/*next buttons*/
div#player-bottom div#control-container div#next-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*width: 20%;*/
height: 44px;
}
div#player-bottom div#control-container div#next-container div#next {
width: 40px;
height: 40px;
cursor: pointer;
margin: auto; 
}
div#player-bottom div#control-container div#next-container div#next.amplitude-next {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#next-container div#next.amplitude-next:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#next-container div#next.amplitude-next:before {
content: "\f051";  
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;
top: 0;
left: 0px;
right: 0px;
}
/*next buttons*/
/*repeat buttons*/
div#player-bottom div#control-container div#repeat-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*width: 20%;*/
height: 44px;
}
div#player-bottom div#control-container div#repeat-container div#repeat {
width: 40px;
height: 40px;
cursor: pointer;
margin: auto; 
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
position: relative;
font-size: 30px;
color: #F00;
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-on:hover {
color: #DF0000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-on:before {
content: "\f021";  
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;
top: 0;
left: 0px;
right: 0px;
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
position: relative;
font-size: 30px;
color: #CCC;
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-off:hover {
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-off:before {
content: "\f021"; 
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position:absolute;
top: 0;
left: 0px;
right: 0px;
}
/*repeat buttons*/


div#player-bottom div#volume-container {
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 95%;
height: 40px;
background-color: #192029;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
/*volume button*/
div#player-bottom div#volume-container div.flex_vlmn {
display: flex;
justify-content: center;
cursor: pointer;
width: 8%;
}
div#player-bottom div#volume-container div.flex_vlmn div.amplitude-not-muted {
position: relative;
color: #CCC;
width: 100%;
font-size: 23px;
height: 30px;
}
div#player-bottom div#volume-container div.flex_vlmn div.amplitude-not-muted:before {
content: "\f026";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;	
top: 0;
left: 0px;
right: 0px;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#volume-container div.flex_vlmn div.amplitude-not-muted:hover:before {
content: "\f6a9";
color: #FFF;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

div#player-bottom div#volume-container div.flex_vlmn div.amplitude-muted {
position: relative;
color: #F00;
width: 100%;
font-size: 23px;
height: 30px;
}
div#player-bottom div#volume-container div.flex_vlmn div.amplitude-muted:before {
content: "\f6a9";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
position: absolute;	
top: 0;
left: 0px;
right: 0px;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#player-bottom div#volume-container div.flex_vlmn div.amplitude-muted:hover {
color: #FF4646;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
/*volume button*/
/*volume ranger*/
div#player-bottom div#volume-container input[type="range"] {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	-webkit-appearance: none; /* Remove default appearance styling for Webkit */
	-moz-appearance: none; /* Remove default appearance styling for Webkit */
	width: 65%;
	height: 2px;
	vertical-align: middle;
	cursor: pointer;
	background: #cfd8dc;
	border-radius: 7px;
	outline-offset: 0px;
	outline: 0px solid #666;/*outline: -webkit-focus-ring-color auto 0px;*/
}
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
background: #cfd8dc;
border-radius: 7px;
}
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-webkit-slider-thumb  {
height: 20px;
width: 20px;
cursor: pointer;
margin-top: -8px;
-webkit-appearance: none;
border-radius: 20px;
vertical-align: middle;
padding-top:-10px;
border-width:2px;

background: transparent linear-gradient(to bottom, #F00002 0%, #E20007 25%, #BA0013 78%, #AD0017 100%) repeat scroll 0% 0%;
background-color: transparent;
background-image: linear-gradient(to bottom, #F00002 0%, #E20007 25%, #BA0013 78%, #AD0017 100%);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-moz-range-thumb {
height: 20px;
width: 20px;
cursor: pointer;
margin-top: -8px;
-webkit-appearance: none;
border-radius: 20px;
vertical-align: middle;
margin: 0 10px;
border-width:1px;
border-color:#ff0000;
background: transparent linear-gradient(to bottom, #F00002 0%, #E20007 25%, #BA0013 78%, #AD0017 100%) repeat scroll 0% 0%;
background-color: transparent;
background-image: linear-gradient(to bottom, #F00002 0%, #E20007 25%, #BA0013 78%, #AD0017 100%);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
/*animation color volume*/
/*
animation-duration: 3s;
animation-name: vlmnisave;
animation-iteration-count: infinite;
animation-direction: ease-in-out; 
*/  
/*-webkit-animation-delay: -0.9s;  */
/*animation-delay: -0.9s;*/
/*animation color volume*/
}
/*
@-webkit-keyframes vlmnisave {
0% { background-color: #66FFFF; }
33% { background-color: #66FF00; } 
67% { background-color: #FF0000; }
100% { background-color: #66FFFF; }
}

@keyframes vlmnisave {
0% { background-color: #66FFFF; }
33% { background-color: #66FF00; } 
67% { background-color: #FF0000; }
100% { background-color: #66FFFF; }
}
*/

/*volume ranger*/
/*Playlist*/
div#list-screen {
background-color: #000000;
float: left;
width: 100%;
padding-bottom: 25px;
}
div#list-screen div#list {
width: 95%;
text-align: center;
background-color: #192029;
padding-top: 10px;
display: inline-block;
border-radius: 5px;
}
/*
div#list-screen div#list div.song {
width: 98%;
margin-bottom: 5px;
border: 1px solid #585858;
display: inline-block;
border-radius: 2px;
cursor: pointer;
color: #CCC;
background-color: #202833;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#list-screen div#list div.song:hover {
background-color: #710000;
border: 1px solid #C40000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
color: #FFF;
}
*/
/*Играет*/
div#list-screen div#list div.amplitude-playing {
width: 98%;
margin-bottom: 5px;
border: 1px solid #FF0000;
display: inline-block;
border-radius: 2px;
cursor: pointer;
color: #CCC;
background-color: #640000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#list-screen div#list div.amplitude-playing:hover {
background-color: #710000;
border: 1px solid #C40000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
color: #FFF;
}
/*Играет*/
/*На паузе*/
div#list-screen div#list div.amplitude-paused {
width: 98%;
margin-bottom: 5px;
border: 1px solid #585858;
display: inline-block;
border-radius: 2px;
cursor: pointer;
color: #CCC;
background-color: #202833;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
div#list-screen div#list div.amplitude-paused:hover {
background-color: #710000;
border: 1px solid #C40000;
transition: all 1s ease 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
color: #FFF;
}
/*На паузе*/
div#list-screen div#list div.song span.song-number-now-playing {
line-height: 24px;
float: left;
height: 40px;
width: 15%;
}

/*Song Plaing Now*/
div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing div.now-playing.pause_lift {
display: block;
float: left;
width: 100%;	
height: 40px;
position: relative;	
}
div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing div.now-playing.pause_lift:before {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04c";
font-size: 22px;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-top: 8px;
}

div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing div.now-playing.play_lift{
display: none;
float: left;
width: 100%;	
height: 40px;
position: relative;	
}
div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing div.now-playing.play_lift:before{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04c";
font-size: 22px;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-top: 8px;
}

/*Song Plaing Now*/
/*Song Not Plaing Now*/
div#list-screen div#list div.song.amplitude-paused span.song-number-now-playing div.now-playing.pause_lift {
display: none;	
float: left;
width: 100%;	
height: 40px;
position: relative;	
}
div#list-screen div#list div.song.amplitude-paused span.song-number-now-playing div.now-playing.pause_lift:before {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04c";
font-size: 22px;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-top: 8px;
}
div#list-screen div#list div.song.amplitude-paused span.song-number-now-playing div.now-playing.play_lift {
display: block;
float: left;
width: 100%;	
height: 40px;
position: relative;	
}
div#list-screen div#list div.song.amplitude-paused span.song-number-now-playing div.now-playing.play_lift:before {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f04b";
font-size: 22px;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding-top: 8px;
}
/*Song Not Plaing Now*/





div#list-screen div#list div.song span.song-duration {
display: inline-block;
opacity: 0.5;
font-size: 14px;
color: #fff;
letter-spacing: 0.5px;
width: 35px;
text-align: center;
}


div#list-screen div#list div.song span.song-number-now-playing span.number {
display: inline-block;
width: 98%;
text-align: center;
}

div#list-screen div#list div.song div.song-meta-container {
display: flex;
width: 85%;
align-content: center;
justify-content: flex-start;
align-items: center;
align-self: stretch;
flex-wrap: wrap;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #666;
}
div#list-screen div#list div.song div.song-meta-container span.song-name {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #FFF;
padding: 5px;
height: 40px;
}
div#list-screen div#list div.song span.song-duration {
display: inline-block;
opacity: 0.5;
font-size: 14px;
color: #fff;
letter-spacing: 0.5px;
width: 35px;
text-align: center;
}
div#list-screen div#list div.song span.song-duration {
font-size: 14px;
color: #fff;
letter-spacing: 0.5px;
text-align: center;
}
div#list-screen div#list-screen-footer {
color: #5277b0;
}
div#list-screen div#list-screen-footer div#list-screen-meta-container {
color: #5277b0;
}
div#list-screen div#list-screen-footer div#list-screen-meta-container span.song-name {
height: 80px;
padding: 15px;
}
div#list-screen div#list-screen-footer div#list-screen-meta-container div.song-artist-album {
font-size: 16px;
color: #fff;
letter-spacing: 0.5px;
line-height: 24px;
}
div#list-screen div#list-screen-footer div#list-screen-meta-container div.song-artist-album {
font-size: 16px;
color: #fff;
letter-spacing: 0.5px;
line-height: 24px;
}
div#list-screen div#list-screen-footer div.list-controls {
width: 90px;
float: right;
margin-top: 8px;
}
div#list-screen div#list-screen-footer div.list-controls div.list-previous {
width: 90px;
float: right;
margin-top: 8px;
}
div#list-screen div#list-screen-footer div.list-controls div.list-play-pause.amplitude-playing {
cursor: pointer;
width: 17px;
height: 24px;
background-repeat: no-repeat;
float: left;
}
div#list-screen div#list-screen-footer div.list-controls div.list-next {
background-image: url("../img/small-pause.svg");
}