@charset "utf-8";

@keyframes warn { 0% {background-color: #00c;} 50% {background-color: #606;} 100% {background-color: #c00;} }
#warnmsg { animation: warn 1.5s .5s linear infinite alternate; }
.warningtext {
	display: inline-block;
	width: auto;
	margin: 10px auto;
	padding: 10px 20px;
	text-align: center;
	border: 2px solid;
	font-size: 20px;
	font-weight: bold;
	color: rgb(255,255,255);
	border-radius: 10px;
	background-color: #00c;
	cursor: default;
}

a.tt { text-decoration: none; color: #000; border-bottom: none; }
a.tt span { display: none; }
a.tt:hover { position: relative; }
a.tt:hover span {
	text-align: left;
	position: absolute;
	display: block;
	left: -25px;
	top: 20px;
	border: solid 1px #fff;
	background: #333;
	color: #fff;
	white-space: pre;
	padding: 5px;
	font-size: medium;
	border-radius: 10px;
}
a.tt2 { text-decoration: none; color: #000; border-bottom: none; }
a.tt2 span { display: none; }
a.tt2:hover { position: relative; }
a.tt2:hover span {
	text-align: left;
	position: absolute;
	display: block;
	right: -10px;
	top: 20px;
	border: solid 1px #fff;
	border-radius: 10px;
	background: #333;
	color: #fff;
	white-space: pre;
	padding: 5px;
	font-size: medium;
}

table.z { width: 100%; background-color: #fff }
table.z col { width: 16% }
table.z tr { vertical-align: middle; }
table.z tr.ttl { font-weight: bold; }
table.z tr.r { vertical-align: middle; height: 50px }
table.z td { border: 2px solid; text-align: center; padding: 5px}

select,option { width: 300px; font-family: Play; font-size: 18px }

@media (prefers-color-scheme: dark) {
	table.z { background-color: #000; }
	a.tt,a.tt2 { color: #fff }
/*	a.tt:hover,a.tt2:hover { background: #}*/
	select,option { color: #fff, background-color: #000; }
}