:root {
	--font: sans-serif;
	--black: #000;
	--white: #eee;
	--grey: #666;
	--ltgrey: #c8c8c8;
	--vltgrey: #aaa;
	--blue: #1969ab;
	--stream: #006dc2;
	--stream-audio: #107dd2;
	--stream-bar: #004e8c;
	--chat: #ab9dc5;
	--chat-bar: #6e5f88;
	--titlebar: 24px;
	--sidebar: 60px;
	--radius: 3px;
	--page: 1030px;
	--shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
	--ease: background-color 0.5s, color 0.5s, opacity 0.5s;
	--move: top 0.5s, left 0.5s, height 0.5s, width 0.5s;
}

* { margin: 0; box-sizing: border-box; }

.clearfix::after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.floatleft { float: left; }
.floatright { float: right; }

html, body, #bodywrapper { height: 100%; }

body {
	font-family: var(--font);
	background: #111 url("images/body-bg-dark.88425312823f.jpg") center / cover no-repeat fixed;
}

input[type="text"], input[type="password"], textarea {
	font-family: var(--font);
	background: var(--white);
	color: var(--black);
}

a:link, .layoutselector, button, .channel { transition: var(--ease); }

.rounded { border-radius: var(--radius); }
.squareright { border-radius: var(--radius) 0 0 var(--radius); }
.squareleft { border-radius: 0 var(--radius) var(--radius) 0; }
.square { border-radius: 0; }

button, .button {
	font-family: var(--font);
	background: rgba(0, 0, 0, 0.1);
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: var(--radius);
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}
button:hover, .button:hover { background: rgba(0, 0, 0, 0.2); }

.viewtemplate button, .viewtemplate .button {
	border: 0;
	margin: 1px;
	font-size: 16px;
	line-height: 18px;
	padding: 2px 4px;
}
.streamoverlay button { line-height: 20px; }

.notice, .loading { font-size: 110%; font-style: italic; }
.loading {
	background: url("images/loading.7b9776076d5f.gif") left center no-repeat;
	padding-left: 24px;
}

span.deleteicon { position: relative; }
span.deleteicon span {
	position: absolute;
	display: block;
	top: 1px;
	right: 5px;
	width: 16px;
	height: 16px;
	background: url("images/strikethrough-black.ed2b46cec463.png") center no-repeat;
	cursor: pointer;
	opacity: 0.4;
}
span.deleteicon span:hover { opacity: 0.7; }
span.deleteicon input { padding-right: 16px; }

#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--sidebar);
}
#sidebar a.edit, #sidebar a.rotate {
	display: block;
	background: rgba(0, 0, 0, 0.5) center no-repeat;
	border-radius: var(--radius);
	margin: 5px;
	opacity: 0.5;
	border: 1px solid #888;
}
#sidebar a.edit:hover, #sidebar a.edit.selected,
#sidebar a.rotate:hover, #sidebar a.rotate.selected { opacity: 1; }
#sidebar a.edit.inactive { opacity: 0.2; pointer-events: none; }
body[data-editing] #sidebar .layoutselector,
body[data-editing] #sidebar a.rotate { opacity: 0.2; pointer-events: none; }
body[data-streams="0"] #sidebar a.rotate,
body[data-streams="1"] #sidebar a.rotate { visibility: hidden; pointer-events: none; }
#sidebar a.edit { background-image: url("images/edit-white.14d292237565.png"); }
#sidebar a.rotate { background-image: url("images/rotate-white.4971c19b8c53.png"); }
#sidebar .sidebar-button { width: 50px; height: 50px; }

#contentwrapper { margin: 0 auto; width: 100%; height: 100%; }
#contentwrapper.indextemplate, #contentwrapper.errortemplate {
	position: relative;
	width: 95%;
	max-width: var(--page);
	min-width: 768px;
	height: auto;
	margin: 0 auto 10%;
	box-shadow: var(--shadow);
	background: var(--white);
}
#contentwrapper.viewtemplate {
	margin-left: var(--sidebar);
	width: calc(100% - var(--sidebar));
	overflow: hidden;
}
#startform {
	width: 0;
	height: 0;
	max-width: 0;
	margin: 0;
	box-shadow: var(--shadow);
	background: var(--white);
	position: fixed;
	left: 0;
	top: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s;
}
#startform.shown, #startform.popup {
	width: 95%;
	height: auto;
	max-width: var(--page);
	margin: 4vh auto 10%;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 100;
}
/* A page with nothing loaded shows the centered form. A popup over loaded
   streams keeps its compact position, including while those fields are cleared.
   left and top stay available so the same drag handle can move this form. */
