* {
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
@font-face {
	font-family: 'Teko Light';
    src: url('D:/web project/ThuMine/fonts/Teko-Light.ttf') format('truetype');
	src: local('Teko Light'), url('../../../fonts/Teko-Light.ttf');
}

/*
  1. Layout
*/

/* html { 
		background: url('../../../background.png') no-repeat center center fixed; 
		background-position: top;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	} */
 
body {
  /* background:#f0efe9; */
  height: 100%;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'Teko Light', Calibri;
  color: black;
  line-height: 1.5; }
  
 #backimage{
	position:absolute;
	top:0;
  }
  
  

  #screen-size{
		display:none;
		position:absolute;
		top:0;
		right:0;
		width:100px;
		height:100px;
		color:white;
	}
	
 /* 2. Components */
	
/*All Devices*/
  .song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
      display: block; }
  
  .song div.song-now-playing-icon-container img.now-playing {
		display: none;}
  
  .song.amplitude-active-song-container:hover div.play-button-container {
      display: none;}
	  
/*Webkit scrollbar*/ 
  /* width */
::-webkit-scrollbar {
  width: 16px;
}
/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #494949; 
}	 

#amplitude-left {
  padding: 0px;
  width: 50%;
  max-height: 440px;
  display: flex;
  flex-direction: column; 
  }
  
div#player-bottom div#volume-container:after {
      content: "";
      display: table;
      clear: both; }
	  
.song div.song-meta-data span.song-title {/*song title*/
    color:black;
	font-size: 18px;
}

.song span.song-duration {/*song duration*/
	color:rgb(80,80,80);

}

/* Phones & tablets portrait*/

@media screen and (max-aspect-ratio: 10/16) {
    #amplitude-player {
		position:absolute;
		width:100%;
		top:30vw;
		bottom:0;
		left:0;
		overflow:hidden;
		flex-direction: column; 
		/*Firefox scrollbar*/
		  scrollbar-color: #494949 transparent;
		  scrollbar-width: thin;
		} 
	
	/*Left side Phone*/
	#amplitude-left {
		display:none; }
	
	#amplitude-left img{
		  display:none; } 
		  
	#meta-container span{
		  display:none; }
		
	#amplitude-left img[amplitude-song-info="cover_art_url"] {
		  display:none; }
		  
	
	
	/*Bottom Phone*/
	
	#player-bottom {
		flex: 1;
		background:rgba(0,0,0,0.9);/*player color*/
		position:absolute;
		left:0;
		right:0;
		height:36vw;
		bottom:0;
	}
	
	#left-controls {
		width: 100%;
		bottom:0;
		left:0;
		top:40px;
		position:absolute;
	}
	  
	 #previous {
        width: 13%;
        height: 54%;
        cursor: pointer;
		border:1px solid black;
		border-radius:10px;
        background: url("../img/prev.svg");
		background-size: 100% 100%;
        background-repeat: no-repeat;
        float: left;
        margin-top: 5%;
        margin-left: 24%; }
		
    #play-pause {
        width: 16%;
        height: 60%;
		border:1px solid white;
		border-radius:10px;
		position:absolute;
        cursor: pointer;
		margin-top: 3%;
        margin-left: 42%;  
		}
    #play-pause.amplitude-paused {
          background: url("../img/play.svg"); 
		  background-size: 100% 100%;}
    #play-pause.amplitude-playing {
          background: url("../img/pause.svg"); 
		  background-size: 100% 100%;}
    
	#next {
        width: 13%;
        height: 54%;
        cursor: pointer;
		border:1px solid black;
		border-radius:10px;
        background: url("../img/next.svg");
		background-size: 100% 100%;
        background-repeat: no-repeat;
        float: right;
        margin-top: 5%;
        margin-right: 24%;}
		
  
	 #repeat-container {
		display:none;}
	
	/*Time Bar Phone*/
	
	#progress-container {
	  left:100px;
	  right:100px;
	  top:10px;
	  position: absolute;
	  height: 20px;
	  cursor: pointer;}
  
	span.current-time {
	  color: #e7e7e7; /*current time color*/
	  font-size: 16px;
	  font-weight: 500;
	  position:absolute;
	  left:0;
	  width: 100px;
	  padding-top:10px;
	  padding-bottom:10px;
	  text-align: center; }
	  
	span.duration {
	  color: #e7e7e7; /*duration color*/
	  font-size: 16px;
	  font-weight: 500;
	  position:absolute;
	  right:0;
	  padding-top:10px;
	  padding-bottom:10px;
	  width: 100px;
	  text-align: center; }
	  
	/*Volume Phone*/
	
	div#amplitude-player div#repeat-container div#repeat {
		margin-left: auto;
		margin-right: auto;
		float: none; }
	  div#amplitude-player div#repeat-container div#shuffle {
		display: none; }
	  div#volume-container div.volume-controls {
		display: none; }
	  div#amplitude-player div#volume-container div#shuffle-right {
		display: block; }
		
	/*Right Side Phone*/
	
	#amplitude-right {
    position:absolute;
	width: 86%; 
	margin:auto;
	top:0;
	bottom:36vw;
	left:7%;
	overflow-y: scroll;
	} 
	
	.song{/* song container*/
		 position: relative;
		 cursor: pointer;
		 height: 55px;
		 padding-top: 15px;
		 padding-bottom: 15px;
		 border-bottom: 1px solid rgba(0,0,0,0.3);}

	.song:hover{
		background:rgba(120,16,34,0.8);
	}
	.download{
		width: 20px;
		height: 20px;
		position:absolute;
		right: 50px;
		top:18px;
		background-image: url('../img/download.svg');
		background-size: 20px 20px;}
	
	.song-now-playing-icon-container {
		float: left;
		position:absolute;
		width: 20px;
		height: 20px;
		top:20px;
		margin-left: 5px;
		margin-right: 5px; }
	
	.song span{
		font-size: 18px;
		font-weight: 400;
	}
	
	.song div.song-meta-data span.song-title {/*song title*/
        display: block;
		position:absolute;
		left:40px;
        font-weight: 300;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
	
	.song span.song-duration {/*song duration*/
      position:absolute;
	  right:0px;
	  bottom:15px;
	  float: right;
      width: 55px;
      text-align: center;
      color:rgb(80,80,80);
      font-weight: 500; }
}


