/* top menu elems */
	#game-mode-box{
         display: flex;;align-items: center;justify-content: center;width: 100vw;position: fixed;top:3vh
     }
     #game-mode-box-separator {

       width: 85vw;
       height: 1px;
       background: #74625C;
       position: absolute;
       top:88%;
     }
     .top-icon-on { width: 20px;height: 20px;background: #74625C;border-radius: 20px;border: 2px solid #74625C ;}
     .top-icon-off {width: 20px;height: 20px;background: #ECDAB9;border-radius: 20px;border: 2px solid #74625C; background: #ECDAB9;z-index: 999;}
	 .top-icon-box {display: flex; flex-direction: column; align-items: center; gap: 1vh;justify-content: center;
     }
/* 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;
}

figcaption {
	padding-top:50px;
	font: bold 30px Ubuntu;
	text-align: center;
}
.figure-img{
	width:75px;
	height:75px;
}
.figcaption-couch {
	text-align:left;
	padding-left:25px;
	font:bold 30px Ubuntu;
    opacity: 1;
}
#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:100%;
	height:100%;
	border-collapse:collapse;
	border:1px solid #74625c;
	box-shadow:0 0px 4px 0 rgba(0,0,0,.2),0 6px 6px 0 rgba(0,0,0,.1)
}
#stream-box{
	width:100vw;
	height:50%;
	display: flex;
    flex-direction: row;
	justify-content:center;
}
body{    
	min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
	background:#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;
	right: 0;
	top: 26vh;
	transition: transform .7s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
#remote-video, #local-video {
        width: 100%;
        height: 100%;
        object-fit: cover;

      }
#free-game {
	position: fixed;
	bottom: -100vh;
	right: 0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
/*	gap: 17vw; */
	background-color: #ECDAB9;
	transition: .7s;
	border: 0px;
}	  
#view-subscr-box {
	position: fixed;
	bottom: -100vh;
	right: 0px;
	width: 100%;
	height: 80vh;
	z-index: 99999;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	background: #74625c;
	transition: .7s;
}
 #add-friend{
	position: fixed;
	bottom: -100vh;
	right: 0px;
	width: 100%;
	height: 35vh;
	z-index: 99999;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	background: #74625c;
	transition: .7s;
}
#share{
	position: fixed;
	bottom: -100vh;
	right: 0px;
	width: 100%;
	height: 35vh;
	z-index: 99999;
	box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	background: #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:85%;
	height:50px;
	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: absolute;
	bottom: 0vh;
	left: 0px; 
	width: 100vw;
	height: 13vh;
	z-index: 9999;
	align-items:center;
	justify-content:center;
	display: flex;
	gap: 5vw;
    border-top: 1px solid rgb(116, 98, 92, 0.2);
	font: bold 30px #74625c;
}

#menu-box {

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

	width: 100vw;
	height: 30vh;
	z-index: 11000;
	transition: .7s;
	left: 0vw;
	bottom: -100vh;
	right: 0vw;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	background : #74625c;
	
}
#auth-box{
	width:100%;
	height: 100%; 
	color:#ecdab9;
	background : #74625c;
    box-shadow:0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
.separator {
	width:100%;
	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;
}
.info-link-dark {
	font:bold 25px Ubuntu;
	text-decoration:underline;
	color:#74625c;
}
.footer-icon-on{
	width:85px;
	height:85px;
	opacity: 1;
}
.footer-icon-arena-on{
	width:65px;
	height:65px;
	opacity: 1;
}
.footer-icon-off{
	width:85px;
	height:85px;
	opacity: 0.3;
}
.footer-icon-arena-off{
	width:65px;
	height:65px;
	opacity: 0.3;
}

.cell-letter{text-align:center;font:bold 25px Alef;padding-top: 0px; border-bottom: 1px solid #74625c;}
.cell-number{text-align:center;font:bold 25px Alef;border-right: 1px solid #74625c;}


#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;}
td.cell-light{background: #ECDAB9}
.cell-letter{height:0px}
.cell-number{width:3vw}
.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); 
}