* {
	/*box-sizing: content-box;*/
}

html, body {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	margin: 0;
	position: fixed;
	overflow-x: hidden;
	background-color: #333333;
}
body, #fade {
	background-image: url('/asset/projects/waldwick/Town.svg');
	background-size: cover;
	background-repeat: no-repeat;
}
p, a, h1, h2, h3, h4, h5, h6, li, td, th, select, option, label {
	font-size: 1em;
	font-weight: 300;
	font-family: 'Yantramanav', 'Exo', sans-serif;
	color: #FFFFFF;
}
a {
	text-decoration: none;
}
p a {
	margin: 0;
	vertical-align: middle;
}
ul {
	margin: 0 10px;
	text-align: left;
}
table {
	border-collapse: unset;
}
input {
	font-size: 0.9em;
	font-weight: 400;
	color: #000000;
}
label {
	display: block;
}
input, select, option, button {
	/*font-size: 1em;*/
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
select:hover, option:hover {
	cursor: pointer;
}
button:hover {
	box-shadow: none;
}
input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin: 0 5px 2px 0;
	position: relative;
	vertical-align: middle;
}
input[type="checkbox"]::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #888888;
	border-radius: 1em;
}
input[type="checkbox"]:checked::after {
	content: "";
	width: 40%;
	height: 40%;
	margin: 30%;
	position: absolute;
	/*background-color: #FFFFFF;*/
	border-radius: 1em;
}
html::-webkit-scrollbar-track, .scrolling::-webkit-scrollbar-track {
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;*/
}
html::-webkit-scrollbar, .scrolling::-webkit-scrollbar {
	width: 10px;
	/*background-color: #F5F5F5;*/
}
html::-webkit-scrollbar-thumb, .scrolling::-webkit-scrollbar-thumb {
	background-color: #888888;
}
html::-webkit-scrollbar-corner, .scrolling::-webkit-scrollbar-corner {
	background: transparent;
}

/* Import overrides */

.sortableContainer {
	width: 100%;
	float: left;
}
.sortableActive {
	box-shadow: 0 4px 12px 0 #33333333;
}

/* Generic elements */

.block {
	display: flex;
	flex-direction: column;
}
.block p, .block a, .block ul, .block ol {
	margin: 5px 15px;
	text-align: left;
	font-size: 20px;
}
.block a {
	margin: 5px 15px 4px;
	border-bottom: 1px solid #FFFFFF;
}
.block p a {
	margin: 0;
}
.block table {
	width: 100%;
}
.blockStretch {
	height: 100%;
}
.blockStretchHalf {
	max-height: calc(50% - 20px);
}
.blockStretchHalf .blockContent {
	height: 100%;
}
.blockHeader {
	margin: 0;
	line-height: 40px;
	font-size: 24px;
	font-weight: 300;
	font-family: 'Yantramanav', sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
}
.blockContent {
	/*background-color: #666666;*/
	background-color: #FFFFFF40;
	overflow: auto;
}
.blockContent .blockNavigation {
	background-color: transparent;
}
.blockNavigation {
	table-layout: fixed;
	/*background-color: #666666;*/
	background-color: #FFFFFF40;
}
.blockNavigation button {
	width: 100%;
	font-size: 20px;
	color: #FFFFFF;
	border: none;
}
.blockNavigation button:hover {
	box-shadow: none;
}
.blockFooterButton {
	margin-top: 40px;
}
.blockForm h5 {
	margin: 10px 0 5px 0;
	padding-left: 10px;
	font-size: 18px;
}
.blockForm input[type="text"], .blockForm input[type="number"] {
	width: 100%;
	height: 40px;
	padding: 0 0 0 10px;
	border: 0;
}
.blockForm select {
	width: 100%;
	height: 30px;
	padding-left: 20px;
	padding-right: 10px;
	font-size: 18px;
	/*background-color: #888888;*/
	background-color: #FFFFFF38;
	border: none;
}
.blockForm select option {
	font-size: 18px;
	background-color: #888888;
	border: 0;
}
.blockForm label {
	margin: 5px 10px;
}
.blockForm .list {
	/*background-color: #888888;*/
	background-color: #FFFFFF38;
}
.blockForm .list > *:not(.listNoItem) {
	/*border-top: 1px solid #AAAAAA;*/
	border-top: 1px solid #FFFFFF49;
}
.blockForm .list:not(.readonly) .listItem:hover {
	/*background-color: #777777;*/
	background-color: #0000001F;
	cursor: pointer;
}
.blockForm .list *:first-child {
	border-top: none;
}
.blockForm .blockFormInline {
	display: flex;
}
.blockForm .blockFormInline button {
	padding: 0 20px;
	color: #FFFFFF;
	border: none;
}
.blockForm .blockFormInline button:hover {
	color: #CCCCCC;
	box-shadow: none;
}
.blockForm .dropdown {
	margin: 0;
}

