@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');

html, body {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, head, th {
	font-family: 'Roboto', sans-serif;
}

hr {
	height: 4px !important;
}

.bg-dark, .btn-dark {
	background-color: #00005c !important;
}

.table td {
	vertical-align: middle;
}

.songImage {
	height: 40px;
	width: 40px;
	cursor: pointer;
	background-size: 40px 40px;
	background-repeat: no-repeat;
}

.songList .row, .albumList .row, .artistList .row {
	border-bottom: 1px #dee2e6 solid;
}
.songList .row:hover, .albumList .row:hover, .artistList .row:hover {
	background-color: rgba(0,0,0,0.075);
}
.header:hover {
	background: none !important;
}

.songImageCell {
	flex: 0 0 40px;
	padding-left: 0;
	margin-left: 10px;
}

.smallCell {
	flex: 0 0 40px;
}

.songSecondaryCell {
	flex: 0 0 250px;
}
.songSecondaryCell span {
	flex: 0 0 250px;
	display: inline-block;
}

.songLengthPlayCell {
	flex: 0 0 80px;
}

.wrapTruncate {
	min-width: 0;
}
.clickyText,
.addToPlaylistItem,
#songContextMenu .list-group-item {
	cursor: pointer;
}

#playerInfo {
	min-height: 50px;
	border-top: black solid 4px;
	padding: 10px;
}

.nowPlayingImage {
	cursor: pointer;
	height: 50px;
	width: 50px;
	margin-left: 0;
	transition: all .5s ease-in-out;
}

.nowPlayingImage.nowPlayingShrink {
	height: 400px;
	width: 400px;
	margin-left: calc(50% - 200px);
	margin-bottom: 10px;
}

.songDetails {
	margin-top: -45px;
	margin-left: 65px;
	transition: all .5s ease-in-out;
}
.songDetails h3 {
	font-size: 1em;
	font-weight: bold;
}
.songDetails h4 {
	font-size: .8em;
}

.songDetails.songDetailsShrink {
	margin-top: 0;
	margin-left: 0;
}

.playerButton {
	background-color: var(--bs-body-color);
	margin-top: 10px !important;
	content: "";
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	height: 30px;
	width: 30px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
}

.coverPlaceholder {
	background-color: #ddd;
	content: "";
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23ccc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z' clip-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.eq {
	content: "" !important;
	background-color: var(--bs-body-color);
	background: url("data:image/svg+xml,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 44' xml:space='preserve'><rect x='0' y='0' width='100%' height='100%' fill='%23FFFFFF' /><g><path fill-opacity='1' d='M-80.265.241h8.122A1.951,1.951,0,0,1-70.18,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-80.265.241Zm16.468,0h8.122A1.951,1.951,0,0,1-53.712,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H-63.8a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-63.8.241Zm16.468,14.6h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V16.784A1.951,1.951,0,0,1-47.329,14.845Zm16.468,15.728h8.122a1.951,1.951,0,0,1,1.963,1.939v9.333a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V32.512A1.951,1.951,0,0,1-30.861,30.573Zm16.655-15.728h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V16.784A1.951,1.951,0,0,1-14.206,14.845ZM2.074,0.241H10.2A1.951,1.951,0,0,1,12.159,2.18V41.845A1.951,1.951,0,0,1,10.2,43.784H2.074A1.951,1.951,0,0,1,.112,41.845V2.18A1.951,1.951,0,0,1,2.074.241Zm16.655,0h8.122A1.951,1.951,0,0,1,28.814,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H18.729a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,18.729.241Zm16.468,0h8.122A1.951,1.951,0,0,1,45.282,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H35.2a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,35.2.241Zm16.377,0H59.7A1.951,1.951,0,0,1,61.659,2.18V41.845A1.951,1.951,0,0,1,59.7,43.784H51.574a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,51.574.241Zm16.655,0h8.122A1.951,1.951,0,0,1,78.314,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H68.229a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,68.229.241Zm16.468,0h8.122A1.951,1.951,0,0,1,94.782,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H84.7a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,84.7.241Zm16.532,0h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,101.229.241Zm16.468,0h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939H117.7a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1,117.7.241Zm-230.962,0h8.122A1.951,1.951,0,0,1-103.18,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-113.265.241Zm16.468,0h8.122A1.951,1.951,0,0,1-86.712,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939H-96.8a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-96.8.241Zm-49.468,0h8.122A1.951,1.951,0,0,1-136.18,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-146.265.241Zm16.468,0h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939H-129.8a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-129.8.241Zm-49.468,0h8.122A1.951,1.951,0,0,1-169.18,2.18V41.845a1.951,1.951,0,0,1-1.963,1.939h-8.122a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-179.265.241Zm16.468,0h8.122a1.951,1.951,0,0,1,1.963,1.939V41.845a1.951,1.951,0,0,1-1.963,1.939H-162.8a1.951,1.951,0,0,1-1.963-1.939V2.18A1.951,1.951,0,0,1-162.8.241Z'/><animateTransform attributeName='transform' type='translate' values='16.5 0;33 0;49.5 0;66 0;82.5 0;99 0;115.5 0;132 0;148.5 0;165 0;181.5 0' calcMode='discrete' dur='990ms' repeatCount='indefinite'/></g></svg>") no-repeat 100% 100% !important;
}

.playButton:hover, #playAlbumButton {
	background-color: var(--bs-body-color);
	content: "" !important;
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-play-fill' xmlns='http://www.w3.org/2000/svg'><path d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
}

.downloadButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-cloud-download' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path fill-rule='evenodd' d='M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z'/> </svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	width: 25px;
	cursor: pointer;
	margin: 8px 12px 10px 0;
	float: left;
}

.cachedButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-cloud-check-fill'  xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 4.854a.5.5 0 0 0-.708-.708L7 8.793 5.854 7.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z'/></svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	width: 25px;
	cursor: pointer;
	margin: 8px 12px 10px 0;
	float: left;
}

.addToQueueButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-collection-play' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M14.5 13.5h-13A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5zm-13 1A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5h-13zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z'/><path fill-rule='evenodd' d='M6.258 6.563a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437z'/></svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	width: 25px;
	cursor: pointer;
	margin: 8px 12px 10px 0;
	float: left;
}

.doneAddToQueueButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-collection-play-fill'  xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.5 14.5A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5h-13zm5.265-7.924A.5.5 0 0 0 6 7v5a.5.5 0 0 0 .765.424l4-2.5a.5.5 0 0 0 0-.848l-4-2.5zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z'/></svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	width: 25px;
	cursor: pointer;
	margin: 8px 12px 10px 0;
	float: left;
}

#playAlbumButton {
	display: inline-block;
	height: 40px;
	width: 40px;
	cursor: pointer;
	float: left;
}

.playShuffleButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-shuffle' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z'/><path d='M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z'/></svg>") no-repeat 100% 100% !important;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	width: 25px;
	cursor: pointer;
	margin: 8px 12px 10px 0;
	float: left;
}
.shuffleAllButton {
	margin-top: 0;
}

.songListSummary {
	font-size: .8em;
}

.backButton {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-arrow-left-circle' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'/></svg>") no-repeat 100% 100% !important;
	height: 40px;
	width: 40px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	margin: auto .5em;
}

#queueButton {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-list-ul' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/></svg>");
}

.pauseButton {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-pause-fill' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'/></svg>");
}

.activePlayButton {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-play-fill' xmlns='http://www.w3.org/2000/svg'><path d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>");
}

.activePlayButtonOff {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-play' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z'/></svg>");
	cursor: default !important;
}

.nextButton {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-skip-end-fill' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M12 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'/><path d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>");
}

.previousButton {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-skip-start-fill' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.5 3.5A.5.5 0 0 0 4 4v8a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z'/><path d='M4.903 8.697l6.364 3.692c.54.313 1.232-.066 1.232-.697V4.308c0-.63-.692-1.01-1.232-.696L4.903 7.304a.802.802 0 0 0 0 1.393z'/></svg>");
}

.nextButtonOff {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-skip-end' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M12 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z'/></svg>");
	cursor: default !important;
}

.previousButtonOff {
	mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-skip-start' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.5 3.5A.5.5 0 0 0 4 4v8a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z'/><path fill-rule='evenodd' d='M5.696 8L11.5 4.633v6.734L5.696 8zm-.792-.696a.802.802 0 0 0 0 1.392l6.363 3.692c.52.302 1.233-.043 1.233-.696V4.308c0-.653-.713-.998-1.233-.696L4.904 7.304z'/></svg>");
	cursor: default !important;
}

.searchIcon {
	background-color: var(--bs-body-color);
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-search' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z'/><path fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z'/></svg>") no-repeat 100% 100% !important;
	height: 1em;
	width: 1em;
	display: inline-block;
	margin: .4em;
}

.contextButton {
	content: "";
	background-color: var(--bs-body-color);
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-three-dots-vertical' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></svg>") no-repeat 100% 100% !important;
	height: 25px;
	width: 25px;
	display: inline-block;
	cursor: pointer;
	margin: auto .5em;
}

.gripper {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-grip-horizontal' xmlns='http://www.w3.org/2000/svg'><path d='M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></svg>") no-repeat 100% 100% !important;
	height: 20px;
	width: 25px;
	display: inline-block;
	margin-right: .5em;
	vertical-align: middle;
}

.trashCan {
	background-color: var(--bs-body-color);
	content: "";
	mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-trash' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>") no-repeat 100% 100% !important;
	height: 20px;
	width: 25px;
	display: inline-block;
	margin-right: .5em;
	vertical-align: middle;
	cursor: pointer !important;
	float: right;
}

.draggable {
	cursor: grab;
}
.draggable:active {
	cursor: grabbing;
}
.draggable:drag-over {
	background-color: red;
}

.searchClearButton {
	margin-top: .6em !important;
	margin-left: -30px !important;
}

#songContextMenu {
	display: none;
	z-index: 10000;
}

#songContextMenu[data-bs-show] {
	display: block;
}

#songContextMenu .dropdown-menu {
	display: block !important;
}

#bottomTabs {
	--bs-gutter-x: 0;
	padding: .5em;
}
#bottomTabs a {
	text-align: center;
	color: rgba(255,255,255,.55);
	cursor: pointer;
}
#bottomTabs a.active {
	color: #fff;
}
#bottomTabs svg {
	height: 1.5em;
	width: 1.5em;
}
#bottomTabs span {
	font-size: .6em;
}
#bottomTabs .col-2, #bottomTabs .nav-link {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.songTitle {
	font-size: 1em;
	font-weight: bold;
	display: block;
}
.songSubTitle {
	font-size: .7em;
	display: block;
}

#timeValues {
	font-size: .7em;
	font-weight: bold;
}



#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}