/*
	1. Base
*/
/*
	2. Components
*/
div#amplitude-player {
	background: #FFFFFF;
	margin: 0;
	display: flex;
	max-width: 900px; }

/* Small only */
@media screen and (max-width: 39.9375em) {
	div#amplitude-player {
		flex-direction: column; } }
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	div#amplitude-player {
		max-height: 60vh; } }
/* Large and up */
@media screen and (min-width: 64em) {
	div#amplitude-player {
		max-height: 60vh; } }
div#amplitude-left {
	padding: 0px;
	width: 50%;
	display: flex;
	flex-direction: column; }
	div#amplitude-left img {
		width: 100%; }
	div#amplitude-left div#player-left-bottom {
		flex: 1;
		}
		div#amplitude-left div#player-left-bottom div#volume-container:after {
			content: "";
			display: table;
			clear: both; }

/* Small only */
@media screen and (max-width: 39.9375em) {
	div#amplitude-player div#amplitude-left {
		width: 100%; }
		div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"] {
			width: auto;
			height: auto; } }
div#amplitude-right {
	padding: 0px;
	overflow-y: scroll;
	width: 50%;
	display: flex;
	flex-direction: column; }
	div#amplitude-right div.song {
		cursor: pointer;
		padding: 10px; }
		div#amplitude-right div.song div.song-now-playing-icon-container {
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 10px; }
			div#amplitude-right div.song div.song-now-playing-icon-container img.now-playing {
				display: none;
				/*margin-top: 15px; */
			}
		div#amplitude-right 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#amplitude-right div.song div.play-button-container:hover {
			background: url("../img/list-play-hover.png") no-repeat; }
		div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
			display: block; }
		div#amplitude-right div.song.amplitude-active-song-container:hover div.play-button-container {
			display: none; }
		div#amplitude-right div.song div.song-meta-data {
			float: left;
			width: calc( 100% - 110px ); }
			div#amplitude-right div.song div.song-meta-data span.song-title {
				color: #272726;
				font-size: 16px;
				display: block;
				font-weight: 300;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis; }
			div#amplitude-right div.song div.song-meta-data span.song-artist {
				color: #607D8B;
				font-size: 14px;
				font-weight: bold;
				text-transform: uppercase;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis; }
		div#amplitude-right div.song img.bandcamp-grey {
			float: left;
			display: block;
			margin-top: 10px; }
		div#amplitude-right div.song img.bandcamp-white {
			float: left;
			display: none;
			margin-top: 10px; }
		div#amplitude-right div.song span.song-duration {
			float: left;
			width: 55px;
			text-align: center;
			line-height: 45px;
			color: #607D8B;
			font-size: 16px;
			font-weight: 500; }
	div#amplitude-right div.song:after {
		content: "";
		display: table;
		clear: both; }

/* Small only */
@media screen and (max-width: 39.9375em) {
	div#amplitude-player div#amplitude-right {
		width: 100%; } }
div#progress-container {
	width: 70%;
	float: left;
	position: relative;
	height: 20px;
	cursor: pointer;
	/*
		IE 11
	*/ }
	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: 60;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		height: 4px;
		border-radius: 5px;
		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: #004079;
			border: none;
			background-color: #CFD8DC; } }
	@supports (-ms-ime-align: auto) {
		div#progress-container progress#song-played-progress {
			color: #004079;
			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: #004079;
		border-radius: 5px; }
	div#progress-container progress#song-played-progress::-moz-progress-bar {
		background: none;
		border-radius: 5px;
		background-color: #004079;
		height: 5px;
		margin-top: -2px; }
	div#progress-container progress#song-buffered-progress {
		position: absolute;
		left: 0;
		top: 8px;
		right: 0;
		width: 100%;
		z-index: 10;
		-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: #78909C;
		border-radius: 5px;
		transition: width .1s ease; }
	div#progress-container progress#song-buffered-progress::-moz-progress-bar {
		background: none;
		border-radius: 5px;
		background-color: #78909C;
		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: 9999;
		top: -7px;
		height: 20px;
		cursor: pointer;
		background-color: inherit; }
	div#progress-container input[type=range]:focus {
		outline: none; }
	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: #004079;
		border-radius: 0px;
		border: 0px solid #010101; }
	div#progress-container input[type=range]::-webkit-slider-thumb {
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		border: 1px solid #004079;
		height: 15px;
		width: 15px;
		border-radius: 16px;
		background: #004079;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -7.5px; }
	div#progress-container input[type=range]:focus::-webkit-slider-runnable-track {
		background: #004079; }
	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: #004079;
		border-radius: 0px;
		border: 0px solid #010101; }
	div#progress-container input[type=range]::-moz-range-thumb {
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		border: 1px solid #004079;
		height: 15px;
		width: 15px;
		border-radius: 16px;
		background: #004079;
		cursor: pointer; }
	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: #004079;
		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: #004079;
		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 #004079;
		height: 15px;
		width: 15px;
		border-radius: 16px;
		background: #004079;
		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: #004079; }
	div#progress-container input[type=range]:focus::-ms-fill-upper {
		background: #004079; }