#contentwrapper.no-streams #startform:not(.popup) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: absolute;
	left: 50%;
	top: 4vh;
	width: 95%;
	max-width: var(--page);
	max-height: none;
	margin: 0;
	transform: translateX(-50%);
}
#contentwrapper.no-streams #startform #logo { display: block; }
#contentwrapper.viewtemplate #layoutwrapper {
	position: fixed;
	top: 0;
	left: var(--sidebar);
	width: calc(100% - var(--sidebar));
	height: 100%;
}

#logo {
	display: block;
	width: 100%;
	background: var(--black);
	padding: 15px 40px 10px;
}
#sidebar #sidebarlogo {
	background: transparent;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 50%;
}
#sidebar #sidebarlogo img {
	transform: rotate(270deg);
	transform-origin: 30px center;
	position: absolute;
	left: 0;
	bottom: 5px;
	opacity: 0.5;
	max-height: 60px;
}

#menu-primary-menu {
	width: 100%;
	list-style: none;
	padding: 6px 12px 8px;
	text-align: right;
	background: #d6d6d6;
}
#menu-primary-menu li { display: inline-block; font-size: 80%; }
#menu-primary-menu li.tip { float: right; padding-top: 2px; }
#menu-primary-menu a {
	color: var(--black);
	background: transparent;
	font: inherit;
	text-decoration: none;
	border-radius: 0;
}
#menu-primary-menu a:hover { background: var(--blue); color: var(--white); }

#layoutwrapper { position: relative; margin: 0 auto; }
#layoutwrapper.dimmed { z-index: -1; }

#buildlayoutform label, #buildlayoutform .streamfield {
	font-size: 20px;
	padding: 0.1em 0.2em;
}
#buildlayoutform label { margin: 5px 0; }
#buildlayoutform label { font-weight: bold; padding-right: 20px; }
#buildlayoutform .streamfield {
	border: 1px solid var(--grey);
	border-radius: var(--radius);
}
#buildlayoutform #submitbuttoncontainer { padding: 0 40px 20px; }
#buildlayoutform #cancelbutton { display: none; }
#submitbuttoncontainer { text-align: center; }
#submitbuttoncontainer button { width: 22%; margin: 0 5px; }
body[data-streams="0"] #startform:not(.popup) #submitbuttoncontainer { display: none; }
body[data-streams="0"] #clearbutton,
body[data-streams="0"] #submitbuttoncontainer button[type="submit"] {
	opacity: 0.4;
	pointer-events: none;
}

