@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Electrolize');
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-Medium.684d069be724.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-MediumItalic.e2b768244cf3.ttf") format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-Demi.847a5d70d1ba.ttf") format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-DemiItalic.afc2259a4910.ttf") format('truetype');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-Light.8c8fb9733576.ttf") format('truetype');
	font-weight: lighter;
	font-style: normal;
}
@font-face {
	font-family: 'Industry';
	src: url("/static/fonts/Industry-LightItalic.cda5662d2101.ttf") format('truetype');
	font-weight: lighter;
	font-style: italic;
}
*, *:before, *:after {
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: 0;
}
:root {
	--black: #000000;
	--faint-black: rgba(0,0,0,0.5);
	--fainter-black: rgba(0,0,0,0.25);
	--dark: #0d0e10;
	--grey: #73757b;
	--dark-grey: #1f2124;
	--blue: #00a0dd;
	--dark-blue: #044f7c;
	--red: #c20404;
	--dark-red: #4e0202;
	--green: #4e8e56;
	--dark-green: #172b1a;
	--yellow: #f8fb0c;
	--dark-yellow: #808102;
	--white: #ffffff;
}
html {
	background-color: var(--dark);
	color: var(--white);
	font-family: Montserrat;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	overflow-x: hidden;
}
*::-webkit-scrollbar {
	width: 1rem;
} *::-webkit-scrollbar-thumb {
	background-color: var(--dark-grey);
	border-radius: 0.2rem;
} *::-webkit-scrollbar-track {
	background-color: var(--faint-black);
}
body {
	height: 100%;
	position: relative;
}
main {
	min-height: 175vh;
	width: 60%;
	margin: 0 auto;
	padding: 1rem 3rem 6rem;
	background-color: var(--fainter-black);
}
h1 {
	font-family: Industry;
	font-size: 4em;
	font-weight: bold;
	text-transform: uppercase;
	margin: 1em 0;
}
h2 {
	font-family: Industry;
	font-size: 2.5em;
	font-weight: bold;
	text-transform: uppercase;
}
h3 {
	font-family: Industry;
	font-size: 2em;
	font-weight: bold;
}
h4 {
	font-family: Industry;
	font-size: 1.2em;
}
h5 {
	color: var(--grey);
	font-family: Industry;
	font-weight: lighter;
	font-style: italic;
}
hr {
	border-color: var(--grey);
}
code {
	font-family: Electrolize;
	font-weight: lighter;
}
.blue {
	color: var(--blue);
}
.yellow {
	color: var(--yellow);
}
.bold {
	font-weight: bold;
}
.industry {
	font-family: Industry;
}
a, button {
	font-size: inherit;
	color: var(--white);
	text-decoration: none;
} a:hover {
	text-decoration: underline;
	cursor: pointer;
} a.inline, a.email {
	color: var(--blue);
	text-decoration: underline;
} a.button, button {
	display: block;
	font-size: 0.8em;
	font-weight: bold;
	background-color: transparent;
	margin: 0.1em;
	padding: 0.5em 1em;
	border: 0.1em solid;
	transition:
		color 0.5s,
		background-color 0.5s,
		border-color 0.5s;
} a.button.large, button.large {
	font-size: 1.2em;
	text-transform: uppercase;
} a.button.blue, button.blue {
	color: var(--blue);
} a.button.red, button.red {
	color: var(--red);
} a.button.green, button.green {
	color: var(--green);
} a.button.grey, button.grey {
	color: var(--grey);
} a.button.yellow, button.yellow {
	color: var(--yellow);
} a.disabled.button, button:disabled {
	opacity: 50%;
} a.button:hover, button:hover {
	text-decoration: none;
	cursor: not-allowed;
} a.button:hover:not(.disabled), button:hover:not(:disabled) {
	color: var(--dark);
	background-color: var(--white);
	border-color: var(--white);
	cursor: pointer;
} a.button.blue:hover:not(.disabled), button.blue:hover:not(:disabled) {
	color: var(--white);
	background-color: var(--blue);
	border-color: var(--blue);
} a.button.red:hover:not(.disabled), button.red:hover:not(:disabled) {
	color: var(--white);
	background-color: var(--red);
	border-color: var(--red);
} a.button.green:hover:not(.disabled), button.green:hover:not(:disabled) {
	color: var(--white);
	background-color: var(--green);
	border-color: var(--green);
} a.button.grey:hover:not(.disabled), button.grey:hover:not(:disabled) {
	color: var(--white);
	background-color: var(--grey);
	border-color: var(--grey);
} a.button.yellow:hover:not(.disabled), button.yellow:hover:not(:disabled) {
	color: var(--black);
	background-color: var(--yellow);
	border-color: var(--yellow);
} p a {
	color: var(--blue);
}
.svg-inline--fa {
	padding: 0 0.5em;
}
.expirationDate {
	color: var(--red);
}
header.background {
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	mask-image: linear-gradient(white, transparent);
	z-index: -1;
} header.background:after {
	content: '';
	background-image:
		radial-gradient(circle at 50% 0%, var(--faint-black), var(--dark)),
		linear-gradient(transparent, var(--dark));
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
} header.background img {
	width: 100%;
	transform: translateY(-25%);
}
div.footer.copyright {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 1em;
	text-align: center;
} div.footer.copyright a:hover {
	text-decoration: none;
} div.footer.copyright img {
	height: 4em;
} div.footer.copyright h5 {
	font-weight: bold;
}
footer.background {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100vw;
	height: 40vh;
	overflow: hidden;
	mask-image: linear-gradient(transparent, white);
	z-index: -1;
} footer.background:after {
	content: '';
	background-image:
		linear-gradient(to top, transparent, var(--dark)),
		radial-gradient(circle at 50% 100%, var(--faint-black), var(--dark));
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
} footer.background img {
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: translateY(35%);
}
footer.legal {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--black);
	font-size: 0.8em;
} footer.legal div.banner a:hover {
	text-decoration: none;
} footer.legal div.links {
	display: flex;
	justify-content: center;
	align-items: center;
} footer.legal div.links a {
	margin: 0 1em;
	text-align: center;
}
div.title>* {
	margin: 2rem 0;
	text-align: center;
} div.title h1.bigTitle {
	margin-bottom: 0;
} div.title h4.blurb {
	text-align: left;
	width: 75%;
} div.title h5.subTitle {
	margin-top: 0;
	text-align: right;
	padding-right: 3rem;
}
div.sidebar {
	width: 20%;
	padding: 1em;
} div.sidebar.right {
	float: right;
} div.sidebar.left {
	float: left;
} div.sidebar ul {
	margin-top: 1em;
	list-style-type: none;
} div.sidebar li {
	text-align: left;
	font-size: 0.8em;
} div.sidebar div.videoCard {
	margin: 0.5rem auto;
}
img.avatar {
	font-size: inherit;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	margin: 0 0.5em;
	vertical-align: middle;
}
div.channelCardGrid {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0;
	justify-content: center;
} div.channelCardGrid div.channelCard {
	width: 20%;
} div.channelCardGrid div.channelCard:hover {
	background-color: var(--black);
}
div.catalogWindow {
	width: 100%;
	margin: 1rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: top;
} div.catalogWindow div.videoCard, div.catalogWindow div.channelCard {
	width: 25%;
	margin: 0;
	padding: 0.2rem 0.1rem;
} div.catalogWindow div.videoCard:first-child,div.catalogWindow div.channelCard:first-child {
	padding-left: 0.2rem;
} div.catalogWindow div.videoCard:last-child,div.catalogWindow div.channelCard:last-child {
	padding-right: 0.2rem;
} div.catalogWindow h5 {
	width: 75%;
	text-align: center;
}
div.tableWrapper {
	overflow-x: auto;
}
table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	text-align: left;
} tr {
	height: 2em;
	border: none;
} tr.highlight:hover {
	background-color: var(--dark);
} td, th {
	padding: 0.5em;
	border: none;
	white-space: nowrap;
	vertical-align: top;
	overflow: hidden;
} th {
	font-family: Industry;
	font-weight: bold;
	color: var(--blue);
}
div.tableWrapper>table {
	width: initial;
	min-width: 100%;
} div.tableWrapper
div.contentWrapper * {
	max-width: 100%;
	outline: none;
} div.contentWrapper div.content div.overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--faint-black);
} .contentWrapper div.content audio {
	width: 100%;
	height: 5rem;
	padding: 1rem;
} div.contentWrapper div.contentInfo p {
	margin: 0.5rem 0;
	font-size: 0.8rem;
}
div.chatWindow {
	padding-right: 0.5em;
	overflow-x: hidden;
	overflow-y: scroll;
} div.chatWindow::-webkit-scrollbar {
	width: 0.5em;
}
div.chatWrapper {
	font-size: 0.9em;
	margin-bottom: 1em;
} div.chatWrapper.staff {
	background-color: var(--blue);
	padding: 0.5em;
	border-radius: 0.5em;
} div.chatWrapper.superchat {
	background-color: var(--yellow);
	padding: 0.5em;
	border-radius: 0.5em;
} div.chatWrapper * {
	margin: 0!important;
} div.chatWrapper div.chatHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0.5em;
	color: var(--black);
} div.chatWrapper:not(.staff):not(.superchat) div.chatHeader {
	color: var(--blue);
} div.chatWrapper h4.chatAccount {
	padding-bottom: 0.3em;
	color: var(--blue);
	font-size: 1.2em;
	font-weight: bold;
} div.chatWrapper.staff h4.chatAccount {
	color: var(--black);
} div.chatWrapper.superchat h4.chatAccount {
	color: var(--black);
} div.chatWrapper.staff p {
	background-color: var(--black);
	padding: 0.5em;
	border-radius: 0.2em;
} div.chatWrapper.superchat p {
	background-color: var(--black);
	padding: 0.5em;
	border-radius: 0.2em;
}
div.buttonList {
	padding: 1rem 0;
	font-size: 1.2em;
} div.horizontal.buttonList {
	display: flex;
}
div.formWrapper {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--black);
	width: 100%;
	font-size: 0.8em;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	overflow: hidden;
} div.formWrapper>:not(div.header, div.verticalLinkMenu) {
	margin: 1rem;
	width: 100%;
} div.content.formWrapper {
	flex-wrap: nowrap;
} div.account.formWrapper {
	width: 50%;
	margin: 0 auto;
} div.admin.formWrapper {
	display: block;
} div.formWrapper * {
	outline: none;
	max-width: 100%;
} div.formWrapper p {
	margin: 1em 0;
} div.admin.formWrapper h5 {
	margin: 1em 0;
} div.formWrapper ul {
	list-style: none;
} div.formWrapper li {
	margin: 0.5em;
} div.formWrapper div.header {
	width: 100%;
	padding: 1rem;
	font-weight: bold;
	background-color: var(--dark);
} div.formWrapper div.header * {
	line-height: 2;
} div.formWrapper div.flex.header {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
} div.formWrapper div.header td, div.formWrapper div.header th {
	text-align: right;
	vertical-align: middle;
	padding: 0;
} div.formWrapper div.buttonList {
	display: flex;
	flex-direction: column;
	padding: 0;
} div.formWrapper div.horizontal.buttonList {
	flex-direction: row;
	width: 100%;
} div.formWrapper div.buttonList a.button, div.formWrapper div.buttonList button {
	width: 100%;
} div.formWrapper a.button, div.formWrapper button {
	text-align: center;
} div.formFieldWrapper {
	margin: 1em 0;
} div.formFieldWrapper * {
	margin: 0.2em;
} div.formFieldWrapper input,textarea,select {
	width: 100%;
	height: 2.5em;
	font-family: Arial;
	color: var(--white);
	background-color: var(--dark);
	padding: 0.5em;
	border: 0.1em solid var(--grey);
	border-radius: 0.5em;
} div.formFieldWrapper input[type="checkbox"] {
	width: initial;
	height: initial;
} div.formFieldWrapper textarea {
	resize: none;
} div.formFieldWrapper input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	padding: 0;
} div.formFieldWrapper input[type="text"].superchat {
	border-color: var(--yellow);
	border-width: medium;
} div.formFieldWrapper input:disabled {
	color: var(--grey);
	font-style: italic;
}
div.checkboxFieldWrapper {
	display: flex;
	align-items: center;
} div.checkboxFieldWrapper>input[type="checkbox"] {
	margin: 1em;
} div.checkboxFieldWrapper>label {
	margin: 0.5em;
}
div.radioFieldWrapper, div.checkboxFieldWrapper {
	margin: 0 1em;
	font-family: Industry;
}
div.radioFieldItemWrapper, div.checkboxFieldWrapper {
	margin: 0.5em;
	border-radius: 0.5em;
	background-color: var(--dark-grey);
	padding: 0.5em;
} div.radioFieldItemWrapper:hover, div.checkboxFieldWrapper:hover {
	background-color: var(--dark-blue);
	cursor: pointer;
} div.radioFieldItemWrapper *:hover, div.checkboxFieldWrapper *:hover {
	cursor: pointer;
} div.radioFieldItemWrapper:has(input:checked), div.checkboxFieldWrapper:has(input.checked) {
	background-color: var(--blue);
	font-weight: bold;
} div.radioFieldItemWrapper:has(input:checked):hover, div.checkboxFieldWrapper:has(input:checked):hover {
	background-color: var(--blue);
} div.radioFieldItemWrapper:has(input:checked):hover a.inline, div.checkboxFieldWrapper:has(input:checked):hover  a.inline {
	color: var(--black);
}
div.separated {
	border-top: 0.1rem solid var(--dark-grey);
	border-bottom: 0.1rem solid var(--dark-grey);
	padding: 1em;
}
div.verticalLinkMenu {
	width: 100%;
	margin: 0;
	font-family: Industry;
	font-weight: bold;
	line-height: 2;
} div.verticalLinkMenu>a {
	display: flex;
	align-items: center;
	padding: 0.5em;
} div.verticalLinkMenu>a:hover {
	text-decoration: none;
	background-color: var(--dark);
}
div.chartWrapper {
	position: relative;
	width: 100%;
	height: 60vh;
}
div.channelCard {
	margin: 0 auto;
	padding: 1rem;
	border-radius: 0.5rem;
	text-align: center;
} div.channelCard a {
	width: 100%;
	height: 100%;
} div.channelCard a:hover {
	text-decoration: none;
} div.channelCard img.avatar {
	width: 4rem;
	height: 4rem;
	padding: 0.3rem;
	margin: 1rem auto;
} div.channelCard p {
	font-size: 0.8rem;
	padding-bottom: 1rem;
}
div.videoCard {
	max-width: 15vw;
	margin: 0 auto;
	padding: 0.1rem;
	/* background-color: var(--black); */
	overflow: hidden;
} div.videoCard a:hover {
	text-decoration: none;
} div.videoCard div.thumbnail {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--black);
	overflow: hidden;
} div.videoCard div.thumbnail img {
	display: block;
	height: 100%;
	margin: 0 auto;
} div.videoCard div.channelOverlay {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0.2rem;
} div.videoCard div.thumbnail p.duration {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: var(--black);
	margin: 0.1rem;
	padding: 0.2rem 0.4rem;
	border-radius: 0.5rem;
	font-size: 0.6rem;
} div.videoCard div.title {
	max-height: 2.5rem;
	padding: 0.5em;
	overflow: hidden;
} div.videoCard div.title * {
	font-size: 0.8rem;
	text-align: left;
	margin: 0;
} div.videoCard h5 {
	text-align: initial;
	color: var(--white);
	font-style: normal;
	padding: 0.5em 0;
}
div.subscriptionCard {
	width: calc(50% - 1em);
	margin: 0.5em;
	border: 1px solid var(--dark-grey);
	border-radius: 0.5em;
	padding: 1em;
}
span.channelIndex {
	color: var(--grey);
}
span.entryTitle {
	color: var(--blue);
	font-family: Industry;
	font-weight: bold;
}
span.userSubTag {
	padding: 0.3em 0.5em;
	border-radius: 0.5em;
}
ul.messages li.success {
  color: var(--green);
}
ul.messages li.error {
  color: var(--red);
}
.hidden, .mobile {
	display: none !important;
}