.block.feedback {
	/*width: calc(100% - 40px);*/
	/*width: 100%;*/
	margin: 0;
	display: none;
	flex-direction: row;
}

.button {
	width: 200px;
	padding: 10px 0;
	font-size: 24px;
	font-family: 'Yantramanav', 'Exo', sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
}
.buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.buttons a {
	margin: 0;
	text-align: center;
	border: none;
}
.buttons button {
	margin: 0 10px 20px;
}

.banner {
	width: 100%;
	height: unset;
	padding: 5px;
	text-align: center;
	background: transparent;
	border: 2px solid;
}
.banner h2 {
	margin: 20px 0;
	font-size: 32px;
}
.banner h3 {
	margin: 0;
	font-size: 36px;
}
.banner h4 {
	margin: 0;
	font-size: 24px;
}

.list {
	width: 100%;
	text-align: center;
	font-size: 20px;
	/*background-color: #666666;*/
	background-color: #FFFFFF40;
}
.list > *:not(.listNoItem) {
	padding: 2px 0;
	background-clip: padding-box;
	/*border-top: 1px solid #888888;*/
	border-top: 1px solid #FFFFFF38;
}
.list > *:not(.colorBackground) {
}
.list .listHeader {
	margin: 0;
}
.list .listItem {
	margin: 0;
	text-align: center;
}
.list .listItem:hover {
	/*background-color: #555555;*/
	background-color: #0000002B;
	cursor: pointer;
}
.list .listItemFlex {
	display: flex;
}
.list .listItemFlex .listItemExpand {
	flex-grow: 1;
}
.list .feedbackClose {
	margin: 0;
}

.page {
	width: 100vw;
	height: calc(100vh - 60px);
	padding: 40px;
	vertical-align: top;
	display: inline-block;
}
.page * + .block:not([style*="display:none"]) {
	margin-top: 40px;
}
.page * + .feedback:not([style*="display:none"]) {
	margin-top: 20px;
	/*margin-bottom: -20px;*/
}

.scrolling {
	overflow-y: auto;
}

.dropdown {
	margin: 0;
	padding: 5px 20px;
	display: flex;
	justify-content: space-between;
}
.dropdown:hover {
	cursor: pointer;
}
.dropdownClosed + div {
	display: none;
}
.dropdownIcon {
	width: 23px;
	height: 23px;
	margin-right: -15px;
}
.dropdownOpen .dropdownIcon, .dropdownClosed:hover .dropdownIcon {
	background-image: url('/asset/DropdownOpen.png');
}
.dropdownOpen:hover .dropdownIcon, .dropdownClosed .dropdownIcon {
	background-image: url('/asset/DropdownClosed.png');
}

.tableList {
	width: 100%;
	text-align: center;
	font-size: 20px;
}
.tableList tr td {
	height: 30px;
	padding: 0;
	/*border-top: 1px solid #888888;*/
	border-top: 1px solid #FFFFFF38;
	overflow: hidden;
}
.tableList tr td:not(.colorBackground) {
	/*background-color: #666666;*/
	background-color: #FFFFFF40;
}
.tableList .feedbackClose {
	margin: 0;
}

.icon:hover {
	cursor: pointer;
	filter: url(#iconHover)
}

.buttonBorder {
	border-width: 2px;
	border-style: solid;
}

.playersTable {
	width: 100%;
	padding-left: 10px;
	border-spacing: 10px 0;
}
.playersTable tr {
	height: 35px;
}
.playersTable tr td {
	width: calc(100% / 3);
	padding: 0;
	text-align: center;
	font-size: 20px;
	word-break: break-word;
	/*border-bottom: 1px solid #888888;*/
	border-bottom: 1px solid #FFFFFF38;
	overflow: hidden;
}
.playersTable tr:last-child td {
	border: 0;
}

#arrows {
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}
.arrow {
	top: calc(50vh - 10px);
	width: 20px;
	height: 20px;
	position: absolute;
	background-image: url("/asset/projects/waldwick/NavigateArrow.png");
	z-index: 90;
}
.arrow:hover {
	background-image: url("/asset/projects/waldwick/NavigateArrowHover.png");
	cursor: pointer;
}
.arrowLeft {
	left: 10px;
	transform: rotate(-90deg);
}
.arrowRight {
	right: 10px;
	transform: rotate(90deg);
}