/* Desktop */
@media screen and (min-aspect-ratio: 10/16) {
	
  #amplitude-player {
  position:absolute;
  left:0px;
  right:0%;
  top:120px;
  bottom:0px; 
	} 

	#amplitude-player {
	  /*Firefox scrollbar*/
	  scrollbar-color: rgb(30,30,30) transparent;
	  scrollbar-width: thin;
	}
	
	/*Left side*/
	#cover-image{
		display: none;
		height:240px;
		width:240px;
		margin-left: 175px;
		margin-top: 80px;
		z-index:-1;
	}
  
    #amplitude-left img {/*cover art*/
		width: 100%;
		height:100%;
		margin-top:0px;
		margin-left:0px;
	}
	
	#meta-container {
		text-align: left;
		height:30px;
		width:300px;
		position:absolute;
		bottom:10px;
    z-index: 4;
		padding-top:5px;
		padding-left:10px;
	}
	  
	  	/*Left Side Meta*/
		
	#meta-container span.song-name {
		display: block;
		color: rgb(238, 238, 238); /*song title color*/
		font-size: 22px;
		font-weight: 400;
		font-family: 'Teko Light', sans-serif;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; }
	
	/*Bottom*/
	
	
	#player-bottom {
		flex: 1;
		background:rgba(0,0,0,0.9);/*player color*/
		position:fixed;
		left:0px;
		right:0;
		height:120px;
		bottom:0;
	}


	#left-controls {
		width: 130px;
		height:50px;
		left:0;
		top:40px;
		position:relative;
	}
	  
	#previous {
        position:absolute;
        width: 30px;
        height: 30px;
        cursor: pointer;
		background-color:red;
        background: url("../img/prev.svg");
		background-size: 100% 100%;
        background-repeat: no-repeat;
        float: left;
        margin-top: 10px;
        margin-left: 10px; }
		
    #play-pause {
        position:absolute;
        width: 40px;
        height: 40px;
        cursor: pointer;
		margin-top: 5px;
        margin-left: 5px;
        left:40px; }
		
    #play-pause.amplitude-paused {
		background: url("../img/play.svg"); 
		background-size: 100% 100%;
		}
    #play-pause.amplitude-playing {
		background: url("../img/pause.svg"); 
		background-size: 100% 100%;
		}
    
	#next {
        position:absolute;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: url("../img/next.svg");
		background-size: 100% 100%;
        background-repeat: no-repeat;
        left:85px;
        margin-top: 10px;
        margin-left: 5px;}
		
		
  
    #repeat-container {
		width: 100px;
		float: left;
		padding-top: 15px; 
		position:absolute;
		top:40px;
		left:140px;
  }
	

    #repeat {
		width: 24px;
		height: 19px;
		margin-left: 10px;
		margin-right: 20px;
		float: left; 
		cursor: pointer; 
	}
	  
    #repeat.amplitude-repeat-off {
        background: url("../img/repeat-off.svg"); }
  
    #repeat.amplitude-repeat-on {
        background: url("../img/repeat-on.svg"); }
  
    #shuffle {
      width: 23px;
      height: 19px;
      cursor: pointer;
	  float:left;
    }
  
    #shuffle.amplitude-shuffle-off {
        background: url("../img/shuffle-off.svg"); }
  
    #shuffle.amplitude-shuffle-on {
        background: url("../img/shuffle-on.svg"); }
	
	/*Time Bar*/
	div#progress-container {
	  left:100px;
	  right:100px;
	  top:10px;
	  position: absolute;
	  height: 20px;
	  cursor: pointer;}
	
	span.current-time {
	  color: #e7e7e7; /*current time color*/
	  font-size: 16px;
	  font-weight: 500;
	  position:absolute;
	  left:0;
	  width: 100px;
	  padding-top:10px;
	  padding-bottom:10px;
	  text-align: center; }
	  
	span.duration {
	  color: #e7e7e7; /*duration color*/
	  font-size: 16px;
	  font-weight: 500;
	  position:absolute;
	  right:0;
	  padding-top:10px;
	  padding-bottom:10px;
	  width: 100px;
	  text-align: center; }
	  
	  /*Right Side*/
	  
	#amplitude-right {
		top: 20px;
		overflow-y: scroll;
		position:absolute;
		left:40px;
		bottom:120px;
		width: 500px;
		display: flex;
		border-top: 1px solid rgba(0,0,0,0.3);
		flex-direction: column; 
	}
  
	 
	
	.song{/* song container*/
		 position: relative;
		 cursor: pointer;
		 height: 55px;
		 padding-top: 10px;
		 padding-bottom: 15px;
		 border-bottom: 1px solid rgba(0,0,0,0.3);}

	.song:hover{
		background:rgba(120,16,34,0.8);
	}


	.download{
		width: 20px;
		height: 20px;
		position:absolute;
		right: 70px;
		top:15px;
		background-image: url('../img/download.svg');
		background-size: 20px 20px;}

	
	div.song div.song-now-playing-icon-container {
		float: left;
		width: 20px;
		height: 20px;
		margin-left:10px;
		margin-right: 10px; }
		
		  
	div.song div.song-now-playing-icon-container img.now-playing {
		display: none;
		margin-top: 8px; }
