@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@-moz-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes ani {
	0% {opacity: 0;}
	100% {opacity: 1;}
}










.modal-header, .modal-footer {
	background: #dee2e6;
}
.unselectable {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}
.cursor-pointer {
	cursor: pointer;
}
.cursor-pointer.isNone {
	cursor: default;
}
.unfocusable:focus {
	box-shadow: none;
}
.overflow-y-hidden {
	overflow-y: hidden;
}
.overflow-x-hidden {
	overflow-y: hidden;
}
.w-1px {
	width: 1px;
}
.display-none {
	display: none;
}
.transition-03 {
	transition: all .3s;
}
.transition-025 {
	transition: all .25s;
}
.rotate_0 {
	transform: rotate(0deg);
}
.rotate_90 {
	transform: rotate(90deg);
}
.rotate_180 {
	transform: rotate(180deg);
}
.rotate_270 {
	transform: rotate(270deg);
}
.rotate_360 {
	transform: rotate(360deg);
}
.card {
	border: 1px solid rgb(200 201 202);
	border-radius: .25rem;
	overflow: hidden;
}
.break {
	flex-basis: 100%;
	height: 0;
}
.boxShadow_1 {
	box-shadow: 0px 0px 5px 0px #000;
}
.boxShadowActive {
	transition: all .3s;
}
.boxShadowActive:hover, .boxShadowActive:focus {
	box-shadow: 0px 0px 5px 0px #000;
}










.container_custom {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}
@media (min-width:576px) {
	.container_custom {
		max-width: 540px
	}
}
@media (min-width:768px) {
	.container_custom {
		max-width: 720px
	}
}
@media (min-width:992px) {
	.container_custom {
		max-width: 850px
	}
}
@media (min-width:1200px) {
	.container_custom {
		max-width: 850px
	}
}

.container_custom-lg,
.container_custom-md,
.container_custom-sm,
.container_custom-xl {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}
@media (min-width:576px) {
	.container_custom,
	.container_custom-sm {
		max-width: 540px
	}
}
@media (min-width:768px) {
	.container_custom,
	.container_custom-md,
	.container_custom-sm {
		max-width: 720px
	}
}
@media (min-width:992px) {
	.container_custom,
	.container_custom-lg,
	.container_custom-md,
	.container_custom-sm {
		max-width: 850px
	}
}
@media (min-width:1200px) {
	.container_custom,
	.container_custom-lg,
	.container_custom-md,
	.container_custom-sm,
	.container_custom-xl {
		max-width: 850px
	}
}









.h-100vh {
	height: 100vh;
}










body {
  position: relative;
}
.height-change-listener {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  border: 0;
  background-color: transparent;
}
/* html {
	-ms-overflow-style: none;
	scrollbar-width: none; 
}
html::-webkit-scrollbar {
	display: none;
} */
.bodyWelcome {
	background: url(../images/background.png) -100px -100px no-repeat;
	transition: background-position .5s ease-out;
	background-size: calc(100% + 100px) calc(100% + 100px);
	background-attachment: fixed;
}
.isMobile.bodyWelcome {
	transition: none;
	background: url(../images/background.png);
	background-size: 100%;
}










.class_welcome {}
.isGamePlayShort:not(.isWelcome) .class_welcome {
	display: none;
}

.class_welcome_title {
	font-weight: bold;
	font-size: 5vw;
	text-align: center;
	text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
	transition: all 0.5s;
	cursor: pointer;
	white-space: nowrap;

	margin-top: 0;
}
.class_welcome_title.isMarginTop {
	margin-top: -2.5vw;
}
.class_welcome_title span {
	color: #ff0000;
	transition: all 0.5s;
}
.class_welcome_title:hover {
	color: #ff0000;
}
.class_welcome_title:hover span {
	color: #212529;
}
@media (max-width: 991px) {
	.class_welcome_title {
		font-size: 7vw;
	}
	.class_welcome__desc {
		line-height: 0.5;
	}
}
@media (max-width: 767px) {
	.class_welcome__desc {
		line-height: 0;
	}
}

.class_welcome_status .online {
	display: none;
	color: #28a745!important;
}
.class_welcome_status .offline {
	display: none;
	color: #dc3545!important;
}
.class_welcome_status.isOnline .connect,
.class_welcome_status.isOffline .connect {
	display: none;
}
.class_welcome_status.isOnline .online,
.class_welcome_status.isOffline .offline {
	display: inline-block;
}
#id_welcome_reconnect {
	text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
}
@media (max-width: 767px) {
	#id_welcome_reconnect {
		font-size: 2vw;
	}
}
.class_welcome_setting {
	position: relative;
	background: #fff;
	padding: 20px;
	margin-top: 50px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	transition: all 0.5s;
	overflow: hidden;
}
.class_welcome_setting:hover {
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 20px 0px #ff0000;
	box-shadow: 0px 0px 20px 0px #ff0000;
}

.class_welcome_setting.isLobbyMenu {
	margin-top: 35px;
	display: none;
}
.isOwner .class_welcome_setting.isLobbyMenu {
	display: block;
}
.class_welcome_setting.isLobbySpectators {
	margin-top: 25px;
}



#id_welcome_lobby_servers_tpl {
	display: none;
}
.class_welcome_lobby_servers {
	position: relative;
	background: #fff;
	padding: 15px 20px;
	margin-top: 15px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	transition: all 0.5s;
	overflow: hidden;
	border: 2px solid #007bff;
}
.class_welcome_lobby_servers:first-child {
	margin-top: 50px;
}
.class_welcome_lobby_servers:hover {
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 20px 0px #007BFE;
	box-shadow: 0px 0px 20px 0px #007BFE;
}
.class_welcome_lobby_servers .classLobby {
	font-weight: bold;
	font-size: 2rem;
}
.class_welcome_lobby_servers .classPlayers {}
.class_welcome_lobby_servers .classPlayers span {
	font-style: italic;
	line-height: 1;
	border-bottom: 1px dotted #000;
}



