#player_list_container {
	width: 450px;
	margin: 0 auto;
	float: left;
	display: flex;
	flex-direction: column;
	height: 100%;
}
#player_list_content, #chat_content {
	display: flex;
	flex-direction: column;
	position: relative;
}
#player_list_content {
	flex: 0 0 auto; /* no flex, always full height */
}
#chat_content {
	flex: 1 1 auto;
	min-height: 0;
}
#content.compact #chat_content {
	height: calc(100vh + 10px);
	min-height: calc(100vh + 10px);
}
#player_list_container > h2 {
	flex: 0;
}
#player_list_spacer {
	height: 22px; /* because the header is absolute positioned */
}
#player_table_container {
	overflow-y: auto;
	max-height: 400px;
}
#content.compact #player_table_container {
	overflow-y: initial;
	max-height: initial;
}
#content-container {
	height: calc(100% - 100px);
}

#content.wide #content-container {
	display: flex;
	flex-direction: row;
}
#content.wide #content-container #player_list_container {
	flex: 2 2 900px;
	max-width: 1000px;
}
#content.wide #content-container #map_list_container {
	flex: 1 1 550px;
}
#content.wide #player_list_container {
	flex: 1;
	margin: 0 auto;
	float: left;
	display: flex;
	flex-direction: row-reverse;
}
#content.wide .list_header_container {
	display: none;
}
#content.wide #player_list_container > #player_list_content {
	width: 450px;
}
#content.wide #player_table_container {
	height: 100%;
	max-height: none;
	background: none;
}
#content.wide #player_list_container > #chat_content {
	padding-right: 10px;
}
#content.wide #chat_box {
	margin-top: 0;
}
#content.wide #player_list_container > h2 {
	flex: 0;
}
.ptable_header {
	padding-left: 10px;
	padding-bottom: 5px;
	display: none;
}
.webtable_header {
	margin-top: 30px;
}
#player_list2 {
	display: none;
	margin-top: 0px;
}
#content.wide #player_list2, #content.wide .ptable_header {
	display: block;
}

#content.compact #player_list_container {
	width: 100%;
	padding-bottom: 10px;
	height: initial;
}
#content.compact #player_list_content {
	margin: 0 auto;
}
#content.compact #map_list_container {
	width: 100%;
	padding-bottom: 10px;
}
#content.compact #active_maps {
	padding-bottom: 15px;
}
#content.compact #active_maps {
	padding-bottom: 15px;
}

#content.compact #login_but {
	position: relative;
	margin: 0 auto 20px auto;
	left: 0;
	display: block;
}

#content.hide_maps #map_list_container {
	width: 0px;
	flex: 0 !important;
	padding: 0;
	display: none;
}
#content.hide_maps #active_maps, #content.wide #active_maps {
	position: absolute;
	left: -5px;
	top: -205px;
	min-width: 460px;
}
#content.hide_maps #next_map_container, #content.wide #next_map_container {
	margin-left: 11px;
}
#content.hide_maps #player_list_content, #content.wide #player_list_content {
	margin-top: 205px;
}
#content.hide_maps.compact #player_list_content {
	margin: 205px auto 0 auto;
}
#content.wide #map_list_container {
	margin-left: 10px;
}
#content.wide #upcoming_maps_header {
	padding-top: 0px;
	margin-top: 0px;
}
#show_maps_button {
	display: none;
}
#content.hide_maps #show_maps_button {
	display: inline-block;
	margin: 0 auto 5px auto;
}
#content.compact #show_maps_button {
	margin-bottom: 20px;
}
#content.hide_maps #content-container #player_list_container {
	max-width: 1100px !important;
}
#content.hide_maps.compact #active_maps {
	position: relative;
	top: 0;
}
#content.hide_maps.compact #player_list_content {
	margin-top: 0px;
}

#content.flip:not(.compact) #content-container {
	display: flex;
	flex-direction: row-reverse;
}
#content.wide.flip #player_list_container {
	flex-direction: row;
}
#content.wide.flip #player_list_container > #chat_content {
	padding-left: 10px;
	padding-right: 0px;
}
#content.wide.flip #map_list_container {
	margin-right: 10px;
	margin-left: 0;
}

#content.noflags .cnflag {
	display: none;
}
#content.noavatars .avatar_container {
	display: none;
}

#content.no_compound_icons .client_os,
#content.no_compound_icons .client_engine,
#content.no_compound_icons .client_renderer {
	display: none;
}

