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

body {
	-webkit-text-size-adjust: 100%;
	-ms-content-zooming: none;
	
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	font-family: Arial;
	background-color: #aaaaaa;
	color: #000;
	overflow: hidden;
	
	--color: #0a246a;
}

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

#header {
	width: 100%;
}
#header {
	cursor: default;
	padding-top: env(safe-area-inset-top);
	top: 0;
	left: 0;
	width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
	color: #fff;
	z-index: 2;
	position: fixed;
}

#header_table {
	width: 100%;
	text-align: center;
}

#header_table td {
	vertical-align: middle;
}

.title {
	word-break: break-word;
}
.v_mode {
	width: max-content;
	white-space: nowrap;
	vertical-align: middle;
	display: inline-block;
	background-color: #fff;
}
.player_name {
	width: 45%;
	word-break: break-word;
}
#p1_name {
	text-align: center;
}
#p2_name {
	text-align: center;
}
#legs {
	white-space: nowrap;
}

#article {
	left: 0;
	width: 100% ;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.score_table {
	cursor: default;
	width: 100%;
	text-align: center;
	background-color: var(--color);
}
.score_table th {
	vertical-align: middle;
	font-weight: normal;
	border: 0.2vmin solid #777;
	background-color: rgba(238, 238, 238, 0.97);
}
.score_table td {
	vertical-align: middle;
	font-weight: normal;
	border: 0.2vmin solid #777;
}

.score_none {
	background-color: rgba(238, 238, 238, 0.97);
}
.score_input {
	width: 18%;
	background-color: #fff;
}
.score_left {
	background-color: #fff;
}
.score_round {
	vertical-align: middle;
	font-weight: normal;
	width: 18%;
	background-color: rgba(238, 238, 238, 0.97);
}
.score_round.last3 {
	color: #a50e0e;
}
.p1left, .p2left {
	background-color: #fff;
}

.score_focus {
	background-color: #ffff80;
}

.input_text_score {
	outline: 0;
	border: 0px;
	background-color: transparent;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	text-align: center;
}

#footer {
	width: 100%;
}
#footer {
	bottom: 0;
	left: 0;
	width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
	z-index: 2;
	position: fixed;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: var(--color);
}

#left_table {
	cursor: default;
	width: 100%;
	background-color: transparent;
}
.score_left_big {
	width: 50%;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
}
.score_left_big div {
	color: #fff;
	background-color: transparent;
}

#popup_webcam .score_left_big div {
	background-color: #fff;
	color: #000;
}

.input_area {
	position: relative;
	background-color: #ffff80;
	color: #000;
}
.error_area {
	background-color: #ffb0b0;
	color: #000;
}

.loding img {
	display: none;
}
.loding:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: calc(var(--score-height) * 0.4);
	height: calc(var(--score-height) * 0.4);
	border-radius: 50%;
	border-top: calc(var(--score-height) * 0.12) solid rgba(160, 160, 160, 0.2);
	border-right: calc(var(--score-height) * 0.12) solid rgba(160, 160, 160, 0.2);
	border-bottom: calc(var(--score-height) * 0.12) solid rgba(160, 160, 160, 0.2);
	border-left: calc(var(--score-height) * 0.12) solid rgba(160, 160, 160, 1.0);
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load 1.1s infinite linear;
	animation: load 1.1s infinite linear;
}
@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.cam_load,
.cam_load:before,
.cam_load:after {
	border-radius: 50%;
	width: 2.5vmin;
	height: 2.5vmin;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: cload 1.8s infinite ease-in-out;
	animation: cload 1.8s infinite ease-in-out;
}
.cam_load {
	position: absolute;
	top: -5vmin;
	right: 0;
	bottom: 0;
	left: 0;

	color: rgb(160, 160, 160);
	font-size: 1vmin;
	margin: auto;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.cam_load:before,
.cam_load:after {
	content: '';
	position: absolute;
	top: 0;
}
.cam_load:before {
	left: -3.5vmin;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.cam_load:after {
	left: 3.5vmin;
}
@-webkit-keyframes cload {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes cload {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

.focus_frame {
	background-color: transparent;
}
.focus_frame div {
	background-image:none;
	background-color: #fff;
	color: var(--color);
}

#canvas_ton {
	color: #a0a0a0;
}
.ton {
	background-image: none !important;
	position: relative;
}
.ton span {
	position: relative;
	z-index: 1;
}
.ton::before {
	content: "";
	position: absolute;
	width: 90%;
	max-width: 25vmin;
	height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: solid 0.5vmin rgba(128, 128, 128, 0.4);
}

#menu_table {
	width: 100%;
	text-align: center;
}
#menu_table td {
	cursor: default;
	width: 25%;
	vertical-align: middle;
	color: #fff;
	background-color: transparent;

	-ms-touch-action: none;
	touch-action: none;
}
#menu_table td:last-child {
	line-height: 0px;
}
#menu_table td:active {
	background-color: rgba(255, 255, 255, 0.18);
}

