/*********************************************************
 * Links
 *********************************************************/

a, .ilink {
	color: #224488;
}
a:where(:hover) {
	color: #608ede;
}
a:where(:visited), .ilink.yours {
	color: #772266;
}
a:where(:visited:hover), .ilink.yours:hover {
	color: #ac4998;
}
.dark a, .dark .ilink, .dark summary:hover:has(a:hover) span.ilink {
	color: #81AAF2;
}
.dark a:where(:hover) {
	color: #CCDDFF;
}
.dark a:where(:visited), .dark .ilink.yours {
	color: #AA81F2;
}
.dark a:where(:visited:hover), .dark .ilink.yours:hover {
	color: #c2a4f6;
}
/* make button ilinks look like links */
button.ilink {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	outline: 0;
	font: inherit;
}

/* basically a normal link but with no underline when not hovered, for when underlines are too spammy */ 
.ilink, summary:hover:has(a:hover) span.ilink {
	text-decoration: none;
	color: #224488;
}
.ilink:hover, summary:hover span.ilink {
	text-decoration: underline;
	color: #6688CC;
}
summary:hover span.ilink {
	text-decoration: underline;
	color: #6688CC;
}

.subtle, .dark .subtle {
	text-decoration: none;
	color: inherit;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}
button.subtle {
	font: inherit;
}
.subtle:hover {
	text-decoration: underline;
	color: #6688CC;
}

.blocklink {
	display: block;
	margin: 2px 7px 4px 7px;
	padding: 1px 4px 2px 4px;
	border: 1px solid #BBCCDD;
	background: rgba(248, 251, 253, 0.5);

	border-radius: 4px;
	text-decoration: none;
	color: #336699;
	text-shadow: #ffffff 0px -1px 0;
	cursor: pointer;
	font-size: 10pt;

	overflow: hidden;
	white-space: nowrap;
}
.blocklink small {
	font-size: 8pt;
}
.blocklink:hover, .blocklink.cur {
	border-color: #778899;
	background: #E5EAED;
	color: #224466;
	text-decoration: none;
}
.blocklink:active, .blocklink.cur {
	background: #d6dfe4;
}
.dark .blocklink {
	box-shadow: none;
	text-shadow: none;
	border-color: #526c87;
	background: rgba(30, 40, 50, .5);
	color: #7799BB;
}
.dark .blocklink:hover, .dark .blocklink.cur {
	border-color: #AACCEE;
	background: rgba(30, 40, 50, 1);
	color: #AACCEE;
}
.dark .blocklink:active, .dark .blocklink.cur {
	background: rgb(40, 52, 63);
}

/*********************************************************
 * Buttons
 *********************************************************/

a, button, summary {
	cursor: pointer;
	touch-action: manipulation;
}
button:disabled {
	cursor: default;
}