.isOpacityHover {
	padding: 20px;
	opacity: 0.25;
	transition: all 0.25s;
}
.isOpacityHover:hover {
	opacity: 1;
}
.class_welcome_setting-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.75;
	top: 0;
	left: 0;
}



#id_welcome_buttons_1, #id_welcome_buttons_2 {
	transition: all 0.5s;
}
#id_welcome_buttons_1.isHide, #id_welcome_buttons_2.isHide {
	cursor: default;
	/* opacity: 0; */
}
#id_welcome_buttons_1.isHide button, #id_welcome_buttons_2.isHide button {
	cursor: default;
}
.class_welcome_btn {
	font-size: 20px;
}
#id_welcome_lobby .toogle_create,
#id_welcome_lobby .toogle_connect {
	display: none;
}
#id_welcome_lobby.isCreate .toogle_create,
#id_welcome_lobby.isConnect .toogle_connect {
	display: inline;
}
#id_game {
	display: flex;
	justify-content: center;
	align-items: center;
}
#id_game__card_toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	height: 100%;
	width: 100%;
}

.class_welcome_lobby_setting {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(1.5em + 1rem + 2px);
	min-width: calc(1.5em + 1rem + 2px);
	margin-left: 15px;
	color: #fff;
	background: #007bff;
	border: 1px solid #000000;
	border-radius: 0.3rem;
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.5s;
	position: relative;
	display: none;
}
.isAdmin .class_welcome_lobby_setting {
	display: flex;
}
.class_welcome_lobby_setting i {
	transition: all 0.5s;
	font-size: 2rem;
}
.class_welcome_lobby_setting:hover {
	background: #0069d9;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #0062cc;
	box-shadow: 0px 0px 10px 0px #0062cc;
}

.class_welcome_lobby_copy {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(1.5em + 1rem + 2px);
	min-width: calc(1.5em + 1rem + 2px);
	margin-left: 15px;
	color: #fff;
	background: #343a40;
	border: 1px solid #000000;
	border-radius: 0.3rem;
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.5s;
	position: relative;
}
.class_welcome_lobby_copy i {
	transition: all 0.5s;
}
.class_welcome_lobby_copy-second {
	position: absolute;
	right: -10px;
	top: -10px;
	background: #17a2b8;
	border: 2px solid #17a2b8;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-box-shadow: 0px 0px 10px 0px #ffffff;
	box-shadow: 0px 0px 10px 0px #ffffff;
	cursor: pointer;
	transition: all 0.5s;
	color: #fff;
	z-index: 1;
}
.class_welcome_lobby_copy-second i {
	transition: all 0.5s;
}
.class_welcome_lobby_copy-second:hover {
	background: #138496;
	border-color: #138496;
	-webkit-box-shadow: 0px 0px 10px 0px #138496;
	box-shadow: 0px 0px 10px 0px #138496;
}
.class_welcome_lobby_copy.isSmall {
	font-size: 13px;
}
.class_welcome_lobby_copy:hover {
	background: #23272b;
	border-color: #007bff;
	-webkit-box-shadow: 0px 0px 10px 0px #007bff;
	box-shadow: 0px 0px 10px 0px #007bff;
}
.class_welcome_lobby_copy:active {
	border-radius: 25%;
}
.class_welcome_lobby_copy:focus-within {
	border-radius: 50%;
	border-color: #007bff;
	-webkit-box-shadow: 0px 0px 10px 0px #007bff;
	box-shadow: 0px 0px 10px 0px #007bff;
	background: #007bff;
}
.class_welcome_lobby_leave {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(1.5em + 1rem + 2px);
	min-width: calc(1.5em + 1rem + 2px);
	margin-right: 15px;
	color: #fff;
	background: #dc3545;
	border: 1px solid #dc3545;
	border-radius: 0.3rem;
	font-size: 1.25rem;
	cursor: pointer;
	transition: all 0.5s;
}
.class_welcome_lobby_leave:hover {
	background: #c82333;
	border-color: #bd2130;
	-webkit-box-shadow: 0px 0px 10px 0px #bd2130;
	box-shadow: 0px 0px 10px 0px #bd2130;
}
.class_lobby_reconnect-kick {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(1.5em + 1rem + 2px);
	min-width: calc(1.5em + 1rem + 2px);
	margin-right: 15px;
	color: #fff;
	background: #dc3545;
	border: 1px solid #dc3545;
	border-radius: 0.3rem;
	/* font-size: 1.25rem; */
	font-size: 13px;
	cursor: pointer;
	transition: all 0.5s;
	position: relative;
	opacity: 0.25;
	display: none;
}
.isAdmin .class_lobby_reconnect-kick {
	display: flex;
}
.class_lobby_reconnect-kick i {
	font-size: 20px;
}
.class_lobby_reconnect-kick:hover {
	background: #c82333;
	border-color: #bd2130;
	-webkit-box-shadow: 0px 0px 10px 0px #bd2130;
	box-shadow: 0px 0px 10px 0px #bd2130;
}
.class_lobby_reconnect-div .input-group:hover .class_lobby_reconnect-kick
{
	opacity: 1;
}










.class_welcome_lobby_list_player:nth-child(1) .class_welcome_lobby_list_player-div div:nth-child(1) {
	background: #ff0000;
}
.class_welcome_lobby_list_player:nth-child(2) .class_welcome_lobby_list_player-div div:nth-child(1) {
	background: #ffc107;
}
.class_welcome_lobby_list_player:nth-child(3) .class_welcome_lobby_list_player-div div:nth-child(1) {
	background: #00ff00;
}
.class_welcome_lobby_list_player:nth-child(4) .class_welcome_lobby_list_player-div div:nth-child(1) {
	background: #0000ff;
}
.class_welcome_lobby_list_player:nth-child(1) .class_welcome_lobby_list_player-div:hover div:nth-child(1) {
	-webkit-box-shadow: 0px 0px 20px 0px #ff0000;
	box-shadow: 0px 0px 20px 0px #ff0000;
}
.class_welcome_lobby_list_player:nth-child(2) .class_welcome_lobby_list_player-div:hover div:nth-child(1) {
	-webkit-box-shadow: 0px 0px 20px 0px #ffc107;
	box-shadow: 0px 0px 20px 0px #ffc107;
}
.class_welcome_lobby_list_player:nth-child(3) .class_welcome_lobby_list_player-div:hover div:nth-child(1) {
	-webkit-box-shadow: 0px 0px 20px 0px #00ff00;
	box-shadow: 0px 0px 20px 0px #00ff00;
}
.class_welcome_lobby_list_player:nth-child(4) .class_welcome_lobby_list_player-div:hover div:nth-child(1) {
	-webkit-box-shadow: 0px 0px 20px 0px #0000ff;
	box-shadow: 0px 0px 20px 0px #0000ff;
}