#content.hide_web_joins .web_join_msg {
	display: none;
}

.player_list {
	width: 100%;
	border-collapse: collapse;
	font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: block;
	position: relative;
}
.player_list th {
	background: #2e1f00;
	height: 20px;
}
.player_list td:first-child, .player_list th:first-child {
	width: 215px;
	padding-left: 10px;
}
.player_list td:nth-child(2), .player_list th:nth-child(2) {
	width: 50px;
}
.player_list td:nth-child(3), .player_list th:nth-child(3) {
	width: 50px;
}
.player_list td:nth-child(4), .player_list th:nth-child(4) {
	width: 50px;
}
.player_list td:nth-child(5), .player_list th:nth-child(5) {
	width: 40px;
}
.player_list td:nth-child(6), .player_list th:nth-child(6) {
	width: 30px;
}
.player_list td:nth-child(7), .player_list th:nth-child(7) {
	width: 24px;
}
.player_list td:nth-child(8), .player_list th:nth-child(8) {
	width: 60px;
}
.player_list td:nth-child(9), .player_list th:nth-child(9) {
	width: 70px;
}
.player_list td:nth-child(10), .player_list th:nth-child(10) {
	width: 88px;
}
.player_list td:nth-child(11), .player_list th:nth-child(11) {
	width: 111px;
}
.player_list td:nth-child(12), .player_list th:nth-child(12) {
	width: 111px;
}
.player_list th {
	text-align: left;
}
.player_list tr:nth-child(odd) {
	background: #111;
}
.player_list tr:nth-child(even) {
	background: #222;
}
.player_list td {
	height: 20px;
}
.player_list div {
	text-decoration: none;
	color: #99CCFF;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 170px;
	display: inline-block;
	cursor: pointer;
	min-width: 5px;
	text-wrap: nowrap;
}
#content:not(.noflags) .player_list div {
	max-width: 128px;
}
.player_list div.bad_guy {
	color: #FF3F3F;
}
.player_list td.muted {
	opacity: 0.6;
}
.player_list div:hover {
	color: #D2E6FB;
}
.player_list div.bad_guy:hover {
	color: #FF9090;
}
.player_list tbody {
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.player_list .alive {
	color: #0d0;
}
.player_list .dead {
	color: red;
}
.player_list .spec {
	color: #aaa;
}
.player_list .longidle {
	color: #a0f;
}
.player_list .idle {
	color: #f80;
}
.player_list .shortidle {
	color: #ff0;
}
.player_list td:nth-child(8), .player_list th:nth-child(8),
.player_list td:nth-child(9), .player_list th:nth-child(9),
.player_list td:nth-child(10), .player_list th:nth-child(10),
.player_list td:nth-child(11), .player_list th:nth-child(11),
.player_list td:nth-child(12), .player_list th:nth-child(12) {
	display: none;
}
.player_list.stat_view td:nth-child(2), .player_list.stat_view th:nth-child(2),
.player_list.stat_view td:nth-child(3), .player_list.stat_view th:nth-child(3),
.player_list.stat_view td:nth-child(4), .player_list.stat_view th:nth-child(4),
.player_list.stat_view td:nth-child(5), .player_list.stat_view th:nth-child(5),
.player_list.stat_view td:nth-child(6), .player_list.stat_view th:nth-child(6),
.player_list.stat_view td:nth-child(7), .player_list.stat_view th:nth-child(7) {
	display: none;
}
.player_list.stat_view td:nth-child(8), .player_list.stat_view th:nth-child(8),
.player_list.stat_view td:nth-child(9), .player_list.stat_view th:nth-child(9),
.player_list.stat_view td:nth-child(10), .player_list.stat_view th:nth-child(10) {
	display: table-cell;
}
.player_list.web_users td:nth-child(2), .player_list.web_users th:nth-child(2),
.player_list.web_users td:nth-child(3), .player_list.web_users th:nth-child(3),
.player_list.web_users td:nth-child(4), .player_list.web_users th:nth-child(4),
.player_list.web_users td:nth-child(6), .player_list.web_users th:nth-child(6),
.player_list.web_users td:nth-child(5), .player_list.web_users th:nth-child(5),
.player_list.web_users td:nth-child(7), .player_list.web_users th:nth-child(7) {
	display: none;
}
.player_list.web_users td:nth-child(11), .player_list.web_users th:nth-child(11),
.player_list.web_users td:nth-child(12), .player_list.web_users th:nth-child(12) {
	display: table-cell;
}
.player_list.web_users_names div {
	color: #99FF99;
}
.player_list.web_users_names div:hover {
	color: #BAEEBA;
}
.player_list.web_users_names div.anon {
	color: #aaa;
	cursor: initial;
}
.player_list .client_icon_container {
	position: relative;
	height: 20px;
	display: inline-block;
}
.player_list .client_icon {
	height: 17px;
	top: 1px;
	position: relative;
}
.player_list .client_os {
	position: absolute;
	height: 7px;
	right: -6px;
	top: -1px;
}
.player_list .client_engine {
	position: absolute;
	height: 7px;
	right: -6px;
	top: 6px;
}
.player_list .client_renderer {
	position: absolute;
	height: 7px;
	right: -6px;
	top: 13px;
}

.player_list .vc_icon_container {
	display: inline-block;
	height: 17px;
	position: relative;
	cursor: pointer;
}
.player_list .vc_icon {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
}

.player_list .ping-very-low {
	color: #0f0;
}
.player_list .ping-low {
	color: #af0;
}
.player_list .ping-high {
	color: #ff0;
}
.player_list .ping-very-high {
	color: #f60;
}
.player_list .ping-horrible {
	color: #f00;
}


h2 {
	text-align: center;
	margin: 10px 0;
	font-size: 20px;
}

#content {
	padding: 0 10px;
	height: 100%;
}
#content.compact {
	padding: 0;
}
#active_maps {
	min-width: 500px;
	width: 100%;
	display: inline-block;
	text-align: center;
	flex: 0;
}
#content.compact #active_maps {
	min-width: 230px;
}
#current_map_container, #next_map_container, #next_map_arrow {
	display: inline-block;
	position: relative;
}
#current_map_container h2, #next_map_container h2 {
	font-size: 16px;
	margin-top: 1px;
}
#next_map_container {
	margin-left: 20px;
}
#upcoming_maps_grid {
	overflow-y: auto;
	background: #000;
	position: relative;
	z-index: 1;
	height: 100%;
}
#next_map_arrow div {
	margin: 90px 5px 0px 5px;
}

