html,
body {
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	margin: 0;

	background-size: 100%;

}

button {

	font-family: 'Roboto', sans-serif;
}

html {
	height: 100%;
	min-height: 100%;
	scroll-behavior: smooth;
}

body {

	position: relative;
	min-height: 100%;
	height: 100%;
}

:root {
	--show-info: none;
	--show-attr: block;
	--show-info-l: 100%;
	--emoji-tag-span-width: 400px;
}

@media (max-width: 1023px) {
	.hide-when-width-small {
		/*display: var(--show-info);*/
		position: fixed;
		right: 0;
		height: 100vh;
		z-index: 100;
		transform: translate(var(--show-info-l), 0);
		transition: transform 0.5s, width 1s;
		width: 100vw;
		min-width: 100vw;

		color: #555555;
		font-size: 13px;
		background-color: white;
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}

	.show-when-sidebar-hidden {
		display: block;
	}

	.close-info-button {
		display: var(--show-info);
		top: 16px;
		right: 24px;
		font-weight: bold;
		font-size: 20px;
		z-index: 1500;
		position: fixed;
	}

	.lim-width {}

	.spsr-pu {
		display: none;
	}
}

@media (min-width: 1023px) {
	.hide-when-width-small {
		color: #555555;
		font-size: 13px;
		background-color: white;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100vh;
		width: 25vw;
		min-width: 0px;
		max-width: 25vw;
		float: right;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}

	.close-info-button {
		display: none;
		position: fixed;
	}

	.show-when-sidebar-hidden {
		display: none;
	}

	.lim-width {
		width: auto;
	}
}

.shadow-element {
	box-shadow: 0 0 30px #DDDDDD;
	border-radius: 1px;
	-webkit-appearance: none;
}

.rf-tag {
	font-size: 13px;
	padding: 4px;
	margin-left: 0px;
	margin-right: 4px;
	background-color: rgb(112, 146, 190);
	border-collapse: inherit;
	border-spacing: 0 10px;
	color: rgb(245, 245, 255);
	border-radius: 5px;
}


.cart-reminder {
	box-shadow: 0px 0px 50px #BBBBBB;

	position: fixed;

	transition: transform 0.2s;
	transition-timing-function: ease-out;

	background-color: #FFFFFF;

	border-width: 1px;
	border-color: #BBBBBB;
	border-style: solid;

	max-width: 480px;

	height: 64px;
	overflow: auto;

	padding: 0px 8px 0px 12px;
	overflow-y: hidden;

	z-index: 50;
	text-align: center;
	font-size: 14px;
}


.spsr-pu {
	box-shadow: 0px 0px 50px #BBBBBB;

	position: fixed;

	background-color: #FFFFFF;

	border-width: 1px;
	border-color: #BBBBBB;
	border-style: solid;

	max-width: 320px;

	overflow: auto;

	padding: 8px 8px 0px 12px;
	overflow-y: hidden;

	z-index: 200;
	text-align: left;
	font-size: 13px;

	bottom: 0%;
	left: 50%;

	transform: translateY(150%);
	transition: transform 0.5s;
	transition-timing-function: ease-out;
}

.spsr-pu:hover {

	cursor: pointer;
}

@keyframes dblink {
	50% {
		fill: transparent
	}
}

.dot {
	animation: 1s dblink infinite;
	fill: black;
}

.dot:nth-child(2) {
	animation-delay: 250ms
}

.dot:nth-child(3) {
	animation-delay: 500ms
}

.dot-dot-dot {
	color: black;
}

.dot-dot-dot-addtl {
	margin-left: -8px;
}

@media (max-width: 690px) {
	.cart-reminder {
		right: -82px;
		bottom: 20%;
		-webkit-transform: translate(200%, -50%) rotate(-90deg);
		transform: translate(200%, -50%) rotate(-90deg);
	}

	.load-txt {
		display: none;
	}

	.dot-dot-dot-addtl {
		margin-left: -56px;
	}

}

@media (min-width: 690px) {
	.cart-reminder {
		left: 50%;
		bottom: 0;
		-webkit-transform: translate(-50%, 200%);
	}

	.load-txt {
		display: inline;
	}
}