/*
	div.song div.play-button-container {
      display: none;
      background: url("../img/list-play-light.png") no-repeat;
      width: 22px;
      height: 22px;
      margin-top: 10px; }
	div.song div.play-button-container:hover {
      background: url("../img/list-play-hover.png") no-repeat;}*/
    div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
      display: block; }
    
	div.song.amplitude-active-song-container:hover div.play-button-container {
      display: none;}
    div.song div.song-meta-data {
      float: left;
	  margin-top: 5px;
      width: calc( 100% - 110px ); }
      
	  
	div.song div.song-meta-data span.song-title {/*song title*/
        font-size: 17px;
        display: block;
        font-weight: 300;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
		
		
    #amplitude-right div.song img.bandcamp-grey {/*download*/
      float: left;
      display: block;
      margin-top: 5px; }
    #amplitude-right div.song img.bandcamp-white {
      float: left;
      display: none;
      margin-top: 5px; }
    
	.song span.song-duration {/*song duration*/
      position:absolute;
	  right:0px;
	  float: right;
      width: 55px;
      text-align: center;
      line-height: 35px;
      font-weight: 500; }
	  
	.song:hover span.song-duration {
		position:absolute;
		right:0px;}
  
    .song:after {
      content: "";
      display: table;
      clear: both; }
}



  /*
    IE 11
  */ 
  #progress-container{
	  margin-top:10px;}
  div#progress-container:hover input[type=range].amplitude-song-slider::-webkit-slider-thumb {
    display: block; }
  div#progress-container:hover input[type=range].amplitude-song-slider::-moz-range-thumb {
    visibility: visible; }
  div#progress-container progress#song-played-progress {
    width: 100%;
    position: absolute;
    left: 0;
    top: 8px;
    right: 0;
    width: 100%;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    background: transparent;
    border: none;
    /* Needed for Firefox */ }
  @media all and (-ms-high-contrast: none) {
    div#progress-container *::-ms-backdrop, div#progress-container progress#song-played-progress {
      color: #00A0FF;
      border: none;
      background-color: #CFD8DC; } }
  @supports (-ms-ime-align: auto) {
    div#progress-container progress#song-played-progress {
      color: #00A0FF;
      border: none; } }
	  
  div#progress-container progress#song-played-progress[value]::-webkit-progress-bar {
    background: none;
    border-radius: 5px; }
  div#progress-container progress#song-played-progress[value]::-webkit-progress-value {
    background-color: #981942;
    border-radius: 5px; }
	
  div#progress-container progress#song-played-progress::-moz-progress-bar {
    background: none;
    border-radius: 5px;
    background-color: #981942;/*played progress color*/
    height: 5px;}
  div#progress-container progress#song-buffered-progress {
    position: absolute;
    left: 0;
    top: 8px;
    right: 0;
    width: 100%;
    z-index:0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 5px;
    background: transparent;
    border: none;
    background-color: #D7DEE3; }
  div#progress-container progress#song-buffered-progress[value]::-webkit-progress-bar {
    background-color: #CFD8DC;
    border-radius: 5px; }
  div#progress-container progress#song-buffered-progress[value]::-webkit-progress-value {
    background-color: #323232;/*song remaining*/
    border-radius: 5px;
    transition: width .1s ease; }
  div#progress-container progress#song-buffered-progress::-moz-progress-bar {
    background: none;
    border-radius: 5px;
    background-color: #323232;/*song remaining*/
    height: 5px;
    margin-top: -2px; }
  div#progress-container progress::-ms-fill {
    border: none; }
