body {
  margin: 0;
  background: rgb(18,18,18);
  background: linear-gradient(0deg, rgba(18,18,18,1) 11%, rgba(35,23,32,1) 45%, rgba(144,52,119,1) 100%);
  font-family:"Montserrat", sans-serif;
  
}

.nav {
  min-width: 15vw;
  margin-left: 0px;
  background-color: #000000;
}

.flex {
  display: flex;
}

.left {
background-color: #000000;
}



.top {
width: 85vw;
min-height: 30vh;
background: rgb(91,33,74);
background: linear-gradient(0deg, rgba(91,33,74,1) 0%, rgba(161,57,132,1) 100%);
}

.flex-item-topcontainer-1 {
display: flex;
  flex-direction: row;
  width: 85vw;  
}

.topsecond img {
width: 170px;
margin-left: 20%;
filter: drop-shadow(-2px 6px 18px rgb(52, 50, 50));
}

.toptext {
display: flex;
flex-direction: column;
margin-left: 50px;
margin-top: 80px;
}



/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #858585 #000000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 13px;
  
}

*::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 10px;
  margin-bottom: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: #858585;
  border-radius: 4px;
  border: 3px solid #000000;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px; 
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}

a {
  color: #858585;
}

footer {
  background-color: #191919;
  bottom: 0;
  margin-bottom: 0;
  height: 9vh;
  width: 100%;
  color: #858585;
  padding-top: 1vh;
  position: fixed;
}

p {
  margin: 5px;
}

.nav-link {
  color: #706a6c;
  margin-bottom: -10px;
  font-weight: bold;
  font-size: 1em;
}

.nav-link:hover {
  color: aliceblue;
}

.nav {
  margin-top: 5px;
  margin-bottom: 10px;
}

#logoline {
  margin-bottom: 5px;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scrolly {
    padding-left: 10px;
    min-width: 15vw;
    margin-left: 0px;
    height: 62vh;
    background-color: #000000; 
    overflow: scroll;
    
}

.link {
  font-size: 0.8em;
  text-decoration: none;
  
}

.link:hover {
  color: #fff;
  transition: 0.3s;
}


.homeicon {
  width: 20px;
  margin-top: -5px;
  margin-right: 10px;
}

.searchicon {
  width: 20px;
  margin-top: -5px;
  margin-right: 10px;
}

.libraryicon {
  width: 20px;
  margin-top: -5px;
  margin-right: 10px;
}

.createicon {
  width: 20px;
  margin-top: -5px;
  margin-right: 10px;
}


.likedicon {
  width: 20px;
  margin-top: -5px;
  margin-right: 10px;
}

hr {
  border-top: 1px solid rgb(212, 212, 212);
  width: 200px;
  margin-left: 3px;
  margin-bottom: 0;
}

.spotlogo {
  width: 30px;
}


span {
  color: #fff;
  font-weight: 800;
  font-size: 0.8em;
  
}

.albumname {
  color: #fff;
  font-weight: 800;
  font-size: 0.8em;
  margin-bottom: 0px;

}

.albumtitle {
  color: #fff;
  font-weight: 800;
  font-size: 2em;
  margin-bottom: 0px;
}

.bandname a {
margin-top: 0px;
font-weight: bold;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}


.bottomcontainer {
  width: 85vw;
  margin-left: 0vw;
  margin-top: 0vh;
  background-color: transparent;
  overflow: auto ;
  height: 53vh;
}

.table {
  background-color: transparent;
  color: #fff;
  border: 0px;
  font-weight: 400;
  overflow: scroll;
}

.greenplaybutton {
  width: 70px;
  margin: 10px;
}

.heart {
  width: 40px;
  height: 40px;
  margin-top: 20px;
}

.more {
  width: 30px;
  height: 30px;
  margin-top: -60px;
  margin-left: 10px;
}

.icons {
  display: inline-flex;
  
}

tbody, td, tfoot, th, thead, tr {
  border-style: none;
}

.topfirst {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
}

.topsecond {
  display: flex;
}

.leftright {
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 25px;
}

.account-dropdown {
list-style-type: none;
margin-top: 15px;
}

.account-dropdown-nav-link {
  background-color: #000000;
  padding: 10px;
  border-radius: 15px;
  text-decoration: none;
  color: #fff;
  font-size: 0.8em;
}

.songs {
  color: #fff;
  font-size: 0.9em;
  margin-left: 0px;
  margin-right: 0px;
}

  .songline {
    border-top: 1px solid rgb(212, 212, 212);
    width: 90vw;
    margin-left: 3px;
    margin-bottom: 5px;
    margin-top: 0px;
  }

.song-info {
  color: #fff;
  font-size: 0.9em;
  margin-bottom: 0px;
}

.playerControls {
  max-width: 220px;
  margin: 0 auto;
}

.playerControls a img {
  width: 14px;
  max-height: 16px;
  margin-right: 0.5rem;
  filter: brightness(60%);
}

.playerControls a:hover {
  filter: brightness(80%);
  color: #282828 !important;
}

.progressContainer {
  color: white;
}

.progressContainer span {
  opacity: 0.5;
}

.progress {
  color: white;
  background-color: #414141;
  height: 6px;
  margin: 0 1rem;
}
.playerArtistInfo > div {
  overflow: hidden;
}
.playBar p,
.playBar h6 {
  color: white;
  margin: 0;
}

.playBar h6 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.playBar p {
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.playerVolume {
  display: flex;
  align-items: center;
  margin-top: 26px;
}
.playerVolume .fa {
  opacity: 0.5;
  color: white;
  margin-right: 0.5rem;
}
.playerVolume input {
  outline: none;
  background: transparent;
}
.playerVolume input::-webkit-slider-runnable-track {
  background-color: #414141;
  height: 6px;
  border-radius: 20px;
  overflow: hidden;
}
.playerVolume input::-webkit-slider-thumb {
  width: 0px;
  box-shadow: -200px 0 0 200px #007bff;
}

.player {
  padding-left: 200px;
}

.playerimg {
  height: 7vh;
  margin-left: 20px;
  
}

.bottomsongtitle {
  color: #fff;
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 0.9em;
}

.bottomalbumname {
  color: #fff;
  font-size: 0.7em;
  margin-bottom: 0;
  margin-top: 0;
  max-width: 200px;
}

.footerleft {
  display: flex;
}

.flexbottomtitle {
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar-corner {
  background-color: #000000;
}

.songrow {
  display: flex;
  flex: row;
  padding: 10px;
  justify-content: space-between;
  width: 100vw;
}

.details {
  flex: row;
  margin-bottom: 20px;
  width: 100vw;
  color: #fff
}

.albuminfo {
  margin-left: 13%;
}

.durationinfo {
  margin-left: 10%;
}

.songtitle {
  font-weight: bold;
}

.songtitle:hover {
  cursor: pointer;
}

.greentext {
  color: green;
}

.titleinfo {
  margin-left: 10px;
}

.songrow:hover {
  backdrop-filter: invert(13%);
  -webkit-filter: invert(13%);
  -moz-filter: invert(13%);
}

.songnumber {
  margin-right: 10px;
}

.hidden {
  display: none;
}

/*@media only screen and (max-width: 768px) {
  /* For mobile phones: 
  [class*="col-"] {
    width: 100%;
  }
}
*/