.c_background {
	background-color: #03080E;
}

.c_menuBackdrop {
	background-color: #151F29;
}

.c_menuButton {
	background-color: #43485B;
}

.c_text {
	color: #E8E9EC;
}

.f_headerText {
	color: #E8E9EC;
	font-family: "Gill Sans", sans-serif;
	font-size: 36px;
}

.f_standardText {
	color: #E8E9EC;
	font-family: "Gill Sans", sans-serif;
	font-size: 18px;
}

.sideMenu {
	font-family: "Gill Sans", sans-serif;
	font-size: 24px;
	color: #E8E9EC;
	border-radius: 5px;
	padding: 2px;
	padding-left: 10px;
	margin: 4px;
	transition: background-color 0.2s;
}

.sideMenu:hover {
	color: #E8E9EC;
	background-color: #43485B;
}

.otherMenu {
	font-family: "Gill Sans", sans-serif;
	font-size: 24px;
	color: #E8E9EC;
	border-radius: 5px;
	width: 150%;
	background-color: #43485B;
}

.headerRow {
	color: #E8E9EC;
	font-family: "Gill Sans", sans-serif;
	font-size: 54px;
	padding-left: 10px;
}

.labelRow {
	color: #E8E9EC;
	font-family: "Gill Sans", sans-serif;
	font-size: 30px;
	padding-left: 10px;
}

.textRow {
	color: #E8E9EC;
	font-family: "Gill Sans", sans-serif;
	font-size: 18px;
	padding-left: 10px;
}

hr.solid {
	border-top: 2px solid #151F29;
	border-radius: 1px;
	width: 100%;
  }

.player {
	background-color: #151F29;
	color: #E8E9EC;
	position: fixed; 
	bottom: 0;
	width: 100%;
	max-width: 100vw;
	height: 84px;
	z-index: 2;
}

.playerButton {
	max-height: 100%;
	border: none;
    background-color: transparent;
	aspect-ratio: 1 / 1;
}

.trackButton {
	background: url(art/assets/altplaydark.png);
	background-size:82px;
	background-repeat: no-repeat; 
	border:none; 
	color:#151F29;
	height: 32px;
	width: 26px;
	font-size:20px;
	background-position-x: calc(50% + 1px);
	background-position-y: calc(50% + 2px);
}
.trackButton:hover {
	color:#E8E9EC;
}

.controlButton {
	max-height: 70%;
	border: none;
    background-color: transparent;
	aspect-ratio: 1 / 1;
}

.buttonImage {
	aspect-ratio: 1 / 1;
}


.tnum:hover {
	color:#1DB954;
}

#progress-bar {
	width: 100%;
	height: 4px;
	background-color: #151F29;
  }
  
#progress {
	height: 100%;
	background-color: #E8E9EC;
  }

#volume-slider {
    background-color: #E8E9EC;
	width: 100%;
    height: 10px;
    border-radius: 5px;
}

#volume-slider::-webkit-slider-thumb {
    background-color: #151F29;
}

#volume-slider::-moz-range-thumb {
    background-color: #151F29;
}

.searchBox {
	background-color: #151F29;
	color: #E8E9EC;
	border-radius: 5px;
	font-size: 42px;
	height: 100px;
	width: 100%;
}

.searchButton {
	background-color: #151F29;
	color: #E8E9EC;
	border-radius: 5px;
	font-size: 42px;
	height: 100px;
	width: 20%;
}

.loginTextBox {
	background-color: #151F29;
	color: #E8E9EC;
	margin-top: 20px;
	border-radius: 5px;
}

.tile {
	margin: 20px;
	border-color: #43485B;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	
  	width: 150px;
}

.playingInfoCover {
  	height: 80px;
}

.buttonBox {
	height: 80px;
}

.addTo {
	color: #E8E9EC;
	background-color: #151F29;
	height: 32px;
	border-radius: 5px;
}

.scrollable-container {
	overflow-x: scroll;
}

