:root {
	--header-height: 54px;
	--label-color: #db9e1a; /* #40c4ff; /* #00b0ff; */
}

body,
p {
	margin: 0;
	padding: 0;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

.note {
	background: #202025;
	overflow: hidden;
	height: 20rem;
	color: #dddddd;
}

.note-content {
	word-break: break-all;
}

.note-active {
	background: #222730;
}

.mt-1 {
	margin-top: 8px;
}

.m-auto {
	margin: 0 auto;
}

.bold {
	font-weight: bold;
}

.top-panel {
	background-image: linear-gradient(to right, #7e649e, #6870ab, #4e7cb1, #3486b1, #238eac);
	position: sticky;
	top: 0;
	width: 100%;
	padding: 10px 0;
	z-index: 100;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
		0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.remote-btn {
	bottom: -32px;
	left: 50%;
	transform: translateX(-50%);
}

.control-panel {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 50;
	width: 33.3%;
	height: 38px;
	line-height: 38px;
	background: #afbacf;
}

.control-panel .timer {
	line-height: 38px;
}

.player-btn {
	bottom: 0;
	left: 0;
	z-index: 100;
	height: 45px;
}

.main-view {
	width: 100%;
	margin: 0;
}

.side-bar {
	overflow-y: auto;
	position: sticky;
	top: var(--header-height);
	height: calc(100vh - var(--header-height));
	overscroll-behavior-y: contain;
}

.yt-list {
	background-color: #424242;
}

.tag-list {
	background-color: #f9f9f9;
	padding: 16px;
}

.yt-search,
.yt-search input,
.yt-search svg {
	color: #fff;
	background: none;
}

.yt-search input::placeholder {
	color: #fff;
}

.view-switch {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
}

.smooth-bg {
	transition: background-color 0.1s linear;
}

.smooth-transform {
	transition: transform 0.1s;
}

.w-50 {
	width: 50%;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.bb-1 {
	border-bottom: 1px solid #9e9e9e;
}

.yt-image {
	flex: 0 0 120px;
	align-self: center;
}

.yt-image img {
	width: 120px;
}

.f-size-medium {
	font-size: 16px;
}

@media only screen and (min-width: 992px) {
	.hide-on-lg {
		display: none;
	}
}

/* It should be mobile first: @media only screen and (min-width: 992px)*/
@media only screen and (max-width: 991px) {
	.control-panel {
		bottom: 50px;
	}

	.main-view {
		margin-bottom: 86px !important;
	}

	.top-panel {
		position: fixed;
		top: 0;
	}

	.side-bar {
		height: calc(100vh - 50px);
		position: relative;
		top: 0;
		/* margin-bottom: 50px; */
	}

	.hide-on-xs {
		display: none;
	}

	.control-panel {
		width: 100%;
	}

	.transform-top-100 {
		transform: translateY(-100%);
	}

	.pos-fixed-sm {
		position: fixed;
	}

	.z-depth-2-sm {
		box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
			0 2px 4px -1px rgba(0, 0, 0, 0.3);
	}

	.yt-image {
		flex: 0 0 80px;
	}

	.yt-image img {
		width: 80px;
	}

	.f-size-medium {
		font-size: 14px;
	}
}

.pos-relative {
	position: relative;
}

.pos-absolute {
	position: absolute;
}

.pos-fixed {
	position: fixed;
}

.toast-container {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 2000;
}

.toast-item {
	padding: 10px;
	background: white;
	border-radius: 2px;
	width: 200px;
	margin-top: 5px;
}

.small-text {
	font-size: 11px;
}

.row {
	margin-bottom: 0;
}

.input-field {
	margin-bottom: 0;
}

/* Scrollbar styles */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: none;
}

::-webkit-scrollbar-thumb {
	background: #555;
	border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
	background: #444;
}

::-webkit-scrollbar-corner {
	background: none;
}

.fa-spin {
	/* Override font-awesome's properties for "prefers-reduced-motion: reduce" */
	animation-iteration-count: infinite;
	animation-duration: var(--fa-animation-duration, 2s);
}