:root {
	--foreground-color: white;
	--foreground-color-faded: rgba(255, 255, 255, .4);
	--background-color:black;
	--base-font-size: 1.5rem;
	--box-padding:0.6rem;
	--box-wrapper-border-radius:0rem;
	--box-content-border-radius:1rem;
}

html.green-screen {
	--foreground-color: #66FF66;	
	--foreground-color-faded: rgba(102, 255, 102, 0.4);	
}

html.amber-screen {
	--foreground-color: #FFB000;	
	--foreground-color-faded: rgba(255, 176, 0, 0.4);	
}

body {
	background:var(--background-color);
	color:var(--foreground-color);
	font-family: 'VT323', monospace;
	display:flex;
	flex-direction: column;
	position: relative;
	font-size:var(--base-font-size);
	line-height:var(--base-font-size);

}

body,html {
	height:100%;
}

.box-wrapper {
	background:var(--foreground-color);
	padding:var(--box-padding);
	border-radius: var(--box-wrapper-border-radius);
}

.box-wrapper.multicolumn {
	display:flex;
	gap:1rem;
	flex-direction:column;
}

.box-column {
	display:flex;
	flex-direction: column;
	justify-content:stretch;
}

.box-content {
	background: var(--background-color);
	padding:1rem 1.5rem;
	border-radius: var(--box-content-border-radius);
}

.box-content:not(.ng-hide) + .box-content {
	margin-top:var(--box-padding);
}

.box-content .box-content {
	padding:0;	
}

menu-list > .box-content {
	margin-top:var(--box-padding);
}

.button-footer {
	margin-top:2rem;
	margin-left:-1.5rem;
	margin-right:-1.5rem;
	padding:1rem 1.5rem 0.5rem 1.5rem;
	border-top:7px double var(--foreground-color-faded);
}

.inverted-colors {
	background:var(--foreground-color);
	color:var(--background-color);
}

.text-faded {
	color:var(--foreground-color-faded) !important;
}

input {
	width:100%;
	padding:0;
	color:var(--foreground-color);
	background:var(--background-color);
	border:none;
	margin-top:0.75rem;
	border-bottom: 2px solid var(--foreground-color);
}

input:focus {
	outline:none;
}

button.primitive {
	background: var(--background-color);
	color: var(--foreground-color);
	text-decoration: underline;
	text-decoration-color: var(--foreground-color-faded);
	border:none;
}

button.primitive:hover {
	background:var(--foreground-color);
	color:var(--background-color) !important;	
	text-decoration: none;
}

button.primitive[disabled] {
	color: var(--foreground-color-faded);
	text-decoration: none;
}

button.primitive[disabled]:hover {
	background:var(--background-color) !important;
	color:var(--foreground-color-faded) !important;	
	text-decoration: none !important;	
}

game-chooser, human-resources, initial-briefing, location, times-up, promotion, new-investigation {
	position:absolute;
	left:0;
	right:0;
}

[ui-view].animate.ng-enter {
	opacity:0;
	transition:0.25s linear all;
	transform: translateX(110%);
}

[ui-view].animate.ng-enter.ng-enter-active {
	opacity:1;
	transform: translateX(0%);
}

[ui-view].animate.ng-leave {
	opacity:1;
	transition:0.25s linear all;
	transform: translateX(0%);
}

[ui-view].animate.ng-leave.ng-leave-active {
	opacity:0;
	transform: translateX(-110%);
}

.location-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-image: var(--location-image-url);
}



.d-contents {
	display:contents !important;
}

top-level, investigate, travel, tools, review-briefing-box, get-warrant-box, rename-investigation-box, chase {
	display:contents;
}

div.warrant-grid {
	display:grid;
	row-gap:0.5rem;
	grid-template-columns:auto auto;
	grid-template-areas: "label menu";
	grid-template-rows: repeat(6, 1fr);
}


div.warrant-grid select, select.simple {
	background:var(--background-color);
	-webkit-appearance:none;
	color:var(--foreground-color);
	border-radius:0;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:1px solid var(--foreground-color);
}

initial-briefing {
	align-items:start;
}

list-of-choices > ul {
	margin:0;
	padding:0;
}

list-of-choices-entry > li {
	list-style-type: none;
}

list-of-choices-entry > li > a {
	cursor:pointer;
	color:var(--foreground-color);
	text-decoration-color:var(--foreground-color-faded);
}

list-of-choices-entry > li > a:hover {
	background:var(--foreground-color);
	color:var(--background-color) !important;	
	text-decoration: none;
}

.list-of-choices-entry-disc {
	list-style-type: disc;
}

.selected-choice {
	background:var(--foreground-color) !important;
	color: var(--background-color) !important;
	text-decoration: none;
}

@keyframes fade-in-out {
	from {opacity:100%;}
	to {opacity:5%;}
}

.fade-in-out {
	animation-name: fade-in-out;
	animation-duration:1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

ul.firebaseui-idp-list {
	list-style: none;
	padding:0;
}

.firebaseui-card-footer {
	font-size:70%;
	line-height:calc(0.7 * var(--base-font-size));
}



span.firebaseui-idp-text-long {
	display:none;
}

span.firebaseui-idp-text-short {
	display:block;
}

button.firebaseui-idp-button {
	padding:0.5rem;
}

#firebaseui-auth-container {
	margin-top:1rem;
}

@keyframes border-pulse {
	from {
		border-color: var(--foreground-color);
	}
	to {
		border-color: var(--background-color);
	}
}

.border-pulse {
	animation-name: border-pulse;
	animation-duration:1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}


login-page > div {
	top:0;
	bottom:0;
	left:0;
	right:0;
	position:absolute;
	justify-content:center;
	padding:1rem;
}

@media (min-width: 768px) {
	:root {
		--base-font-size: 2rem;
		--box-padding:1rem;
		--box-wrapper-border-radius:0.5rem;
		--box-content-border-radius:1.5rem;
	}
	
	span.firebaseui-idp-text-long {
		display:block;
	}
	
	span.firebaseui-idp-text-short {
		display:none;
	}
	
	img.firebaseui-idp-icon {
		margin-right:1rem;
	}
	
	button.firebaseui-idp-button {
		padding:1rem;
	}
	
	game-chooser, human-resources, initial-briefing, location, times-up, promotion, new-investigation {
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	location {
		align-items: stretch;
		margin-top:2rem;
		margin-bottom:2rem;
	}

	.w-md-content {
		width:60rem !important;
	}
	
	.w-md-wide {
		width:80rem !important;
	}
	
	.w-md-50 {
		width:50% !important;
	}
	
	.box-wrapper.multicolumn {
		display:flex;
		flex-direction:row;
		gap:1rem;
	}
	
	

	
}