#menu_table #menu_finish_disable {
	color: rgba(255, 255, 255, 0.18);
}
#menu_table #menu_finish_disable:active {
	background-color: transparent;
}

#key_table, #keyfunc_table {
	display: none;
	width: 100%;
	text-align: center;
}
#key_table td, #keyfunc_table td {
	cursor: default;
	width: 33%;
	vertical-align: middle;
	border: 0.2vmin solid rgba(128, 128, 128, 0.25);
	color: #fff;
	background-color: transparent;

	-ms-touch-action: none;
	touch-action: none;
}
#key_table td:active, #keyfunc_table td:active {
	background-color: rgba(255, 255, 255, 0.18);
}
#key_enter {
	font-weight: bold;
}
#key_delete {
	line-height: 0px;
}
.key_active {
	background-color: rgba(255, 255, 255, 0.18) !important;
}

#right_area {
	height: 100%;
}
#right_area {
	height: calc(100% - env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background-color: var(--color);
	position: fixed;
	top: 0;
	border-left: 0.2vmin solid rgba(128, 128, 128, 0.25);
}

.modal_window {
	width: 80%;
	position: fixed;
	display: none;
	z-index: 10;
	box-shadow: 0 1.5vmin 4.5vmin rgba(0,0,0,0.8);
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}

.menu_ul {
	text-align: center;
	background-color: #ffffff;
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}

.menu_ul li {
	cursor: pointer;
	padding: 3.0vmin 0px 3.0vmin 0px;
	color: #006cff;
	border-top: 0.2vmin solid #c0c0c0;

	-ms-touch-action: none;
	touch-action: none;
}
.menu_ul li:active {
	background-color: #006cff;
	color: #ffffff;
}

.menu_ul li:first-child {
	border-top-width: 0px;
}
.menu_ul li:first-child:active {
	background-color: #006cff;
	color: #ffffff;
	border-radius: 1.5vmin 1.5vmin 0px 0px;
	-webkit-border-top-left-radius: 1.5vmin;
	-webkit-border-top-right-radius: 1.5vmin;
}

.menu_ul li:last-child:active {
	background-color: #006cff;
	color: #ffffff;
	border-radius: 0px 0px 1.5vmin 1.5vmin;
	-webkit-border-bottom-right-radius: 1.5vmin;
	-webkit-border-bottom-left-radius: 1.5vmin;
}

.message_table {
	width: 100%;
	background-color: #ffffff;
	color: #000000;
	table-layout: fixed;
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}
.message_table td {
	-ms-touch-action: none;
	touch-action: none;
}
.message_title {
	padding: 6% 2% 1% 2%;
	text-align: center;
	font-weight: bold;
	word-wrap: break-word;
}
.message_msg {
	padding: 1% 2% 6% 2%;
	text-align: center;
	word-wrap: break-word;
}

.msg_button {
	cursor: default;
	background-color: #fff;
	color: #006cff;
	border: 0.2vmin solid #006cff;
	vertical-align: middle;
	text-align: center;
	
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}
.msg_button:not(.disabled):active {
	background-color: #006cff;
	color: #fff;
}

.message_btn_left {
	width: 50%;
}

.message_btn_right {
	width: 50%;
}

.message_btn_ok {
	width: 100%;
}

#modal-overlay {
	z-index: 9 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba(0,0,0,0.5);
}

.left_big {
	display: flex;
	justify-content: center;
	align-items: center;
}

#localVideoWrapper, #remoteVideoWrapper {
	position: relative;;
	overflow: hidden;
	background-color: #fff;
}

#localVideoContainer, #remoteVideoContainer {
	position: relative;
	overflow: hidden;
}

#localVideo, #remoteVideo {
	position: relative;
}

.mic_icon {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.5);
}

.throw_window {
	width: 80%;
	position: fixed;
	display: none;
	z-index: 10;
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}
.throw_div {
	padding: 0px 4.5vmin 0px 4.5vmin;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 1.5vmin;
	-webkit-border-radius: 1.5vmin;
	-moz-border-radius: 1.5vmin;
}
.throw_table {
	width: 100%;
}
.throw {
	width: 33%;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}