:root {
	--backgroundColor: #222831; /* #2E2E76 */
	--accentDark: #393e46; /* #181a23 */
	--mainText: #eeeeee;
	--lightText: #bdbdbd; /* #8f8f8f */
	--darkText: #000000;
	--redText: #fb4f27;
	--shadow: rgba(0, 0, 0, 0.4) 0 0 4px 0;
	--accentFont: 'Oswald', sans-serif;
	--accentFontWeight: 400;
	--loginBackground: #5865F2; /* #17A3CE */
	--loginHoverBackground: #3a44ae; /* #197D9F */
	--contentBackgroundColor: var(--accentDark);
	--contentHighlightBackgroundColor: var(--backgroundColor);
	--contentSuperDark: #131820;
	--buttonTransitionStyle: 0.1s ease-in-out;
	--buttonBgColor: var(--loginBackground); /* #263d60 */
	--buttonTextColor: #ffffff;
	--buttonBgHoverColor: var(--buttonBgColor);
	--buttonTextHoverColor: var(--buttonTextColor);
	--red: #bf1919;
	--orange: #ea7824;
	--green: #3a9b32;
	--grey: #393e46;
	--overlayTransparency: rgba(0, 0, 0, 0.5);
	--textBoxBorder: #676774;
	--textPlaceholder: #767676;
}
html {

}
body {
	font-family: 'Montserrat', sans-serif, 'FontAwesome';
	font-size: 1em;
	font-weight: 500;
	margin: 0;
	background-color: var(--backgroundColor);
	color: var(--mainText);
}
img {
	vertical-align: middle;
}
a,
a:link,
a:visited {
	text-decoration: none;
	color: inherit;
}
a:active,
a:hover,
a:focus {
	text-decoration: underline;
	color: inherit;
}
.no-a,
.no-a:link,
.no-a:visited {
	text-decoration: none;
	color: inherit;
}
.no-a:active,
.no-a:hover,
.no-a:focus {
	text-decoration: none;
	color: inherit;
}
.hidden {
	 display: none !important;
 }