.scrollable-content {
	display: flex;
	width: 100%;
}

.contentContainer {
	height: 100vh;
	width: auto;
	overflow: auto;
	margin-left: 20px;
	margin-top: 20px;
}

#first-add-song {
	padding-right: .2rem;
}

.add-song {
	display:inline-block;
	padding-right: .3rem;
}

.song-control {
	margin-top: 1rem;
	margin-right: .3rem;
	display: inline-block;
	background-color: grey;
	font-size: 20px;
}

.song-p {
	font-family: 'Gill Sans', sans-serif;
	color: #E8E9EC;
	margin-top: 1rem;
	margin-bottom: .1rem;
}

.fm-text {
	color:#E8E9EC;
}

.playlistName {
	color:#E8E9EC;
	font-weight: bold;
	background-color: #03080E;
	border-style: hidden;
	width: 80%;
}

.editPlaylistButtons {
	margin-left: 10px; 
	border-radius: 5px;
	background-color: #151F29;
	color: #E8E9EC;
	border-radius: 5px;
	height: 28px;
}

#song-heading {
	margin-top: 1rem;
	margin-bottom: -.5rem;
}

#song-container {
	padding-top: .5rem;
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: .5rem;
}

#upload-btn {
	margin-top: 1rem;
	background-color: darkslategray;
	font-weight: bold;
}


#outer-row {
	min-height: 100%;
	color:#E8E9EC;
	/* max-height: 90%; */
	/* overflow-y: auto; */
}

#remove-table, #remove-table th, #remove-table td {
	border: 2px solid grey;
	color:#E8E9EC;
}

#remove-table th, #remove-table td {
	padding: 10px;
}

.cb-td {
	text-align: center;
  vertical-align: middle;
  position: relative;
}


  input[type="checkbox"] {
	appearance: none;
	width: 25px;
	height: 25px;
	border: 2px solid #333;
	border-radius: 5px;
	background-color: #fff;
	transition: background-color 0.3s ease;
	position: relative;
  }
  
  input[type="checkbox"]:checked:after {
	content: "\2714";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	color: #333;
  }
  
  input[type="checkbox"]:checked {
	background-color: #999;
  }
  
.rem-h2 {
	font-weight: bold;
}

.c_background {
	padding: 2rem;
}


  .like-btn {
    display: inline-block;
    padding: 0;
    background-color: transparent;
    border: none;
	position: relative;

    cursor: pointer;
  }
  
  .heart-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
	position: relative;
    transform: rotate(45deg);
	background-color: #2e2e2d;

	/* background-color: #1DB954; */
	/* border-right: 1px solid red;
	border-bottom: 1px solid red; */
	z-index: 1;
  }
  
  .heart-icon:before,
  .heart-icon:after {
	/* border: 1px solid red; */

    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
	background-color: #2e2e2d;
    /* background-color: #1DB954; */
    border-radius: 50% 50% 50% 50%;
	z-index: -1;
  }
  
  .heart-icon:before {
    top: -.5rem;
    left: 0;
  }
  
  .heart-icon:after {
    top: 0;
    left: -.5rem;
    transform: rotate(-90deg);
  }

  .liked .heart-icon, .liked .heart-icon:before, .liked .heart-icon:after {
	animation-name: colorChange;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	}
	.not-liked .heart-icon, .not-liked .heart-icon:before, .not-liked .heart-icon:after {
		animation-name: colorChange2;
		animation-duration: 0.3s;
		animation-fill-mode: forwards;
		}
  
  @keyframes colorChange {
	0% {
	  background-color: #2e2e2d;
	}
	100% {
	  background-color: #1DB954;
	}
  }

  @keyframes colorChange2 {
	0% {
	  background-color: #1DB954;
	}
	100% {
	  background-color: #2e2e2d;
	}
  }
  
#form-container {
	overflow-y: scroll; /* add vertical scrollbar */
  max-height: calc(100vh - 100px); /* set maximum height */
}