/* Base styling overrides */
.buttonDelete {
	color: #A01010;
	border-color: #A01010;
}
.buttonDelete:hover {
	background-color: #A01010;
}
.feedback .feedbackMessage {
	padding: 0;
}
.error {
	background-color: #A01010;
}

/* Styles for every page */
.header {
	display: none;
}
.headerIndependent {
		justify-content: space-between;
	}
.headerName {
	display: none;
}
.headerName:hover {
	border: 0;
}
.menuButton .menuIcon {
	background-image: url('/asset/icons/header/Menu.svg');
}
.menuButton:hover .menuIcon {
	background-image: url('/asset/icons/header/MenuExpand.svg');
}

.fade {
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
	background-color: #333333;
	z-index: 100;
}

/* Specific elements */
#entry, #menu, #newGame, #game {
	margin: 0;
}
.view {
	width: 300vw;
	height: 100vh;
	top: 0;
	left: -100vw;
	padding-top: 60px;
	position: absolute;
	display: none;
	overflow: hidden;
}

/* Login */
#login {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 60px 40px 0;
	text-align: center;
	background: #1B2E4C url('/asset/projects/waldwick/Sky.svg') no-repeat center;
	background-size: cover;
	z-index: 100;
}
#login h1 {
	margin: 0 20px 50px;
	padding-top: 4vh;
	font-size: 90px;
	font-weight: 200;
	font-family: 'Tulpen One', cursive;
	letter-spacing: 5px;
	color: #FFFFFF;
}
#login form input {
	height: 50px;
	width: 100%;
	max-width: 400px;
	padding: 0;
	margin: 20px auto 0;
	display: block;
	text-align: center;
	font-family: 'Exo', sans-serif;
	color: #FFFFFF;
	background-color: #0000001A;
	backdrop-filter: blur(1px);
	border: 0;
	border-radius: 0;
	box-shadow: 0 10px 10px -10px #000000CC;
}
#login form input::placeholder {
	color: #FFFFFF;
	opacity: 0.6;
}
#login form .submit {
	margin-top: 50px;
}
#login form .input:focus {
	border-bottom: 1px solid #FFFFFFBD;
}
#login form .input:-webkit-autofill {
	color: #FFFFFF;
	background-color: #0000001A;
}
#login form .submit:hover {
	/*color: #000000;*/
	/*background-color: #FFFFFFBD;*/
	border-bottom: 1px solid #FFFFFFBD;
	cursor: pointer;
}
.registerLink {
	max-width: 400px;
	margin: 5px auto 0;
	font-size: 14px;
	color: #FFFFFF;
	opacity: 0.6;
}
.registerLink:hover {
	opacity: 0.8;
	cursor: pointer;
}
.loginFeedback {
	width: 100%;
	max-width: 400px;
	margin: 30px auto 0;
	background-color: #0000001A;
	backdrop-filter: blur(1px);
	box-shadow: 0 10px 10px -10px #000000CC;
}
.loginFeedback.error {
	border-bottom: 1px solid #A01010;
}
.loginFeedback .feedbackMessage {
	margin: 0;
	padding: 10px 15px;
}

/* Menu */
#settings {
	max-height: calc(100% - 100px);
}

.gameDetails {
	display: none;
	background-color: #555555;
}
.gameDetails p {
	margin: 5px 10px;
}
.gameDetails a {
	margin: 5px 10px 4px;
}
.gameDetails p a {
	margin: 0;
}
.gameDetailLists {
	display: flex;
	justify-content: space-between;
}
.gameDetailLists .gameDetailList:last-child * {
	text-align: right;
}
.noGamesContainer tr td {
	width: 100%;
	vertical-align: top;
	background: none;
	border: none;
}
.noGamesBlock {
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #666666;
}
.noGamesRight {
	text-align: left;
	background-image: url('/asset/projects/waldwick/WelcomeBackgroundRight.png');
}
.noGamesLeft {
	text-align: right;
	background-image: url('/asset/projects/waldwick/WelcomeBackgroundLeft.png');
}
.noGamesBlock p {
	width: 100%;
	margin: 0;
	padding: 10px 20px calc((100vw - 80px) * (150 / 1240) + 10px);
	font-size: 24px;
}