.class_welcome_lobby_list_player:nth-child(3),
.class_welcome_lobby_list_player:nth-child(4) {
	margin-top: 1rem;
}
.class_welcome_lobby_list_player-div {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 25px;
	line-height: 1;

	padding: 10px;
	padding-bottom: 11px;
	border: 2px dotted #000;
	border-radius: 10px;
	transition: all 0.5s;
	cursor: default;

	text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
}

.isOwnerSlot .class_welcome_lobby_list_player-div {
	border: 2px solid #000;
	border-style: solid !important;
}
.isYou .class_welcome_lobby_list_player-div {
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
}

.class_welcome_lobby_list_player-div div:nth-child(1) {
	transition: all 0.5s;
}

.class_welcome_lobby_list_player:nth-child(1) > div:hover .class_welcome_lobby_list_player-div {
	color: #ff0000;
	border-color: #ff0000;
	background: rgb(255 0 0 / 10%);
	border-style: dashed;
}
.class_welcome_lobby_list_player:nth-child(2) > div:hover .class_welcome_lobby_list_player-div {
	color: #ffc107;
	border-color: #ffc107;
	background: rgb(255 193 7 / 10%);
	border-style: dashed;
}
.class_welcome_lobby_list_player:nth-child(3) > div:hover .class_welcome_lobby_list_player-div {
	color: #00ff00;
	border-color: #00ff00;
	background: rgb(0 255 0 / 10%);
	border-style: dashed;
}
.class_welcome_lobby_list_player:nth-child(4) > div:hover .class_welcome_lobby_list_player-div {
	color: #0000ff;
	border-color: #0000ff;
	background: rgb(0 0 255 / 10%);
	border-style: dashed;
}



.class_welcome_lobby_list_player.isSpectator .class_welcome_lobby_list_player-div div:nth-child(1) {
	background: #000;
}
.class_welcome_lobby_list_player.isSpectator > div:hover .class_welcome_lobby_list_player-div {
	color: #000;
	border-color: #000;
	background: rgb(0 0 0 / 10%);
}
.isSpectator .class_welcome_lobby_list_player-div {
	font-style: italic;
}



.class_welcome_lobby_list_player-div div:nth-child(1) {
	height: 25px;
	width: 25px;
	background: #000000;
	border-radius: 50%;
	border: 2px solid #000;
	margin-right: 10px;
}
.class_welcome_lobby_list_player.isEmpty .class_welcome_lobby_list_player-div {
	opacity: 0.25;
}
.class_welcome_lobby_list_player.isEmpty:hover .class_welcome_lobby_list_player-div {
	opacity: 0.75;
}
.class_welcome_lobby_list_player.isEmpty:hover .class_welcome_lobby_list_player-div-background {
	opacity: 0.5;
}

.class_welcome_lobby_list_player.isEmpty:hover .class_welcome_lobby_list_player-div div:nth-child(1) {
	z-index: 1;
}

.class_welcome_lobby_list_player.isEmpty .class_welcome_lobby_list_player-div-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 50%);
	top: 0;
	left: 0;
	border-radius: 10px;
	cursor: pointer;
}
.class_welcome_lobby_list_player-buttons {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
	cursor: pointer;
	opacity: 0;
}
.class_welcome_lobby_list_player-buttons:hover {
	opacity: 1;
}
#id_welcome_lobby_list:not(.isOwner) .class_welcome_lobby_list_player-buttons {
	display: none;
}

.class_welcome_lobby_list_player-buttons > div {
	height: 35px;
	width: 35px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	margin-right: 10px;
	border: 1px solid #000;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.5s;
}
.class_welcome_lobby_list_player-buttons > div:hover {
	-webkit-box-shadow: 0px 0px 5px 0px #000000;
	box-shadow: 0px 0px 5px 0px #000000;
	background: #017bff;
	color: #fff;
}
.class_welcome_lobby_list_player-buttons > div.isTrash:hover {
	-webkit-box-shadow: 0px 0px 5px 0px #dc3545;
	box-shadow: 0px 0px 5px 0px #dc3545;
	background: #dc3545;
	color: #fff;
}
.class_welcome_lobby_list_player:not(.isEmpty) .class_welcome_lobby_list_player-buttons > div.isAddBot {
	display: none;
}
.class_welcome_lobby_list_player.isEmpty .class_welcome_lobby_list_player-buttons > div.isTrash {
	display: none;
}
#id_lobby_start:not(.isCanStart) {
	display: none;
}
#id_lobby_setting {
	max-width: 650px;
}










.class_lobby_div {
	width: 80vw;
	display: flex;
	justify-content: center;
	margin-top: 50px;
}
.isGamePlayShort:not(.isWelcome) .class_lobby_div {
	margin-top: 0;
	width: 85vw;
}
.class_lobby_div.isHasScrollBar {
	margin-bottom: 75px;
}
@media (max-width: 767px) {
	.class_lobby_div {
		width: 95vw;
	}
}
.class_lobby_div__left {
	/* background: #fff; */
	position: relative;
}
.class_lobby_div__left-winners {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1010;
}
@keyframes winners_bg_ani {
	0% {opacity: 0.95;}
	75% {opacity: 0.95;}
	100% {opacity: 0;}
}
.class_lobby_div__left-winners-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	opacity: 0.95;
	transition: all 0.5s;
}