.streamfieldcontainer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 5px 0;
}
.fieldnumber {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 1.45em;
	width: 1.45em;
	height: 1.45em;
	border: 2px solid var(--stream);
	border-radius: 50%;
	color: var(--stream);
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	text-align: center;
}
.fieldclear {
	visibility: hidden;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent url("images/trash-black.3eacc31984d8.svg") center / 16px no-repeat;
	cursor: pointer;
}
.fieldclear:hover { background: transparent url("images/trash-black.3eacc31984d8.svg") center / 16px no-repeat; }
.streamfieldcontainer:has(.streamfield[data-tag]:not([data-tag=""])) .fieldclear { visibility: visible; }
/* One empty field follows the filled ones. The rest wait until that field is used. */
body[data-streams="0"] .streamfieldcontainer[data-slot="2"],
body[data-streams="0"] .streamfieldcontainer[data-slot="3"],
body[data-streams="0"] .streamfieldcontainer[data-slot="4"],
body[data-streams="0"] .streamfieldcontainer[data-slot="5"],
body[data-streams="0"] .streamfieldcontainer[data-slot="6"],
body[data-streams="0"] .streamfieldcontainer[data-slot="7"],
body[data-streams="0"] .streamfieldcontainer[data-slot="8"],
body[data-streams="1"] .streamfieldcontainer[data-slot="3"],
body[data-streams="1"] .streamfieldcontainer[data-slot="4"],
body[data-streams="1"] .streamfieldcontainer[data-slot="5"],
body[data-streams="1"] .streamfieldcontainer[data-slot="6"],
body[data-streams="1"] .streamfieldcontainer[data-slot="7"],
body[data-streams="1"] .streamfieldcontainer[data-slot="8"],
body[data-streams="2"] .streamfieldcontainer[data-slot="4"],
body[data-streams="2"] .streamfieldcontainer[data-slot="5"],
body[data-streams="2"] .streamfieldcontainer[data-slot="6"],
body[data-streams="2"] .streamfieldcontainer[data-slot="7"],
body[data-streams="2"] .streamfieldcontainer[data-slot="8"],
body[data-streams="3"] .streamfieldcontainer[data-slot="5"],
body[data-streams="3"] .streamfieldcontainer[data-slot="6"],
body[data-streams="3"] .streamfieldcontainer[data-slot="7"],
body[data-streams="3"] .streamfieldcontainer[data-slot="8"],
body[data-streams="4"] .streamfieldcontainer[data-slot="6"],
body[data-streams="4"] .streamfieldcontainer[data-slot="7"],
body[data-streams="4"] .streamfieldcontainer[data-slot="8"],
body[data-streams="5"] .streamfieldcontainer[data-slot="7"],
body[data-streams="5"] .streamfieldcontainer[data-slot="8"],
body[data-streams="6"] .streamfieldcontainer[data-slot="8"] { display: none; }
.formcaption { text-align: center; font-size: 80%; font-style: italic; color: #888; cursor: move; }
.formcaption a { color: var(--grey); text-decoration: none; cursor: move; }
.formcaption a:hover { color: #444; }
#startform.popup .formcaption { top: 1em; right: 1em; }

.streamstatusicon {
	flex: 0 0 22px;
	width: 22px;
	height: 16px;
	background: center no-repeat;
}
.streamstatusicon[data-status="loading"] { background-image: url("images/loading.7b9776076d5f.gif"); }
.streamstatusicon[data-status="doesntexist"] { background-image: url("images/strikethrough-black.ed2b46cec463.png"); }
.streamstatusicon[data-status="exists"] { background-image: url("images/checkmark-black.816e7b0ede41.png"); }
.streamstatusicon[data-status="existsandstreaming"] { background-image: url("images/checkmark-camera-black.27a1a608e1cc.png"); }

#startform.popup {
	position: fixed;
	left: 70px;
	top: 10px;
	z-index: 100;
	width: 700px;
	max-width: none;
	max-height: 95%;
	margin: 0;
	overflow: auto;
	background: var(--white);
	color: var(--black);
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
	transition: opacity 0.25s;
}
#startform.popup #logo { display: none; }
#startform.popup #channellist { font-size: 80%; }
#startform.popup .channellist .channel { height: 45px; }
#startform.popup .channellist .channel.live, #startform.popup .channellist .community { height: 90px; }
#startform.popup #cancelbutton { display: inline-block; }
/* Four 140px thumbs wrap in the 700px popup. Scale the row so they sit on one line.
   display:flex is only for the group the stream count already shows. */
#startform.popup .layoutgroup[data-streams="1"],
#startform.popup .layoutgroup[data-streams="2"],
#startform.popup .layoutgroup[data-streams="3"],
#startform.popup .layoutgroup[data-streams="4"],
#startform.popup .layoutgroup[data-streams="5"],
#startform.popup .layoutgroup[data-streams="6"],
#startform.popup .layoutgroup[data-streams="7"],
#startform.popup .layoutgroup[data-streams="8"] { display: none; }
body[data-streams="1"] #startform.popup .layoutgroup[data-streams="1"],
body[data-streams="2"] #startform.popup .layoutgroup[data-streams="2"],
body[data-streams="3"] #startform.popup .layoutgroup[data-streams="3"],
body[data-streams="4"] #startform.popup .layoutgroup[data-streams="4"],
body[data-streams="5"] #startform.popup .layoutgroup[data-streams="5"],
body[data-streams="6"] #startform.popup .layoutgroup[data-streams="6"],
body[data-streams="7"] #startform.popup .layoutgroup[data-streams="7"],
body[data-streams="8"] #startform.popup .layoutgroup[data-streams="8"] { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
#startform.popup .layoutselector { padding: 3px; margin: 0; }
#startform.popup .layoutselector input { display: none; }
#startform.popup .layoutthumb { zoom: 0.62; }
#formdim {
	position: fixed;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s;
	pointer-events: none;
}
#formdim:has(~ #startform.popup) {
	left: var(--sidebar);
	width: calc(100% - var(--sidebar));
	height: 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 99;
}
#contentwrapper.no-streams #formdim {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.callout::before, .callout::after {
	content: "";
	position: absolute;
	left: -11px;
	display: block;
	width: 0;
	border-style: solid;
	border-color: var(--white) transparent;
}
.callout::before { top: 10px; border-width: 0 0 11px 11px; }
.callout::after { top: 21px; border-width: 11px 0 0 11px; }