#map_list_container {
	margin: 0 auto;
	width: calc(100% - 470px);
	float: right;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}
.map_container {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 220px;
	height: 163px;
	text-align: center;
	background: #111;
	border: 1px solid #a80;
	position: relative;
	z-index: auto;
}
#content.wide .map_container, #content.hide_maps .map_container {
	width: 215px;
	height: 159px;
}
#content.compact .map_container, #content.hide_maps.compact .map_container {
	width: 150px;
	height: 111px;
}
.map_container img {
	border-top: 1px solid #a80;
}
.map_container.liked {
	filter: drop-shadow(0px 0px 4px #0f0);
}
.map_container.favorited {
	filter: drop-shadow(0px 0px 4px #0ff);
}
.map_container.disliked {
	filter: drop-shadow(0px 0px 4px #f00);
}
.map_container.liked.disliked {
	filter: drop-shadow(0px 0px 4px #f80);
}
.map_container.new:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 4px;
	right: 4px;
	bottom: 2px;
	background: linear-gradient(
		90deg,
		violet, red, orange, yellow, green, blue, indigo,
		violet, red, orange, yellow, green, blue, indigo,
		violet, red, orange, yellow, green, blue, indigo,
		violet, red, orange, yellow, green, blue, indigo,
		violet
	);
	filter: blur(1px);
	z-index: -1;
	transform: scale(1.1);
	pointer-events: none;
	background-size: 200%;
}
.map_container.new:hover::after {
	animation: scroll-gradient 2s linear infinite;
}
@keyframes scroll-gradient {
	0%   { background-position: 0%   50%; }
	100% { background-position: 100% 50%; }
}

.map_title {
	font-size: 16px;
	font-weight: bold;
	color: #FFAA00;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: inline-block;
	white-space: nowrap;
}
.map_image {
	max-width:100%;
	max-height:100%;
	width: 100%;
	height: 140px;
}
#content.wide .map_image, #content.hide_maps .map_image {
	height: 136px;
}
#content.compact .map_image {
	height: 84px;
}
.map_tags {
	font-size: 12px;
}

.like_button, .dislike_button, .fav_button {
	width: 40px;
	height: 48px;
	color: white;
	position: absolute;
	bottom: 2px;
	font-size: 32px;
	border: none !important;
	opacity: 0.0;
	z-index: 2;
}
.map_container:hover .like_button, .map_container:hover .dislike_button, .map_container:hover .fav_button {
	opacity: 0.4;
}
.map_container:hover .like_button:hover, .map_container:hover .dislike_button:hover , .map_container:hover .fav_button:hover {
	opacity: 1.0;
}
.like_button.own_rating, .dislike_button.own_rating, .fav_button.own_rating,
.map_container:hover .like_button.own_rating, .map_container:hover .dislike_button.own_rating, .map_container:hover .fav_button.own_rating  {
	opacity: 1.0;
}
.like_button.own_rating:hover, .dislike_button.own_rating:hover,
.map_container:hover .like_button.own_rating:hover, .map_container:hover .dislike_button.own_rating:hover , .map_container:hover .fav_button.own_rating:hover {
	opacity: 0.6;
}
.like_button {
	right: 0;
}
.fav_button {
	left: 50%;
	transform: translate(-50%, 0);
}
.dislike_button {
	left: 0;
}
#upcoming_maps .like_button, #upcoming_maps .dislike_button, #upcoming_maps .fav_button {
	width: 30px;
	height: 32px;
}