.class_lobby_div__left-winners:hover .class_lobby_div__left-winners-background {
	/* opacity: 0; */
	animation: winners_bg_ani 2s forwards;
}
.class_lobby_div__left-winners-information {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #8540f5;
	transition: all 0.5s;
	cursor: default;
}
.class_lobby_div__left-winners:hover .class_lobby_div__left-winners-information {
	animation: winners_bg_ani 2s forwards;
}
.class_lobby_div__left-winners-information-places {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.class_lobby_div__left-winners-information-places-img {
	width: 80%;
	pointer-events: none;
}
.class_lobby_div__left-winners-information-places-1 {
	position: absolute;
	top: -4%;
	left: 36%;
	width: 30%;
	pointer-events: none;
}
.class_lobby_div__left-winners-information-places-2 {
	position: absolute;
	top: 16%;
	left: 10%;
	width: 30%;
	pointer-events: none;
}
.class_lobby_div__left-winners-information-places-3 {
	position: absolute;
	top: 26%;
	left: 61%;
	width: 30%;
	pointer-events: none;
}

.class_lobby_div__left-winners-information-text {
	font-size: 3.5vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}






.class_lobby_div__right {}
.class_lobby_board__pixel {
	position: absolute;
	transition: all 0.25s linear;
	z-index: 10;
}
.class_lobby_board__pixel[data-arrow] {
	/* cursor: pointer; */
}
.class_lobby_board__pixel img {
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.class_lobby_board__pixel img.isAvatar {
	z-index: 3;
}
.class_lobby_board__pixel img.isMove.isNowTurn,
.class_lobby_board__pixel img.isAvatar.isNowTurn {
	z-index: 4;
}
.class_lobby_board__pixel img.isMove.isYou,
.class_lobby_board__pixel img.isAvatar.isYou {
	z-index: 5;
}

.class_lobby_board__pixel .isWizzard {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
.class_lobby_board__pixel .isWizzard.isNowTurn {
	z-index: 4;
}
.class_lobby_board__pixel .isWizzard.isYou {
	z-index: 5;
}
.class_lobby_board__pixel .isWizzard.isHide:not(.isYou) {
	display: none;
}

.class_lobby_board__pixel .isWizzard.isYouAnimation {
	transition: all 0.25s linear;
	transform: translate(0px, 0px) !important;
}

@keyframes lobby_board_ani_full {
	0% {opacity: 1;}
	50% {opacity: 1;}
	100% {opacity: 0.1;}
}

@keyframes lobby_board_ani {
	0% {opacity: 1;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

.class_lobby_board__pixel img.isMove.isHoverHide,
.class_lobby_board__pixel img.isAvatar.isHoverHide {
	animation: lobby_board_ani_full 1s forwards;
}

.class_lobby_board__pixel .isHideWaitHover {
	display: none;
	transition: all 0.5s;
}
.class_lobby_board__pixel.isArrowNotActive .isHideWaitHover {
	display: block;
}

.isVirtual .isExtraAvatars,
.class_lobby_board__pixel .isExtraAvatars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-content: flex-start;
}

.isVirtual .isExtraAvatars div.isOneItem,
.class_lobby_board__pixel .isExtraAvatars div.isOneItem {
	background: #fff;
	border-radius: 50%;
	border: 2px solid #fff;
	display: block;
	margin-left: 3px;
	margin-top: 3px;
	width: 1vw;
	height: 1vw;
	min-width: 1vw;
	min-height: 1vw;
	max-width: 1vw;
	max-height: 1vw;
	-webkit-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 0px 0px 5px 0px #000;
}
.isVirtual .isExtraAvatars div.isOneItem {
	position: relative;
}
.isVirtual .isExtraAvatars div.isOneItemSeparator,
.class_lobby_board__pixel .isExtraAvatars div.isOneItemSeparator {
	width: 100%;
}

.isVirtual .isExtraItems,
.class_lobby_board__pixel .isExtraItems {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
	align-content: flex-start;
}
.isVirtual .isExtraItems div.isOneItem,
.class_lobby_board__pixel .isExtraItems div.isOneItem {
	position: relative;
	background: #e6e2bf;
	border-radius: 50%;
	border: 2px solid #000;
	display: block;
	margin-right: 3px;
	margin-top: 3px;
	width: calc(2vw + 3px);
	height: calc(2vw + 3px);
	min-width: calc(2vw + 3px);
	min-height: calc(2vw + 3px);
	max-width: calc(2vw + 3px);
	max-height: calc(2vw + 3px);
	-webkit-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 0px 0px 5px 0px #000;
}
.isVirtual .isExtraItemsVirtual {
	position: relative;
	background: #e6e2bf;
	border-radius: 50%;
	border: 2px solid #000;
	display: block;
	margin-right: 3px;
	margin-top: 3px;
	width: calc(2vw + 3px);
	height: calc(2vw + 3px);
	min-width: calc(2vw + 3px);
	min-height: calc(2vw + 3px);
	max-width: calc(2vw + 3px);
	max-height: calc(2vw + 3px);
	-webkit-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 0px 0px 5px 0px #000;
	position: absolute;
	z-index: 5;
	right: 0;
	top: 0;
	display: none;
}
.isVirtual .isExtraAvatars div.isOneItem.is_player_1,
.class_lobby_board__pixel .isExtraAvatars div.isOneItem.is_player_1 {
	background: #ff0000;
}
.isVirtual .isExtraAvatars div.isOneItem.is_player_2,
.class_lobby_board__pixel .isExtraAvatars div.isOneItem.is_player_2 {
	background: #0000ff;
}
.isVirtual .isExtraAvatars div.isOneItem.is_player_3,
.class_lobby_board__pixel .isExtraAvatars div.isOneItem.is_player_3 {
	background: #00ff00;
}
.isVirtual .isExtraAvatars div.isOneItem.is_player_4,
.class_lobby_board__pixel .isExtraAvatars div.isOneItem.is_player_4 {
	background: #ffc107;
}

.isVirtual .isExtraItems.isHoverHide,
.isVirtual .isExtraAvatars.isHoverHide,
.class_lobby_board__pixel .isExtraAvatars.isHoverHide,
.class_lobby_board__pixel .isExtraItems.isHoverHide {
	animation: lobby_board_ani 0.5s forwards;
}

.class_lobby_board__pixel.isFound::after {
	content: "";
	background-image: url(../images/item_found.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.5s;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 20;
}
#id_game__card_toggle.isFound::after {
	content: "";
	background-image: url(../images/item_found.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 60%;
	height: 60%;
	position: absolute;
	transition: all 0.5s;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 20;
}



/* .class_lobby_board__pixels:hover {
	background-image: url("../images/card__active.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
} */

/* .class_lobby_board__pixel:not(.isNotHover):hover::before {
	content: "";
	background-image: url(../images/card__active.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.5s;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
} */

.isShowStaticCardHover .class_lobby_board__pixel[data-id="1"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="3"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="5"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="7"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="15"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="17"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="19"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="21"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="29"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="31"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="33"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="35"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="43"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="45"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="47"]::before,
.isShowStaticCardHover .class_lobby_board__pixel[data-id="49"]::before
{
	content: "";
	background-image: url(../images/card__active.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.5s;
	z-index: 2;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
}
.isShowStaticCard .class_lobby_board__pixel[data-id="1"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="3"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="5"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="7"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="15"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="17"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="19"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="21"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="29"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="31"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="33"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="35"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="43"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="45"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="47"]::before,
.isShowStaticCard .class_lobby_board__pixel[data-id="49"]::before
{
	content: "";
	background-image: url(../images/card__active.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.5s;
	z-index: 2;
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}
.isArrowYourTurn {
	display: none;
}
.isTurnStep_0 .isArrowYourTurn {
	display: block;
}
.isTurnStep_0 .isNotArrowYourTurn {
	display: none;
}
.isArrowNotActive .isArrowYourTurn,
.isArrowNotActive .isNotArrowYourTurn {
	display: none;
}





.class_lobby_board__pixel_select {
	position: absolute;
	transition: all 0.25s linear;
	z-index: 1000;
}
.class_lobby_board__pixel_select.isNone {
	display: none;
}

.class_lobby_board__pixel_select div {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all 0.25s linear;
}

.class_lobby_board__pixel_select img {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
	transition: all 1s linear;
	opacity: 0;
	animation: ani 0.25s forwards;
}

.class_lobby_board__pixel_select .isDoubleClick {
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4.5vw;
	color: #00ff00;
	background: rgb(133 64 245 / 75%);
	border-radius: 0.5vw;
	text-shadow: 0 -1px 1px #000000, 0 -1px 1px #000000, 0 1px 1px #000000, 0 1px 1px #000000, -1px 0 1px #000000, 1px 0 1px #000000, -1px 0 1px #000000, 1px 0 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 1px 1px 1px #000000;
	border: 2px solid #000;
	transition: all 0.25s linear;
	z-index: 1001;
	transform: translate(0px, 0px) !important;
}

.isYourTurn .class_lobby_board__pixel_select {
	cursor: pointer;
}
.isYourTurn .class_lobby_board__pixel_select:not(.isNotHover):hover {
	z-index: 1001;
}
.isYourTurn .class_lobby_board__pixel_select:not(.isNotHover):hover::before {
	content: "";
	background-image: url(../images/card__active.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: all 0.5s;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 5;
}

.isTurnStep_0 .class_lobby_board__pixel_select[data-s_type="board"] {
	cursor: default;
}
.isTurnStep_0 .class_lobby_board__pixel_select[data-s_type="board"]::before {
	content: none !important;
	background-image: none !important;
}
.isTurnStep_1 .class_lobby_board__pixel_select[data-s_type="arrow"] {
	cursor: default;
}
.isTurnStep_1 .class_lobby_board__pixel_select[data-s_type="arrow"]::before {
	cursor: default;
	content: none !important;
	background-image: none !important;
}

#game_board_desk {
}
#game_board_desk img {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;
	transition: all 0.25s linear;
}





#game_board_turn img {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;
	transition: all 0.25s linear;
	opacity: 0;
}
.isTurnStep_1 #game_board_turn img {
	opacity: 1;
}
#game_board_turn img.isBlack {
	transition: none;
	opacity: 1;
}





#game_board_path div {
	position: absolute;
	z-index: 10;
}
#game_board_path div.isSuccess {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(0 255 0 / 50%);
	border-radius: 0.5vw;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 0;
}
#game_board_path div.isSuccess-square {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(0 255 0 / 50%);
	border-radius: 0.5vw;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 0;
}
#game_board_path div.isError {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(255 0 0 / 50%);
	border-radius: 0.5vw;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 0;
}
#game_board_path div.isError-square {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(255 0 0 / 50%);
	border-radius: 0.5vw;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
	z-index: 0;
}
#game_board_path img {
	width: 100%;
	height: 100%;
	pointer-events: none;
	top: 0;
	left: 0;
}