.button {
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
	box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
	border-radius: 5px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	display: inline-block;

	/* default colors */
	color: #222222;
	text-shadow: 0 1px 0 white;
	border: 1px solid #AAAAAA;
	background: #e3e3e3;
	background: linear-gradient(to bottom,  #f6f6f6,  #d3d3d3);

	font-size: 9pt;
	padding: 3px 8px;
}
select.button {
	text-align: left;
}
select.base-select, select.base-select::picker(select) {
	appearance: base-select;
}
select.base-select {
	width: fit-content;
}
select.base-select::picker-icon {
	margin-left: 2px;
	display: inline;
}
.base-select::picker(select) {
	text-align: left;
	background: #E1E8E8;
	color: black;
	border: 1px solid #999999;

	padding: 2px 4px;
	border-radius: 6px;
	box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #DDDDDD, 2px 2px 3px rgba(0,0,0,.2);
}
.dark .base-select::picker(select) {
	background: #0D151E;
	color: #DDD;
	border-color: #34373b;

	box-shadow: 2px 2px 3px rgba(0,0,0,.5), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
}

.button option,
.button optgroup,
.select option,
.select optgroup {
	background: #f6f6f6;
	color: #222222;
}
.button:hover, .button:active {
	background: #cfcfcf;
	background: linear-gradient(to bottom,  #f2f2f2,  #b2b2b2);
	border-color: #606060;
}
.button:active {
	background: linear-gradient(to bottom,  #bfbfbf,  #f2f2f2);
}

.button.notifying {
	border-color: #AA8866;
	background: #e3c3a3;
	background: linear-gradient(to bottom, #f6d6b6, #d3b396);
}
.button.notifying:hover {
	border-color: #604020;
	background: #cfaf8f;
	background: linear-gradient(to bottom, #f2c6a6, #b28e6e);
}
.button.notifying:active {
	background: #b28e6e;
	background: linear-gradient(to bottom, #b28e6e, #f6d6b6);
}
.button.alt-notifying {
	border-color: #669caa;
	background: #a3d0e3;
	background: linear-gradient(to bottom, #daf2fc, #a3d0e3);
}
.button.alt-notifying:hover {
	border-color: #406070;
	background: #8fb2cf;
	background: linear-gradient(to bottom, #daf2fc, #8fb2cf);
}
.button.alt-notifying:active {
	background: #8fb2cf;
	background: linear-gradient(to bottom, #8fb2cf, #daf2fc);
}
.button.subtle-notifying {
	color: #AA6600;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active,
.button:disabled,
.button:disabled:hover,
.button:disabled:active,
.button.cur,
.button.cur:hover {
	cursor: default;
	background: #EEEEEE;
	border-color: #CCCCCC;
	color: #999999;
	text-shadow: none;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.button.cur,
.button.cur:hover,
.button.cur:disabled,
.button.cur:disabled:hover {
	background: #f8f8f8;
	color: #444444;
	border-color: #AAAAAA;
}

.button-first, .button-middle {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.button-last, .button-middle {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -1px;
}
.button-first:hover, .button-middle:hover {
	/* puts the right-border over the left border of the button to the right of it */
	position: relative;
}
.button-first.cur:hover, .button-middle.cur:hover {
	position: static;
}

.dark .button {
	background: #2b2c31;
	background: linear-gradient(to bottom, #393d46, #2b2c31);
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
	border-color: #34373b;
	text-shadow: none;
	color: #F9F9F9;
}
.dark .button:hover {
	background: #3e4149;
	background: linear-gradient(to bottom, #646877, #3e4149);
	border-color: #50555b
}
.dark .button:active {
	background: #2b2c31;
	background: linear-gradient(to bottom, #2b2c31, #4e525a);
	border-color: #34373b;
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
}
.dark .button option,
.dark .button optgroup,
.dark .select option,
.dark .select optgroup {
	/* Chrome/Win does this thing where it takes <select> styling and applies it
	to options, which would be cool except it of course can't handle gradient
	backgrounds, and also can't fall back to the last non-gradient background,
	ending up with white text on the default white background. Very fortunately,
	styling <option> fixes this. */
	background: #2b2c31;
	color: #F9F9F9;
}

.dark .button.notifying {
	border-color: #34373b;
	background: #417589;
	background: linear-gradient(to bottom, #449cbf, #2b6d87);
}
.dark .button.notifying:hover {
	border-color: #34373b;
	background: #5499b4;
	background: linear-gradient(to bottom, #4fb7df, #398bac);
}
.dark .button.notifying:active {
	border-color: #34373b;
	background: #5499b4;
	background: linear-gradient(to bottom, #2b6d87, #4ebde9);
}
.dark .button.alt-notifying {
	border-color: #34373b;
	background: #502646;
	background: linear-gradient(to bottom, #713262, #502646);
}
.dark .button.alt-notifying:hover {
	border-color: #34373b;
	background: #713563;
	background: linear-gradient(to bottom, #9f468b, #713563);
}
.dark .button.alt-notifying:active {
	border-color: #34373b;
	background: #713563;
	background: linear-gradient(to bottom, #502646, #9f468b);
}
.dark .button.subtle-notifying {
	color: #72bcda;
}

.dark .button.disabled,
.dark .button.disabled:hover,
.dark .button.disabled:active,
.dark .button:disabled,
.dark .button:disabled:hover,
.dark .button:disabled:active,
.dark .button.cur,
.dark .button.cur:hover {
	background: #555555;
	border-color: #34373b;
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
	color: #999999;
}
.dark .button.cur,
.dark .button.cur:hover {
	background: #555555;
	color: #E9E9E9;
	border-color: #34373b;
}

.button.small {
	font-size: 8pt;
	padding: 2px 5px;
}
.button.big {
	font-size: 12pt;
	padding: 5px 10px;
}

/*********************************************************
 * Forms
 *********************************************************/

.dark {
	/* we already have custom scrollbars/buttons so this is really just checkboxes */
	color-scheme: dark;
}

.label {
	font-size: 9pt;
	font-weight: bold;
	display: block;
}
.optlabel {
	font-size: 9pt;
	display: block;
}
.value {
	float: right;
}
.checkbox {
	background: transparent;
	color: inherit;
	border: 0 none;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	display: block;
	cursor: pointer;
	padding: 2px 6px 2px 2px;
	border-radius: 4px;
}
.checkbox img {
	vertical-align: middle;
}
.checkbox input {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	cursor: pointer;
}
.checkbox i {
	font-size: 12pt;
	vertical-align: -2px;
	margin: 0 2px;
}
.checkbox:hover {
	background: #D5D5D5;
	color: black;
	text-shadow: none;
}
.dark .checkbox:hover,
.menugroup .checkbox:hover {
	background: #383838;
	color: white;
}
.label strong,
.label .labeled {
	font-size: 11pt;
}
.label .textbox,
.label .button,
.label strong,
.label .labeled {
	margin-top: 2px;
	display: block;
}
.label .labeled {
	font-weight: normal;
}
.textbox {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 9pt;
	padding: 2px 3px;
	border-radius: 3px;
}
.textbox,
.textbox-subtle[data-changed="1"],
textarea.textbox-subtle:empty,
input.textbox-subtle[value=""] {
	border: 1px solid #AAAAAA;

	box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
	background: #F8FBFD;
	color: black;
}
textarea.textbox {
	display: block;
	width: 100%;
	box-sizing: border-box;
	resize: none;
	field-sizing: content;
	overflow-wrap: break-word;
}
pre.textbox {
	white-space: pre-wrap;
}
.textbox tt {
	color: #3388CC;
}
.textbox tt.message-cmd {
	color: #1a5f97;
}
.dark .textbox tt.message-cmd {
	color: #86b7df;
}
.textbox:hover {
	border-color: #474747;
	box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
	background: #FFFFFF;
}
.textbox:focus {
	outline: 0 none;
	border-color: #004488;
	box-shadow: inset 0px 1px 2px #D2D2D2, 0px 0px 6px #2266AA;
}
.textbox:focus {
	background: #FFFFFF;
}
.textbox.disabled, .textbox:disabled {
	background: #CCCCCC;
	color: #555555;
}
.textbox::-webkit-search-cancel-button {
	cursor: pointer;
}
.dark .textbox,
.dark .textbox-subtle[data-changed="1"],
.dark textarea.textbox-subtle:empty,
.dark input.textbox-subtle[value=""] {
	border-color: #6b7178;

	/* box-shadow: inset 0px -1px 2px #606060, -1px -1px 0 rgba(255,255,255,.2); */
	box-shadow: inset 0.5px 1px 2px rgba(0, 0, 0, 1), inset -0.5px -1px 1px rgba(255, 255, 255, 0.2), -0.5px -1px 1px rgba(255, 255, 255, 0.1);
	background: #222527;
	color: #DDD;
}
.dark .textbox:hover {
	border-color: #8d959f;
	box-shadow: inset 0.5px 1px 2px rgba(0, 0, 0, 0.8), inset -0.5px -1px 1px rgba(255, 255, 255, 0.5), -0.5px -1px 1px rgba(255, 255, 255, 0.1);
	background: #111111;
}
.dark .textbox:focus {
	outline: 1px solid #6295bc;
	border-color: #9199a2;
	/* box-shadow: 0px 0px 4px #88CCFF, 0px 0px 6px #88CCFF; */
}
.dark .textbox:focus {
	background: #111111;
	/* box-shadow: inset 0.5px 1px 2px rgba(0, 0, 0, 0.8), inset -0.5px -1px 1px rgba(255, 255, 255, 0.5), 0px 0px 4px #88CCFF, 0px 0px 6px #88CCFF; */
}
.dark .textbox.disabled, .dark .textbox:disabled {
	opacity: 0.7;
	color: #AAA;
	border-color: #444;
	box-shadow: none;
}

.textbox-subtle,
.dark .textbox-subtle {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

/* like <input type="text"> but with dynamic size */
textarea.textbox.textbox-singleline {
	display: inline-block;
	width: auto;
	max-width: 100%;
	field-sizing: content;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	vertical-align: middle;
}

.option, .base-select option {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 2px 5px;
	margin: 0;
	font-size: 9pt;
	font-family: Verdana, sans-serif;
	text-align: left;
	overflow: hidden;
}
.base-select option {
	padding: 0 4px;
}
.option.sel, .option.cur, .base-select option:checked {
	border-color: #999999;
}
.option:hover,
.option.sel:hover,
.option.cur:hover,
.base-select option:hover {
	border-color: #888888;
	background-color: #D5D5D5;
	color: black;
}
.base-select option::checkmark {
	display: none;
}

.dark .option, .dark .base-select option {
	background: transparent;
	color: #DDD;
	box-shadow: none;
}
.dark .option:hover,
.dark .option.sel:hover,
.dark .option.cur:hover,
.dark .base-select option:hover {
	border-color: #777777;
	background-color: rgba(100, 100, 100, 0.5);
	color: #FFFFFF;
}

hr {
	border-top: 1px solid #999999;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
}

.dark hr {
	border-color: #707070;
}

select {
	font-size: 9pt;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

input[type=range] {
	appearance: auto;
	-webkit-appearance: none;
	-moz-appearance: revert;
	cursor: pointer;
	height: 18px;
	background: transparent;
	/* no clue why this isn't the default... */
	touch-action: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 300px;
	height: 5px;
	background: #F8FBFD;
	border: 1px solid #AAAAAA;
	border-radius: 3px;

	box-shadow: inset 0px 1px 1px #DDD, 1px 1px 0 rgba(255,255,255,.6);
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 18px;
	width: 18px;
	border-radius: 9px;
	margin-top: -7px;

	box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
	border: 1px solid #777;
	background: #e3e3e3;
	background: linear-gradient(to bottom,  #f6f6f6,  #e3e3e3);

	cursor: grab;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]:hover::-webkit-slider-runnable-track {
	border: 1px solid #999;
}
input[type=range]:hover::-webkit-slider-thumb {
	background: #cfcfcf;
	background: linear-gradient(to bottom,  #f2f2f2,  #c2c2c2);
	border-color: #606060;
}
input[type=range]:focus::-webkit-slider-thumb {
	border-color: #004488;
	box-shadow: inset 0px -1px 2px #D2D2D2, 0px 0px 6px #2266AA;
}
input[type=range]:active::-webkit-slider-thumb {
	background: #DDD;
	cursor: grabbing;
}

.dark input[type=range]::-webkit-slider-runnable-track {
	box-shadow: inset 0px 1px 1px #DDD;
}

@media (min-width: 500px) {
	/** stolen from devdocs.io */
	.dark:not(.native-scrollbars) *::-webkit-scrollbar {
		-webkit-appearance: none
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar:vertical {
		width: 16px
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar:horizontal {
		height: 16px
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-button,.dark:not(.native-scrollbars) *::-webkit-scrollbar-corner {
		display: none
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-track {
		background: transparent;
		border: 1px solid transparent;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-track:hover {
		background: #24282a;
		border-color: #000000;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-track:vertical {
		border-width: 0 0 0 1px;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-track:vertical:corner-present {
		border-width: 0 0 1px 1px;
		border-radius: 0 0 0 2px;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-track:horizontal {
		border-width: 1px 1px 0 1px;
		border-radius: 2px 2px 0 0;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-thumb {
		min-height: 2rem;
		background: #6c6c6f;
		background-clip: padding-box;
		border: 5px solid transparent;
		border-radius: 10px;
	}
	.dark:not(.native-scrollbars) *::-webkit-scrollbar-thumb:hover,.dark:not(.native-scrollbars) *::-webkit-scrollbar-thumb:active {
		background-color: #949697;
		border-width: 4px;
	}
}

.select, .team {
	padding: 4px 22px 4px 8px;
	font-size: 9pt;
	text-align: left;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-decoration: none;
	cursor: pointer;

	border-radius: 4px;
	border: 1px solid #888888;
	background: #EEEEEE;
	box-shadow: inset 0 1px 0 #FFFFFF;
	background: linear-gradient(to bottom,  #edf2f8,  #d7e3ec);
	color: black;
	box-sizing: border-box;

	position: relative;
}
.dark .select, .dark .team {
	border-color: #34373b;
	box-shadow: none;
	background: linear-gradient(to bottom, #5a6169, #3e444d);
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
	color: white;
}
.select:hover, .select:hover .team, a.team:hover, button.team:hover {
	border-color: #555555;
	background: #FFFFFF;
	background: linear-gradient(to bottom,  #dce4ec,  #c6d3e0);
}
.select:active, .select:active .team, a.team:active, button.team:active {
	border-color: #777777;
	background: #DDDDDD;
	box-shadow: none;
	background: linear-gradient(to bottom,  #bbc4cd,  #e7edf2);
}
.dark .select:hover, .dark .select:hover .team, .dark a.team:hover, .dark button.team:hover {
	border-color: #34373b;
	background: #FFFFFF;
	color: white;
	background: linear-gradient(to bottom, #6b737e, #4a5057);
}
.dark .select:active, .dark .select:active .team, .dark a.team:active, .dark button.team:active {
	border-color: #34373b;
	box-shadow: none;
	background: linear-gradient(to bottom, #4a5057, #8f98a1);
}
@supports (content-visibility: auto) {
	.dark .team small {
		filter: drop-shadow(0px 1px 0px #8f98a1);
	}
}

select.select {
	padding: 3px 4px;
}
.label .select {
	margin-top: 2px;
	display: block;
}
select.select.base-select {
	padding: 4px 22px 4px 8px;
}
.select:before {
	position: absolute;
	top: 50%;
	right: 6px;
	margin-top: -7px;
	padding: 0;

	font-size: 14px;
	content: "\f0d7";
	font-family: FontAwesome;
	-webkit-font-smoothing: antialiased;
	color: #777777;
}
select.select::picker-icon {
	display: none;
}
.dark .select:before {
	color: #cccccc;
}
.select:disabled, .select:disabled:hover {
	border-color: #999999;
	background: rgba(220,220,220,.65);
	color: #555555;
	box-shadow: none;
}
.dark .select:disabled, .dark .select:disabled:hover {
	border-color: #888;
	background: rgba(90,90,90,.65);
	color: #BBB;
	box-shadow: none;
}
.select:disabled .team, .select:disabled:hover .team, .select:disabled:active .team {
	border-color: #999999;
	cursor: default;
}
.dark .select:disabled .team, .dark .select:disabled:hover .team, .dark .select:disabled:active .team {
	border-color: #888888;
}
.select:disabled:before {
	color: #AAAAAA;
}
.dark .select:disabled:before {
	color: #888888;
}
.select.preselected,
.select:disabled.preselected {
	color: black;
}
.dark .select.preselected,
.dark .select:disabled.preselected {
	color: white;
}

/*********************************************************
 * Team tiles
 *********************************************************/

/* UNSUPPORTED: Unlike most CSS in here, we make no guarantees
that we won't change how team tile CSS works. Don't depend on
this. */

.team {
	width: 300px;
	min-height: 49px;
	height: auto;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}
/* team name */
.team strong {
	display: block;
	font-size: 8pt;
	text-align: center;
	height: 13px;
	padding: 2px 0 0 0;
	margin: 0;
}
.dark .team strong {
	color: #ddd;
	text-shadow: 0px -1px 0px #3b3c41;
}
.team strong span {
	font-weight: normal;
}
/* team icons */
.team small {
	display: block;
	width: 220px;
	min-height: 30px;
	padding: 0 0 2px;
	margin: 0 auto;
	white-space: normal;
}
.team.pc-box small {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
	min-height: 60px;
}
.team small .picon {
	margin-right: -4px;
}
.select:disabled small {
	opacity: 0.7;
}
/* empty team message */
.team em {
	display: block;
	text-align: center;
	padding-top: 7px;
}
.inline {
	display: inline-block;
	vertical-align: middle;
}

/*********************************************************
 * Table
 *********************************************************/

.table-header {
	position: relative;
	position: sticky;
	top: 0;
}
.ladder table, .ladder td, .ladder th,
.table, .table td, .table th {
	border-collapse: collapse;
	border: 1px solid #BBBBBB;
}
.ladder td, .ladder th,
.table td, .table th {
	padding: 3px 5px;
}
.ladder th, .table th {
	text-align: left;
	font-size: 9pt;
	background: #EEEEEE;
	color: #111111;
}

.hidden {
	display: none;
}

/*********************************************************
 * Everything else
 *********************************************************/

.message-log h2 {
	margin: 0 -8px 6px;
	padding: 4px 8px;
	border: 1px solid #AAAAAA;
	background: #E0E7EA;
	border-left: 0; border-right: 0;
	font-family: Verdana, sans-serif;
	font-size: 13pt;
}
.dark .message-log h2 {
	background: #555555;
	border-color: #5A5A5A;
}
.chat, .notice {
	vertical-align: middle;
	padding: 3px 0 3px 0;
	font-size: 9pt;
}
.highlighted {
	background: rgba(255,200,80,0.33);
}
.dark .highlighted {
	background: rgba(120,220,255,0.28);
}
.chat.highlighted {
	margin-left: -8px;
	margin-right: -8px;
	padding-left: 8px;
	padding-right: 8px;
}
.chat > strong { /* username, changed rating */
	color: #40576A;
}
.dark .username {
	filter: brightness(1.2);
}
.chat > em,
.chat > q { /* user's chat message */
	padding: 0 4px 0 3px;
	font-style: normal;
}
.chat > q:before,
.chat > q:after {
	content: '';
}
.dark .chat > strong, /* username, changed rating */
.dark .battle-log .chat > em, /* user's chat message */
.dark .battle-log .chat > q {
	color: #8097BA;
}

.chat small {
	font-weight: normal;
	font-size: 8pt;
}
.chat strong small, /* <- for old client */
.groupsymbol, .gray {
	color: #888888;
}
.chat.timer {
	color: #992222;
}

.chat.mine {
	background: rgba(0,0,0,0.07);
	margin-left: -8px;
	margin-right: -8px;
	padding-left: 8px;
	padding-right: 8px;
}
.dark .chat.mine {
	background: rgba(255,255,255,0.05);
}
.spoiler {
	color: #BBBBBB;
	background: #BBBBBB;
	padding: 0px 3px;
}
.spoiler:hover,
.spoiler:active,
.spoiler-shown {
	color: #000000;
	background: #E2E2E2;
	padding: 0px 3px;
}
.spoiler a {
	color: #BBBBBB;
}
.spoiler:hover a,
.spoiler:active a,
.spoiler-shown a {
	color: #2288CC;
}
.dark .spoiler {
	color: #777;
	background: #777;
}
.dark .spoiler:hover,
.dark .spoiler:active,
.dark .spoiler-shown {
	color: #DDD;
	background: #444;
}
.dark .spoiler a {
	color: #777;
}
.dark .spoiler:hover a,
.dark .spoiler:active a,
.dark .spoiler-shown a {
	color: #4488EE;
}
.spoiler code {
	border-color: #BBBBBB;
	background: #BBBBBB;
	color: #BBBBBB;
}
code, .code, kbd,
.spoiler:hover code,
.spoiler:active code,
.spoiler-shown code {
	font-family: monospace;
	border: 1px solid #C0C0C0;
	background: #EEEEEE;
	color: black;
	padding: 0 2px;
	tab-size: 4;
}
kbd {
	font-size: 90%;
	padding: 0 4px;
	border-radius: 4px;
	border-width: 1px 3px 3px;
	border-color: #CCC #BBB #AAA;
}

details.readmore summary, details.details summary {
	display: block;
	list-style: none;
}
details.readmore summary::-webkit-details-marker details.details summary::-webkit-details-marker {
	display: none;
}
details.readmore summary:after, details.readmore summary:hover:has(a:hover):after {
	content: '[read more]';
	font-family: Verdana, sans-serif;
	margin-left: 0.5em;
	text-decoration: none;
	color: #888;
}
details.readmore summary:hover:after {
	text-decoration: underline;
	color: #68B;
}
details.readmore[open] summary:after {
	content: '';
}
details.readmore[open] summary:before {
	float: right;
	visibility: hidden;

	content: "\f056";
	display: block;
	font: normal normal normal 16px / 1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #999;
}
details.readmore[open] summary:hover:before {
	visibility: visible;
}
details.readmore.code {
	display: table;
	min-width: 80px;
}
details[open] .details-preview {
	display: none;
}

.details summary:hover, .readmore summary:hover {
	background: rgba(119, 153, 187, 0.15);
}
.details summary:hover:has(a:hover), .readmore summary:hover:has(a:hover) {
	background: transparent;
}
.fa.expandbutton, summary:hover:has(a:hover) .fa.expandbutton {
	font-size: 16px;
	width: 9px;
	text-align: right;
	color: #999;
}
details[open] .expandbutton.fa-plus-circle:before {
	content: "\f056";
}
details[open] .expandbutton.fa-caret-right:before {
	content: "\f0d7";
}
.details summary:before {
	width: 9px;
	text-align: right;

	content: "\f0da";
	margin-right: 5px;
	display: inline-block;
	font: normal normal normal 16px / 1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #999;
}
.details[open] summary:before {
	content: "\f0d7";
}
.details summary:hover:before {
	color: #333333;
}
.dark .details summary:hover:before {
	color: #CCCCCC;
}

.greentext {
	color: #187902;
}
.dark .greentext {
	color: #60BF10;
}
.dark .spoiler code {
	border-color: #777;
	background: #777;
	color: #777;
}
.dark code, .dark .code, .dark kbd,
.dark .spoiler:hover code,
.dark .spoiler:active code,
.dark .spoiler-shown code {
	border-color: #555;
	background: #333;
	color: #DDD;
}
.dark kbd {
	background: #555;
	border-color: #666 #333 #111;
}
.stat-boosted {
	color: #117911;
}
.stat-lowered {
	color: #991111;
	font-weight: normal;
}
.message-log .rated {
	padding: 3px 4px;
}
.message-log .rated strong {
	color: white;
	background: #89A;
	padding: 1px 4px;
	border-radius: 4px;
}
.spacer {
	margin-top: 6px;
	font-size: 2px;
}
.message-announce {
	background: #6688AA;
	color: white;
	padding: 1px 4px 2px;
}
.message-announce a,
.broadcast-green a,
.broadcast-blue a,
.broadcast-red a {
	/* Readable link colour */
	color: #CCDDFF;
}
.message-announce a:hover,
.broadcast-green a:hover,
.broadcast-blue a:hover,
.broadcast-red a:hover {
	/* Readable link colour */
	color: #DDEEFF;
}
.broadcast-green, .broadcast-blue, .broadcast-red {
	background-color: #559955;
	color: white;
	padding: 2px 4px;
	border-radius: 4px;
}
.broadcast-blue {
	background-color: #6688AA;
}
.broadcast-red {
	background-color: #AA5544;
}
.infobox {
	border: 1px solid #7799BB;
	padding: 2px 4px;
	border-radius: 4px;
	overflow-x: auto;
}
.dark .infobox {
	border-color: #627d97;
}
.infobox-limited {
	max-height: 200px;
	overflow: auto;
}
.message-learn-canlearn {
	font-weight: bold;
	color: #228822;
	text-decoration: underline;
}
.message-learn-cannotlearn {
	font-weight: bold;
	color: #CC2222;
	text-decoration: underline;
}
.message-effect-weak {
	font-weight: bold;
	color: #CC2222;
}
.message-effect-resist {
	font-weight: bold;
	color: #6688AA;
}
.message-effect-immune {
	font-weight: bold;
	color: #666666;
}
.message-learn-list {
	margin-top: 0;
	margin-bottom: 0;
}
.message-throttle-notice,
.message-error {
	color: #992222;
}
.dark .message-error {
	color: #EF4333;
}
.message-warning {
	color: #cb6619;
}
.dark .message-warning {
	color: #ef8e33;
}
.message-overflow,
.chat small.message-overflow {
	font-size: 0pt;
}
.message-overflow::before {
	font-size:9pt;
	content: '...';
}

/*********************************************************
 * <blink>
 *********************************************************/

/* exists for April Fool's jokes; please do not use this seriously */

@-webkit-keyframes blinker {
	from { opacity: 1.0; }
	to { opacity: 0.0; }
}
@keyframes blinker {
	from { opacity: 1.0; }
	to { opacity: 0.0; }
}
blink {
	-webkit-animation-name: blinker;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	-webkit-animation-duration: 1s;
	animation-name: blinker;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(1.0,0,0,1.0);
	animation-duration: 1s;
	text-decoration: none;
}