html {
	background-color: white;
}

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.bgcolor {
	background-color: #1B1C1D;
}
.top-card {
    box-shadow: none !important;
    border-radius: 0 !important;
}
.truncate {
	display:block;
	max-width:95%;
    overflow     : hidden !important;
	text-overflow: ellipsis !important;
	white-space  : nowrap !important;
}
.ui.inverted.card>.content>.header, .ui.inverted.cards>.card>.content>.header {
    color: rgba(255,255,255,.9);
    font-size: 0.8em !important;
    color: #555;
}
#song-name {
	font-family: "Lato", sans-serif !important;
    font-size: 1.2em  !important;
    color: green  !important;
    letter-spacing: 0.0313em  !important;
    line-height: 1.2em  !important;
}
#artist {
	font-family: "Lato", sans-serif  !important;;
    font-size: 0.9em !important;
    color: coral  !important;;
    letter-spacing: 0.0313em  !important;;
    line-height: 1.2em !important;;
}

.song-artist {
	font-family: "Lato", sans-serif  !important;;
    font-size: 1.4em !important;
    color: coral  !important;;
    letter-spacing: 0.0313em  !important;;
    line-height: 1.2em !important;;
}
.controls-range {
	padding-top: 1em;
	
}
.controls {
	padding-top: 1.5em;
	
}
.range {
  width: 82%;
  height: 13px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  padding-left: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}
.lista-cards {
	padding: 1em;
	
}
#list {
	background-color: #141414;
	background-image: url("https://www.transparenttextures.com/patterns/diamond-upholstery.png");
	margin-top: 8.6em; 
	padding:1em;
	
}
.th {
	display: none;

}
.material-icons-ex {
	font-size: 2em !important;
	
}
.material-icons {
	font-size: 2.3em;
	cursor: pointer;
}

#playing-art:hover {
	opacity: 1 !important;
}
.pointer {
	cursor: pointer;
}
.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#playing-art {
	opacity: 0.4 !important;
}
#image-cover:hover .centered-text {
	display:none;
  opacity: 0;
}
.menu-panel {
	
	box-shadow: none !important;
	border-radius: 0 !important;
	padding:0  !important;;
	margin:0  !important;;
	
}
#control-panel {
	display: block;
    left: 0px;
    width: 100%;
    height: 100vh;
    margin: 0px !important;
    padding: 0px !important;

}
#menu-card {
	height: 50vh;

}
#show-player {
	display:hidden;
}
#menu {
	display:hidden;
}
.menu-background {
	/*
		background-color: rgb(27,28,29,1) !important;
		background-image: url("https://www.transparenttextures.com/patterns/binding-dark.png") !important;	
	
	background-color: #000000 !important;
	background-color: rgb(27,28,29,1) !important;
	
	background-image: url("https://www.transparenttextures.com/patterns/dark-mosaic.png") !important;
	*/
	background-color: #000000 !important;
	background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png")  !important;;

	
}
.ui.card.horizontal>.image, .ui.horizontal.cards>.card>.image {
    border-radius: .28571429rem 0 0 .28571429rem;
    width: 20em;
}
.ui.card>.image, .ui.cards>.card>.image {
    position: relative;
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0;
    background: rgba(0,0,0,.05);
}


.spotify-panel {
	position: relative;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding:0  !important;;
	margin:0  !important;;
	
}
.spotify-popup {
	position: relative !important;
	background: #1B1C1D  !important;
	padding: 10px !important;
	width: 40em !important;
	height: 30em !important;
	margin: 10px auto !important;
	padding:0  !important;
	margin:0  !important;
}
.ui.input>input {
    margin: 0;
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    outline: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    text-align: left;
    line-height: 1.8em;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    padding: .97857143em 1em;
    background: green;
    border: 1px solid rgba(34,36,38,.15);
    color: white;
    border-radius: 1.34rem;
    -webkit-transition: border-color .1s ease,-webkit-box-shadow .1s ease;
    transition: border-color .1s ease,-webkit-box-shadow .1s ease;
    transition: box-shadow .1s ease,border-color .1s ease;
    transition: box-shadow .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#btn-spotify-search {
	font-size: 1.7em;
}

@media only screen and (max-width: 767.98px) {
	.spotify-popup {
		position: relative;
		background: #1B1C1D;
		padding: 10px;
		width: 30em;
		height: 20em;
		max-width: 30em;
		padding:0  !important;
		margin:0  !important;
	}
	.lista-cards {
		padding: 0.3em;
	}
	#list {
		background-color: #ffffff;
		background-image: url("https://www.transparenttextures.com/patterns/diamond-upholstery.png");
		margin-top: 13.5em; 
		padding:0.4em;
		
	}

}