@font-face {
    font-family: century-goldic;
    src: url("../fonts/CenturyGothic.ttf");
}

@font-face {
    font-family: kelly-slab;
    src: url("../fonts/kelly-slab.ttf");
}

@keyframes opacity_to_0 {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes opacity_to_1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes local_chat_animation {
	0% {
		background: url(../images/game/local_chat.png) -30px 0;
	}
	11% {
		background: url(../images/game/local_chat.png) -60px 0;
	}
	22% {
		background: url(../images/game/local_chat.png) -90px 0;
	}
	33% {
		background: url(../images/game/local_chat.png) -120px 0;
	}
	44% {
		background: url(../images/game/local_chat.png) -150px 0;
	}
	55% {
		background: url(../images/game/local_chat.png) -180px 0;
	}
	66% {
		background: url(../images/game/local_chat.png) -150px 0;
	}
	77% {
		background: url(../images/game/local_chat.png) -120px 0;
	}
	88% {
		background: url(../images/game/local_chat.png) -90px 0;
	}
	100% {
		background: url(../images/game/local_chat.png) -60px 0;
	}
}

@keyframes global_chat_animation {
	0% {
		background: url(../images/game/global_chat.png) -0px 0;
	}
	7% {
		background: url(../images/game/global_chat.png) -30px 0;
	}
	14% {
		background: url(../images/game/global_chat.png) -60px 0;
	}
	21% {
		background: url(../images/game/global_chat.png) -90px 0;
	}
	28% {
		background: url(../images/game/global_chat.png) -120px 0;
	}
	35% {
		background: url(../images/game/global_chat.png) -150px 0;
	}
	42% {
		background: url(../images/game/global_chat.png) -180px 0;
	}
	49% {
		background: url(../images/game/global_chat.png) -210px 0;
	}
	56% {
		background: url(../images/game/global_chat.png) -240px 0;
	}
	63% {
		background: url(../images/game/global_chat.png) -270px 0;
	}
	70% {
		background: url(../images/game/global_chat.png) -300px 0;
	}
	77% {
		background: url(../images/game/global_chat.png) -330px 0;
	}
	84% {
		background: url(../images/game/global_chat.png) -360px 0;
	}
	91% {
		background: url(../images/game/global_chat.png) -390px 0;
	}
	100% {
		background: url(../images/game/global_chat.png) -420px 0;
	}
}

@keyframes admin_chat_animation {
	0% {
		background: url(../images/game/admin_chat.png) -0px 0;
	}
	14% {
		background: url(../images/game/admin_chat.png) -30px 0;
	}
	28% {
		background: url(../images/game/admin_chat.png) -60px 0;
	}
	42% {
		background: url(../images/game/admin_chat.png) -90px 0;
	}
	56% {
		background: url(../images/game/admin_chat.png) -120px 0;
	}
	70% {
		background: url(../images/game/admin_chat.png) -150px 0;
	}
	84% {
		background: url(../images/game/admin_chat.png) -180px 0;
	}
	100% {
		background: url(../images/game/admin_chat.png) -210px 0;
	}
}

@keyframes water-top {
	from {
		background: url(../images/game/water_top.png) 0px 0px;
	}
	to {
		background: url(../images/game/water_top.png) 97px 0px;
	}
}

@keyframes k_collision_animation {
	0% {
		left: 0px;
	}
	25% {
		left: 10px;
	}
	50% {
		left: 0px;
	}
	75% {
		left: -10px;
	}
	100% {
		left: 0px;
	}
	
}

@keyframes mine_animation {
	0% {
		left: 50%;
	}
	25% {
		left: 60%;
	}
	50% {
		left: 40%;
	}
	75% {
		left: 60%;
	}
	100% {
		left: 50%;
	}
}

@keyframes body_animation {
	0% {
		background-size: 100% 100%;
	}
	25% {
		background-size: 150% 150%;
	}
	50% {
		background-size: 120% 120%;
	}
	75% {
		background-size: 110% 110%;
	}
	100% {
		background-size: 100% 100%;
	}
}

.logo_div {
	display: block;
	text-align: center;
	padding-top: 30px;
	position: relative;
	z-index: 10;
	height: 191px;
}

.logo_start_div {
	display: block;
	text-align: center;
	padding-top: 30px;
	position: absolute;
	top: 150px;
	text-align: center;
	width: 100%;
	z-index: 10;
}

.water_mp {
	display: block;
	width: 100%;
	height: calc(100% - 100px);
	position: absolute;
	top: 100px;
	left: 0;
	background: url(../images/animation/water.png) no-repeat center top fixed;
	background-size: 100% 100%;
}

.swater_mp {
	display: block;
	width: 100%;
	height: calc(100% - 100px);
	position: absolute;
	top: 100px;
	left: 0;
	background: url(../images//animation/swater.png) no-repeat center top fixed;
	background-size: 100% 100%;
}

body {
	background: url(../images/background.png) no-repeat center top fixed;
	background-size: 100% 100%;
	margin: 0;
	padding: 0;
	animation: body_animation 10s linear infinite;
}

.timer {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 50px;
}

.timer_container {
	margin-left: auto;
    margin-right: auto;
	text-align: center;
	color: white;
	font-family: century-goldic;
	font-size: 22px;
}

#content {
    width: 100%;
    margin: 0 auto 50px;
	text-align: center;
}

#footer {
    position: absolute;
    left: 0;
	bottom: 0;
    background: url(../images/bottom_panel.png) no-repeat;
	background-size: cover;
    width: 100%;
	height: 50px;
	font-size: 12px;
	text-align: center;
	color: white;
	line-height: 50px;
	font-family: century-goldic;
}

