* {
	box-sizing: border-box;
}

html,
body {
	font-family: Kodchasan;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color: #eee;
}

body {
	padding: 12px;
	overflow: overlay;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html.edit body,
html.file body {
	padding-right: 30px;
}

button {
	font-size: 1em;
	font-family: Kodchasan;
}

button.modified {
	outline: 2px solid red;
}

#divVue {
	position: relative;
	height: 100%;
	min-width: 442px;
	opacity: 0;
	transition: opacity 2s;
}

#divVue > textarea {
	width: 100%;
	height: 60px;
	background-color: #000;
	color: lime;
	padding: 12px;
	margin-top: 24px;
}

#divControls {
	background-color: #999;
	padding: 0 8px;
	height: 40px;
	margin-bottom: 12px;
	overflow: hidden;
	line-height: 42px;
}

#divControls button {
	min-width: 50px;
}

#divControls button.location {
	background-color: #ffe1e1;
}

#divControls button.item {
	background-color: #d9ffcb;
}

#divControls button.action {
	background-color: #e6f2ff;
}

#divConsole {
	font-family: "Share Tech Mono", monospace;
	position: relative;
	width: 100%;
	font-size: 16px;
	height: calc(100% - 60px);
	overflow-y: hidden;
	background-color: #333;
	border-radius: 12px;
	color: #ccc;
	padding: 12px;
	font-size: 1.2em;
}

#divConsole p br {
	line-height: 1.4em;
}

#divConsole .instant {
	color: #eee;
}

#divConsole > div {
	-webkit-margin-before: 1em;
	margin-block-start: 1em;
	-webkit-margin-after: 1em;
	margin-block-end: 1em;
}

#divConsole > div:before {
	content: "> ";
	position: absolute;
	left: 12px;
	line-height: 24px;
	color: #fff;
}

#divConsole textarea {
	font-family: "Share Tech Mono", monospace;
	resize: none;
	overflow: hidden;
	overflow-wrap: break-word;
	display: inline;
	width: 100%;
	outline: none;
	border: none;
	padding-left: 20px;
	font-size: 1em;
	background-color: transparent;
	color: #fff;
}

#divEditor {
	padding: 12px;
	height: calc(100% - 60px);
}

#divEditor.Locations {
	background-color: #ffc4c4;
}

#divEditor.Items {
	background-color: #d9ffcb;
}

#divEditor.Actions {
	background-color: #e6f2ff;
}

#divEditor h1 {
	margin: 0 0 12px 0;
}

#divEditor p {
	margin: 6px;
}

#divEditor > * {
	max-height: calc(100% - 60px);
	overflow-y: auto;
}

#divEditor > div {
	display: inline-block;
	width: calc(60% - 20px);
	margin-left: 18px;
	position: relative;
	vertical-align: top;
}

#divEditor #divCurrentEntity {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 12px;
	/* border-radius: 12px; */
	border: 1px solid rgba(0, 0, 0, 0.2);
}

#divEditor textarea,
#divEditor input[type="text"],
#divFiles input[type="text"] {
	font-family: Kodchasan;
	font-size: 1em;
	resize: none;
	border: 1px solid rgba(0, 0, 0, 0.25);
	padding: 4px;
	background-color: rgba(255, 255, 255, 0.5);
	max-width: 100%;
	outline: none;
}

#divEditor textarea {
	width: 100%;
}

#divEditor select {
	font-family: Kodchasan;
	background-color: rgba(255, 255, 255, 0.5);
	max-width: calc(100% - 250px);
	min-width: 140px;
	outline: none;
	font-size: 1em;
	border: 1px solid rgba(0, 0, 0, 0.25);
}

#divEditor optgroup:nth-child(odd) {
	background-color: rgba(0, 0, 0, 0.075);
}

#divEditor p.actionNB {
	font-style: italic;
	font-size: 0.8em;
	overflow: hidden;
	transition: all 2s;
	max-height: 16px;
}

#divEditor p.actionNB.down {
	max-height:none;
}


#divEditor p.actionNB span {
	display: inline;
	float: right;
	color: blue;
	margin-left: 18px;
	cursor: pointer;
}

#divEditor p.actionNB.down span:first-of-type {
	display: none;
}


#divEditor ul {
	background-color: rgba(0, 0, 0, 0.075);
	padding: 4px 12px 12px 12px;
	list-style: none;
	/* border-radius: 12px; */
	overflow-x: hidden;
}