div#control-container {
	margin-top: 25px;
	margin-top: 20px; }
	div#control-container div#repeat-container {
		width: 25%;
		float: left;
		padding-top: 20px; }
		div#control-container div#repeat-container div#repeat {
			width: 24px;
			height: 19px;
			cursor: pointer; }
			div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
				background: url("../img/repeat-off.svg"); }
			div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
				background: url("../img/repeat-on.svg"); }
		div#control-container div#repeat-container div#shuffle {
			width: 23px;
			height: 19px;
			cursor: pointer;
			float: right; }
			div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off {
				background: url("../img/shuffle-off.svg"); }
			div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on {
				background: url("../img/shuffle-on.svg"); }
	@media all and (-ms-high-contrast: none) {
		div#control-container *::-ms-backdrop, div#control-container div#control-container {
			margin-top: 40px;
			float: none; } }
	div#control-container div#central-control-container {
		width: 50%;
		float: left; }
		div#control-container div#central-control-container div#central-controls {
			width: 130px;
			margin: auto; }
			div#control-container div#central-control-container div#central-controls div#previous {
				display: inline-block;
				width: 40px;
				height: 40px;
				cursor: pointer;
				background: url("../img/prev.svg");
				background-repeat: no-repeat;
				float: left;
				margin-top: 10px;
				margin-right: -5px; }
			div#control-container div#central-control-container div#central-controls div#play-pause {
				display: inline-block;
				width: 60px;
				height: 60px;
				cursor: pointer;
				float: left; }
				div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused {
					background: url("../img/play.svg"); }
				div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing {
					background: url("../img/pause.svg"); }
			div#control-container div#central-control-container div#central-controls div#next {
				display: inline-block;
				width: 40px;
				height: 40px;
				cursor: pointer;
				background: url("../img/next.svg");
				background-repeat: no-repeat;
				float: left;
				margin-top: 10px;
				margin-left: -5px; }
	div#control-container div#volume-container {
		width: 25%;
		float: left;
		padding-top: 20px; }
		div#control-container div#volume-container div#shuffle-right {
			width: 23px;
			height: 19px;
			cursor: pointer;
			margin: auto; }
			div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-off {
				background: url("../img/shuffle-off.svg"); }
			div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-on {
				background: url("../img/shuffle-on.svg"); }
	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; }

/* Small only */
@media screen and (max-width: 39.9375em) {
	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#amplitude-player div#volume-container div.volume-controls {
		display: none; }
	div#amplitude-player div#volume-container div#shuffle-right {
		display: block; } }
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	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#amplitude-player div#volume-container div.volume-controls {
		display: none; }
	div#amplitude-player div#volume-container div#shuffle-right {
		display: block; } }
/* Large and up */
@media screen and (min-width: 64em) {
	div#amplitude-player div#repeat-container div#repeat {
		margin-left: 10px;
		margin-right: 20px;
		float: left; }
	div#amplitude-player div#volume-container div#shuffle-right {
		display: none; } }
input[type=range].amplitude-volume-slider {
	-webkit-appearance: none;
	width: calc( 100% - 33px);
	float: left;
	margin-top: 10px;
	margin-left: 5px; }

@-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: 999;
		position: relative; }

	div.ms-range-fix {
		height: 1px;
		background-color: #A9A9A9;
		width: 67%;
		float: right;
		margin-top: -6px;
		z-index: 9;
		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: 1px;
	cursor: pointer;
	animate: 0.2s;
	background: #CFD8DC; }

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

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

input[type=range].amplitude-volume-slider::-moz-range-track {
	width: 100%;
	height: 1px;
	cursor: pointer;
	animate: 0.2s;
	background: #CFD8DC; }

input[type=range].amplitude-volume-slider::-moz-range-thumb {
	height: 10px;
	width: 10px;
	border-radius: 10px;
	background: #004079;
	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: #004079;
	cursor: pointer;
	margin-top: 2px; }

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; }

div#time-container span.current-time {
	color: #607D8B;
	font-size: 14px;
	font-weight: 700;
	float: left;
	width: 15%;
	text-align: center; }
div#time-container span.duration {
	color: #607D8B;
	font-size: 14px;
	font-weight: 700;
	float: left;
	width: 15%;
	text-align: center; }

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

div#meta-container {
	text-align: center;
	margin-top: 5px; }
	div#meta-container span.song-name {
		display: block;
		color: #272726;
		font-size: 20px;
		font-family: 'Open Sans', sans-serif;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; }
	div#meta-container div.song-artist-album {
		color: #607D8B;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		font-family: 'Open Sans', sans-serif;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; }
		div#meta-container div.song-artist-album span {
			display: block; }

/*
	3. Layout
*/

/*
	4. Pages
*/
/*
	5. Themes
*/
/*
	6. Utils
*/
/*
	7. Vendors
*/

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