#footer span {
	padding-left: 10px;
	padding-right: 10px;
}

#footer a {
	font-size: 15px;
	text-decoration: none;
	color: white;
}

#footer a:hover {
	text-decoration: underline;
}

.button_a {
	z-index: 999;
	text-decoration: none;
	opacity: 1;
}

.a_button {
	display: block;
	position: absolute;
	width: 250px;
	height: 100px;
	top: 270px;
	background: url(../images/reg_button.png) no-repeat;
	background-size: cover;
	text-align: center;
	line-height: 50px;
	z-index: 9;
	left: 20%;
	color: white;
}

.a_button:hover {
	background: url(../images/reg_h_button.png) no-repeat;
	background-size: cover;
}

.l_button {
	display: block;
	position: absolute;
	width: 250px;
	height: 100px;
	top: 270px;
	background: url(../images/crew_button.png) no-repeat;
	background-size: cover;
	text-align: center;
	z-index: 9;
	right: 20%;
	color: white;
}

.l_button:hover {
	background: url(../images/crew_h_button.png) no-repeat;
	background-size: cover;
}

.content_register {
	display: block;
	margin-left: auto;
    margin-right: auto;
    width: 50em;
	height: 920px;
	background: url(../images/reg_bg.png) no-repeat;
	background-size: cover;
	text-align: center;
	text-decoration: none;
}