.class_board__path {
	position: absolute;
	transition: all 1s linear;
	z-index: 5;
}
.class_board__path img {
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
}





.class_lobby_board__button-bottom_left {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.class_lobby_board__button-bottom_left_update {
	width: 75%;
	height: 75%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #000;
	border-radius: 50%;
	font-size: 150%;
	color: #000;
	transition: all 0.5s;
	cursor: pointer;
}
.class_lobby_board__button-bottom_left_update:hover {
	color: #fff;
	background: #8540f5;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_board__button-bottom_left_refresh {
	bottom: 0;
	left: 0;
	position: absolute;
	width: 40%;
	height: 40%;
	background: #fff;
	border: 2px solid #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 125%;
	transition: all 0.5s;
	cursor: pointer;
}
.class_lobby_board__button-bottom_left_refresh:hover {
	color: #fff;
	background: #8540f5;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}





.class_lobby_board__button-top_left {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.class_lobby_board__button-top_left--btn {
	width: 75%;
	height: 75%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #000;
	border-radius: 50%;
	font-size: 150%;
	color: #000;
	transition: all 0.5s;
	cursor: pointer;
}
.class_lobby_board__button-top_left--btn:hover {
	color: #fff;
	background: #8540f5;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_board__button-top_left.isActive .class_lobby_board__button-top_left--btn {
	color: #fff;
	background: #8540f5;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_board__board_static {
	display: none;
	position: absolute;
	z-index: 1;
}
.class_lobby_board__button-top_left--btn:hover ~ .class_lobby_board__board_static  {
	display: flex;
	transition: all 0.5s;
	-webkit-animation: fadeIn 0.5s linear alternate infinite;
	-moz-animation: fadeIn 0.5s linear alternate infinite;
	animation: fadeIn 0.5s linear alternate infinite;
}
.class_lobby_board__button-top_left--btn.isActive1 ~ .class_lobby_board__board_static  {
	display: flex;
	transition: all 0.5s;
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}

.class_lobby_board__button-top_left_question {
	top: 0;
	left: 0;
	position: absolute;
	width: 40%;
	height: 40%;
	background: #fff;
	border: 2px solid #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 125%;
	transition: all 0.5s;
	cursor: pointer;
}
.class_lobby_board__button-top_left_question:hover {
	color: #fff;
	background: #8540f5;
	border-color: #000;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}

.class_lobby_board__background {
	position: absolute;
	/* background: #000; */
}
.class_lobby_card__choose {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}
.class_lobby_card__choose-background {
	pointer-events: none;
	cursor: pointer;
	height: 100%;
}
.class_lobby_card__choose-background--hover {
	pointer-events: none;
	cursor: pointer;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: all 0.5s;
}
.class_lobby_card__choose-div:hover .class_lobby_card__choose-background--hover {
	opacity: 1;
}
.class_lobby_card__choose-div {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
}
.class_lobby_card__choose-player {
	position: absolute;
	top: -7.5%;
	left: -7.5%;
	border: 4px solid #000;
	width: 25%;
	height: 25%;
	border-radius: 50%;
	background: #fff;
	transition: all 0.25s linear;

	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2vw;
	line-height: 0;
	/* padding-bottom: 0.35vw; */
	text-shadow: 0 -1px 2px #ffffff, 0 -1px 2px #ffffff, 0 1px 2px #ffffff, 0 1px 2px #ffffff, -1px 0 2px #ffffff, 1px 0 2px #ffffff, -1px 0 2px #ffffff, 1px 0 2px #ffffff, -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, 1px 1px 2px #ffffff, -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, 1px 1px 2px #ffffff;
}
.class_lobby_card__choose-player span {
	padding-bottom: 0.35vw;
}
.class_lobby_card__choose-player.isSpin {
	transition: none;
	padding-bottom: 0;
}
.class_lobby_card__choose-player i {}
.class_lobby_card__choose-player.is_player_1 {
	background: #ff0000;
}
.class_lobby_card__choose-player.is_player_2 {
	background: #0000ff;
}
.class_lobby_card__choose-player.is_player_3 {
	background: #00ff00;
}
.class_lobby_card__choose-player.is_player_4 {
	background: #ffc107;
}
.class_lobby_card__choose-player.isActive {
	border-color: #6610f2;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_card__choose-player .isTimer {
	position: absolute;
	top: -30%;
	left: -30%;
	border: 2px solid #000;
	width: 65%;
	height: 65%;
	border-radius: 50%;
	background: #fff;
	transition: all 0.25s linear;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
	padding-bottom: 3px;
	font-weight: bold;
	line-height: 0;
}

.class_lobby_card__choose-winners {
	position: absolute;
	top: -7.5%;
	right: calc(-12.5% + 2px);
	border: 4px solid #000;
	width: 25%;
	height: 25%;
	border-radius: 50%;
	background: #fff;

	margin-top: 15%;
	right: -30%;
}
.class_lobby_card__choose-winners img {
	pointer-events: none;
}
.class_lobby_card__choose-winners.isFirst {
	top: -7.5%;
	background: #ffaa19;
}
.class_lobby_card__choose-winners.isSecond {
	top: 22.5%;
	background: #6d7689;
}
.class_lobby_card__choose-winners.isThird {
	top: 52.5%;
	background: #8c5800;
}
.class_lobby_card__choose-winners.isFour {
	top: 82.5%%;
}
.class_lobby_card__choose-winners-avatar {
	position: absolute;
	width: 120%;
	height: 120%;
	left: -10%;
	top: -5%;
}
#id_game__turn_card {
	transition: all 0.25s linear;
}
.class_lobby_card__choose-now {
	position: absolute;
	pointer-events: none;
	cursor: pointer;
	height: 60%;
}
.class_lobby_reconnect-player_nickname {
	padding-left: 0.75rem;
	font-weight: bold;
}
.class_lobby_reconnect-player_1, .class_lobby_reconnect-player_2, .class_lobby_reconnect-player_3, .class_lobby_reconnect-player_4 {
	height: 20px;
	width: 20px;
	background: #000000;
	border-radius: 50%;
	border: 2px solid #000;
	transition: all 0.5s;
}
.class_lobby_reconnect-block {
	padding-bottom: 0.5rem;
}
.class_lobby_reconnect-block .form-control {
	width: 0;
}
.class_lobby_reconnect-separator {
	width: 100%;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	border: 2px dotted #000;
}
.class_lobby_reconnect-player_1 {
	background: #ff0000;
}
.input-group:hover .class_lobby_reconnect-player_1 {
	-webkit-box-shadow: 0px 0px 10px 0px #ff0000;
	box-shadow: 0px 0px 10px 0px #ff0000;
}
.class_lobby_reconnect-div .input-group .input-group-text {
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.class_lobby_reconnect-div[data-player="player_1"] .input-group:hover .input-group-text,
.class_lobby_reconnect-div[data-player="player_1"] .input-group:hover input {
	border-color: #ff0000;
}
.class_lobby_reconnect-player_2 {
	background: #0000ff;
}
.input-group:hover .class_lobby_reconnect-player_2 {
	-webkit-box-shadow: 0px 0px 10px 0px #0000ff;
	box-shadow: 0px 0px 10px 0px #0000ff;
}
.class_lobby_reconnect-div[data-player="player_2"] .input-group:hover .input-group-text,
.class_lobby_reconnect-div[data-player="player_2"] .input-group:hover input {
	border-color: #0000ff;
}
.class_lobby_reconnect-player_3 {
	background: #00ff00;
}
.input-group:hover .class_lobby_reconnect-player_3 {
	-webkit-box-shadow: 0px 0px 10px 0px #00ff00;
	box-shadow: 0px 0px 10px 0px #00ff00;
}
.class_lobby_reconnect-div[data-player="player_3"] .input-group:hover .input-group-text,
.class_lobby_reconnect-div[data-player="player_3"] .input-group:hover input {
	border-color: #00ff00;
}
.class_lobby_reconnect-player_4 {
	background: #ffc107;
}
.input-group:hover .class_lobby_reconnect-player_4 {
	-webkit-box-shadow: 0px 0px 10px 0px #ffc107;
	box-shadow: 0px 0px 10px 0px #ffc107;
}
.class_lobby_reconnect-div[data-player="player_4"] .input-group:hover .input-group-text,
.class_lobby_reconnect-div[data-player="player_4"] .input-group:hover input {
	border-color: #ffc107;
}
.class_lobby_reconnect-div[data-player="player_1"] .class_welcome_lobby_copy,
.class_lobby_reconnect-div[data-player="player_2"] .class_welcome_lobby_copy,
.class_lobby_reconnect-div[data-player="player_3"] .class_welcome_lobby_copy,
.class_lobby_reconnect-div[data-player="player_4"] .class_welcome_lobby_copy
{
	background: #8540f5;
	border-color: #6610f2;
	opacity: 0.25;
}
.class_lobby_reconnect-div .input-group:hover .class_welcome_lobby_copy
{
	opacity: 1;
}
.class_lobby_reconnect-div[data-player="player_1"] .class_welcome_lobby_copy:hover,
.class_lobby_reconnect-div[data-player="player_2"] .class_welcome_lobby_copy:hover,
.class_lobby_reconnect-div[data-player="player_3"] .class_welcome_lobby_copy:hover,
.class_lobby_reconnect-div[data-player="player_4"] .class_welcome_lobby_copy:hover
{
	opacity: 1;
	background: #8540f5;
	border-color: #6610f2;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_reconnect-div[data-player="player_1"] .class_welcome_lobby_copy:focus-within,
.class_lobby_reconnect-div[data-player="player_2"] .class_welcome_lobby_copy:focus-within,
.class_lobby_reconnect-div[data-player="player_3"] .class_welcome_lobby_copy:focus-within,
.class_lobby_reconnect-div[data-player="player_4"] .class_welcome_lobby_copy:focus-within
{
	border-radius: 50%;
	background: #8540f5;
	border-color: #6610f2;
	-webkit-box-shadow: 0px 0px 10px 0px #6610f2;
	box-shadow: 0px 0px 10px 0px #6610f2;
}
.class_lobby_reconnect-div {
	display: flex;
	margin-bottom: 1rem;
}
.class_lobby_reconnect-div:last-child {
	margin-bottom: 0;
}
.class_lobby_reconnect-div.isDisconnect .input-group-text,
.class_lobby_reconnect-div.isDisconnect .form-control {
	background-color: #ffc0cb;
}
.class_lobby_reconnect-div .input-group-text {
	cursor: pointer;
}

.class_lobby_reconnect-spectators--separator {
	display: flex;
}
.class_lobby_reconnect-spectators div {
	display: inline;
	cursor: pointer;
	font-weight: bold;
	font-style: italic;
}
.class_lobby_reconnect-spectators div:hover {
	border-bottom: 2px dotted #000;
}


.class_lobby_setting-block {
	padding-bottom: 0.5rem;
}
.class_lobby_setting-separator {
	width: 100%;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	border: 2px dotted #000;
}
.class_lobby_setting-restart-btn {
	width: 100%;
	font-size: 1rem;
}
.class_lobby_setting-restart-btn.isLg {
	font-size: 1.5rem;
	font-weight: bold;
}
.class_lobby_setting-lobby-btn {
	width: 100%;
	font-size: 1rem;
}
.class_lobby_setting-lobby-btn.isLg {
	font-size: 1.5rem;
	font-weight: bold;
}





.class_lobby_card__players {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	position: relative;
}
.class_lobby_card__players img {
	pointer-events: none;
	width: 100%;
	height: 100%;
}
.class_lobby_card__players-div {
	position: relative;
}
.class_lobby_card__players-div.isPlayer::after {
	content: "";
	background-image: url(../images/card__player.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 122%;
	height: 122%;
	position: absolute;
	top: -11%;
	left: -11%;
	z-index: -1;
}
.class_lobby_card__players-div > div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.class_lobby_card__players-circle {
	position: absolute;
	top: -5%;
	right: -5%;
	background: #fff;
	border: 4px solid #000;
	border-radius: 50%;
	height: 25%;
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	font-size: 2vw;
	font-weight: bold;
	cursor: default;
	padding-bottom: 4px;
	transition: all 0.5s;
}
.class_lobby_card__players-circle.isMin {
	top: -10%;
	right: -10%;
	border: 2px solid #000;
	height: 45%;
	width: 45%;
	font-size: 1.15vw;
	padding-bottom: 2px;
}
.class_lobby_card__players-circle.isEnd {
	background: #8540f5;
	/* background: #6610f2; */
	color: #fff;
	/* border-color: #6610f2; */
	box-shadow: 0 0 10px 0 #6610f2;
}
.class_lobby_card__players-circle.isDisconnect {
	background: #FFC0CB;
}

.class_lobby_card__players-queue {
	margin-bottom: 20px;
}
.class_lobby_card__players-queue:last-child {
	margin-bottom: 0;
}

/* @keyframes animation_loot_item {
	0% {opacity: 1;}
	10% {opacity: 0;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	80% {opacity: 1;}
	90% {opacity: 0;}
	100% {opacity: 1;}
} */
@keyframes animation_loot_item {
	0% {opacity: 1;}
	16% {opacity: 0;}
	32% {opacity: 1;}
	48% {opacity: 0;}
	64% {opacity: 1;}
	80% {opacity: 0;}
	96% {opacity: 1;}
	100% {opacity: 1;}
}
.isAnimationLootItem img[data-id="item"] {
	animation: animation_loot_item 3s forwards;
}





.app_setting-about-card_all[disabled],
.app_setting-about-comp_hard[disabled],
.app_setting-about-portal_random[disabled],
.app_setting-about-turn_random[disabled],
.app_setting-about-avatar_hide_for_enemy[disabled],
.app_setting-about-board_preview_card[disabled],
.app_setting-about-items_show_in_board[disabled],
.app_setting-about-items_show_for_enemy[disabled],
.app_setting-about-board_can_insert_last[disabled],
.app_setting-about-items_random[disabled],
.app_setting-about-items_random_in_portal[disabled],
.app_setting-about-save_lobby_if_empty[disabled],
.app_setting-about-items_count_hide_for_enemy[disabled],
.app_setting-about-avatar_show_for_enemy_end[disabled] {
	opacity: 1;
	/* outline: none !important;
	box-shadow: none !important; */
}










.debug {
	z-index: 1111;
	display: flex;
	position: fixed;
	height: 50vh;
	bottom: calc(-50vh - 10px);
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	transition: all 0.5s;
}
.debug.isOpen {
	bottom: 0;
}
.debug_icon {
	position: absolute;
	top: 0;
	right: 0;
}
#debug_button {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 55px;
	width: 55px;
	top: -80px;
	right: 20px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #000;
	cursor: pointer;
	font-size: 25px;
	transition: all 0.5s;
	position: absolute;
}
#debug_button:hover {
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	background: #ff0000;
	color: #fff;
}
#debug_button_setting {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 35px;
	width: 35px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #000;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.5s;
	position: absolute;
	top: -100px;
	right: 15px;
}
#debug_button_setting.isActive,
#debug_button_setting:hover {
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	background: #ff0000;
	color: #fff;
}
#debug_button_fullscreen {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	width: 30px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #000;
	cursor: pointer;
	font-size: 15px;
	transition: all 0.5s;
	position: absolute;
	top: -115px;
	right: 35px;
}
#debug_button_fullscreen:hover {
	-webkit-box-shadow: 0px 0px 10px 0px #000000;
	box-shadow: 0px 0px 10px 0px #000000;
	background: #ff0000;
	color: #fff;
}