.noscroll {
	overflow-y: hidden !important;
}
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.required::after {
	content: '*';
	color: var(--redText);
	position: relative;
	margin-left: 0.25em;
}
.red-text {
	color: var(--redText) !important;
}
.icon-key {
	font-weight: 900;
	margin-right: 1em;
	color: transparent;
	background: linear-gradient(45deg, orange 0%, orange 44%, red 44%, red 100%);
	background-clip: text;
	cursor: help;
}
.button {
	font-family: 'Montserrat', sans-serif, 'FontAwesome';
	font-size: 1em;
	font-weight: 500;
	border-radius: 1em;
	height: auto;
	min-height: 2em;
	overflow: hidden;
	padding: 0 0.75em;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: var(--shadow), inset rgba(19, 24, 32, 0) 0 0 0 1em;
	transition:
		background-color var(--buttonTransitionStyle),
		color var(--buttonTransitionStyle),
		box-shadow var(--buttonTransitionStyle);
}
.button:hover:enabled {
	background-color: var(--buttonBgHoverColor);
	color: var(--buttonTextHoverColor);
	box-shadow: var(--shadow), inset rgba(19, 24, 32, 0.5) 0 0 0 1em;
}
.button:disabled,
button[disabled] {
	cursor: not-allowed;
	opacity: 35%;
}
.button-hollow {
	background-color: transparent;
	color: var(--buttonTextColor);
	border: 0.1em solid var(--buttonBgColor);
	box-shadow: var(--shadow) !important;
}
.button-filled {
	background-color: var(--buttonBgColor);
	color: var(--buttonTextColor);
	border: 0.1em solid var(--buttonBgColor);
}
.button-green {
	--buttonBgColor: var(--green);
	--buttonBgHoverColor: var(--green);
}
.button-orange {
	--buttonBgColor: var(--orange);
	--buttonBgHoverColor: var(--orange);
}
.button-red {
	--buttonBgColor: var(--red);
	--buttonBgHoverColor: var(--red);
}
.button-grey {
	--buttonBgColor: var(--grey);
	--buttonBgHoverColor: var(--grey);
}
.circle {
	width: 1em;
	height: 1em;
	border: 0.5em solid;
	border-radius: 0.5em;
	box-sizing: border-box;
	box-shadow: var(--shadow), inset var(--shadow);
}
.list-box .circle {
	margin: 0.5em;
}
.circle-hollow {
	border: 0.2em solid !important;
}
.circle-green {
	border-color: var(--green);
}
.circle-orange {
	border-color: var(--orange);
}
.circle-red {
	border-color: var(--red);
}
.circle-grey {
	border-color: var(--grey);
}
.half-spacer {
	width: 0.5em;
	display: inline-block;
}
.spacer {
	width: 1em;
	display: inline-block;
}
.page-center {
	display: block;
	margin: 0 auto;
}
.limit-width {
	height: auto;
	max-width: 1200px;
}
.subtext {
	font-size: 0.8em;
	color: var(--lightText);
	display: block;
	margin-top: 4px !important;
}
.content-text.subtext {
	margin-top: 0 !important;
}
.hr {
	width: auto;
	height: 1px;
	background-color: var(--loginBackground);
	margin: 8px;
	box-sizing: border-box;
}
.page {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	background-color: var(--backgroundColor);
}
input,
select,
textarea,
.contenteditable {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif, 'FontAwesome';
	font-size: 1em;
	padding: calc(0.25em + 1px) calc(0.5em + 1px);
	border-radius: 4px;
	border: 1px solid var(--textBoxBorder);
	font-weight: 400;
	color: var(--darkText);
}
.contenteditable {
	cursor: text;
	background-color: #ffffff;
	padding-bottom: 1.5em;
}
.contenteditable.empty {
	content: attr(data-text);
	color: var(--textPlaceholder);
}
input::placeholder {
	color: var(--textPlaceholder);
}
textarea {
	resize: none;
	height: 0;
	min-height: 3.5em;
	max-height: 10em;
}
header {
	width: 100%;
	height: auto;
	background-color: var(--accentDark);
	color: var(--mainText);
	box-shadow: var(--shadow);
}
.header-container {
	position: relative;
}
header .app-logo {
	vertical-align: middle;
	box-sizing: border-box;
	padding: 0 12px;
	display: inline-block;
}
header .app-logo img {
	vertical-align: middle;
	height: 4em;
	width: auto;
}
header .app-name {
	font-family: var(--accentFont);
	font-weight: var(--accentFontWeight);
	font-size: 2em;
	vertical-align: middle;
	display: inline-block;
}
.login-container {
	box-sizing: border-box;
	width: max-content;
	height: 4em;
	display: inline-block;
	position: absolute;
	right: 0;
	margin-right: calc(1em - 4px);
	vertical-align: middle;
}
.login-box {
	background-color: var(--loginBackground);
	padding: 2px;
	box-sizing: border-box;
	width: max-content;
	border-radius: 4px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	cursor: pointer;
}
a.login-box:hover,
a.login-box:active {
	text-decoration: none;
}
.login-profilepicture {
	background-color: var(--accentDark);
	height: max-content;
	width: max-content;
	border-radius: 3px;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin-right: 2px;
}
.login-profilepicture img {
	height: 2em;
	width: 2em;
}
.login-pseudo-shadow {
	height: 2em;
	width: 2em;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: inset var(--shadow);
}
.login-inlaid-text {
	background-color: var(--accentDark);
	transition: background-color var(--buttonTransitionStyle);
	height: 2em;
	vertical-align: middle;
	display: inline-block;
	line-height: 2em;
	padding: 0 0.5em;
	box-shadow: inset var(--shadow);
	border-radius: 3px;
}
.login-box:hover .login-inlaid-text {
	background-color: var(--loginHoverBackground);
}
.login-dropdown-toggle {
	vertical-align: middle;
	margin-left: 2px;
}
.login-expanded {
	width: max-content;
	position: absolute;
	top: calc(3em + 6px);
	right: 0;
	background-color: var(--loginBackground);
	padding: 2px;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: var(--shadow);
}
.login-expanded ul {
	background-color: var(--accentDark);
	border-radius: 3px;
	box-sizing: border-box;
	margin: 0;
	padding: 4px;
}
.login-expanded li {
	list-style: none;
	padding: 6px 12px;
}
.login-expanded li:nth-child(n+2) {
	border-top: rgba(255, 255, 255, 0.1) dashed 2px;
}
.content {
	box-sizing: border-box;
	padding: 8px;
}
.content-block-container {
	display: flex;
}
.content-block {
	display: block;
	width: 100%;
	margin: 8px;
	padding: 8px;
	background-color: var(--contentBackgroundColor);
	box-shadow: var(--shadow);
	box-sizing: border-box;
}
.content-header {
	font-family: 'Montserrat', sans-serif, 'FontAwesome';
	font-size: 1.5em;
	display: block;
	padding: 8px;
}
.content-header-extra {
	font-size: 0.5em;
	vertical-align: middle;
	margin-left: 0.5em;
	color: var(--lightText);
}
.content-text {
	display: block;
	padding: 8px;
}
ul.server-list {
	padding: 0;
	margin: 0;
}
ul.server-list li {
	list-style: none;
	display: inline-block;
	width: calc(100% / 6);
	vertical-align: top;
	box-sizing: border-box;
	padding: 8px;
}
.server-list-item {
	padding: 4px;
	box-sizing: border-box;
	background-color: var(--contentHighlightBackgroundColor);
	display: block;
	box-shadow: var(--shadow);
	border-radius: 8px;
}
.server-list-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 4px;
	box-shadow: var(--shadow);
}
.server-list-item span {
	padding: 4px;
	display: block;
	word-break: break-word;
}
.server-list-item:hover span {
	text-decoration: underline;
}
.list-two-cols {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0;
}
.list-two-cols>li {
	width: 50%;
	display: inline-block;
	font-size: initial;
}
.list-two-cols>li:nth-child(1) {
	width: 100%;
}
.list-vertical {
	list-style: none;
	margin: 0;
	padding: 0;
}
.list-vertical>li {
	box-sizing: border-box;
	padding: 8px;
}
.list-box-container {
	width: 100%;
	height: auto;
	display: block;
	padding: 8px;
	box-sizing: border-box;
}
.list-box {
	width: 100%;
	height: auto;
	background-color: var(--contentSuperDark);
	overflow-x: auto;
	box-shadow: inset var(--shadow);
	padding: 8px;
	box-sizing: border-box;
	position: relative;
	overflow-y: hidden;
}
.list-box table {
	width: 100%;
	border-collapse: collapse;
	min-height: 10em;
}
.list-box table tr td {
	padding: 8px;
	box-sizing: border-box;
	white-space: nowrap;
}
.list-box table tr td:nth-child(2) {
	white-space: normal;
	width: 100%;
}
.list-box table tr:nth-last-child(1) td {
	text-align: center;
}
.list-box table .button:nth-child(n+2) {
	margin-left: 1em;
}
.list-box-warning {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
}
.list-box-warning-inner {
	display: block;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.list-box-warning-inner span:nth-child(1) {
	font-size: 1.2em;
}
.list-box-warning-inner span {
	color: var(--redText);
	display: block;
	margin-bottom: 1em;
}
.discord-message-container {
	transform: none;
}
.discord-message {
	transform: none;
}
.discord-message>img {
	transform: none;
}
.discord-message-header {
	transform: none;
}
.discord-message-body {
	transform: none;
}
.pseudo-footer {
	width: 100%;
	height: 0;
	display: block;
}
footer {
	width: 100%;
	height: auto;
	padding: 16px 32px;
	box-sizing: border-box;
	background-color: var(--accentDark);
	color: var(--mainText);
	display: block;
	position: absolute;
	bottom: 0;
	overflow-y: hidden;
	box-shadow: var(--shadow);
}
.footer-rows {
	display: block;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-rows>li {
	display: block;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-cols {
	display: block;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-cols>li {
	display: inline-block;
	text-align: center;
	list-style: none;
	margin: 8px 24px;
	padding: 0;
}
.footer-copyright {
	font-family: var(--accentFont);
	font-weight: var(--accentFontWeight);
	font-size: 1.2em;
}
.overlay-container {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--overlayTransparency);
	padding: 32px;
	box-sizing: border-box;
	cursor: pointer;
}
.overlay-inner {
	cursor: auto;
	background-color: var(--contentBackgroundColor);
	color: var(--mainText);
	padding: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: 800px;
	height: auto;
	max-height: 100%;
	border-radius: 8px;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow);
	overflow-y: auto;
}
.overlay-title {
	font-family: 'Montserrat', sans-serif, 'FontAwesome';
	font-size: 1.5em;
	display: block;
	padding: 8px;
	text-align: center;
}
.overlay-body-text {
	display: block;
	margin-top: 1em;
	margin-bottom: 0.5em;
}
@media screen and (max-width: 1232px) {
	.content {
		padding: 8px 0;
	}
	.content-block {
		margin: 8px 0;
	}
}
@media screen and (max-width: 1050px) {
	ul.server-list li {
		width: calc(100% / 5);
	}
}
@media screen and (max-width: 850px) {
	ul.server-list li {
		width: calc(100% / 4);
	}
}
@media screen and (max-width: 650px) {
	.app-name {
		display: none !important;
	}
	ul.server-list li {
		width: calc(100% / 3);
	}
	.list-two-cols>li {
		width: 100%;
	}
}
@media screen and (max-width: 500px) {
	ul.server-list li {
		width: calc(100% / 2);
	}
}
@media screen and (max-width: 350px) {
	ul.server-list li {
		width: 100%;
	}
}