@-moz-document url-prefix() {
  div#progress-container progress#song-buffered-progress {
    top: 9px;
    border: none; } }
  @media all and (-ms-high-contrast: none) {
    div#progress-container *::-ms-backdrop, div#progress-container progress#song-buffered-progress {
      color: #78909C;
      border: none; } }
  @supports (-ms-ime-align: auto) {
    div#progress-container progress#song-buffered-progress {
      color: #78909C;
      border: none; } }
  div#progress-container input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 7.5px 0;
    position: absolute;
    z-index: 2;
    top: -7px;
    height: 20px;
    cursor: pointer;
    background-color: inherit; }
  div#progress-container input[type=range]:focus {
    outline: none; }
	
	/*chrome, opera*/
  div#progress-container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: #0075a9;
    border-radius: 0px;
    border: 0px solid #010101; }
  div#progress-container input[type=range]::-webkit-slider-thumb {
    border:0;
    height: 20px;
    width: 8px;
	background-size: 100% 100%;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -1px; }
  /*
  div#progress-container input[type=range]:focus::-webkit-slider-runnable-track {
    background: #00adfb; }*/
	
	/*Firefox:*/
  div#progress-container input[type=range]::-moz-range-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    background: #0075a9;
    border-radius: 0px;
    border: 0px solid #010101; }
  div#progress-container input[type=range]::-moz-range-thumb {/*song progress ball*/
    border: 0;
	display:none;
	appearance: none;
    height: 20px;
    width: 8px;
	background-size: 100% 100%;
    cursor: pointer; }
	
	/*IE*/
  div#progress-container input[type=range]::-ms-track {
    width: 100%;
    height: 0px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent; }
  div#progress-container input[type=range]::-ms-fill-lower {
    background: #003d57;
    border: 0px solid #010101;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
  div#progress-container input[type=range]::-ms-fill-upper {
    background: #0075a9;
    border: 0px solid #010101;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
  div#progress-container input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 1px solid #00a0ff;
    height: 15px;
    width: 15px;
    border-radius: 16px;
    background: #00a0ff;
    cursor: pointer;
    height: 0px;
    display: block; }
  @media all and (-ms-high-contrast: none) {
    div#progress-container *::-ms-backdrop, div#progress-container input[type="range"].amplitude-song-slider {
      padding: 0px; }
    div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
      height: 15px;
      width: 15px;
      border-radius: 10px;
      cursor: pointer;
      margin-top: -8px; }
    div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-track {
      border-width: 15px 0;
      border-color: transparent; }
    div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-lower {
      background: #CFD8DC;
      border-radius: 10px; }
    div#progress-container *::-ms-backdrop, div#progress-container input[type=range].amplitude-song-slider::-ms-fill-upper {
      background: #CFD8DC;
      border-radius: 10px; } }
  @supports (-ms-ime-align: auto) {
    div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
      height: 15px;
      width: 15px;
      margin-top: 3px; } }
  div#progress-container input[type=range]:focus::-ms-fill-lower {
    background: #0075a9; }
  /*div#progress-container input[type=range]:focus::-ms-fill-upper {
    background: #00adfb; }*/


		
	/*Volume*/
  #volume-container {
    width: 155px;
    float: right;
	position:relative;
	  bottom:8px;
    margin-top: 10px; 
	margin-right: 10px; }
  div#control-container div.amplitude-mute {
    cursor: pointer;
    width: 25px;
    height: 19px;
    float: left; }
  div#control-container div.amplitude-mute.amplitude-not-muted {
      background: url("../img/volume.svg");
      background-repeat: no-repeat; }
  div#control-container div.amplitude-mute.amplitude-muted {
      background: url("../img/mute.svg");
      background-repeat: no-repeat; }