@media (max-width: 321px) {
	.no-results-class {
		margin-left: 86px;
		margin-top: -80px;
	}

}

@media (min-width: 460px) {
	.no-results-class {
		margin-left: calc(100px + calc(22vw - 150px));
		width: 256px;
	}
}

@media (min-width: 1300px) {
	.no-results-class {
		transform: translate(5vw, 0);
	}
}

@media (max-width: 460px) {
	.no-results-class {
		top: 24px;
		transform: rotate(-90deg);
	}
}

.buy-dropdown {
	box-shadow: 0px 0px 50px #BBBBBB;

	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, 100vh);
	transform: translate(-50%, 100vh);

	transition: transform 1s;
	transition-timing-function: ease-out;

	background-color: #FFFFFF;

	border-width: 1px;
	border-color: #BBBBBB;
	border-style: solid;

	width: min(100%, 320px);
	max-width: 480px;

	max-height: 100vh;
	overflow: auto;

	z-index: 1000;

	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	scroll-behavior: smooth;
}

table.cart-table {

	border-collapse: collapse;
	width: 100%;
}

.cart-table tr:nth-child(even) {
	background-color: #f2f2f2;
}

.blur {
	transition: filter 1s;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
}

.buy-dropdown>h2,
.buy-dropdown-rollover>h2 {
	font-size: 12pt;
	border-style: none;
	padding-top: 0px;
	padding-bottom: 0px;
}

.buy-dropdown,
.buy-dropdown-rollover>p {
	font-size: 10pt;
}

.buy-close-button {

	filter: invert(100%) hue-rotate(180deg);
	background-color: rgb(45, 123, 129);
	opacity: 90%;
	padding: 8px 16px 8px 16px;
	border-radius: 3px;
	color: white;
	margin-bottom: 12px;
	margin-right: 8px;
}

button.buy-close-button {

	filter: invert(100%) hue-rotate(180deg);
	background-color: rgb(45, 123, 129);
	opacity: 90%;
	padding: 8px 16px 8px 16px;
	border-radius: 3px;
	color: white;
	margin-bottom: 12px;
	margin-right: 8px;
}

.buy-dropdown-rollover {
	border-style: solid;
	border-width: 0px;
	border-bottom-width: 1px;
	border-color: #BBBBBB;
	width: 100%;
	text-align: left;
	margin: 0;
	opacity: 90%;
	padding: 4px 12px 4px 12px;
}

.buy-dropdown-info {
	padding: 4px 12px 4px 12px;
}

button.buy-dropdown-rollover:hover {
	background-color: rgba(50, 50, 250, 0.2);
	width: 100%;
}

/*@media (prefers-color-scheme: dark) {*/
:root {
	filter: invert(90%) hue-rotate(180deg);
	background-color: #EEEEEE;
}

.fs-popup-background {
	filter: invert(100%) hue-rotate(180deg);
}

.buy-dropdown,
.cart-reminder,
.spsr-pu {
	box-shadow: 0px 0px 50px #FFFFFF;
}

.rf-tag {
	filter: invert(100%) hue-rotate(180deg) brightness(100%);
	font-size: 13px;
	padding: 4px;
	margin-left: 0px;
	margin-right: 4px;
	background-color: rgba(112, 146, 190, 0.35);
	border-collapse: inherit;
	border-spacing: 0 10px;
	color: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
}

.emoj {
	filter: invert(90%) hue-rotate(180deg);
	color: #BBBBBB;
}

.qr {
	filter: invert(90%);
}

.shadow-element {
	box-shadow: 0 0 30px #FFFFFF;
	border-radius: 1px;
	-webkit-appearance: none;
}

/*}*/

.emoji-span-cont {
	width: 600px;
}

@media (min-width: 2000px) {
	.emoji-span {
		display: block;
		margin-left: 64px;
		white-space: nowrap;
	}
}