.content_login {
	display: block;
	margin-left: auto;
    margin-right: auto;
    width: 50em;
	height: 200px;
	background: url(../images/reg_bg.png) no-repeat;
	background-size: cover;
	text-align: center;
	text-decoration: none;
}
.content_user {
	display: block;
	margin-left: auto;
    margin-right: auto;
	padding-bottom: 30px;
    width: 50em;
	background: url(../images/reg_bg.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	text-decoration: none;
}

.register_header {
	text-align: center;
	font-size: 20px;
}

.register_header p {
	margin: 0;
}

button:hover {
	cursor: pointer;
	background-color: #282722;
}

hr {
	width: 300px;
}

.button_register {
	text-align: center;
	text-decoration: none;
}

.birth_day {
	width: 30px;
}

.birth_year {
	width: 85px;
}

.textarea_register {
	width: 744px;
	height: 226px;
	resize: none;
}

.content_list {
	margin-left: auto;
    margin-right: auto;
    width: 936px;
	text-align: center;
	z-index: 31;
	text-decoration: none;
	display: flex;
}

.rules_list {
	text-align: left;
	font-size: 20px;
}

.big_text {
	font-size: 20px;
}

.player_in_list {
	width: 100%;
	height: 100px;
	color: #4169e1;
	background: url(../images/border_list.png);
	display: flex;
	font-family: 'Times New Roman';
	font-style: italic;
}

.image_in_list {
	width: 80px;
	height: 80px;
	margin-left: 10px;
	position: relative;
	top: 10px;
}

.game_avatar {
	width: 100px;
	height: 100px;
	position: relative;
}

.name_in_list {
	font-size: 20px;
}

.name_block {
	width: 749px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.player_image {
	position: absolute;
	top: 0;
	left: 0;
}

.rules_start {
	font-size: 30px;
	text-align: center;
}

.rules_part {
	font-weight: 900;
}

.preloader_content {
	width: 500px;
	height: 150px;
	text-align: center;
	color: white;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#preloader_screen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
	z-index: 999;
}

#loading_text {
	transition: 1s;
	opacity: 1;
	color: black;
}

.button_loading {
	margin-left: auto;
    margin-right: auto;
	display: none;
}

.button_game {
	width: 150px;
	height: 50px;
	background: url(../images/game/button.png);
	text-align: center;
	line-height: 50px;
	z-index: 9;
	cursor: default;
	border: none;
	color: black;
}

.button_game:hover {
	background: url(../images/game/button_hover.png);
	cursor: pointer;
}

.top {
	width: 100%;
	height: 30px;
	background: url(../images/game/panel_top.png);
	position: absolute;
	top: 0;
	left: 0;
	line-height: 30px;
	text-align: center;
	z-index: 900;
}

#information {
	z-index: 777;
	background-color: inherit;
	display: block;
	position: absolute;
	top: 29px;
	right: -352px;
	width: 330px;
	height: 170px;
	color: white;
	border: solid rgba(255, 255, 255, 0.5);
	border-width: 0px 0px 2px 2px;
	border-radius: 0 0 0 20px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	transition: 1s linear;
	overflow: hidden;
	backdrop-filter: blur(5px);
	padding: 10px;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
	box-shadow: -1px 1px 3px black;
}

.bottom_panel {
	display: flex;
	width: 100%;
	height: 150px;
	color: black;
	position: relative;
	z-index: 5;
}

.bottom_panel__left {
	width: calc(50% - 192px);
	min-width: 793px;
	height: 100%;
	background: url(../images/game/bottom_panel_side.png) right 0;
	position: relative;
}

.bottom_panel_center {
	min-width: 384px;
	height: 100%;
	background: url(../images/game/bottom_panel_center.png);
	position: relative;
}

.bottom_panel_right {
	width: calc(50% - 192px);
	height: 100%;
	background: url(../images/game/bottom_panel_side.png);
	position: relative;
}

.bottom_panel_buttons {
	width: 470px;
    height: 100%;
    position: absolute;
	right: 10px;
	top: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
}

.player_information_block {
	width: 368px;
	height: 139px;
	background: url(../images/game/player_information.png);
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.player_information {
	width: 240px;
	height: 100px;
	text-align: left;
	font-family: 'Times New Roman';
    font-style: italic;
}

#player_name {
	font-size: 20px;
	font-weight: 600;
}

#player_name:hover {
	cursor: pointer;
	text-decoration: underline;
}

.needs_unit {
	position: relative;
	width: 110px;
	height: 10px;
}

.needs_unit_occupied {
	display: block;
	width: 0px;
	height: 10px;
	background-color: green;
	border: 1px solid black;
	border-radius: 10px;
	transition: 1s linear;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.needs_unit_total {
	display: block;
	width: 100px;
	height: 10px;
	background-color: black;
	border: 1px solid;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
}

#chat_block {
	display: none;
	background-color: white;
	width: calc(100% - 705px);
	height: 350px;
	background: url(../images/list_bg.png);
	background-size: 100% 100%;	
}

