/* tags */
h1 {
	font:normal 45px Ubuntu;
	padding: 40px 0px 40px 0px;;
}

h2 {
	font:normal 35px Ubuntu;
	padding: 30px 0px 30px 0px;

}

 h3 {
	font:normal 25px Ubuntu;
	padding: 50px 0px 50px 0px;
}


#play-mode,.fake-sleep{display:none;position:absolute;top:0;left:0}#box,
body{display:flex}#box,#chessboard,.button{text-align:center}#reset,#rotate{bottom:1vw}
#stepByStep,.button{font:bold 11px trebuchet ms}#black-side,#white-side{width:50vw;height:100vw;top:-10px;transition:2s}
#play-mode,#stepByStep,.button{
	box-shadow:0 0px 4px 0 rgba(0,0,0,.2),0 6px 6px 0 rgba(0,0,0,.1)
}
#chessboard{
	width:95%;
	height:95%;
	border-collapse:collapse;
	margin-right: 25px;
	border:1px solid #74625c;
}
body{    
	min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
	background-color:#ecdab9;
}
#black-side,#reset,#rotate,#stepByStep,#white-side,
.fake-wakeup{position:fixed}
.fake-wakeup{top:0;left:0;display:block;width:100vw;height:100vw;z-index:1000}
#play-mode{padding:20px;border-radius:20px;transition:2s;width:30vw;height:15vw;right:0;bottom:0;margin:auto;z-index:5000;background:linear-gradient(to right,#000 50%,#fff 50%);opacity:1}
#arena{
	display: flex;
	flex-direction: column;
	opacity: 1;
	transition: opacity .7s ease-out; 
}
#box{
	width:100vw;
	height:50%;
	text-align: center;
	justify-content:center;
	display: flex;
	color:#000;
	z-index:9999;
	position: fixed;
	left:0;
	top: 30vh;
}
#stream-box {
	width:100vw;
	height:50%;
	display: flex;
    flex-direction: row;
	justify-content:center;
	z-index: 999;
}
#share {
	position: fixed;
	bottom: -100vh;
	right: 0px;
	width: 100%;
	height: 40vh;
	z-index: 99999;
/*	gap: 17vw; */
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	background-color: #74625c;
	transition: .7s;
}
.share-icon {
	border: 1px solid #ECDAB9;
	border-radius:20px;
	width:150px;
	height:150px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.auth-page-header {

	text-align:left;
	vertical-align:top;
	width:90%;
	height:150px;
	padding:50px 30px 30px 50px;
	font:bold 30px Ubuntu;
}
.auth-icon-box-on {

	text-align:left;
	vertical-align:middle;
	width:35%;
	padding:0px 20px 0px 50px;
	opacity: 1;
}
.auth-icon-box-off {

	text-align:left;
	vertical-align:middle;
	width:35%;
	padding:0px 20px 0px 50px;
	opacity: .2;
}
.auth-icon {
	border: 1px solid #ECDAB9;
	border-radius:20px;
	width:100px;
	height:100px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#footer {
	position: fixed;
	bottom: 0vh;
	left: 0px; 
	width: 100%;
	height: 10vh;
	z-index: 9999;
	align-items:center;
	justify-content:center;
	display: flex;
	gap: 17vw;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	padding-bottom: 35px;
}
#menu-box {

	background : #74625c;
	width: 55vw;
	height: 100vh;
	z-index: 11000;
	transition: .7s;
	left: -100vw;
	top: 0vh;
	bottom: 0vh;
	position: fixed;
	
}
#auth {

	background : #74625c;
	width: 100%;
	height: 100%;
	z-index: 11000;
	transition: .7s;
	left: 0vw;
	top: -100vh;
	bottom: 0vh;
	right: 0vw;
	position: fixed;
	
}
.separator {
	width:90%;
	height:3px;
	background:#ecdab9;
	margin: auto;
	opacity:.2;
}
.menu-item-img-box-off{
	width:75px;
	height:50px;
	padding: 0px 0px 0px 75px;
	opacity: .2;
}
.menu-item-img-box-on{
	width:75px;
	height:50px;
	padding: 0px 0px 0px 75px;
	opacity: 1;
}
.menu-item-text-off {
	text-align:left;
	padding-left:50px;
	font:bold 30px Ubuntu;
    opacity: .2;
}
.menu-item-text-on {
	text-align:left;
	padding-left:50px;
	font:bold 30px Ubuntu;
    opacity: 1;
}
.info-link {
	font:bold 25px Ubuntu;
	text-decoration:underline;
	color:#ecdab9;
}
.footer-icon-on{
	width:60px;
	height:60px;
	opacity: 1;
}
.footer-icon-off{
	width:60px;
	height:60px;
	opacity: 0.3;
}