#upcoming_maps_header {
	padding-top: 20px;
	clear: both;
}
#upcoming_maps {
	flex: 1;
	overflow: auto;
	position: relative;
}
#upcoming_maps .map_title {
	font-size: 12px;
}
#upcoming_maps .map_title.longtext {
	font-size: 10px;
}
#content.empty_server .map_container.upcoming {
	display: none;
}
#content #upcoming_maps .map_container {
	width: 140px;
	height: 108px;
	margin: 6px;
}
#content #upcoming_maps .map_image {
	height: 89px;
}
#upcoming_maps .map_container{
	display: none;
}
#upcoming_maps .map_container.filtered {
	display: none !important;
}
#upcoming_maps .map_container.filter_wrong_opinion {
	display: none !important;
}
#upcoming_maps .map_container.upcoming {
	display: inline-block;
}
#upcoming_maps.all_maps .map_container {
	display: inline-block;
}
#empty_notice, #chat_login_notice {
	position: absolute;
	top: 50%;
	z-index: 1;
	margin: 0 auto;
	font-size: 24px;
	color: #555;
	width: 100%;
	text-align: center;
	padding: 0 20px;
	box-sizing: border-box;
}

#send_message_container {
	padding: 0px 0;
	background: black;
	position: relative;
	display: flex;
	align-items: center;
}
#send_message {
	font-family: inherit;
	background: black;
	flex: 1;
	box-sizing: border-box;
	font-size: 16px;
	color: #ddd;
	resize: none;
	height: 28px;
	overflow: hidden;
	
	box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
#send_message:focus {
    outline: 2px solid #3E683E;
}
#send_message_but {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 70px;
	height: 100%;
	margin-left: 5px;
	border: 1px solid #888;
	border-radius: 3px;
	cursor: pointer;
	background: #243E24;
	user-select: none;
	box-sizing: border-box;
}
#send_message_but.sending #send_message_but_text {
	display: none;
}
#send_message_but:hover, #send_message_but.sending {
	background: #3E683E;
}
#send_message_but.failed {
	background: #500;
}
#send_message_but.failed:hover {
	background: #800;
}
#send_message_but.empty {
	background: #222;
	color: #999;
}
#send_load {
	display: none;
	width: 14px;
	height: 14px;
	border: 3px solid #ccc;
	border-top-color: #333;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
#send_message_but.sending #send_load {
	display: inline;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
#cooldown-text {
	background: black;
	box-sizing: border-box;
	font-size: 16px;
	color: red;
	text-align: center;
	position: absolute;
	top: 2px;
	right: 85px;
	padding: 0 10px;
	pointer-events: none;
}