#location_block {
	display: none;
	position: absolute;
	background-color: white;
	bottom: 0px;
	right: 0;
	width: 700px;
	height: 350px;
}

#location_name {
	position: absolute;
	top: 5px;
	left: 10px;
	font-size: 35px;
	text-shadow: 5px 5px 5px black;
	font-family: impact;
	color: orange;
	margin: 0;
}

.mine {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 525px;
	height: 815px;
	background: url(../images/mine.png);
	animation: mine_animation 300s cubic-bezier(0, 1.2, 1, 1.2) infinite;
}

.mine_small {
	display: block;
	position: absolute;
	bottom: 0px;
}

.links {
	display: block;
	position: absolute;
	bottom: 50px;
	left: 10px;
	width: 300px;
	height: 50px;
	z-index: 30;
}

.sky {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: url(../images/day.png) no-repeat;
	background-size: 100% 100%;
}

.coast {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 101px;
	background-image: url(../images/coast.png);
	background-size: 100% 100%;
}

.game_body {
	background: black;
}

#info_top {
	display: block;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	background: url(../images/game/info_top.png) no-repeat;
	background-size: cover;
}

.border_panel {
	display: block;
	position: absolute;
	bottom: 350px;
	left: 0;
	width: 100%;
	height: 10px;
	background: url(../images/game/border_panel.png);
}

#game_container {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1280px;
	height: 100%;
	min-height: 800px;
	overflow: hidden;
}

#main_panel {
	display: flex;
	background-color: white;
	width: 100%;
	height: 350px;
	position: relative;
	bottom: 0;
	transition: 1s linear;
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
}

#map {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	padding: 5px;
	background-color: white;
	border: 5px solid #2E2C25;
	border-radius: 10px;
	z-index: 999;
	transform: translate(-50%, -50%);
}

#close_block {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 910;
}

#close_block_location {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 777;
}

.map_div {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1000px;
	height: 1000px;
	opacity: 0.5;
	transition: 0.5s;
}

.map_div:hover {
	opacity: 0.8;
	cursor: pointer;
}

.cabin_block {
	position: absolute;
}

.events_list_block {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 750px;
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
	border: 5px solid #2E2C25;
	border-radius: 10px;
	color: black;
	z-index: 999;
	transform: translate(-50%, -50%);
	text-align: center;
}

.events_list {
	width: 100%;
	height: 90%;
	overflow-y: scroll;
}

.events_unit {
	display: block;
	width: 99%;
	border: 1px solid black;
	border-radius: 5px;
}

.event_description {
	resize: none;
	width: 460px;
	height: 600px;
}

#actions {
	display: none;
	position: absolute;
	width: 600px;
	height: 250px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
	border: 5px solid #2E2C25;
	border-radius: 10px;
	color: black;
	z-index: 888;
	text-align: center;
}

#lifeboats {
	display: none;
	position: absolute;
	width: 600px;
	height: 250px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
	border: 5px solid #2E2C25;
	border-radius: 10px;
	color: black;
	z-index: 888;
	text-align: center;
	padding: 5px;
	flex-wrap: wrap;
	overflow-y: scroll;
	overflow-x: hidden;
}

#change_chat {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
}

.local_chat {
	background: url(../images/game/local_chat.png) 0 0;
}