.cell-letter{text-align:center;font:bold 25px Alef;padding-top: 0px; }
.cell-number{text-align:left;font:bold 25px Alef;padding-left: 5px;}


#black-side,.cell-dark{background:#74625c}
#black-side{left:0}#rotate,#reset{z-index:1000}
#white-side{background:#ecdab9;right:0}
img:hover{cursor:grab}.pub-info{color:#000;font:normal 9px trebuchet ms;cursor:pointer}

td.cell-dark,
td.cell-light{width:110px;height:110px;text-align:center;border:0px solid #74625c;}
.cell-letter{height:0px}
.cell-number{width:0px}
.cell-light{border:1px solid #74625c;height:100; width: 100;}
.on { cursor:pointer;width: 35px; height: 35px;opacity:1}
.off { cursor:default;width: 35px; height: 35px;opacity:0.3}

#error-box {
	position:absolute;
	transition: .5s; 
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	color:#ECDAB9;
	background: #74625c;
	z-index: 99999;
	font: bold 10px Ubuntu;
	width:20vw;
	height: 22vh;
	text-align: center;
	cursor:default;
	border-radius: 5px;
}
 #notify-box {
	position:absolute;
	transition: .5s; 
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	color:#ECDAB9;
	background: #74625c;
	z-index: 99999;
	font: bold 10px Ubuntu;
	width:30vw;
	height: 45vh;
	text-align: center;
	cursor:default;
	border-radius: 5px;
}
#error-button-close, #notify-button-close{
	cursor:pointer;
	padding:10px 25px 10px 25px;
	width:50%;
	color:#ECDAB9;
	background:#74625c;
	font: bold 10px Ubuntu;
	outline:none;
	border:1px solid #ECDAB9;
}

#public-info-list{
	position:absolute;
	transition: .5s; 
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	color:#ECDAB9;
	background: #74625c;
	z-index: 99999;
	font: bold 10px Ubuntu;
	width:65vw;
	height: 90vh;
	text-align: center;
	cursor:default;
	border-radius: 5px;
}
#club-card-box {
		position:absolute;
		transition: .5s; 
		display:flex;
		align-items:center;
		justify-content:center;
		box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
		color:#ECDAB9;
		background: #74625c;
		z-index: 99999;
		font: bold 10px Ubuntu;
		width:45vw;
		height: 55vh;
		text-align: center;
		cursor:default;
		border-radius: 5px;
}
#buttle-list-box, #profile-box{
	position:absolute;
	transition: .5s; 
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	color:#ECDAB9;
	background: #74625c;
	z-index: 99999;
	font: bold 10px Ubuntu;
	width:55vw;
	height: 75vh;
	text-align: center;
	cursor:default;
	border-radius: 5px;
}
#protocol {
	color: #ECDAB9;
	position: fixed;
	right: 10vw;
	top:5vh;
	font: bold 12px Ubuntu;
}
.static-content {
	text-align:left;
	font-size:25px;
	line-height: 40px;
}
#btn-send-code, #btn-cancel,#btn-check-code{color:#74625c;font:normal 10px Ubuntu;padding:10px;cursor:pointer;width:150px;background:#ECDAB9;border:0px;outline:none;}

.wrtc-block{padding:10px;text-align:center;font: normal 10px Ubuntu;line-height:15px}

.button-off{color:#74625c;font:bold 10px Ubuntu;padding:10px;cursor:pointer;width:150px;background:#ECDAB9;border:0px;outline:none;opacity:0.3;}
.button{color:#74625c;font:bold 10px Ubuntu;padding:10px;cursor:pointer;width:150px;background:#ECDAB9;border:0px;outline:none;}
.button-black{
	color:#ECDAB9;
	font:bold 10px Ubuntu;
	padding:10px;
	cursor:pointer;
	width:150px;
	background:#74625c;
	border:0px;
	outline:none;
	box-shadow:0 0px 4px 0 rgba(0,0,0,.2),0 6px 6px 0 rgba(0,0,0,.1)
}
#public-info-box{
	width:99%;
	height:90vh;
	color:#ECDAB9;
	font-size:20px;
}
.public-info-caption{
	text-align:center;
	font:normal 25px Ubuntu;
	cursor:default;
	height:50px;
	padding-bottom:25px;
	padding-top: 25px;
}
/* scroll */
.scroll-table-body {
	height: 600px;
	overflow-x: auto;
	margin-top: 0px;
	margin-bottom: 20px;

}
.scroll-table table {
	width:90%;
	table-layout: fixed;
	border: none;
}
.scroll-table tbody td {
	text-align: center;
	padding: 10px 15px;
	font: normal 10px Ubuntu;;
	vertical-align: top;
	line-height: 15px;
}
/* Стили для скролла */
::-webkit-scrollbar {
	width: 6px;
} 
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}