#divEditor ul.columns {
	-moz-columns: 2;
	     columns: 2;
}

#divEditor ul.entities {
	display: inline-block;
	width: calc(40% - 3px);
	vertical-align: top;
	margin: 0;
}

#divEditor > ul li {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#divEditor ul li {
	background-color: rgba(0, 0, 0, 0.075);
	margin: 4px 0;
	padding: 4px 8px;
	cursor: pointer;
	/* border-radius: 8px; */
	position: relative;
}

#divEditor ul li.disabled {
	opacity: 0.5;
}

#divEditor ul li.selected {
	background-color: rgba(0, 0, 0, 0.35);
	color: #f8f8f8;
}

#divEditor ul li.locked {
	pointer-events: none;
}

#divEditor ul li.locked:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: bold;
	content: "\f30d";
	margin-right: 6px;
}

#divEditor ul li.selected.locked:before {
	content: "";
	margin-right: 0;
}

#divEditor.Actions div ul li {
	padding: 4px 40px 4px 8px;
	line-height: 1.7em;
}

#divEditor.Locations div ul li {
	background-color: transparent;
	margin: 2px 0;
	padding: 0;
}

#divEditor ul > button {
	margin-top: 4px;
}

#divEditor ul li button {
	position: absolute;
	top: 2px;
	right: 4px;
	margin-top: 2px;
	font-size: 1em;
}

#divEditor .error {
	background-color: rgba(255, 0, 0, 0.15);
	box-shadow: 0 0 0 1px red;
}

#divEditor .error.selected {
	background-color: rgba(255, 0, 0, 0.5);
}

#divEditHint {
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	/* width: 182px; */
	/* position: absolute; */
	/* top: -54px; */
	/* right: 0; */
	padding: 12px;
	margin-top: 24px;
}

#divEditor #divEditHint:after {
	content: "Hint";
	white-space: pre-line;
}

#divEditor.Locations.name #divEditHint::after {
	content: "Don't add 'A' or 'The' - we'll do that for you! \A E.g. just 'kitchen', not 'The kitchen'.";
}

#divEditor.Locations.description #divEditHint::after {
	content: "This is the text that the player will see when in this location. It will never change.";
}

#divEditor.Locations.navigation #divEditHint::after {
	content: "Don't forget to add navigation in the other direction!";
}

#divEditor.Items #divEditHint::after {
	content: "Items are things that can be moved around. ";
}

#divEditor.Items.name #divEditHint::after {
	content: "Don't add 'A' or 'The' - we'll do that for you! \A E.g. just 'torch', not 'The torch'.";
}

#divEditor.Items.description #divEditHint::after {
	content: "This is the text that the player will see when they 'examine' or 'look at' this item.";
}

#divEditor.Items.carryable #divEditHint::after {
	content: "If checked the game will handle picking up and dropping this item. \A\A If not checked you can still handle this yourself in Actions.";
}

#divEditor.Items.wearable #divEditHint::after {
	content: "If checked the game will handle wearing and removing this item. \A\A If not checked you can still handle this yourself in Actions.";
}

#divEditor.Items.location #divEditHint::after {
	content: "Choose a starting location. \A\A If set to 'nowhere' the item will be invisible in the game.";
}

#divEditor.Actions.input #divEditHint::after {
	content: "[Optional] Keep this simple: e.g. 'Open box' or 'Turn on TV'. \A\A You can add alternatives on a new line: e.g.\A'Open box'\A'Look in box'. \A\A If left blank, the player's text will be ignored.";
}

#divEditor.Actions.condition #divEditHint::after {
	content: "[Optional] Build up the conditions that will enable this action. Each one has to be satisfied before the action will be executed. \A\A Take care - some combinations are impossible: e.g. the player cannot be in two places at once!";
}

#divEditor.Actions.consequence #divEditHint::after {
	content: "[Optional] Build up the actions that will be executed. Actions are executed in the order they're written here - which might give undesired results...";
}

#divEditor.Actions.output #divEditHint::after {
	content: "The text that will be displayed to the player.";
}

#divEditor.Actions.disabled #divEditHint::after {
	content: "Disable this action to stop it running in the game - useful for debugging.";
}

#divEditor > div {
	/* margin-right: 200px; */
}

#divEditor .divComments {
	font-size: 0.8em;
	border: 1px dotted #8888;
	background-color: rgba(0, 0, 0, 0.25);
	margin: 12px 0;
	color: #fff;
}

#divEditor .divComments textarea {
	background-color: rgba(255, 255, 255, 0.6);
}