.openGamesContainer {
	max-height: calc(100% - 96px);
}
.pageRight .openGamesContainer .block {
	margin-right: 0;
}

/* New game menu */
#newGame tr td {
	vertical-align: top;
}
.newGameError {
	width: 100%;
	margin: 20px 0 0;
}
.newGameError tr td {
	vertical-align: middle !important;
}
#newGameDelete {
	width: 100%;
	padding: 10px 30px;
	color: #FFFFFF;
	border: none;
}

/* Game */
#brief {
	padding: 0 35vw;
	background-size: cover;
	background-repeat: no-repeat;
}
#brief > div {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#brief h3 {
	margin: auto 0 20px;
	font-size: 24px;
	font-weight: 200;
}
#brief h2 {
	margin: 0 0 auto;
	/*margin: auto;*/
	font-size: 48px;
	/* font-family: Lato; */
	/* font-weight: bold; */
	font-style: italic;
	text-align: center;
	line-height: 1em;
}
#brief button {
	margin-bottom: 80px;
}

.messagesContainer {
	height: calc(100% - 80px);
}
.messagesTable tr {
	height: 30px;
}
.messagesTable tr td {
	padding: 0 5px 0 10px;
	border: 0;
}
.message {
	margin: 5px;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.message p {
	margin: 0;
	font-size: 1em;
}
.message .messageBody {
	word-break: break-word;
}
.message .messageTime {
	text-align: right;
	color: #AAAAAA;
}
.chatGroup1 {
	color: #6E101A;
}
.chatGroup2 {
	color: #AAAAAA;
}
.newMessageContainer {
	height: 40px;
}
.newMessageContainer form table {
	width: 100%;
	border: 0;
}
.newMessageContainer form table tr td {
	padding: 0;
}
.chatInput {
	width: calc(100% - 160px);
}
.chatSubmit {
	width: 160px;
}
.messageInput {
	width: 100%;
	height: 40px;
	padding: 0 0 0 10px;
	border: 0;
}
.messageInput:focus {
	border: 0;
}
.messageSubmit {
	width: 100%;
	height: 40px;
	font-size: 24px;
	font-weight: 300;
	font-family: 'Yantramanav', 'Exo', sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	border: 0;
}
.messageSubmit:hover {
	color: #CCCCCC;
	cursor: pointer;
}


@media screen and (orientation: portrait) {

}
@media screen and (orientation: landscape) {

}
@media (min-resolution: 192dpi) {
	p, a, li, td, th, select, option {
		font-size: 1.1em;
	}
}
@media (min-width: 320px) {
	/* Smartphones, iPhone, portrait 480x320 phones */
}
@media (min-width: 480px) {
	/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}
@media (min-width: 640px) {
	/* Portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
	#login h1 {
		padding-top: 10vh;
	}
}
@media (min-width: 640px) {
	/* Portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}
@media (min-width: 960px) {
	/* Tablet, landscape iPad, lo-res laptops ands desktops */
	.menuButton {
		display: inline-block;
	}
}
@media (min-width: 1024px) {
	/* Big landscape tablets, laptops, and desktops */
}
@media (min-width: 1280px) {
	/* Hi-res laptops and desktops */
	#login h1 {
		margin: 0 0 50px;
		padding-top: 15vh;
		font-size: 120px;
	}
	.view {
		left: 0;
	}
	.page {
		width: 35vw;
		padding-left: 0;
		padding-right: 5vw;
	}
	.pageLeft .block {
		margin-left: 40px;
	}
	.pageRight .block {
		margin-right: 40px;
	}
	.arrow {
		display: none;
	}
	.noGamesBlock p {
		padding: 10px 20px calc(30vw * (150 / 1240) + 10px);
	}
	.newGameContainer {
		width: 30vw;
		max-height: calc(100vh - 100px);
		margin: 40px 35vw 0 35vw;
	}
	#newGame .page {
		margin-left: 35vw;
	}
}
@supports (-webkit-overflow-scrolling: touch) {
	/*.page {*/
	/*	height:calc(100vh - 148px);*/
	/*}*/
	#entry, #menu, #newGame, #game, .page {
		height: calc(100vh - 154px);
	}
}