@media (max-width: 2000px) {
	.emoji-span {
		padding-top: 16px;
		padding-bottom: 16px;
		max-height: 18px;
		display: flex;
		margin-left: 24px;
		width: fit-content;
		white-space: nowrap;

		transition: transform 0.25s;
		transition-timing-function: ease-in-out;
	}

	.emoji-span-cont {

		overflow: hidden;
	}

	.emoji-span:hover {

		transition: transform 1s;
		transition-timing-function: ease-in-out;
		transition-delay: 0.5s;
		transform: translate(min(0px, calc(-100% + var(--emoji-tag-span-width))), 0);
	}

}


@media (max-height: 700px) {
	.ad {
		display: none;
	}

	.sidebar-volume-controls {
		display: none;
	}

	.sidebar-controls {
		height: 24px;
		position: fixed;
		bottom: 24px;
		left: 12px;
	}

	.sidebar-other-buttons {
		height: 24px;
		position: fixed;
		bottom: 20px;
		left: 110px;
	}

	.alt-timer {
		font-size: 12px;
		font-weight: bold;
		display: block;
	}

	.play-spacer {
		display: block;
	}

	.buy-menu {
		padding-top: 32px;
		padding-bottom: 32px;
		overflow: hidden;
	}
}

@media (min-height: 700px) {
	.ad {
		filter: invert(90%) hue-rotate(180deg);
	}

	.sidebar-controls {
		height: 24px;
		min-height: 24px;
		width: 93.75%
	}

	.sidebar-other-buttons {
		height: 24px;
		margin-bottom: 32px;
		width: 93.75%
	}

	.sidebar-volume-controls {
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: center;
		height: 24px;
		margin-top: -8px;
		width: 93.75%
	}

	.alt-timer {
		font-size: 12px;
		font-weight: bold;
		display: none;
	}

	.play-spacer {
		display: none;
	}
}


main {
	margin: auto;
	min-height: 100%;
	height: 100%;
}

h1 {
	padding-top: 24px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: 'Roboto', sans-serif;
}

.no-results-class {
	position: absolute;
}


h2 {
	padding-top: 24px;
	padding-bottom: 4px;
	border-bottom-width: 1px;
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom-color: rgb(192, 192, 192);
	border-style: solid;
	font-family: 'Roboto', sans-serif;
}

hr {
	border: 0px;
	height: 1px;
	background-color: rgb(192, 192, 192);
}

li {
	padding-bottom: 12px;
}

.rf-tag-enabled {
	background-color: rgb(128, 192, 0);
	color: white;
}

.rf-tag-disabled {
	background-color: rgb(172, 64, 32);
	text-decoration: line-through;
	color: rgb(96, 0, 0);
}

#search-box {
	background-image: url('icons/search.svg');
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 4px;
	font-size: 16px;
	padding: 4px;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	padding-left: 24px;
}


td {
	padding: 8px;
}

.rf-list-play-button {
	width: 256px;
}

.emoji-span {
	font-size: 8pt;
	line-height: 20px;
}

.tag-new {
	font-size: 12px;
	background-color: yellow;
	opacity: 100%;
	width: 32px;
	min-width: 32px;
	max-width: 32px;
	margin-left: -16px;
	margin-right: 16px;
	transform: rotate(-90deg);
	text-align: center;
}

.tag-new-empty {
	width: 32px;
	min-width: 32px;
	max-width: 32px;
}

button {
	opacity: 60%;
	border-style: none;
	background-color: rgba(0, 0, 0, 0);
	padding: 0;
	margin-left: 8px;
}

button.tag-emoji {
	opacity: 80%;
	background-color: rgb(250, 250, 253);
	color: black;
	font-size: 7.5pt;
	padding-right: 4px;
	padding-left: 4px;
	border-radius: 5px;
	margin-bottom: -2px;
}

.odd_entry button.tag-emoji {
	background-color: rgb(230, 230, 233);
}

button.rf-tag {
	opacity: 85%;
}

button:hover {
	opacity: 100%;
	cursor: pointer;
}

@media (min-width: 400px) {
	.track-namedesc {
		font-weight: bold;
		font-size: 14px;
		width: 226px;
		margin-left: -16px;
		line-height: 12px;
		min-width: 128px;
	}
}