#divEditor .instructions h2 {
	margin: 0;
}

no #divEditor .instructions ol {
	list-style: none;
}

#divEditor .instructions li ol {
	list-style: none;
}

#divFiles > div {
	display: inline-block;
	width: calc(60% - 20px);
	margin-left: 18px;
	position: relative;
	vertical-align: top;
}

#divFiles ul {
	display: inline-block;
	width: calc(40% - 3px);
	vertical-align: top;
	list-style: none;
	margin: 0;
	padding: 0;
}

#divFiles ul li {
	margin: 4px 0;
	padding: 8px;
	cursor: pointer;
}

#divFiles ul li.playing {
	box-shadow: inset 0 0 0 2px #555;
}

#divFiles ul li.selected {
	background-color: #555;
	color: #eee;
}

#divFiles div.share input {
	width: 100%;
}

#divFiles div.share span {
	margin-top: 4px;
	display: block;
	text-align: right;
}

#divFiles > div > div {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 6px;
	margin: 12px 0;
}

#divFiles h3 {
	margin: 6px 0;
}

#divFiles p {
	margin: 6px 0;
}

@media (max-width: 800px) {
	#divControls button i {
		display: none;
	}
}

@media (max-width: 600px) {
	#divControls button i {
		display: inline;
	}

	#divControls button span {
		display: none;
	}
}

@media (orientation: portrait) {
	#divEditor {
		/* height: auto; */
		overflow-y: auto;
	}

	#divEditor > * {
		max-height: none;
	}

	#divEditor ul.columns {
		-moz-columns: 1;
		     columns: 1;
	}

	#divEditor ul.entities,
	#divFiles ul {
		width: 100%;
	}

	#divEditor > div,
	#divFiles > div {
		width: calc(100% - 48px);
		margin-left: 24px;
		margin-top: 24px;
	}
}

html:not(.loading).socketDisconnected:after {
	content: "Server Connection Lost";
	position: fixed;
	padding: 25% 0;
	text-align: center;
	font-size: 5vh;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-shadow: 0 0 12px #000;
	font-weight: bold;
}

html.ready #divVue {
	opacity: 1;
}

input[type="checkbox"] {
	width: 0;
	position: relative;
	margin-right: 22px;
}

input[type="checkbox"]:after {
	display: inline-block;
	position: relative;
	top: -2px;
	content: "\f0c8";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.3em;
	font-weight: 200;
}

input[type="checkbox"]:checked:after {
	content: "\f14a";
}

#divLoader {
	background-image: url(bg2.jpg);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position-y: center;
	background-position-x: 80%;
	opacity: 1;
	transition: 1s;
}

#divLoader > h1 {
	color: #fff;
	text-shadow: 0 0 8px #000;
	text-align: center;
	font-size: 60px;
	margin: 12px;
}

#divLoader > h3 {
	color: #feffc0;
	text-shadow: 0 0 8px #000;
	text-align: center;
	font-size: 42px;
	margin: 12px;
}

#divLoader p {
	background-color: rgba(75, 55, 31, 0.65);
	border-radius: 12px;
	color: #fff;
	padding: 12px;
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

#divLoader p a {
	color: #d9ffcb;
}

html.ready #divLoader {
	opacity: 0;
	pointer-events: none;
}

#divLoader > div.copy {
	color: #fff;
	position: absolute;
	bottom: 8px;
	right: 8px;
	cursor: pointer;
}

#divLoader > div.spinner,
#divLoader > div.button {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
	text-align: center;
	opacity: 1;
	transition: all 1s;
}

#divLoader > div.spinner {
	color: rgba(0, 0, 0, 0.5);
	font-size: 80px;
	opacity: 0;
}

#divLoader > div.button {
	font-size: 24px;
	padding: 16px 40px;
	border-radius: 24px;
	background-color: rgb(60, 31, 17);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
}

html.loading #divLoader > div.button {
	opacity: 0;
	pointer-events: none;
}

html.loading #divLoader > div.spinner {
	opacity: 1;
}

#divEditor > *::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

#divEditor > *::-webkit-scrollbar-track {
	-webkit-transition: all 1s;
	transition: all 1s;
}

#divEditor > *:hover::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.3);
}

#divEditor > *::-webkit-scrollbar-thumb {
	background-color: rgba(128, 128, 128, 0.2);
}

#divEditor > *:hover::-webkit-scrollbar-thumb {
	background-color: rgba(128, 128, 128, 0.6);
}