#quickpicks { text-align: left; padding: 0 5px 5px; }
#quickpicks button { border-radius: 0; float: none; font-size: 80%; width: auto; }
#quickpicks button.selected { background: var(--grey); color: var(--white); }

.layoutgroup { margin-top: 20px; text-align: center; display: none; }
body[data-streams="1"] .layoutgroup[data-streams="1"],
body[data-streams="2"] .layoutgroup[data-streams="2"],
body[data-streams="3"] .layoutgroup[data-streams="3"],
body[data-streams="4"] .layoutgroup[data-streams="4"],
body[data-streams="5"] .layoutgroup[data-streams="5"],
body[data-streams="6"] .layoutgroup[data-streams="6"],
body[data-streams="7"] .layoutgroup[data-streams="7"],
body[data-streams="8"] .layoutgroup[data-streams="8"] { display: block; }
#sidebar .layoutgroup { margin-top: 0; }

.layoutselector {
	display: inline-block;
	padding: 5px;
	cursor: pointer;
	border-radius: var(--radius);
	vertical-align: middle;
	opacity: 0.5;
}
.layoutselector:hover, .layoutselector:has(input:checked) { opacity: 1; }
body[data-layout] #sidebar .layoutselector[data-current] { opacity: 1; }
#buildlayoutform .layoutselector { position: relative; }
#buildlayoutform .layoutselector:hover::after,
#buildlayoutform .layoutselector:has(input:checked)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.1);
	pointer-events: none;
}
.layoutselector input { position: absolute; left: -9999px; }
.layoutthumb { position: relative; }

.streamthumb, .streamcontainer { background: var(--stream); }
.chatthumb, .chatcontainer { background: var(--chat); }
.streamcontainer.audio { background: var(--stream-audio); }
.streamthumb, .streamcontainer, .chatthumb, .chatcontainer { color: var(--white); }
.streamcontainer.dummy, .chatcontainer.dummy {
	background: transparent;
	border: 6px dashed var(--stream);
}
.chatcontainer.dummy { border-color: var(--chat); }
.streamthumb, .chatthumb { text-transform: uppercase; font-weight: bold; }
.streamthumb { display: flex; align-items: center; justify-content: center; }
.chatthumb span { display: inline-block; }
.streamthumb span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45em;
	height: 1.45em;
	border: 1px solid var(--white);
	border-radius: 50%;
	line-height: 1;
	font-weight: bold;
}
/* The sidebar thumbs are 50px. Scale the number with the box and keep a floor so it stays readable. */
#sidebar .streamthumb, #sidebar .chatthumb { font-size: 11px; }
#sidebar .streamthumb span, #sidebar .chatthumb span { transform: scale(0.62); transform-origin: center; }

.streamcontainer, .chatcontainer, .streamoverlay {
	position: absolute;
	display: none;
	transition: var(--move);
}
.streamcontainer object, .streamcontainer iframe, .streamcontainer video, .streamcontainer .video-js {
	height: 100%;
	width: 100%;
	border: 0;
}
/* A dummy only exists while a layout is staged, after the players have loaded. */
.streamcontainer.dummy, .streamoverlay.dummy, .chatcontainer.dummy { z-index: 20; }
#layoutwrapper .staged-out { display: none !important; }

.chatcontainer { z-index: -10; visibility: hidden; }
.chatcontainer.dummy { visibility: visible; }
.chatcontainer iframe {
	width: 100%;
	border: 0;
}

/* The title bar is the only thing above a player. The player box starts below
   it, so the embed is never covered and Twitch can autoplay. */