@media (max-width: 400px) {
	.track-namedesc {
		font-weight: bold;
		font-size: 12px;
		width: 226px;
		margin-left: -8px;
		line-height: 12px;
		min-width: 128px;
	}
}

.track-pptag {
	width: 24px;
	height: 24px;
	opacity: 0.75;
	filter: invert(10%);
}

.track-wfcanv {
	margin-left: 5px;
	width: 10vw;
	min-height: 24px;
	max-width: 320px;
}

.track-ptag {
	width: 64px;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	margin-left: 12px;
}

.desc-span {
	font-weight: bold;
	font-size: 9px;
	width: 226px;
	color: #666666;
	line-height: 2px;
}

.dl-btn {
	background-image: url("icons/download.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	min-width: 20px;
	width: 20px;
	height: 20px;
	margin-left: 20px;
	padding-left: 20px;
	padding-right: 3px;
	opacity: 75%;
}

.like-btn {
	background-image: url("icons/heart.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	min-width: 20px;
	width: 20px;
	height: 20px;
	opacity: 75%;
	padding-left: 20px;
	padding-right: 3px;
}

.liked-btn {
	background-image: url("icons/heart-filled.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	min-width: 20px;
	width: 20px;
	height: 20px;
	opacity: 50%;
	padding-left: 20px;
	padding-right: 3px;
}

.buy-btn {
	background-image: url("icons/buy.svg");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	min-width: 20px;
	width: 20px;
	height: 20px;
	opacity: 75%;
}

.pause-btn {
	background-image: url("icons/pause.svg");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	opacity: 75%;
	min-width: 24px;
}

.close-attr-button {
	display: block;
	top: 0px;
	right: 8px;
	font-weight: bold;
	font-size: 16px;
	z-index: 1500;
	position: absolute;
}

.play-btn {
	background-image: url("icons/play.svg");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	opacity: 50%;
	min-width: 24px;
}

.track-bg {
	will-change: opacity;
	will-change: height;
	will-change: top;
	padding-left: 24px;
	display: flex;
	align-items: center;
	overflow: hidden;
	height: 48px;
}

.sub-btns {
	/*min-width: 180px;*/
	min-width: 96px;
	margin-top: -12px;
	display: none;
}

.no-sub-btns {
	display: inline-grid;
}

.track-bg:hover {
	animation: track-bg-hov 0.1s linear;
	animation-fill-mode: forwards;
}

/*.track-bg:not(:hover) {
  animation: track-bg-hovb 0.1s linear;
  animation-fill-mode: forwards;
}*/

@keyframes track-bg-hovb {
	0% {
		background-color: rgb(240, 240, 255);
	}
}

@keyframes track-bg-hov {
	100% {
		background-color: rgb(240, 240, 255);
	}
}

.blink_me {
	box-shadow: inset 0 0 20px #CCCCEE;
	border-radius: 1px;
	-webkit-appearance: none;
	animation: blinker 2s linear infinite;
}

@keyframes blinker {
	20% {
		box-shadow: inset 0 0 20px #CCCCEE;
	}
}


.drawerin {
	opacity: 0%;
}

.drawerout {
	opacity: 100%;
}

.odd_entry {
	background-color: rgb(246, 246, 246);
}

.barber {
	height: 24px;
	opacity: 10%;
	position: inherit;
	background: #222222;
	background-color: -webkit-linear-gradient(-45deg, transparent 25%, #222222 25%, #222222 50%, transparent 50%, transparent 75%, #222222 75%);
	background: -moz-linear-gradient(-45deg, transparent 25%, #222222 25%, #222222 50%, transparent 50%, transparent 75%, #222222 75%);
	background: -o-linear-gradient(-45deg, transparent 25%, #222222 25%, #222222 50%, transparent 50%, transparent 75%, #222222 75%);
	background: linear-gradient(-45deg, transparent 25%, #222222 25%, #222222 50%, transparent 50%, transparent 75%, #222222 75%);
	background-size: 27px 27px;
	-webkit-animation: barberpole 10s infinite linear;
	animation: barberpole 10s infinite linear;
}

@keyframes barberpole {
	from {
		background-position: 0%;
	}

	to {
		background-position: 320px;
	}
}