/*
 * n01_online.css
 *
 * Copyright (C) 1996-2015 by Ohno Tomoaki. All rights reserved.
 */

body {
	-webkit-text-size-adjust: 100%;
	-ms-content-zooming: none;

	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	font-size: 20px;
	font-family: Arial;
	background-color: #ffffff;
	color: #000;
}

html {
	min-height: calc(100% + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#header {
	padding-top: env(safe-area-inset-top);
}

#loading {
	text-align: center;
}

a {
	color: unset;
}

#article {
	margin: 10px 0px 10px 0px;
	padding: 50px 0 env(safe-area-inset-bottom) 0;
}

.menu {
	text-align: center;
}

#title_name {
	vertical-align: middle;
	width: 98%;
}

#title_status {
	text-align: center;
	width: 1%;
}

#title_button {
	width: 1%;
}

#status_button {
	cursor: pointer;
	background-color: #263238;
	color: #fff;
	border: 1px solid #263238;
	-ms-touch-action: none;
	touch-action: none;
	line-height: 0px;
	white-space: nowrap;
}
#status_button:hover {
	opacity: 0.75;
}
#status_button:active {
	background-color: #fff;
	color: #000;
}

#tournament_button {
	width: 60%;
}

#schedule_button {
	width: 60%;
}

#button_history {
	width: 60%;
	margin: 0 0 20px 0;
}

.title_magrin {
}

.user_list_table {
	width: 100%;
}

.user_list_table th {
	text-align: left;
	border-bottom: 4px solid #000000;
}

.user_list_table td {
	vertical-align: middle;
	border-bottom: 1px solid #d0d0d0;
}

.user_list_name {
	width: 98%;
	word-break: break-word;
}

.flag {
	line-height: 0px;
}

.user_list_status {
	width: 1%;
	white-space: nowrap;
	text-align: center;
}

.user_list_button {
	width: 1%;
	text-align: center;
}

.wait {
	background-color: #FFE3E3;
	color: #000;
}

.away_self {
	background-color: #FFE3E3;
	color: #808080;
}
.away_self a {
	color: #808080;
}

.away {
	background-color: #c0c0c0;
	color: #606060;
}

.view {
	background-color: #c0c0c0;
	color: #606060;
}

.play {
	background-color: #c0c0c0;
	color: #606060;
}

.relay {
	background-color: #e0e0e0;
	color: #606060;
}

input[type="button"] {
	cursor: pointer;
	-webkit-appearance: none;
	padding: 10px;
	
	border: 0px solid #fff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;

	background-color: #fff;
	color: #263238;
	outline:none;
}

input[type="button"]:hover, input[type="button"]:focus {
	background-color: #f4f4f4;
}

input[type="button"]:active {
	background-color: #e0e0e0;
}

#user_list_table input[type="button"].play_button {
	background-color: #0084ff;
	color: #fff;
}

#user_list_table input[type="button"].play_button:hover {
	background-color: #0069f1;
	color: #fff;
}

#user_list_table input[type="button"].play_button:focus {
	background-color: #0069f1;
	color: #fff;
}

#user_list_table input[type="button"].play_button:active {
	background-color: #00377d;
	color: #fff;
}

#user_list_table input[type="button"].secret_button {
	background-color: #0084ff;
	color: #fff;
}

#user_list_table input[type="button"].secret_button:hover {
	background-color: #0069f1;
	color: #fff;
}

#user_list_table input[type="button"].secret_button:focus {
	background-color: #0069f1;
	color: #fff;
}

#user_list_table input[type="button"].secret_button:active {
	background-color: #00377d;
	color: #fff;
}

#user_list_table input[type="button"].user_button {
	width: 100%;
}

#info {
	border: 1px solid #990000;
	color: #990000;
}

#message {
	color: #808080;
	border-bottom: 1px solid #d0d0d0;
}

#share {
	text-align: center;
	font-size: 0px;
}

.fb-like, .fb-share-button {
	margin: 0 0 0 10px;
}

#tooltip {
	position: absolute;
	display: none;
	border: 1px solid #808080;
	background-color: #fff;
	opacity: 0.9;
	z-index: 9999;
}

.scroll_button {
	cursor: pointer;
	position: fixed;
	left:50%;
	bottom: 0;
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: #fff;
	margin: 30px;
}

.scroll_button:hover {
	background-color: #ffffff;
}

.scroll_button:active {
	background-color: #e0e0e0;
}

.scroll_image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	text-align: center;
	width: 80%;
	pointer-events: none;
}

.tw {
	vertical-align: top;
	cursor: pointer;
}

.fb {
	vertical-align: top;
}

.g {
	vertical-align: top;
}

.chat_button {
	cursor: pointer;
	position: fixed;
	left: 50%;
	bottom: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(38, 50, 56, 0.7);
}

.chat_button:hover {
	background-color: #263238;
}

.chat_button:active {
	background-color: #475d68;
}

.chat_image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	width: 60%;
	z-index: -1;
}

#search_container input[type="text"] {
	width: 100%;
}

#search_container input[type="image"] {
	-webkit-appearance: none;
	cursor: pointer;
	border: none;
	outline: none;
	background-color: #fff;
	color: #2196f3;
	border-radius: 50% !important;
	box-shadow: none !important;
	width: 20px;
}
#search_container input[type="image"]:hover {
	opacity: 0.7;
}
#search_container input[type="image"]:active {
	opacity: 0.5;
}

#search_container {
	padding: 3px 10px;
	border: 1px solid #999;
	border-radius: 20px;
	overflow: hidden;
	background-color: #fff;
}

.search_table {
	width: 100%;
}

.keyword_td {
	vertical-align: middle;
	width: 100%;
}

.search_td {
	vertical-align: middle;
	text-align: left;
}

#keyword {
	border: none;
}
#keyword:focus {
	outline: 0;
}

#tab_container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-bottom: solid 1px;
}

.tab {
	cursor: pointer;
	color: #808080;
	color: color-mix(in srgb, black, white 40%);
}
.tab:not(.tab_select):hover {
	background-color: rgba(128, 128, 128, 0.12);
	background-color: color-mix(in srgb, black, white 95%);
}
.tab:not(.tab_select):active {
	background-color: rgba(128, 128, 128, 0.31);
	background-color: color-mix(in srgb, black, white 85%);
}

.tab_select {
	font-weight: bold;
	border-bottom: solid 4px;
	color: #000;
}