div#control-container:after {
  content: "";
  display: table;
  clear: both; }


/* Large and up */

input[type=range].amplitude-volume-slider {
  -webkit-appearance: none;
  width: calc( 100% - 33px);
  float: left;
  margin-top: 10px;
  margin-left: 5px; 
  background: transparent;} /*volume slider background*/

@-moz-document url-prefix() {
  input[type=range].amplitude-volume-slider {
    margin-top: 0px; } }
@supports (-ms-ime-align: auto) {
  input[type=range].amplitude-volume-slider {
    margin-top: 3px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0) !important;
    z-index: 3;
    position: relative; }

  div.ms-range-fix {
    height: 1px;
    background-color: #A9A9A9;
    width: 67%;
    float: right;
    margin-top: -6px;
    z-index: 1;
    position: relative; } }
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, input[type=range].amplitude-volume-slider {
    margin-top: -24px;
    background-color: rgba(255, 255, 255, 0) !important; } }
input[type=range].amplitude-volume-slider:focus {
  outline: none; }

input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
  width: 75%;
  height: 3px;
  cursor: pointer;
  /* animate: 0.2s; */
  background: #323232; }/*volume slider line*/

input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
  height: 20px;
  width: 10px;
  border: 0;
  border-radius: 2px;
  background-color: #A9A9A9;
  /* background:url("../img/slider.png") no-repeat; */
  background-size: 100% 100%;
  cursor: pointer;
  margin-top: -8px;
  -webkit-appearance: none; }

/*input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
  background: #CFD8DC; }*/

/*firefox*/
input[type=range].amplitude-volume-slider::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: #323232; }/*volume slider line*/


input[type=range].amplitude-volume-slider::-moz-range-thumb {
  border:0;
  height: 16px;
  width: 6px;
  border-radius: 2px;
  background-size: 100% 100%; /*sound slider ball*/
  cursor: pointer;
  margin-top: -4px; }
  

input[type=range].amplitude-volume-slider::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 15px 0;
  /*remove default tick marks*/
  color: transparent; }

input[type=range].amplitude-volume-slider::-ms-fill-lower {
  background: #CFD8DC;
  border-radius: 10px; }

input[type=range].amplitude-volume-slider::-ms-fill-upper {
  background: #CFD8DC;
  border-radius: 10px; }

input[type=range].amplitude-volume-slider::-ms-thumb {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #00A0FF;
  cursor: pointer;
  margin-top: 4px; }

input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
  background: #CFD8DC; }

input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
  background: #CFD8DC; }

input[type=range].amplitude-volume-slider::-ms-tooltip {
  display: none; }

	 
	  
  
  


/*# sourceMappingURL=app.css.map */