#chat_settings_button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 100%;
	border: 1px solid #888;
	border-radius: 3px;
	background: #000;
	cursor: pointer;
	margin-right: 5px;
	box-sizing: border-box;
}
#chat_settings_button:hover {
	background: #333;
}
#chat_settings_button img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
#chat_settings_menu {
	border: 1px solid;
	width: 300px;
	position: absolute;
	bottom: 32px;
	left: 0;
	z-index: 10;
	padding: 5px;
	background: black;
	box-shadow: 0 0px 20px rgba(0, 0, 0, 1.0);
	color: #fa0;
}
#chat_settings_menu div {
	position: relative;
}
.chat_settings_option {
	padding: 2px 0;
	box-sizing: border-box;
}
.chat_settings_option, .chat_settings_option label {
	display: inline-block;
	width: 100%;
}
.chat_settings_option, .chat_settings_option label, .chat_settings_option input {
	cursor: pointer;
}
.chat_settings_option input, .chat_settings_option select {
	position: absolute;
	right: 0;
}
.chat_settings_option:hover {
	background: #333;
}
.chat_settings_option.indent {
	padding-left: 20px;
}
.chat_settings_option.disabled {
	opacity: 0.3;
}
#timestamp_selector {
	width: 120px;
}

#filter_maps_container {
	padding: 0px 0;
	background: black;
	border-top: 1px solid #888;
}
#maps_filter {
	font-size: 16px;
	background: black;
	color: #ddd;
}

#chat_header {
	padding-top: 20px;
}
#chat_box {
	background: black;
	width: 100%;
	color: #fa0;
	overflow-y: scroll;
	font-size: 13px;
	flex: 1;
	overflow: auto; 
	margin-top: 20px;
	padding-bottom: 5px;
	position: relative;
}
.chat_message .player_name {
	text-decoration: none;
	color: #99CCFF;
	cursor: pointer;
	min-width: 5px;
	min-height: 5px;
	display: inline-block;
}
.chat_message .player_name.web_chat {
	color: #99FF99;
}
.chat_message .player_name:hover {
	color: #D2E6FB;
}
.chat_message .player_name.bad_guy {
	color: #FF3F3F;
}
.chat_message .player_name.bad_guy:hover {
	color: #FF9090;
}
.chat_message .hud_msg {
	color: #c17aff;
}
.chat_message {
	overflow-wrap: anywhere;
	word-break: break-word;
	padding: 1px 5px;
	display: flex;
}
.chat_time {
	font-family: monospace;
	color: #888;
	cursor: default;
	padding-right: 7px;
}
.chat_time:hover {
	color: #bbb;
}
.chat_message .chat_left_side {
	flex: 0 0 auto;
	white-space: nowrap;
}
.chat_message .chat_right_side {
	flex: 1;
	min-width: 0;
}
.chat_message .chat_msg_content a {
	color: #00b7ff;
}
.chat_message .chat_msg_content a:hover {
	color: #77d8ff;
}
.chat_message .chat_content_side {
	display: flex;
	flex: 1;
	align-items: baseline;
}
.chat_message .chat_timestamp {
	display: inline-block;
}
.chat_message .chat_timestamp .chat_time {
	display: none;
}
#content.timestamp_12hr .chat_message .chat_time.time12,
#content.timestamp_12hrc .chat_message .chat_time.time12c,
#content.timestamp_24hr .chat_message .chat_time.time24 {
	display: inline;
}
.chat_msg_content {
	white-space: pre-wrap;
}
.chat_message .translate_button {
	color: #99CCFF;
	font-size: 0.8em;
	cursor: pointer;
	margin-left: 5px;
	user-select: none;
	white-space: nowrap;
}
#content.no_translate .translate_button {
	display: none;
}

#content.alt_wrap .chat_content_side {
	display: inline-block;
}
#content.alt_wrap .chat_left_side, #content.alt_wrap .chat_right_side {
	display: inline;
}

#chat_box {
	overflow: hidden;
}
#chat_box_messages {
	overflow-y: scroll;
	height: 100%;
}

#content.dim .chat_message:not(.important) {
	opacity: 0.3;
}

#content.dim_map .chat_message.map_msg,
#content.dim_server .chat_message.server_msg,
#content.dim_join .chat_message.join_msg, 
#content.dim_sound .chat_message.sound_msg {
	opacity: 0.3;
}
#content.dim_hover #chat_box .chat_message:hover,
#content.dim_hover #chat_box .chat_message:hover + *,
#content.dim_hover #chat_box .chat_message:has(+ .chat_message:hover),
#content.dim_recent #chat_box .chat_message:last-child,
#content.dim_recent #chat_box .chat_message:nth-last-child(2),
#content.dim_recent #chat_box .chat_message:nth-last-child(3) {
	opacity: 1.0 !important;
}