.streamoverlay {
	z-index: 10;
	height: var(--titlebar);
	align-items: center;
	gap: 2px;
	padding: 0 2px;
	background: var(--stream-bar);
	color: var(--white);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s;
}
.streamoverlay:hover, .streamoverlay.dummy { opacity: 1; }
.streamcontainer.dummy { top: 0; height: 100%; }
.streamoverlay .mainbuttons, .streamoverlay .auxbuttons {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}
.streamoverlay .mainbuttons button, .streamoverlay .auxbuttons button, button.reloadchat {
	width: 20px;
	height: 20px;
	padding: 1px;
	border: 0;
	border-radius: 0;
	background: transparent;
	opacity: 0.45;
	line-height: 0;
}
.streamoverlay .mainbuttons button span, .streamoverlay .auxbuttons button span, button.reloadchat span,
.chatcaption .chaticon, .chatcaption .arrow {
	position: relative;
	top: -1px;
}
.streamoverlay .mainbuttons button:hover, .streamoverlay .auxbuttons button:hover, button.reloadchat:hover,
.streamoverlay .mainbuttons button:active, .streamoverlay .auxbuttons button:active, button.reloadchat:active {
	background: transparent;
	opacity: 1;
}
body[data-streams="1"] .streamoverlay .hidden-when-one-stream { display: none; }
.streamoverlay.player-twitchold .bothbutton,
.streamoverlay.player-twitchold .audiobutton { display: none; }

.overlaycaption {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--white);
	font-size: 13px;
	line-height: var(--titlebar);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.streamnumber { display: none; }
.dummy .streamnumber {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	border: 1px solid var(--white);
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}
.streamname { font-weight: bold; text-transform: uppercase; }
.inactive .streamname { display: none; }

.audioicon, .chaticon, .bothicon, .profileicon, .reloadicon, .closeicon, .arrow {
	vertical-align: middle;
	display: inline-block;
	width: 16px;
	height: 16px;
	background: center no-repeat;
}
.arrow { width: 10px; height: 10px; }
.audioicon { background-image: url("images/audio-white.29d3b9048cca.png"); }
.chaticon { background-image: url("images/chat-white.ce315ea3fd8d.png"); }
.bothicon { background-image: url("images/both-icon-white.dbe2172d7175.png"); }
.profileicon { background-image: url("images/profile-white.d23a87237c5b.png"); }
.reloadicon { background-image: url("images/reload-white.e6d35de18af2.png"); }
.closeicon { background-image: url("images/strikethrough-white.6338db81ea6b.png"); }
.arrow { background-image: url("images/arrow-up-white.21919d1c630a.png"); transform: rotate(180deg); }
button .arrow { background-image: url("images/arrow-up-white.21919d1c630a.png"); }
button .audioicon, button .chaticon, button .bothicon, button .profileicon {
	padding: 0;
	float: none;
}

#layoutwrapper[data-has-chat="0"] .hidden-when-no-chat,
#layoutwrapper.separate-chats .chatbutton,
#layoutwrapper.separate-chats .bothbutton { display: none; }
#layoutwrapper[data-has-chat="0"] .streamoverlay .mainbuttons button { border-radius: 0; }

.chatcontainer iframe { top: var(--titlebar); height: calc(100% - var(--titlebar)); position: absolute; }
.chatcaption {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: var(--titlebar);
	color: var(--white);
	font-size: 13px;
	line-height: var(--titlebar);
	padding: 0 2px;
	background: var(--chat-bar);
	z-index: 2;
}
button.reloadchat { position: absolute; right: 2px; top: 2px; }
.chatmenuopener {
	flex: 1 1 auto;
	cursor: default;
	background: transparent;
	color: var(--white);
	font-size: 13px !important;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	padding: 0 24px;
	opacity: 1;
}
.chatmenuopener:hover { background: transparent; }
.chatcaption .arrow { display: none; }
.chatcontainer.overlapped .chatmenuopener { cursor: pointer; }
.chatcontainer.overlapped .arrow { display: inline-block; }

ol.chatmenu {
	display: none;
	list-style: none;
	margin: 0;
	position: absolute;
	top: var(--titlebar);
	left: 50%;
	transform: translateX(-50%);
	padding: 5px;
	background: var(--chat-bar);
	box-shadow: 0 3px 2px 2px rgba(0, 0, 0, 0.1);
	z-index: 5;
	text-align: center;
}
ol.chatmenu.open { display: block; }
ol.chatmenu li { color: var(--white); text-align: center; cursor: pointer; display: block; font-size: 13px; }