.debug_block {
	height: 100%;
	width: 100%;
}
.debug_block-textarea {
	height: 85%;
	overflow: hidden;
	overflow-y: scroll;
	border-top: 2px solid #000;
}
.debug_block-textarea-div {
	padding: 15px;
}
.debug_block-textarea-div div:first-child {
	border-bottom: 1px dotted;
}
.debug_block-input {
	height: 15%;
	border-top: 2px solid #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 15px;
}
.debug_block-input-left {
	width: 100%;
	height: 100%;
}
.debug_block-input-left input {
	width: 100%;
	height: 100%;
}
.debug_block-input-right {
	display: flex;
	margin-left: 15px;
	height: 100%;
}
.debug_block-input-right div {
	margin-right: 15px;
	font-size: 25px;
}
.debug_block-input-right button {
	font-size: 25px;
	padding: 0 15px;
	line-height: 0;
	white-space: nowrap;
}
.debug_textarea-message {
	font-weight: bold;
	color: #17a2b8;
}
.debug_textarea-chat {
	font-weight: bold;
	color: #017bff;
}
.debug_textarea-time {
	font-weight: bold;
	color: #6c757d;
}











.app_modal__lobby_setting-button {
	color: #fff !important;
	background: #8540f5;
	border-color: #6610f2;
	font-weight: bold;
	font-size: 18px;
	width: 100%;
	white-space: nowrap;
	transition: all .2s ease;
}
.app_modal__lobby_setting-button:not(.modDisableHover):hover {
	color: #fff;
	background: #6610f2;
	border-color: #6610f2;
}
.app_modal__lobby_setting-button_stream-left {
	width: 100%;
	margin-left: calc(var(--bs-gutter-x)/ 2);
}
.app_modal__lobby_setting-button_stream-right {
	width: 100%;
	margin-right: calc(var(--bs-gutter-x)/ 2);
}
.app_setting-input_icon {
	width: 16px;
	height: 16px;
}
.app_setting-input_btn {
	margin-left: 0.5rem !important;
	border-radius: .25rem !important;
}
.app_setting-input_btn2 {
	margin: 0;
	border-radius: .25rem !important;
	white-space: nowrap;
	justify-content: center;
	display: flex;
	align-items: center;
}

/* Кнопка fullscreen-toggle для мобилок: видна только когда body.isMobile. */
.mobile-fullscreen-btn {
	position: fixed;
	top: .5rem;
	right: .5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease;
}
.mobile-fullscreen-btn:active,
.mobile-fullscreen-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}
body.isMobile .mobile-fullscreen-btn {
	display: flex;
}
.app_setting-input_input {
	border-top-right-radius: .25rem !important;
	border-bottom-right-radius: .25rem !important;
}
.app_setting-setting_title {
	font-size: 15px;
}
.app_setting-setting_title2 {
	font-size: 15px;
	margin-bottom: 0.5rem;
}
.class-modalHistory-btn-isHide .class-modalHistory-btn {
	display: none !important;
}
.class-modalHistory-btn-isShow .class-modalHistory-btn {
	display: inline-block !important;
}
.card-body {
	padding-top: 1rem;
}