.local_chat:hover {
	cursor: pointer;
	animation-name: local_chat_animation;
    animation-timing-function: step-start;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.global_chat {
	background: url(../images/game/global_chat.png) 0 0;
}

.global_chat:hover {
	cursor: pointer;
	animation-name: global_chat_animation;
    animation-timing-function: step-start;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.admin_chat {
	background: url(../images/game/admin_chat.png) 0 0;
}

.admin_chat:hover {
	cursor: pointer;
	animation-name: admin_chat_animation;
    animation-timing-function: step-start;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.actions_button {
	margin-right: 5px;
}

.actions_button:last-child {
	margin-right: 0px;
}

#button_actions {
	width: calc(100% - 10px);
	height: 50px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#items_actions {
	display: flex;
	width: calc(100% - 10px);
	height: calc(100% - 70px);
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	flex-wrap: wrap;
	overflow-y: scroll;
	overflow-x: hidden;
}

.item_action {
	width: 80px;
	height: 80px;
	margin-left: 5px;
    margin-top: 5px;
	position: relative;
}

.item_action:hover {
	box-shadow: 0 0 10px yellow, -1px -1px 10px yellow;
	cursor: pointer;
}

.deck_button {
	margin-right: 5px;
	width: 90px;
	background: url(../images/game/deck_button.png);
	background-size: 100% 100%;
	color: black;
}

.deck_button:hover {
	background: url(../images/game/deck_button_hover.png);
	background-size: 100% 100%;
}

.deck_actions {
	width: calc(100% - 10px);
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#players_count {
	position: absolute;
	right: 0px;
    bottom: 30px;
	width: 210px;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	z-index: 3;
}

#players_list {
	display: block;
	position: absolute;
	right: 0px;
	bottom: -310px;
	width: 200px;
	height: 280px;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	padding: 5px;
	font-size: 10px;
	transition: 0.5s linear;
	z-index: 2;
}

.players_list__member {
	position: relative;
}

.player_list__member_info {
	position: absolute;
	top: 0px;
	left: 55px;
}

.player_list__member_info div {
    height: auto;
    max-height: 25px;
    overflow: hidden;
}

.images_copyright {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	text-align: center;
	line-height: 30px;
	z-index: 3;
}

.images_copyright a {
	color: yellow;
	text-decoration: none;
}

.images_copyright a:hover {
	text-decoration: underline;
}

#game_animation {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#canvas_coal {
	position: absolute;
	width: 150px;
	height: 150px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#canvas_coal:hover {
	cursor: pointer;
}

#register_map {
	border: 1px solid black;
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

.register_standard_deck {
	display: none;
	overflow-x: scroll;
    overflow-y: hidden;
	width: 650px;
	text-align: left;
	position: relative;
}

.standard_deck {
	position: relative;
}

#error {
    display: none;
    position: fixed;
    width: 397px;
    min-height: 148px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/error_bg.png);
	background-size: 100% 100%;
    z-index: 999999999;
	padding: 10px;
}

#error_text {
    margin-top: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#error_close {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 99999;
}

.map_img {
	position: relative;
	width: fit-content;
	display: none;
}

.map_med {
	background-color: blue;
}

.map_sinking {
	background-color: rgb(129, 129, 129) !important;
}

.map_underwater {
	background-color: rgb(0, 0, 0) !important;
}

.map_crew {
	background-color: red;
}

.map_wounded {
	background-color: green;
}

.map_occupied {
	background-color: #171414;
}

.registration_secondary_color {
	color: red;
}

.registration_block a, .rules_list a, .a_user, #error_text a {
	color: gray;
	text-decoration: none;
}

.registration_block a:hover, .rules_list a:hover, .a_user:hover, #error_text a:hover {
	text-decoration: underline;
}

.register_table {
	margin: auto;
}

.register_table td {
	text-align: right;
}

.registration_block .final_register_section {
	margin-bottom: 20px;
}

.tippy-box[data-theme~='britannic'] {
	background: url(../images/reg_bg.png);
	background-size: 100% 100%;
	color: black;
}

.crew_img {
	width: 100%;
	height: 191px;
	display: flex;
}

.crew_img_left {
	width: calc(50% - 419px);
	height: 100%;
	background: url(../images/crew_list_left.png) right 0;
}

.crew_img_center {
	width: 838px;
	height: 100%;
	background: url(../images/crew_list.png);
}

.crew_img_right {
	width: calc(50% - 419px);
	height: 100%;
	background: url(../images/crew_list_right.png);
}

.player_description {
	margin: 10px;
}

.crew_list_border_left {
	width: 48px;
	background: url(../images/crew_list_border_left.png);
	background-size: 100% 100%;
}

.crew_list_border_right {
	width: 48px;
	background: url(../images/crew_list_border_right.png);
	background-size: 100% 100%;
}

.players_list {
	background: url(../images/list_bg.png);
	background-size: 100% 100%;
	width: 840px;
}