#login_but {
	display: inline-block;
	padding: 10px 0;
	background: #444;
	position: absolute;
	top: 10px;
	right: 20px;
	border-radius: 4px;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	width: 200px;
	text-align: center;
}
#login_but:hover {
	background: #555;
}
#login_but div {
	display: inline-block;
}
#login_but img {
	width: 20px;
	vertical-align: middle;
}
#login_text {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
#login_subtext {
	display: inline-block;
	font-size: 12px;
	text-align: center;
	width: 100%;
}
.red {
	color: red;
}

.hidden {
	visibility: hidden;
}
.superhidden {
	display: none;
}
.tooltip {
	font-size: 12px;
	vertical-align: top;
	color: #FFAA00;
	cursor: help;
}
.green {
	color: #0d0;
}
.grey {
	color: #bbb;
}
.cyan {
	color: #0dd;
}
.red {
	color: red;
}

.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.popup-content {
	padding: 20px;
	border-radius: 5px;
	background: #222;
	color: #fa0;
	max-width: 500px;
	text-align: center;
}
.popup-text {
	text-align: initial;
}
.close {
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	display: inline-block;
	padding: 5px 40px;
	border-radius: 5px;
	background: #000;
}
.close:hover {
	background: #111;
	color: white;
}
.command-text {
	background: black;
	font-family: monospace;
	padding: 0px 3px;
}

.rank {
	height: 16px;
	margin-left: 5px;
	cursor: help;
}
.cnflag {
	height: 12px;
	margin-right: 5px;
	cursor: pointer;
}
.avatar_container {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 12px;
	margin-right: 5px;
	user-select: none;
}
.avatar {
	position: absolute;
	height: 16px;
	cursor: pointer;
}
#player_table_container .avatar_container {
	width: 20px;
}
#player_table_container .avatar {
	top: -5px;
	height: 20px;
}

#map_timer {
	position: absolute;
	bottom: 0;
	left: 0;
	text-decoration: none;
	color white;
	background: black;
	font-family: monospace;
	font-size: 14px;
	color: #ddd;
	padding: 0 5px;
}

#client_counter_container {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 11px;
}

.list_header_container {
	text-align: left;
	position: relative;
	margin: 0;
}
.list_header {
	display: inline-block;
	padding: 5px 10px;
	background: #333;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	float: left;
	cursor: pointer;
	margin-right: 5px;
	font-size: 16px;
}
#pcount_header:hover {
	background: #2c3b4a;
}
#pcount_header.selected {
	background: #476079;
}
#wcount_header:hover {
	background: #243E24;
}
#wcount_header.selected {
	background: #3E683E;
}
#pcount, #wcount {
	font-family: monospace;
}

#content #perf-container {
	display: none;
	width: 100%;
	margin-top: 20px;
}
#perf-chart {
	width: 100%;
}
#content svg {
	background: black;
}
#content.perf #perf-container {
	display: block;
}
#content #perf-bar-container {
	height: 20px;
	display: flex;
	width: 100%;
}
#content #perf-bar-container .segment {
	height: 100%;
	text-align: center;
}
#content #perf-bar-container .segment.ent {
	background: #048;
}
#content #perf-bar-container .segment.plugin {
	background: #408;
}
#content #perf-bar-container .segment.player {
	background: #040;
}
#content #perf-bar-container .segment.misc {
	background: #444;
}
#perf-container text {
	font-size: 0.7em;
	user-select: none;
}

.map-change-container {
	color: #ccc;
	border: 1px solid #444;
	border-radius: 2px;
	padding: 5px;
	background: #181818;
	margin: 3px 0;
}
.map-change-container .map-change-title {
	font-size: 1.0em;
}
.map-change-container .map-finish-time {
	color: #fa0;
	background: #000;
	padding: 0 5px;
}
.map-change-container .map-name {
	color: #fa0;
	background: #000;
	padding: 0 5px;
}
.map-change-container .players-container {
	margin-top: 10px;
}

#audio-icon {
	overflow: visible;
	display: block;
	cursor: pointer;
	height: 15px;
	position: relative;
}
#audio-icon img {
	height: 22px;
	position: absolute;
	top: -3px;
	left: -3px;
}
#vc_volume {
	width: 150px;
}

.mute_opts label {
	display: inline-block;
	width: 70px;
}
#player_profile.compact .mute_opts label {
	display: block;
}
.mute_opts input {
	height: 12px;
	margin-left: 0;
}