#game-container {
	margin: 0 auto;
}
.game > .ui.grid {
	margin: 0;
	> .row:first-child {
		padding: 0;
	}
	.chat-container {
		background: var(--theme-text-1);
		padding: 0;
		display: flex;
		flex-direction: column;
		height: 100%;
		right: 0;
		left: 650px;
		z-index: 1000;
		position: absolute;

		@media screen and (max-width: 950px) {
			left: 20%;
			display: none;
		}
		@media screen and (max-width: 600px) {
			left: 0%;
		}

		.gamestatus {
			font-size: 18px;
			font-style: italic;
			color: var(--theme-primary);
			background: var(--theme-background-2);
			padding: 7px 0px 3px 2px;

			&.tourny {
				color: $tourny;
			}
		}

		.aem {
			-webkit-touch-callout: text !important;
			-webkit-user-select: text !important;
			-khtml-user-select: text !important;
			-moz-user-select: text !important;
			-ms-user-select: text !important;
			user-select: text !important;
		}

		.gamechat {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			height: 100%;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			form {
				background: var(--theme-background-3);
				display: flex;
				position: relative;
				z-index: 100;
				padding: 4px 2px 4px 2px;
			}

			.gamechat-filters-container {
				padding: 0 2px;
				margin-top: 6px;
				color: var(--theme-secondary);
			}

			.pointing.menu {
				.observer-chat {
					opacity: 0.75;
				}
				margin: 0;
				min-height: initial;
				overflow-x: initial !important;
				width: 100% !important;
				border-radius: 0;
				.item {
					padding: 0px 1px 6px 0px;
					position: relative;
					z-index: 101;
					&:after {
						left: 40%;
					}

					.bullhorn {
						color: #529243 !important;
					}
				}
				.icon {
					margin-top: 4px;
					cursor: pointer;
				}
				.button {
					padding: 2px 0px;
					font-size: 12px;
					width: 52.5px;
					font-size: 11px;
					background: var(--theme-tertiary) !important;
					color: var(--theme-background-1) !important;
					&:hover {
						background: var(--theme-tertiary) !important;
					}
				}

				.tourny-button {
					width: 110px;
					background: $tourny !important;
					&:hover {
						background: darkgreen !important;
					}
				}
				.button.ui-disabled {
					opacity: 0.45 !important;
					box-shadow: none !important;
					cursor: pointer;
				}
			}
			.chats {
				flex-grow: 1;
				position: relative;
				background: var(--theme-text-1);
				font-size: 18px;
				overflow: hidden;

				img {
					vertical-align: middle;
				}
				.ui.list {
					padding-left: 5px;
					position: absolute;
					bottom: 0;
					line-height: 1.2;
					max-height: 336px;
					width: 98%;
					margin: 0;
				}
				.item {
					word-wrap: break-word;
					line-height: 130%;
					padding: 1px 0 0;

					span {
						max-width: 90%;
					}
				}
				.chat-user {
					color: var(--theme-text-3);
					white-space: nowrap;
				}
				.chat-user--game .chat-timestamp {
					font-size: 12px;
				}
				.chat-user--game,
				.game-chat,
				.chat-user--game .chat-timestamp {
					color: var(--theme-text-3);
				}
				.chat-user--claim,
				.claim-chat {
					color: #fbbd08;
				}
				.chat-user.broadcast {
					color: lightsalmon;
				}
				.broadcast-chat {
					color: lightskyblue !important;
				}
				.chat-role--liberal {
					font-weight: 700;
					color: $darkliberalteam;
				}
				.chat-role--merlin {
					font-weight: 700;
					color: $merlin;
				}
				.chat-role--percival {
					font-weight: 700;
					color: $percival;
				}
				.chat-role--hitler {
					font-weight: 700;
					color: #be0804;
				}
				.chat-role--fascist {
					font-weight: 700;
					color: $darkfascistteam;
				}
				.chat-role--morgana {
					font-weight: 700;
					color: $morgana;
				}
				.chat-role--monarchist {
					font-weight: 700;
					color: $monarchist;
				}
				.chat-player {
					color: var(--theme-text-1);
					font-weight: 700;
				}
			}
			.chat-timestamp {
				color: var(--theme-text-3);
				font-size: 12px;
				white-space: nowrap;
				font-family: arial;
			}
			.chats.blurred {
				filter: blur(4px);
			}
			.claim-container {
				position: absolute;
				top: 80px;
				left: 0;
				width: 100%;
				opacity: 0;
				transition: opacity 1s;
				p {
					font-family: $headerfont;
					font-size: 32px;
					color: #fbbd08;
					text-align: center;
					margin-bottom: 15px;
				}
				.ui.button {
					text-align: center;
					color: var(--theme-text-1);
					display: block;
					width: 230px;
					margin: 0 auto 15px;
				}
				.threefascist {
					background: #c36563;
				}
				.twofascistoneliberal {
					background: #e4bcba;
					color: var(--theme-background-2) !important;
				}
				.onefascistoneliberal {
					background: #fff;
					color: var(--theme-background-2) !important;
				}
				.twoliberalonefascist {
					background: #bfd8ee;
					color: var(--theme-background-2) !important;
				}
				.threeliberal {
					background: #608cb3;
				}
				.card-container {
					display: flex;
					padding: 10px;
					background-color: var(--theme-background-3);
					border-radius: 3px;
					height: 76px;
					margin: 10px;
					&:hover {
						cursor: pointer;
					}
				}
				.card {
					width: 40px;
					height: 56px;
					background-size: contain;
				}
				.card.liberal {
					background-image: url('../../public/images/cards/liberalp-l.png');
				}
				.card.fascist {
					background-image: url('../../public/images/cards/fascistp-l.png');
				}
				.claim-button-container {
					display: flex;
					justify-content: center;
					flex-flow: row wrap;
				}
			}
			.claim-container.active {
				opacity: 1;
			}
			.inputbar {
				.claim-button {
					color: #fbbd08;
					font-style: italic;
					padding: 11px 10px 11px 7px;
					font-size: 16px;
					font-weight: 700;
					z-index: 102;
					cursor: pointer;
					position: relative;
					&:after {
						content: '';
						display: table;
						animation: fadeIn 0.6s infinite alternate;
						top: 0;
						left: 0;
						position: absolute;
						width: 100%;
						height: 100%;
						box-shadow: inset 0 0 5px 5px #fbbd08;
						border-radius: 5px;
					}
				}
				.expando-container {
					position: relative;
					top: 7px;
					left: 4px;
					float: left;
					cursor: pointer;
					.hotkey-container {
						position: absolute;
						width: 150px;
						height: 70px;
						right: 35px;
						background: #eee;
						bottom: 0;
						border: 1px solid var(--theme-text-3);
						> div:hover {
							font-weight: bold;
							color: var(--theme-primary);
						}
						div:first-child {
							width: 75px;
							border-right: 1px solid var(--theme-text-3);
						}
						div {
							width: 73px;
							float: left;
							height: 70px;
							font-size: 16px;
							text-align: center;
							padding-top: 8px;
						}
					}
				}
				span {
					padding-left: 20px;
				}
				.input {
					flex-grow: 1;
					button {
						padding: 0px 10px;
						background: var(--theme-primary);
						&:hover {
							background: var(--theme-tertiary);
						}
					}
				}
				.input.disabled {
					cursor: not-allowed;
				}
				> .icon {
					float: left;
					position: relative;
					top: 10px;
					cursor: pointer;
				}
			}
		}
	}
	.gameroles-container {
		background: var(--theme-text-1);
	}
}