.crew_list_bottom_border {
	height: 48px;
	background: url(../images/crew_list_border_bottom.png);
}

.crew_list_top_border {
	height: 48px;
	background: url(../images/crew_list_border_top.png);
}

.user_image {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	width: 80px;
	height: 80px;
}

.players_list .user_image {
	margin-top: 10px;
}

.a_list {
	text-decoration: none;
	color: #4169e1;
}

.a_list:hover {
	color: black;
}

.game_panel {
	width: 100%;
	height: 500px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#player_cabin_button:hover {
	cursor: pointer;
	text-decoration: underline;
}

#player_money {
	font-weight: 600;
}

#player_money:hover {
	cursor: pointer;
	text-decoration: underline;
}

.player_information #player_money {
	margin-top: 10px;
}

.needs_block {
	position: absolute;
    left: calc(185px + 50%);
	transform: translate(-50%, 0);
    bottom: 0;
	width: 402px;
	height: 68px;
	background: url(../images/game/needs_block.png);
}

.needs_name {
	padding-left: 10px;
}

#chat {
	width: calc(100% - 20px);
	height: 280px;
	margin: 0px 10px;
}

#chat_write {
	width: calc(100% - 24px);
	height: 50px;
	margin: 5px 10px;
	resize: none;
	background: transparent;
}

#border_chat_location {
	display: none;
	width: 5px;
	height: 100%;
	background: url(../images/game/border_chat_location.png);
	background-size: 100% 100%;
}

.chat_name:hover {
	cursor: pointer;
	text-decoration: underline;
}

.button_center {
	margin-left: auto;
	margin-right: auto;
}

.events_list_block .button_game {
	margin-top: 10px;
}

#event_name {
	margin-top: 10px;
	width: 95%;
	height: 20px;
	resize: none;
	background: transparent;
}

#event_description {
	margin-top: 5px;
	width: 95%;
	height: 83%;
	resize: none;
	background: transparent;
}

#mail_player_list {
	position: absolute;
	width: 95%;
    left: 50%;
	transform: translate(-50%, 0);
	text-align: left;
	border: 2px solid gray;
}

#mail_name {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	height: 20px;
	resize: none;
	background: transparent;
}

#mail_description {
	margin-top: 5px;
	width: 95%;
	height: 83%;
	resize: none;
	background: transparent;
}

.move_button {
	position: absolute;
	right: 5px;
	top: 5px;
	display: none;
	z-index: 1;
}

.other_player_information {
	padding-top: 10px;
	overflow-x: hidden;
	overflow-y: scroll;
}

#current_event {
	width: 100%;
	height: 90%;
}

#current_weather {
	width: 100%;
	height: 10%;
	font-size: 12px;
}

.game_buttons {
	display: flex;
	height: 50px;
	position: absolute;
	bottom: 35px;
	left: 5px;
}

#food_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/food_button.png);
	margin-right: 5px;
}

#food_button:hover {
	cursor: pointer;
}

#purity_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/purity_button.png);
	margin-right: 5px;
}

#purity_button:hover {
	cursor: pointer;
}

#defecate_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/defecate_button.png);
	margin-right: 5px;
}

#defecate_button:hover {
	cursor: pointer;
}

#energy_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/energy_button.png);
	margin-right: 5px;
}

#energy_button:hover {
	cursor: pointer;
}

#poker_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/poker_button.png);
	margin-right: 5px;
}

#poker_button:hover {
	cursor: pointer;
}

#lifeboat_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/lifeboat_button.png);
	margin-right: 5px;
}

#lifeboat_button:hover {
	cursor: pointer;
}

#slot_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/slot_button.png);
	margin-right: 5px;
	cursor: pointer;
}

#coal_button {
	width: 50px;
	height: 50px;
	background: url(../images/game/coal_button.png);
	margin-right: 5px;
}

#coal_button:hover {
	cursor: pointer;
}

#poker {
	display: none;
	width: 556px;
	height: 301px;
	background: url(../images/game/poker/panel.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 888;
}

