input:focus::placeholder { color: #0000; }
input::placeholder {font: 10px  Ubuntu;color: #ECDAB9;}
.invite-page{background:#fff;position:fixed;width:550px;height:375px;top:25vh;left:42vw;margin:-125px 0 0 -125px;z-index:50000;border-radius:11px;box-shadow:0 8px 26px rgba(0,0,0,0.4),0 28px 30px rgba(0,0,0,0.3)}
.invite_title{text-align:left;font:bold 11px trebuchet ms;height:15%;color:#000}
.invite_input{padding:5px 25px;text-align:center;border-bottom:1px solid lightgray;border-top:none;border-left:none;border-right:none;outline:none;color:#000;font:normal 25px trebuchet ms}
.invite_button{cursor:pointer;padding:10px 30px;text-align:center;border:none;color:#000;font:normal 11px trebuchet ms;color:#fff;background:#369177}
#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}
#box,#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;
	transition:2s

}
body{justify-content:center;align-items:center;height:100vh;}
#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}
#box{
	width:40vw;
	height:40vw;
	align-items:center;
	justify-content:center;
	color:#000;
	background-color:#ecdab9;
	padding:20px;
	border-radius:7px;
	transition:2s;
	z-index:7000;

}

.cell-letter,.cell-number{text-align:center;font:bold 13px Alef}#reset{left:35vw}#stepByStep{top:7vw;right:100px;width:300px;color:#fff;text-align:center;overflow-y:auto}#separator{width:95%;height:1px;background:#fff}#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}
#invite-page-chess {
	width: 25vw;
	height: 15vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left:29vw;
			}
	#right-side-main-page {
		position:fixed;
		right:0; 
		top:0; 
		height: 100vh;
		width: 30vw;
		z-index:900;
		background:#74625C;
		align-items:center;
		justify-content:center;
		transition: 1s;
	}
#left-side-main-page{
	position:absolute;
	left:0;
	top:0;
	bottom: 0;
	height:100vh;
	width:70vw;
	z-index:1000;
	background:#ECDAB9;
	display: flex;
	align-items: center;
	justify-content: center; 
	transition: 1s;
}
#left-side-main-page-fake{position:fixed;left:0;top:0;height:100vh;width:65vw;z-index:5000;background: #ECDAB9;opacity:0.6}
#left-side-main-page-btn-play-online{
	position:absolute;
	transition: 1s; 
	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: 9999;font: bold 10px Ubuntu;
	position: fixed;width:10vw;padding:1vw;text-align: center;cursor:default;left:32vw}
html{overflow:hidden}td.cell-dark,td.cell-light{width:75px;height:75px;text-align:center;border:1px solid #74625c;}
.cell-letter{height:3vh}.cell-number{width:2vw}
.cell-light{border:1px solid #74625c;}
#fake {z-index: 10000;position:fixed;left:0;top:0;height:100vh;width:100vw;z-index:10000;background: #ECDAB9;opacity:0.5;display: none;}
.on { cursor:pointer;width: 35px; height: 35px;opacity:1}
.off { cursor:default;width: 35px; height: 35px;opacity:0.3}
#login-use-code {
	position:absolute;
	transition: 1s; 
	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:35vw;
	height: 40vh;
	text-align: center;
	cursor:default;
	border-radius: 5px;
}
.pin-code-elem{
	text-align:center;
	width:30px;
	padding:15px;
	background:#74625c;
	border: 0px;
	border-bottom:1px solid #ECDAB9;
	outline:none;
	color:#ECDAB9;
	font:normal 40px Ubuntu;
	outline: none;
}
#loader {
	border: 3px solid #fff;
	border-radius: 50%;
	border-top: 3px solid #E3C691;
	width: 20px;
	height: 20px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
#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;
}
#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}
#view_public_info {color:#ECDAB9;font:normal 10px Ubuntu;height: 5%;text-align: center;text-decoration: underline;cursor:pointer}
/* menu items */
.menu-item-off {cursor: default; opacity: 0.5;color: #ECDAB9;text-decoration: none; font-weight: normal;}
.menu-item-on {cursor: pointer; opacity: 1;text-decoration: underline;color: #ECDAB9; font-weight: normal;}
.top-icon{
	cursor:pointer;
	width: 30px; 
	height: 30px;
}
.footer_icon{
	cursor:pointer;
	width: 30px; 
	height: 30px;
}
.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:142px;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-caption{
	text-align:center;
	font:normal 12px Ubuntu;
	cursor:default;
	height:50px;
	padding-bottom: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); 
}