.game > .ui.grid .eight.chat-container .gamechat .inputbar .input {
	width: 548px;
}

.game > .ui.grid .eight.chat-container .gamechat .chats .ui.list {
	width: 577px;
}

.game > .ui.grid .eight.chat-container .gamechat .pointing.menu .icon {
	margin: 7px 0 0 410px;
}

.thirteen.wide .game > .ui.grid .six.chat-container .unlock.icon + .primary.button {
	position: relative;
	z-index: 100;
}

.sixteen.wide .game > .ui.grid .six.chat-container .unlock.icon + .primary.button {
	position: relative;
	z-index: 100;
}

.sixteen.wide .game > .ui.grid .six.chat-container .whitelist {
	float: right;
	background: var(--theme-text-1) !important;
	width: 60px;
}

.sixteen.wide .game > .ui.grid .six.chat-container .whitelist + .button {
	margin-left: 10px;
}

.thirteen.wide .game > .ui.grid .six.chat-container .whitelist {
	float: right;
	background: var(--theme-text-1) !important;
	width: 60px;
}

.thirteen.wide .game > .ui.grid .six.chat-container .whitelist + .button {
	margin-left: 10px;
}

.thirteen.wide .game > .ui.grid .six.chat-container .claim-container {
	width: 390px;
}

.whitelistmodal {
	margin-top: 0 !important;
	top: 50px !important;
	ul {
		max-height: 400px;
		overflow-y: scroll;
		list-style-type: none;
		li,
		li input,
		li label {
			cursor: pointer;
		}
	}
}

.leavegamemodals {
	ul {
		list-style-type: none;
		li {
			margin: 8px 0;
		}
	}
}

#game-container {
	.body-container.fullheight {
		flex-grow: 1;

		.section-main {
			height: 100%;
			> .game {
				height: 100%;
				display: flex;
				flex-direction: column;

				> .ui.grid {
					flex-grow: 1;

					> div.row {
						height: auto;

						.gamechat {
							height: 100%;
							display: flex;
							flex-direction: column;

							.segment.chats {
								height: 100%;
								height: fit-content;
							}
						}
					}
				}
			}
		}
	}
}