#coal_game {
	display: none;
	width: 556px;
	height: 301px;
	background: url(../images/game/poker/panel.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 888;
}

.poker_top {
	width: 100%;
	height: 33%;
	position: relative;
}

.poker_top__panel {
	width: 322px;
	height: 74px;
	background: url(../images/game/poker/combo_n_sum.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

.combinations_list {
	width: 198px;
	height: 100%;
	padding: 2px;
	border-spacing: 0;
	font-size: 10px;
}

.poker__select {
	width: 124px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.poker_middle {
	width: 100%;
	height: 15%;
	position: relative;
}

#poker_middle_panel {
	width: 250px;
	height: 32px;
	background: url(../images/game/poker/result.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

#poker_middle_panel:hover {
	cursor: pointer;
	color: gray;
}

#poker_bottom {
	width: 100%;
	height: 50%;
	display: flex;
	justify-content: space-evenly;
    align-items: center;
}

.poker__card {
	width: 92px;
	height: 126px;
	background: url(../images/game/poker/cards.png);
	position: relative;
	bottom: 0;
	transition: 0.25s linear;
	border: 1px solid transparent;
}

.poker__card:hover {
	cursor: pointer;
}

.music_settings {
	margin-top: 10px;
	display: flex;
	justify-content: space-evenly;
}

#previous_music:hover, #next_music:hover {
	cursor: pointer;
	text-decoration: underline;
}

#settings {
	height: auto;
	padding-bottom: 30px;
}

#sound_volume {
	margin-bottom: 10px;
}

#water_block {
	display: block;
	width: 700px;
	height: 0px;
	position: absolute;
	bottom: 0;
	left: 0; 
}

.water_top {
	display: block;
	width: 100%;
	height: 30px;
	background: url(../images/game/water_top.png) 0px 0px;
	animation: water-top 1s linear infinite;
}

.water_body {
	display: block;
	width: 100%;
	height: calc(100% - 30px);
	background: rgba(0, 38, 255, 0.5);
}

#day_buttons {
	display: flex;
	font-size: 12px;
}

#history_chat {
	text-align: left;
	width: 99%;
	margin-left: auto;
	margin-right: auto;
	height: 300px;
}

#avatar_change {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 450px;
    background-color: rgb(224, 200, 185);
    color: black;
    border: 4mm ridge rgba(66, 145, 96, 0.6);
    text-align: center;
    z-index: 999;
    font-family: kelly-slab;
}

#avatar_change_background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

#avatar_button {
    cursor: pointer;
    text-decoration: none;
    color: black;
    background-color: inherit;
    font-size: 20px;
    border: none;
    outline: none;
}

#avatar_button:hover {
    color: #554747;
    text-decoration: underline;
}

#avatar {
    display: none;
}

#change_avatar {
    cursor: pointer;
    font-family: kelly-slab;
    text-decoration: none;
    color: black;
    background-color: inherit;
    font-size: 20px;
    border: none;
    outline: none;
    margin-top: 20px;
}

#change_avatar:hover {
    text-decoration: underline;
    color: rgb(30, 30, 30);
}

.prepare_image_block {
    position: relative;
    overflow: hidden;
    border: thick double rgba(66, 145, 96, 0.6);
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

#prepare_image_border {
    position: absolute;
    border: 2px solid #000000;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.25);
    cursor: move;
}

#player_information {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 451px;
	height: 594px;
	background: url(../images/game/player_panel.png);
	z-index: 1000;
}

.base_panel {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 451px;
	height: 594px;
	background: url(../images/game/panel.png);
	z-index: 1000;
}

.base_panel__text {
	position: absolute;
	top: 144px;
	left: 33px;
	width: 380px;
	height: 421px;
	font-size: 20px;
	color: black;
}

.base_two_panel {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 454px;
	height: 499px;
	background: url(../images/game/panel_two.png);
	z-index: 1000;
}

.base_two_panel__text {
	position: absolute;
	top: 51px;
	left: 33px;
	width: 380px;
	height: 421px;
	font-size: 15px;
	color: black;
}