@media screen and (max-width: 768px) {
	.mobile {
		display: inherit !important;
	}
	main {
		width: 100%;
		min-height: 100vh;
		padding: 0 0 14em;
		background-color: initial;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.4em;
	}
	h3 {
		font-size: 1.2em;
	}
	h4 {
		font-size: 1em;
	}
	h5 {
		font-size: 0.8em;
	}
	header.background {
		height: 50vh;
	}
	footer.background {
		height: 10vh;
	}
	footer.legal {
		padding: 2em;
		flex-direction: column-reverse;
	} footer.legal div.links {
		width: 100%;
		padding-bottom: 4em;
		justify-content: space-between;
		font-size: 0.6em;
	}
	div.title {
		margin: 0 1rem;
	} div.title h4.blurb {
		padding-left: 1rem;
	} div.title h5.subTitle {
		text-align: center;
		padding-right: 0;
	}
	div.sidebar {
		display: none;
	}
	div.channelCardGrid div.channelCard {
		width: 33%;
	}
	div.catalogWindow {
		flex-wrap: initial;
		overflow-x: scroll;
	} div.catalogWindow::-webkit-scrollbar {
		height: 0.1rem;
	} div.mobile div.catalogWindow {
		flex-wrap: wrap;
	}
	div.catalogWindow div.channelCard {
		display: none;
	} div.catalogWindow div.videoCard {
		width: 100%;
		flex-shrink: 0;
	}
	div.videoCard {
		max-width: 100vw;
	} div.videoCard div.title {
		margin: 0;
	}
	div.subscriptionCard {
		width: calc(100% - 1em);
	}
	div.contentWrapper div.contentInfo {
		margin-top: 0;
	} div.contentWrapper div.mobile {
		display: block;
		padding: 0.5rem;
	}
	div.formWrapper {
		border-radius: 0;
	} div.account.formWrapper {
		width: 100%;
	}
	div.chartWrapper {
		height: 40vh;
	}
	.desktop {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.mobile {
		display: none !important;
	}
}