.channellist .channel, .channellist .community {
	width: 12.5%;
	height: 65px;
	float: left;
	padding: 5px;
	cursor: pointer;
	border-radius: var(--radius);
	vertical-align: middle;
	opacity: 0.3;
}
.channellist .channel:hover, .channellist .channel.selected,
.channellist .community:hover, .channellist .community.selected {
	background: rgba(0, 0, 0, 0.1);
	padding: 4px;
	border: 1px solid rgba(0, 0, 0, 0.3);
}
.channellist .community {
	opacity: 1;
	width: 37.5%;
	height: 130px;
}
.channellist .community:hover {
	background: transparent;
	padding: 5px;
	border: 0;
}
.channellist .community:hover .communityimage { opacity: 0.8; }
.channellist .grid-sizer { display: none; }
.channellist .channel.live {
	opacity: 0.7;
	width: 25%;
	height: 130px;
}
.channellist .channel.live:hover { opacity: 0.8; }
.channellist .channel.live .channelcaption { font-size: 80%; }
.channellist .channel.selected { opacity: 1; }
.channellist .channel.selected .channelcaption {
	background: url("images/checkmark-white.13935312a238.png") 5px center no-repeat;
}
.channellist .channel:hover { opacity: 0.6; }
.channellist .channelimage, .channellist .communityimage {
	background: center / cover no-repeat;
	width: 100%;
	height: 100%;
	position: relative;
}
.channellist .communityimage {
	background-position: center 40%;
	background-size: auto 60%;
	border-radius: var(--radius);
	border: 1px solid #aaa;
	transition: opacity 0.5s;
}
.channellist .channelname, .channellist .communityname {
	text-transform: uppercase;
	font-weight: bold;
}
.channellist .channelcaption, .channellist .communitycaption {
	position: absolute;
	bottom: 0;
	color: var(--white);
	font-size: 60%;
	text-align: right;
	background: rgba(80, 80, 80, 0.6);
	padding: 1% 2% 2%;
	width: 100%;
}
.channellist .game, .channellist .visit { font-style: italic; }
.channellist .visit { font-size: 133%; }

.authenticate { text-align: center; font-size: 120%; }

.tabs > ul li { display: inline-block; }
.tabs > ul {
	list-style: none;
	background: var(--black);
	padding: 0 40px 20px;
	cursor: move;
}
.tabs > ul a {
	display: inline-block;
	padding: 4px 14px;
	color: var(--ltgrey);
	text-decoration: none;
	font-size: 19.5px;
}
.tabs > ul li.ui-state-active a { background: var(--blue); color: var(--white); }
.tabs > div[hidden], [hidden] { display: none; }
#communitylist { display: flex; flex-wrap: wrap; padding-left: 0; }
#startform.popup { background: var(--white); }

.ui-tabs-tab { display: inline-block; }
.ui-tabs-tab a { text-decoration: none; }
.ui-widget, .ui-widget button { font-family: inherit; font-size: inherit; }
.ui-widget-content { border: 0; background: transparent; }
#custom, #communities, #following, #error { padding: 1em 40px; }
.ui-tabs, .ui-tabs .ui-tabs-nav { padding: 0; border-radius: 0; }
.ui-tabs .ui-widget-header {
	background: var(--black);
	border: 0;
	padding: 0 40px 20px;
}
#startform.popup .ui-tabs .ui-widget-header { padding: 5px; }
.ui-tabs .ui-tabs-nav li { margin: 0; border-radius: 0; border: 0; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 4px 14px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover { color: var(--white); background: var(--vltgrey); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: transparent;
	font-size: 19.5px;
}
#startform.popup .ui-state-default { font-size: inherit; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--ltgrey); }
.ui-tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor:hover {
	background: var(--blue);
	color: var(--white);
}

[id*="-donation-overlay"] { font-family: inherit; }

@media (max-width: 768px) {
	#contentwrapper.indextemplate, #contentwrapper.errortemplate { min-width: 0; width: 100%; }
	#logo { padding: 12px 16px 8px; }
	#logo img { max-width: 100%; height: auto; }
	#custom, #communities, #following, #error { padding: 1em 16px; }
	.channellist .channel { width: 50%; }
	.channellist .channel.live, .channellist .community { width: 100%; }
	#startform.popup { left: 8px; width: calc(100% - 16px); }
}