#rules_buttons {
	display: grid;
	grid: 50px / auto auto;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 300px;
	height: 100px;
}

#player_information__avatar {
	position: absolute;
	top: 32px;
	left: 31px;
	width: 70px;
	height: 70px;
}

#player_information__name {
	position: absolute;
	top: 31px;
	left: 113px;
	max-width: 193px;
	max-height: 10px;
	overflow: hidden;
	line-height: 10px;
	font-size: 10px;
	color: black;
}

#player_information__age {
	position: absolute;
	top: 72px;
	left: 113px;
	max-width: 56px;
	max-height: 10px;
	overflow: hidden;
	line-height: 10px;
	font-size: 10px;
	color: black;
}

#player_information__citizenship {
	position: absolute;
	top: 72px;
	left: 184px;
	max-width: 121px;
	max-height: 10px;
	overflow: hidden;
	line-height: 10px;
	font-size: 10px;
	color: black;
}

#player_information__bio {
	position: absolute;
	top: 144px;
	left: 33px;
	width: 380px;
	height: 421px;
	font-size: 10px;
	color: black;
}

#player_information__mute {
	position: absolute;
	top: 27px;
	left: 313px;
	width: 100px;
	height: 27px;
	background: transparent;
	cursor: pointer;
}

#player_information__padded {
	position: absolute;
	top: 68px;
	left: 314px;
	width: 100px;
	height: 27px;
	background: transparent;
	cursor: pointer;
}

#player_information__ban {
	position: absolute;
	top: 99px;
	left: 290px;
	width: 29px;
	height: 26px;
	background: transparent;
	cursor: pointer;
}

#player_information__report {
	position: absolute;
	top: 99px;
	left: 330px;
	width: 65px;
	height: 26px;
	background: transparent;
	cursor: pointer;
}

#player_information__warn1 {
	display: none;
	position: absolute;
	top: 27px;
	left: 441px;
	width: 10px;
	height: 22px;
	background: url(../images/game/warn_lamp.png);
}

#player_information__warn2 {
	display: none;
	position: absolute;
	top: 58px;
	left: 441px;
	width: 10px;
	height: 22px;
	background: url(../images/game/warn_lamp.png);
}

#player_information__warn3 {
	display: none;
	position: absolute;
	top: 90px;
	left: 441px;
	width: 10px;
	height: 22px;
	background: url(../images/game/warn_lamp.png);
}

.chat_click:hover {
	cursor: pointer;
	text-decoration: underline;
}

.admin_message {
	color: #972c2c;
}

#slot_machine {
	display: none;
	width: 577px;
	height: 300px;
	background: url(../images/game/slot_machine.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 888;
}

#slot_machine__first_number {
	position: absolute;
	top: 23px;
	left: 23px;
	font-size: 120px;
	font-family: kelly-slab;
	color: #f07322;
	width: 99px;
	height: 150px;
	text-align: center;
	justify-content: center;
	display: flex;
}

#slot_machine__second_number {
	position: absolute;
	top: 23px;
	left: 181px;
	font-size: 120px;
	font-family: kelly-slab;
	color: #f07322;
	width: 99px;
	height: 150px;
	text-align: center;
	justify-content: center;
	display: flex;
}

#slot_machine__third_number {
	position: absolute;
	top: 23px;
	left: 339px;
	font-size: 120px;
	font-family: kelly-slab;
	color: #f07322;
	width: 99px;
	height: 150px;
	text-align: center;
	justify-content: center;
	display: flex;
}

#slot_machine__start {
	position: absolute;
	top: 22px;
	left: 474px;
	width: 82px;
	height: 168px;
	background: transparent;
	cursor: pointer;
}

#slot_machine__max {
	position: absolute;
	top: 206px;
	left: 468px;
	width: 94px;
	height: 82px;
	background: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

#new_player_wearing {
	display: none;
	width: 300px;
	height: 350px;
	background: rgba(0, 0, 0, 0.75);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 888;
	color: white;
	text-align: center;
	transition: 1s linear;
	opacity: 0;
}