.login-page {
	z-index: 1;
	display: grid;
	line-height: 4.2rem;
}

.top-bar {
	position: absolute;
	top: 0;
	right: 0;
	margin-bottom: 0;
    font-size: 2.4rem;
    text-align: right;
    margin-bottom: 0;
    padding: 0 auto;
    z-index: 0;
}

.top-bar-container {
	margin: 0 auto;
}

.top-bar-container a {
	color: #ddd7cB;
	text-decoration: none;
	padding: 2rem;
}

.login {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 100vh;
}

.login-page img {
	box-shadow: 0 4px 4px 0 rgb(0 0 0 / 50%);
/*	width: 350px;*/
	max-width: 50%;
}

.screenshot-small {
	width: 30rem;
	height: fit-content;
	margin: 2rem;
	margin-bottom: 12rem;
}

.screenshot-small:first-child {
	margin-left: 4rem;
}

.login .login-main-bar {
	height: initial;
	flex-basis: 300px;
	justify-content: flex-end;
}

.login-main-bar {
    margin: 0 auto;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

.newsletter {
	position: relative;
	background: #0B191E;
	border: 0.8rem solid #ddd7cB;
	padding: 1rem;
	margin: 7rem 0;
	text-align: center;
	text-shadow: 0 3px 4px rgb(0 0 0 / 50%);
}

.newsletter-text {
	color: #A4BEF3;
	font-size: 3.4rem;
	margin-bottom: 0;
}

.newsletter-input {
	margin-top: 1rem;
	margin-bottom: 4rem;
	margin-right: 2rem;
	max-width: 40rem;
}

.saved {
	display: block;
	font-size: 3.4rem;
	color: #ddd7cB;
	position: absolute;
	padding: 0 1rem;
	top: 0;
	right: 0;
	background: #00c36b;
	text-shadow: none;
}

.login-page .hidden {
	display: none;
}

.text {
	line-height: 3.3rem;
	font-size: 3rem;
	font-family: 'Inconsolata', monospace;
	width: 100%;
	color: #ddd7cB;
	text-shadow: 0 3px 4px rgb(0 0 0 / 50%);
}

.email {
	margin-top: 3rem;
}

.email, .password {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #16313B;
	line-height: 3rem;
	font-size: 3rem;
	color: #ccc;
	font-family: 'Inconsolata', monospace;
	width: 100%;
	outline: none;
}

.buttons {
	display: flex;
	user-select: none;
}

.newsletter-button, .login-button, .sign-up-button, .disabled-button {
	color: var(--white);
	font-size: 3rem;
	cursor: pointer;
	margin: 1rem 0 0;
	padding:  0.5rem 3rem;
	cursor: pointer;
	text-shadow: var(--white-box-shadow);
}

.newsletter-button, .login-button {
	background-color: var(--primary);
}

.sign-up-button {
	background-color: var(--secondary);
}

.disabled-button {
	opacity: var(--opacity);
	background-color: var(--primary);
	cursor: pointer;
}

.intro-image {
	z-index: 0;
    object-fit: cover;
    overflow: hidden;
    max-width: 100%;
    min-width: 100%;
}

.information {
	z-index: 0;
	display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

.overview {
	display: flex;
	align-items: center;
}

.overview p, .overview li {
	flex-grow: 1;
	font-size: 3rem;
	color: #ddd7cB;
	text-shadow: 0 3px 4px rgb(0 0 0 / 50%);
	padding: 2rem;
	margin-top: 0;
}

.overview .list-heading {
	padding-bottom: 0;
	margin-bottom: 0;
}

.list {
	list-style-type: disc;
	margin-left: 4rem;
	max-width: 80rem;
}

.bottom-section .list {
	margin: 2rem auto 4rem;
}

.bottom-section p {
	margin-bottom: 0;
	padding-bottom: 0;
}

.list li {
	font-size: 3.2rem;
	margin: 1rem;
	padding: 0;
	line-height: 2.8rem;
}

.wrapper {
	width: 100%;
}

.adventure {
	color: var(--secondary);
}

.escape {
	color: var(--error);
}

.focus {
	color: var(--success);
}

.limited {
	color: var(--success);
	font-weight: bold;
}

.partnership {
	color: var(--info);
}

.beta {
	display: block;
	color: var(--info);
}

.tools {
	color: var(--error);
}

.login-error, .sign-up-error {
	position: fixed;
	padding: 1rem;
	border: 0.4rem solid var(--white);
	display: flex;
	overflow: auto;
	z-index: 3;
	background: var(--black-light);
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    color: #ddd7cB;
	font-size: 3rem;
}

.login-error.hidden, .sign-up-error.hidden {
	display: none;
}

.funded {
	display:  flex;
	flex-direction:  column;
	font-size:  2.2rem;
	color: #ddd7cB;
	align-items: flex-end;
}

.funded span {
	padding-right:  2rem;
}
.startup {
	position: absolute;
	color: #FFF7EB;
	font-size: 3.2rem;
	display: flex;
	width: 100%;
	max-width: 120rem;
	left: 50%;
	transform: translate(-50%, 0);
	flex-direction: column;
	justify-content: center;
	top: 20vh;
	height: calc(100% - 40vh);
}

.header {
	background:  var(--primary);
	margin: 0;
	padding: 0;
	text-align: center;
}

.options-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	border:  0.4rem solid var(--white);
	border-top: none;
	height: 100%;
	justify-content: center;
	overflow: hidden;
}

.options {
	margin: 0;
	padding: 0;
	list-style-type: none;
	color:  var(--white);
}

.footer {
    position: absolute;
    bottom: 0;
    margin: -2.4rem;
    background: var(--black);
    padding: 0 1rem;
    color:  var(--white);
}

.action {
	color: var(--secondary);
}

.disabled, .disabled .action {
	color: var(--black-lighter);
}

.menu-container {
	width: auto !important;
}

.center {
	margin: 0 5rem;
}
.point-at {
	cursor: pointer;
}

.looking-container {
	position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    background: var(--black);
    border: 0.4rem solid var(--white);
    padding: 0.4rem;
	max-width: 22.1ch;
	min-width: 22.1ch;
	min-height: 2.4rem;
	padding-bottom: 1.8rem;
}

.looking-title {
	margin: 0;
	padding: 0;
}

.looking-description {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.order {
	text-transform: capitalize;
	color: var(--info);
}

.looking-container p {
	margin: 0 !important;
}

.graffiti {
	min-width: 26rem;
	min-height: 16rem;
}

.drawing {
	margin-top: 3.2rem;
	margin-bottom: 1rem;
}

.dying, .dead, .impossible {
	color: var(--sg-red);
}

.badly-hurt, .impossible {
	color: var(--sg-red);
}

.hurt, .dimming, .difficult, .locked {
	color: var(--sg-sunflow-orange);
}

.slightly-hurt, .normal {
	color: var(--sg-yellow);
}

.healthy, .easy, .trivial, .unlocked {
	color: var(--sg-green);
}

.combat-stats {
	
}

.bottom-text {

}
.menu-container {
	width: 100%;
	max-height: 100%;
}

.menu-container .quantity {
	margin-left: 0.4rem;
}

.option-description-container {
	margin: 0;
	display: inline;
	flex-grow: 1;
}

.menu-items {
	list-style-type: none;
	padding: 0 0 0 3rem;
	margin: 0;
	line-height: 3.2rem;
}

.menu-items li {
	display: flex;
}

.trade-actions .menu-items li {
	display: block;
}

.menu-items div {
	display: inline;
}

.menu-items .shortcut {
	margin: 0 1.2rem 0 0;
}

.indentation-0 {

}

.indentation-1 {
	margin-left: 2.6rem;
}

.indentation-2 {
	margin-left: calc(2 * 2.6rem);
}

.indentation-3 {
	margin-left: calc(3 * 2.6rem);
}

.indentation-4 {
	margin-left: calc(4 * 2.6rem);
}

.indentation-5 {
	margin-left: calc(5 * 2.6rem);
}

.indentation-6 {
	margin-left: calc(6 * 2.6rem);
}

.indentation-7 {
	margin-left: calc(7 * 2.6rem);
}

.indentation-8 {
	margin-left: calc(8 * 2.6rem);
}

.indentation-9 {
	margin-left: calc(9 * 2.6rem);
}

.indentation-10 {
	margin-left: calc(10 * 2.6rem);
}

.indentation-11 {
	margin-left: calc(11 * 2.6rem);
}

.menu-actions {
	position: absolute;
	bottom: -1.8rem;
	right: 0.4rem;
	background: var(--black);
	padding: 0.4rem;
}

.action-shortcut:not(:first-child) {
	padding-left: 1.4rem;
}

.trade, .selected-trade, .marked-trade, .marked-trade-qty {
	min-width: 8rem;
	text-align: right;
	color:  var(--secondary);
}

.marked-trade {
	background: var(--error);
	float: right;
}

.inventory-actions .marked-trade {
	display: inline;
	background: none;
	color: var(--primary-light);
	margin: 0 1rem;
}

.inventory-actions .trade, .inventory-actions .selected-trade, .inventory-actions .marked-trade-qty {
	position: relative;
	min-width: 8rem;
	background: none;
	text-align: right;
	color:  var(--secondary);
	min-width: 2.4rem;
}

.color-1 {
	color: var(--sg-red);
}

.color-2 {
	color: var(--sg-orange);
}

.color-3 {
	color: var(--sg-yellow);
	
}

.color-4 {
	color: var(--sg-pale-green);
	
}

.color-5 {
	color: var(--sg-blue);
	
}

.color-6 {
	color: var(--sg-sky-blue);
	
}

.color-7 {
	color: var(--sg-purple);
	
}

.color-8 {
	color: var(--sg-brown);
	
}

.color-9 {
	color: var(--sg-slate);
	
}

.color-0 {
	color: var(--sg-grey);
	
}

.marked-trade-qty img, .selected-trade img, .trade img {
	position: relative;
    width: 2.6rem;
    top: 0.2rem;
}

.trade-offer {
	min-width: 8rem;
	background: var(--secondary);
	text-align: right;
	color:  var(--black);
}

.marked-trade-qty, .selected-trade, .trade {
	margin: 0 1.4rem;
}

.inventory-actions .marked-trade-qty {
	background: none;
}

.red {
	color: var(--sg-red);
}

.yellow {
	color: var(--secondary);
}

.green {
	color: var(--sg-pale-green);
}

.blue {
	color: var(--sg-blue);
}

.orange{
	color: var(--sg-orange);
}

.indigo{
	color: var(--sg-pale-blue);
}
.violet {
	color: var(--primary);
}
.brown{
	color: var(--sg-brown);
}
.black{
	color: var(--black-lighter);
}
.white{
	color: var(--sg-white);
}
.grey{
	color: var(--sg-grey);
}
.navy{
	color: var(--sg-blue);
}
.purple{
	color: var(--sg-purple);
}
.lime {
	color: var(--sg-pale-green);
}
.lemon {
	color: var(--sg-yellow);
}

.book-title div, .book-title span, .book-title p {
	margin: 0;
	display: inline;
}
.menu-input {
	border-top: 0.4rem solid var(--white);
}

.textarea {
	background: var(--black);
    border: none;
    outline: none;
    font-size: 1.4vw;
    color: var(--white);
    width: 100%;
    height:  100%;

    font-family: 'Inconsolata', monospace;
	font-weight: 600;
	font-size: 3.2rem;
	padding: 2rem 1rem 1rem;
	pointer-events: none;
}

.textarea::selection {
	background: var(--info);
	color: var(--white);
}

textarea::-webkit-input-placeholder {
  color: var(--secondary);
}

textarea:-moz-placeholder { /* Firefox 18- */
  color: var(--secondary);
}

textarea::-moz-placeholder {  /* Firefox 19+ */
  color: var(--secondary);
}

textarea:-ms-input-placeholder {
  color: var(--secondary);
}

textarea::placeholder {
  color: var(--secondary);
}

.eat-food {
	background: #275668;
	padding: 1rem;
}
.character-select {
	position: relative;
	padding: 1rem;
	background: var(--black);
	z-index: 2;
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    border: 0.4rem solid var(--white);
}

.character-select .select-items-menu-container {
	padding: 1.4rem 0;
	min-width: 40rem;
}

.character-select-title {
	margin: 0;
	margin-bottom: 1.4rem;
}

.character-select ul {
	min-width: 60rem;
	margin-top: 3rem;
}

.character-select ul li {
	cursor: pointer;
}
.fight-title {
	position: absolute;
	top: 1rem;
	left: 50%;
    transform: translate(-50%, -150%);
    background: #FFF;
    color: #999;
}

.equation {
	margin: 0;
}

.hiding {
	visibility: hidden;
}

.fight-hint {
	background-color: #EF2917;
	display: inline;
}

.kill-button {
	background-color: #EF2917;
	cursor: pointer;
}

.cancel-button {
	margin-left: 3rem;
	background-color: #0075F2;
	cursor: pointer;
}

.computed {
	color: #D6F5FF;
}
.actions {
	position: absolute;
	padding: 1rem;
	border: none;
	display: flex;
	overflow: auto;
	z-index: 3;
	background: #275668;
	border: 0.4rem solid #FFF7EB;
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.actions-title {
	position: absolute;
	top: 0;
	left: 50%;
    transform: translate(-50%, -150%);
    background: #FFF;
    color: #999;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.actions .hidden {
	display: none;
}

.actions-sub-menu {
	margin-left: 2rem;
    margin-right: 2rem;
}
.prompt-inner {
	position: absolute;
	top: 0;
	padding: 1.2rem;
	z-index: 999999;
}

.prompt-inner p {
	margin: 0;
	padding: 0;
	display: inline;
    background: #00000099;
}
.help {
	position: absolute;
	top: 1rem;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	padding: 1rem 0 1rem 1rem;
	margin: 0;
	border: 0.4rem solid var(--white);
	z-index: 0;
	margin-top: 10rem;
	margin-bottom: 10rem;
}

.help ul {
    column-count: 1;
}

.controls {
	display: block;
	color: var(--info);
	margin: 0;
}

.arrow-unicode {
	position: relative;
	left: -0.6rem;
}
.direction {
	color: var(--black-lighter);
	cursor: pointer;
}

.selected-direction {
	color: var(--white);
}

.direction-input {
	position: absolute;
	padding: 0.4rem 0;
	border: 0.4rem solid #FFF7EB;
	display: flex;
	flex-direction: column;
	width: 35rem;
	overflow: auto;
	z-index: 2;
	background: var(--black);
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.door-box {
	width: 90%;
	margin: 3rem auto 0;
	height: 20rem;
	position: relative;
}

.north {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
}

.east {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -75%);
}


.south {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0%);
}

.west {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -75%);
}

.up {
	position: absolute;
	top: -3rem;
	left: 0;
}

.down {
	position: absolute;
	top: -3rem;
	right: 0;
}

.button-container {
	padding-top: 3rem;
}
.crafting-container {
	position: absolute;
	top: 1rem;
	left: 1rem;
	bottom: 1rem;
	right: 1rem;
	margin-top: 10rem;
	margin-bottom: 10rem;
}

.crafting {
	padding: 1rem 0 1rem 1rem;
	margin: 0;
	border: 0.4rem solid var(--white);
	border-top: none;
	display: flex;
	z-index: 0;
	height: 100%;
}

.crafting-close-button {
	position: absolute;
	top: -1.6rem;
	background-color: var(--black);
	right: 0.4rem;
	cursor: pointer;
    padding: 0 1rem;
}

.crafting-title {
	position: absolute;
	top: -0.5rem;
	left: 0;
	right: 0;
    transform: translate(0%, -5.6rem);
    background: var(--primary);
    text-align: center;
}

.search {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--white);
	line-height: 3rem;
	font-size: 3.2rem;
	color: #ccc;
	font-family: 'Inconsolata', monospace;
	width: 100%;
	outline: none;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.sub-menu {
    margin-left: 1rem;
    max-width: 30rem;
    min-width: 30rem;
    margin-right: 2rem;
    overflow-y: auto;
}

.confirmation {
	margin-left: 3rem;
	flex-grow: 1;
	padding-left: 1rem;
	overflow-y: auto;
}

.recipe {
	margin-top: 3rem;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}

.craft-button {
	color: var(--white);
	background-color: var(--black);
	cursor: pointer;
	display: inline-block;
}

.craft-button--disabled {
	color: var(--white);
	background-color: #999;
	cursor: initial;
	display: inline-block;
	pointer-events: none;
}

.selected {
	position: relative;
}
.selected::before {
	content: '>';
	background: var(--info);
    color: var(--black);
    padding: 0 0.4rem;
    position: absolute;
    left: -3rem;
}

.success {
	visibility: hidden;
	position: absolute;
	top: 0;
	right: 0;
	color: var(--white);
	background-color: var(--black);
}

.success.showing {
	visibility: initial;
}
.writing-surface {
	display: flex;
	flex-direction: row-reverse;
	height: 100%;
    margin-left: 1rem;
    font-size: clamp(1.2rem, 3.2rem, 3.2rem);
}

.surface {
	position: relative;
	flex-grow: 1;
    top: 50%;
    transform: translate(0, calc(-50% - 1rem));
    max-height: 90rem;
    font-size: clamp(1px, 3vh, 32px);
    width: 62.1ch;
    height: calc(22 * 2ch);
}

.surface > div {
    border: 0.4rem solid var(--white);
    overflow: hidden;
    width: inherit !important;
    height: inherit !important;
    margin: auto auto;
    padding: 1rem;
}

.surface p {
	margin: 0;
	font-size: inherit;
	line-height: initial;
	word-break: break-all !important;
}

.writing-surface .buttons {
	display: block;
	flex-basis: 74rem;
	padding-left: 1rem;
	display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 1rem;
    align-content: start;
    font-family: 'Silkscreen';
}

.text-styles-header {
	margin: 3.1rem 0 0rem;
}

.color-key {
	display: inline;
	padding: 0 1rem;
	margin-right: 1rem;
}

.mark-button {
	display: block;
	background: var(--black);
	color: var(--white);
	font-size: 2.4rem;
    line-height: 2.2rem;
    user-select: none;
	border: none;
	font-family:  'Silkscreen', 'Inconsolata', monospace;
	font-weight: 600;
	position: relative;
	left: 3rem;
}
@media screen and (min-width: 1500px) {
	.mark-button {
		font-size:  3.2rem;
		line-height:  3.2rem;
	}

	.writing-surface .buttons {
		border-left: 0.4rem solid var(--white);
	}
}

.save-button {
	background: var(--white);
	color: var(--black);
	font-size: 3.2rem;
	cursor: pointer;
	text-shadow: none;
	float: right;
	padding: 0 1rem;
	margin: 1rem 1rem 0;
}

.close-button {
	background: var(--white);
	color: var(--black);
	cursor: pointer;
	padding: 0 1rem;
	position: absolute;
	top: 0;
	right: 0;
}
.quantity-input {
	position: absolute;
	padding: 0.4rem 0;
	border: 0.4rem solid var(--white);
	display: flex;
	flex-direction: column;
	overflow: auto;
	z-index: 2;
	background: var(--black);
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    padding-bottom: 1rem;
    min-width: 27rem;
}

.input {
	font-size: 3.2rem;
	font-family: 'Inconsolata', monospace;
	color: var(--white);
	margin: 0 1rem;
	border: none;
	outline: none;
	background: var(--black);
	max-width: 10rem;
}

.input::selection {
	background: var(--secondary);
	color: var(--black);
}

.quantity-input-content {
	display: flex;
}

.quantity-input-explanation {
	margin-left: 1rem;
}
.inventory-actions {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0rem;
	right: 0;
	padding: 1rem;
	margin: 1rem;
	border: 0.4rem solid var(--white);
	display: flex;
	flex-direction: column;
	z-index: 0;
	margin-top: 10rem;
    margin-bottom: 10rem;
    display: flex;
	position: relative;
	flex-grow: 1;
	max-width: calc(100% - 4.8rem);
}

.top-ting {
	display: flex;
	overflow: hidden;
	width: 100%;
}

.bottom-ting {
	border-top: 0.4rem solid var(--white);
	padding-top: 1rem;
	max-height: 80%;
}

.bottom-ting p {
	margin: 0;
}

.inventory-actions .hidden {
	display: none;
}

.inventory-title {
	position: absolute;
	top: -0.5rem;
	left: 25%;
    transform: translate(-50%, -150%);
    background: var(--black);
}

.character-traits .inventory-total-weight {
	top: initial;
	bottom: 4rem;
}

.tile-title {
	position: absolute;
	top: -0.5rem;
	left: 75%;
    transform: translate(-50%, -150%);
    background: var(--black);
}

.inventory-actions .crafting-close-button {
	top: -1.8rem;
}

.quantity:before {
	color: var(--white);
    content: '(';
}

.quantity:after {
	color: var(--white);
    content: ')';
}

.inventory-ctas {
	text-align: right;
}

.inventory-ctas span {
	cursor: pointer;
}

.weight {
    color: var(--sg-teal);
    margin-left: 1rem;
    display: none;
    text-align: right;
    font-weight:  700;
    height: 3.2rem;
}

.inventory-actions .weight {
    display: inline-block;
}

.inventory-total-weight, .tile-total-weight {
	position: absolute;
	bottom: 0;
	margin: 0;
	left: 50%;
    transform: translate(-100%, 150%);
    background: var(--white);
    color: var(--black);
}

.inventory-total-weight-warning {
	background: var(--secondary);
}

.inventory-total-weight-error {
	background: var(--error);
}

.tile-total-weight {
	display: none;
}

.inventory-actions .tile-total-weight {
    display: block;
	left: 100%;
}

.tile-title {
	display: none;
}

.inventory-actions .tile-title {
	display: block;
}

.my-inventory, .tile-inventory {
	flex-basis: 50%;
}

.my-inventory .character-select {
	position: absolute;
}

.main-bar .my-inventory ul, .main-bar .my-inventory .inventory-title {
	display: none;
}

.main-bar .crafting-close-button {
	display: none;
}

.main-bar .my-inventory {
	min-height: 3.2rem;
	display: inline;
}

.detail {
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.main-bar .my-inventory .inventory-total-weight {
	position: relative;
	transform: initial;
	bottom: initial;
	left: initial;
	margin: 0;
	overflow: hidden;
	display: inline;
	color: var(--white);
	background: initial;
}

.tile-inventory {
	flex-grow: 1;
}

.drop--loading {
	cursor: initial;
	opacity: 0.8;
	pointer-events: none;
}

.showing-option {
	display: inline;
}

.hidden-option {
	display: none;
}

.indented {
	margin-left:3rem;
}

.inventory-actions-menu-container {
	overflow: hidden;
	height: 100%;
}
.name {
	color: var(--white);
	cursor: pointer;
	text-shadow: var(--white-box-shadow);
}

.character-skills li {
	display: inline-block;
	padding: 0 1rem;
}

.character-traits {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: start;
	/*margin-left: 4rem;*/
	grid-row-gap:  0.2rem;
	padding-left: 0.5rem;
}

.hu {
	color: var(--success);
}

.hp {
	color: var(--error);
}

.in {
	color: var(--primary);
}

.dd {
	text-align: right;
	display: inline-block;
}

.first-row {
	display: flex;
	justify-content: space-between;
	padding-left: 0.5rem;
}

.logout {
	cursor: pointer;
	background: #D6F5FF;
	color: #8E8DBE;
}

.skill-traits {
	color: #00F587;
}

.fishing {
	background: #98B6B1;
}

.dyeing {
	background: #D7BCC8;
	color: #8E8DBE;
}

.mining {
	background: #FAC8CD;
	color: #8E8DBE;
}

.logging {
	background: #629677;
}

.masonry {
	background: #256EFF;
}

.cooking {
	background: #46237A;
}

.carpentry {
	background: #3DDC97;
}

.hunting {
	background: #FF495C;
}

.gathering {
	background: #DEF6CA;
	color: #8E8DBE;
}

.building {
	background: #F497DA;
}

.leatherworking {
	background: #A24936;
}

.farming {
	background: #D36135;
}

.clothmaking {
	background: #FFF275;
	color: #8E8DBE;
}

.armoury {
	background: #6699CC;
}

.pottery {
	background: #A23E48;
}

.jewellery {
	background: #FF8C42;
}

.smelting {
	background: #730071;
}

.baking {
	background: #DC9596;
}

.tailoring {
	background: #A9A587;
}

.unskilled {
	background: #FFF;
    color: #999;
}

.character-face {
	display: none;
	width: 50px;
	height:  50px;
	border-radius:  50px;
	background: var(--white);
	margin: 1rem 2rem 1rem 0;
}

.first-row-character {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.location {
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 0.5rem;
}

.location-id {
	display: block;
}

.location-input {
	border-radius: 0;
	line-height: 3.3rem;
    font-size: 3.2rem;
    font-family: 'Inconsolata', monospace;
    width: 100%;
    outline: none;
    background-color: transparent;
    border: none;
}

.location-input::placeholder {
	color: #FBFADA;
}

.season, .biome {
	display: block;
	margin-right: 2rem;
	text-transform: capitalize;
}

.hidden-location-name {
	display: none
}

.help-hint {
	opacity: 0.8;
    line-height: 3.3rem;
    position: absolute;
    top: 0.1rem;
    right: 0;
    cursor: pointer;
}

.active-order {
	color: var(--info);
	text-transform: capitalize;
	display: block;
}

.idle {
	color: var(--black-lighter);
	text-transform: capitalize;
	display: block;

}
.messages {
    position: relative;
    overflow-y: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1200px) {

  .keyboard-shortcuts {
    display: none;
  }
}

.messages li:first-child {
    margin-top: 0;
}

.message-text .character-name {
    color: var(--white);
    cursor: pointer;
    display: block;    
}

.position-character-name {
    display: inline-block;
    width: initial;
}

.new-message {
    background-color: transparent;
    border: 2px solid transparent;
    border-bottom: 1px solid #16313B;
    line-height: 3.3rem;
    font-size: 3.2rem;
    color: #ccc;
    font-family: 'Inconsolata', monospace;
    width: 100%;
    outline: none;
    padding: 0 5px;
}

.new-message.highlighted {
    border:  2px solid var(--info);
}

.sidebar-messages-list {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    width: 100%;
    align-items: flex-start;
    padding-top: 20px;
    overflow-wrap: anywhere;
}

.link {
    text-decoration: underline;
    cursor: pointer;
}

.speak {
    position: absolute;
    bottom: 0.2rem;
    right: 0;
    background-color: #327086;
}

.message-text {
    padding:  2px 15px;
    line-height: 3.2rem;
    white-space: pre-line;
    text-shadow: var(--white-box-shadow);
}

.message-date {
    position: absolute;
    bottom: 0;
    right: 0;
    text-shadow: var(--white-box-shadow);
}

.system-message-text {
    color: #888;
}

.position-message {
    cursor: pointer;
}

.position-message span {
    display: inline;
}

.hidden-message-part {
    display: none;
}

.load-more-button--hidden {
    display: none;
}

.characters-list {
    flex-basis:  400px;
    flex-shrink:  0.5;
    overflow-y: auto;
    overflow-x: hidden;
}

.characters-list .character {
    cursor:  pointer;
    display: flex;
    height:  50px;
    line-height: 50px;
    padding:  10px 0;
    align-items: center;
}

.characters-list .character.selected {
    background-color:  var(--primary-light);
}

.characters-list .character.highlighted {
    height: 46px;
    border: 2px solid var(--info);
}

.characters-list .character.highlighted .character-face {
    margin-left:  8px;
}

.reader-message, .non-reader-message, .new-message {
    position: relative;
    width:  400px;
    margin-top:  40px;
}

.sidebar-message, .new-message {
    position:  relative;
    width:  100%;
    margin-bottom: 4px;
}

.messages {
    position: relative;
    overflow-y: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
    width: 100%;
/*    height: calc(100% - 3rem);*/

    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1200px) {

  .keyboard-shortcuts {
    display: none;
  }
}

.chat-message {
    width: 800px;
    margin-top: 20px;
}

.messages li:first-child {
    margin-top: 0;
}

.message-text .character-name {
    color: var(--white);
    cursor: pointer;
    display: block;    
}

.position-character-name {
    display: inline-block;
    width: initial;
}

.no-messages {
    padding: 2rem;
}

.new-message {
    background-color: transparent;
    border: 2px solid transparent;
    border-bottom: 1px solid #16313B;
    line-height: 3.3rem;
    /*font-size: 3.2rem;*/
    color: #ccc;
    font-family: 'Inconsolata', monospace;
    width: 100%;
    outline: none;
    padding: 0 5px;
}

.new-message.highlighted {
    border:  2px solid var(--info);
}

.messages-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: calc(100% - 3rem);
    padding-top: 20px;
    padding-left: 3rem;
    width: 800px;
}

.link {
    text-decoration: underline;
    cursor: pointer;
}

.speak {
    position: absolute;
    bottom: 0.2rem;
    right: 0;
    background-color: #327086;
}

.messages-text-not-sidebar {
    width: 800px;
}

.message-text, .system-message-text {
    padding:  4px;
    line-height: 3.2rem;
    white-space: pre-line;
    text-shadow: var(--white-box-shadow);
}

.message-date {
    /*position: absolute;
    bottom: 0px;
    right: 0;*/
/*    text-shadow: var(--white-box-shadow);*/
}

.system-message-text {
    color: var(--black-lighter);
}

.position-message {
    cursor: pointer;
}

.position-message span {
    display: inline;
}

.hidden-message-part {
    display: none;
}

.load-more-button--hidden {
    display: none;
}

.characters-list {
    flex-basis:  400px;
    flex-shrink:  0.5;
    overflow: hidden;
}

.characters-list .character {
    cursor:  pointer;
    display: flex;
    height:  50px;
    line-height: 50px;
    padding:  10px 0;
    align-items: center;
}

.characters-list .character.selected {
}

.characters-list .character.highlighted {
}

.characters-list .character .character-face {
    margin-left:  10px;
}

.characters-list .character.highlighted .character-face {
    margin-left:  8px;
}

.reader-message {
    color: var(--info);
}

.reader-message, .non-reader-message, .new-message {
    position: relative;
}

.reader-message, .new-message {
    margin-bottom: 4px;
}

.non-reader-message.highlighted, .reader-message.highlighted {
    background: var(--info);

}
.non-reader-message.highlighted, .reader-message.highlighted {
    color: var(--black);
}

.reader-message.faded {
    opacity: var(--opacity);
}

.reader-message.faded:hover {
    opacity: 1;
}
.dialogue-content {
    position: relative;
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1200px) {

  .keyboard-shortcuts {
    display: none;
  }
}

.dialogue-content li:first-child {
    margin-top: 0;
}

.greeting {
	margin: 4rem 2rem 0;
}

.dialogue-tree-options {
	margin-top: 0;
	margin-left: 3rem;
	list-style-type: none;
	padding: 0;
	line-height: 5.6rem;
}

.dialogue-tree-option {
	color: var(--white);
}

.helper-text {
	color: var(--secondary-light);
}

.outgoing, .incoming {
    margin: 0 2rem;
}

.outgoing {
	text-align: right;
    color: var(--info);
}

.bottom-text {
	position: absolute;
	bottom: -1.4rem;
	right: 2rem;
	background: var(--black);
}
.dialogue-content {
    position: relative;
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 60%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    white-space: pre-line;
    background: var(--black);
}

@media screen and (max-width: 1200px) {

  .keyboard-shortcuts {
    display: none;
  }
}

.dialogue-content li:first-child {
    margin-top: 0;
}

.greeting {
	margin: 4rem 2rem 2rem 4rem;
}

.dialogue-tree-options {
	margin-top: 0;
	margin-left: 3rem;
	list-style-type: none;
	padding: 0;
	line-height: 5.6rem;
}

.dialogue-tree-option {
	color: var(--white);
}

.helper-text {
	color: var(--secondary-light);
}

.menu-input {
    background: var(--black);
}

.outgoing, .incoming {
    line-height: 3.8rem;
    max-width: calc(100% - 8rem);
}

.dialogue-text{
	margin: 0;
    padding: 0;
    line-height: 3.8rem;
    word-wrap: break-word;
	padding-left: 3rem;
}

.outgoing {
	text-align: left;
    color: var(--info);
}

.bottom-text {
	position: absolute;
	bottom: -1.4rem;
	right: 2rem;
	background: var(--black);
}

.history {
	flex-grow: 1;
	overflow-y: auto;
    background: var(--black);
}

.event-date-and-name {
	display: flex;
    align-items: center;
}

li.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.plant-action {
	cursor: pointer;
}

.plant-name {
	margin-top: 1rem;
}

.farm-actions .hidden {
	display: none;
}

.action {
	cursor: pointer;
}

.working {
	opacity: 0.8;
	cursor: initial;
}

.unskilled-penalty {
	color: #ff495c;
}
.neighbouring-character {
	display: flex;
}

.character-name {
	flex-grow: 1;
}

.kill-character {
	cursor: pointer;
}

.hidden {
	display: none;
}
.character-list {
	display: inline;
}

.character-name {
	display: inline;
}

.character-list-container {
}

.character-list--hidden {
	display: none;
}
.info-sidebar p.destroy-construction-action {
	padding-left: 3rem;
	margin-top: 0;
}

.destroy-construction-action {
	cursor: pointer;
}
.no-characters-nearby {
	position: absolute;
	padding: 1rem;
	border: 0.4rem solid #FFF7EB;
	display: flex;
	overflow: auto;
	z-index: 2;
	background: #275668;
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.crafting-error {
	position: absolute;
	padding: 1rem;
	border: 0.4rem solid #FFF7EB;
	display: flex;
	overflow: auto;
	z-index: 2;
	background: #275668;
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.moving-error {
	position: absolute;
	padding: 1rem;
	border: 0.4rem solid #FFF7EB;
	display: flex;
	overflow: auto;
	z-index: 2;
	background: #275668;
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.unknown-error {
	position: absolute;
	padding: 1rem;
	border: 0.4rem solid #FFF7EB;
	display: flex;
	overflow: auto;
	z-index: 9999999999;
	background: var(--black);
	left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.profile {
	display: flex;
	overflow: auto;
	max-height: 100%;
}

.profile p {
	padding: 0;
	margin: 0;
}

.profile h3, .profile .character-description-title {
	font-size: 3.2rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0;
	margin-top: 3.2rem;
}

.profile-sidebar {
	padding: 0 2rem;
	flex-basis: 870px;
	overflow: hidden;
}

.status-container, .items-container {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-column-gap: 1.4rem;
}

.profile-character-description {
	padding: 0rem 2rem 2rem 0;
	overflow: hidden;
	flex-basis: 70%;
}

.profile .term, .profile .definition {

}

.profile-character-description-inner, .profile-sidebar-inner, .items-container, .items-header {
	position: relative;
}

.term {
	margin-left: 1.4rem;
}
.equipment {
	display: flex;
	max-height: 100%;
	padding-left: 3rem;
	overflow: auto;
	height: 100%;
}

.equipment-container {
	display: flex;
	flex-direction: row;
}

.equipment h3 {
	font-size: 3.2rem;
	font-weight: 600;
	margin: 3.2rem 0 0;
}

.equipment-sidebar {
	padding: 0 2rem;
	flex-basis: 650px;
}

.equipment-container .menu-container:first-child {
	width: auto;
	flex-shrink: 0;
}

.equipment-container .menu-container:last-child {
	white-space: nowrap;
	margin-left: 2rem;
}
.sheet {
	display: flex;
	max-height: 100%;
}

.character-sheet {
	max-height: 100%;
    overflow: hidden;
}

.sheet-sidebar {
	padding-left: 3.4rem;
}

.skills-container {
	display: flex;
	margin-bottom: 3.2rem;
	margin-top: 2.2rem;
	white-space: nowrap;
}

.status, .skill-points, .brainchip-title {
	margin-bottom: 3.2rem;
}

p.brainchip-title-container {
	display: none;
	margin-bottom: 3.2rem;
	margin-left: -3.2rem;
}

.brainchip-title {
	color: var(--success);
}

.value {
	color: var(--info);
}

.menu-container {
	flex-shrink: 1;
}

.skill-purchase-menu {
	display: flex;
	flex-direction: row;
	min-height: 100%;
}

.details {
	border-left: 0.4rem solid var(--white);
	flex-grow: 1;
	flex-basis: 50%;
}

.brainchip-container {
	overflow: hidden;
}

.brainchip-container p {
	margin: 0;
}

.brainchip-menus-container {
	display: flex;
    max-height: 100%;
}

.brainchip-container-container {
	flex-basis: 50%;
	flex-grow: 0;
	flex-shrink: 0;
}
.workshop {
	display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 100%;
    height: 100%;
}

.workshop-sidebar {
	width: 100%;
	flex-grow: 1;
	flex-basis: 50%;
    overflow: hidden;
    display: flex;
}

.workshop-sidebar .items, .workshop-sidebar .item-details {
	flex-basis: 50%;
}

.workshop-sidebar .items {
	border-right: 0.4rem solid var(--white);
	padding: 0;
	overflow: hidden;
}

.workshop-sidebar .item-details {
	padding: 0 2rem;
}

.workshop-sidebar .item-details h3 {
	margin: 0;
}

.workshop-upgrade-section {
	border-top: 0.4rem solid var(--white);
	padding: 2rem;
    overflow: hidden;
}

.workshop-upgrade-section p {
	margin:  0;
}

.upgrade-cost {
	margin-left: 6.4rem;
	display: flex;
	flex-direction: row;
}

.upgrade-items {
	max-height: 16.3rem;
	overflow: hidden;
}

.upgrade-cost li, .upgrade-items li {
	display: inline-block;
	margin-right: 3rem;
}

.out-of-stock {
	color: var(--black-lighter);
}

.search-bar {
	background: var(--black);
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 0.4rem solid var(--white);
}

.workshop-description {
	color: var(--secondary-light);
}
.conversation-tree-wizard {
	display: flex;
    flex-direction: column;
    height: 100%;
}

.scheduler-actions {
	display: flex;
	flex-direction: row;
}

.conversation-tree-actions-container {
	border-top: 0.4rem solid var(--white);
	padding: 2rem;
	flex-grow: 1;
}

.conversation-tree-actions-container p {
	margin: 0;
}

.conversation-tree-wizard-container {
	padding: 0 2rem 2rem 4rem;
	flex-grow: 1;
	overflow: auto;
	overflow-x: visible;
	pointer-events: none;
}

.conversation-wizard-edit-text-container {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

.conversation-wizard-edit-text {
	border: 0.4rem solid var(--white);
	background-color: var(--black);
}
.conversation-wizard-edit-text p {
	margin: 1rem;
}

.conversation-wizard-exit {
	background: var(--black);
	text-align: right;
	background: var(--white);
	margin: 0;
	padding: 0 1rem;
	color: var(--primary);
	position: relative;
	top: 0.8rem;
}

.conversation-wizard-edit-actions {
	border: 0.4rem solid var(--white);
	background: var(--black);
	padding: 2rem;
}

.selected-line {
	color: var(--info);
}
.events {
	overflow: hidden;
	max-height: 100%;
	min-height: 100%;
}

.events-inner {
	position: relative;
	padding: 0 1rem;
	flex-grow: 1;
}

.events-inner p {
	margin: 1rem 0;
}

.event-date {
	width: 10rem;
	display: inline-block;
}

.events-component {
	display: flex;
	min-height: 100%;
}

.events-filters {
	display: flex;
	flex-direction: column;
	flex-basis: 40rem;
	padding: 1rem;
	border-left: 0.4rem solid var(--white);
}

.events-filters span {
	padding: 1rem 0 0;
}

.arrow-up, .arrow-down {
	background: var(--info);
	padding: 0 0.4rem;
	color: var(--black);
	font-size: 4.2rem;
	padding-top: 0.8rem;
}

.arrow-down {
	position: absolute;
	bottom: 0;
	transform: rotate(180deg);
}
.drawing-surface {
	display: flex;
	height: 100%;
}

.canvas-container {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}

.canvas {
	--width: 3;
	--height: 3;
    height: 800px;
    width: 800px;
    display: grid;
    grid-template-columns: repeat(var(--width), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    gap: 0;
    padding: 3px;
    position: relative;
    justify-content: center;
    align-self: center;
    padding: 0;
}

.tile {
	display: inline;
	background-color: var(--sg-black);
    border: inherit;
}

.row {
	display: block;
}

.current.tile {
	border: 1px solid var(--error);
}

.saving .current.tile {
	border: none;
}

.drawing-surface .buttons {
	display: block;
	padding: 1rem 0;
}

.drawing-surface .buttons > div {
	margin: 1rem 0;
}

@media screen and (min-width: 1500px) {
	.mark-button {
		font-size:  3.2rem;
		line-height:  3.2rem;
	}

	.drawing-surface .buttons {
		border-left: 0.4rem solid var(--white);
	}
}
.level-up-container {
	position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99999;
    background: var(--black);
    border: 0.4rem solid var(--white);
    transform: translate(-50%, -50%);
    height: 15rem;
}

.level-up-message {
	padding: 1rem;
}

.level-up-message-title, .level-up-message-line {
	margin: 0;
}

.level-up-message-title {
	margin-bottom: 3.2rem;
}
.guard-house {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.guard-house .top {
	flex-grow: 1;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

.guard-house .explanation-text {
	margin: 1rem 1rem 3.2rem;
}

.guard-house .list-text {
	margin: 1rem 1rem 3.2rem;
}

.guard-house .bottom {
	border-top: 0.4rem solid var(--white);
	display: flex;
}

.guard-house .bottom p {
	margin: 1rem;
}

.guard-house .weapon-deposit {
	margin-bottom: 3.2rem;
}

@keyframes move {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}

	20% {
		opacity: 1;
	}

	100% {
		transform: translate(2rem, 2rem);
		opacity: 0;
	}
}

@keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.on-screen-dialogue {
	position: absolute;
	z-index: 9999999;
	text-shadow: 0.2rem 0.2rem 0.5rem var(--black);

	animation-name: move;
	animation-duration: 5s;
	max-width: 50rem;

	opacity: 0;
}

.on-screen-dialogue-speech-tag {
	content: ' ';
    width: 0.1rem;
    height: 0.8rem;
    background: var(--white);
    bottom: -1rem;
    right: 2rem;
    position: absolute;
    transform: rotate(-45deg);
	z-index: 9999999;

	animation-name: fade;
	animation-duration: 5s;

	opacity: 0;
}

.on-screen-dialogue-speech-tag.right {
    transform: rotate(45deg);
}
.select-items {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999;
    background: var(--black);
    min-width: 55rem;
    min-height: 20rem;
    border: 0.4rem solid var(--white);
    padding-bottom: 3rem;
    max-height: 60%;
    display: flex;
    flex-direction: column;
}

.select-items-menu-container {
	overflow: hidden;
}

.select-items-actions {
	position: absolute;
    bottom: -1.5rem;
    background: var(--black);
}

.select-item-action {
	margin: 0;
}

.select-items-title {
    margin: 0.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.pristine {
	color: var(--info);
}

.excellent {
	color: var(--sg-green);
}

.good {
	color: var(--sg-yellow);
}

.used, .tattered, .poor {
	color: var(--sg-sunflow-orange);
}

.breaking {
	color: var(--sg-red);
}

.bottom-ting-inner {
	max-height: 100%;
	max-width: 100%;
    overflow: hidden;
    margin-bottom: 1.2rem;
}
.organisation-container {
	padding: 0 2rem 2rem 4rem;
	flex-grow: 1;
	overflow: auto;
	overflow-x: visible;
	pointer-events: none;
/*	display: flex;*/
}
.weight {
	display: inline;
}
.container {
	position: relative;
	color: var(--white);
	font-size: 3.2rem;
	line-height: 3rem;
	user-select: none;
	margin: 0;
	overflow: hidden;
}

.resize-bar {
	width: 0.6rem;
	background: #FFF7EB;
	height: 100%;
	order: 2;
	margin: 0 1rem;
	cursor: col-resize;
	flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0.6rem;
}

#main {
    position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin: 0;
	height: 100%;
}

.main-bar {
	display: flex;
	flex-direction: column;
	order: 1;
	margin-top: 4rem;
	flex-grow: 1;
	z-index: 3;
}

.character-list-sidebar, .info-sidebar {
	overflow-y: auto;
	flex-grow: 0;
	flex-shrink: 1;
	width: 100%;
	padding-bottom: 1rem;
}

.info-sidebar p {
	margin: 1rem 0;
}

.sidebar-tabs {
	border-bottom: 0.4rem solid #f1f1f1;
	top: 1px;
	display: flex;
}

.sidebar-tab {
	background: #f1f1f1;
	cursor: pointer;
	padding: 0 1rem;
	color: var(--white);

	opacity: 0.7;
}

.sidebar-tab--selected {
	cursor: pointer;
	background: #f1f1f1;
	color: var(--white);
	padding: 0 1rem;
}

.info-sidebar--hidden, .character-list-sidebar--hidden {
	display: none;
}

.messages-container {
	padding: 1rem;
}

.full-messages-container {
	border: 0.4rem solid var(--white);
	border-top: none;
	width: 100%;
	position: relative;
	margin: 10rem 1rem;
	z-index: 99999999;
	background: var(--black);
}

.fuller-messages-container {
	z-index: 9999999999;
}

.messages-title {
	margin: 0;
  background: var(--primary);
  color: var(--white);
}

.dialogue-title {
	margin: 0;
  background: var(--primary);
  color: var(--white);
  position: absolute;
  left: -0.4rem;
  right: -0.4rem;
  top: -3rem;
  height: 3rem;
}

.inventory-weight {
	color: var(--white);
}

.mobile-options {
	position: absolute;
	bottom: 0;
	right: 0;
	display: none;
}


@media screen and (max-width: 1200px) {
  .mobile-options {
  	display: block;
  }
}

.show-inventory {
	background: #EF8A17;
	padding: 0 1rem;
	cursor: pointer;
}

.show-crafting {
	color: var(--white);
	padding: 0 1rem;
	cursor: pointer;
}

.dialogue-close-button {
	position: absolute;
	top: -3rem;
	right: 0;
	cursor: pointer;
  padding: 0 1rem;
}

#main canvas {
	order: 3;
}

#main.hidden canvas {
	display: none;
}

#actions.hidden, #help.hidden, #error.hidden {
	display: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #888;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f1f1f1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1;
}

/* Firefox */
* {
	scrollbar-width: 10px;
	scrollbar-color: var(--white) var(--black-lighter);
}

.writing-type-selection {
	position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  background: var(--black);
  border: 0.4rem solid var(--white);
  transform: translate(-50%, -50%);
  width: 50rem;
  height: 15rem;
}

.new-message-container {
	position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99999;
  background: var(--black);
  border: 0.4rem solid var(--white);
  transform: translate(-50%, -50%);
}

.character-death-screen {
	border: 0.4rem solid var(--white);
	margin: 20rem auto;
	padding: 2rem;
	text-align: left;
	vertical-align: center;
	display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80rem;
}

.character-death-screen p {
	margin: 1rem 0;
}

.read-writing-surface {
	display: flex;
  height: 100%;
}

.read-writing-surface-container {
	width: 100%;
}

.read-writing-surface .surface {
	margin: 0 auto;
}

.connection-state {
	background: var(--sg-green);
	color: var(--white);
	position: absolute;
  top: 0;
  right: 0;
  z-index: 9999999999;
}

.near-death-screen {
	position: absolute;
	z-index: 9999;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background: var(--black);
}

.talk-to-character-in-world {
	margin-top: 0.8rem;
}

.lower-text {
	background: var(--black);
	text-align: right;
	background: var(--white);
	margin: 0;
	padding: 0 1rem;
	color: var(--primary);
	position: relative;
}

.pre-loading {
	background: var(--black);
	color: var(--white);
	font-size: 1rem;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	text-align: center;
}
.loading-screen-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--black);
	z-index: 99999999999999;
	opacity : 1;
}

.subsequent-loading-screen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999999999999;
	font-size: 3.2rem;
	overflow: hidden;
	color: var(--white);
	background: var(--black);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity : 0;
	transition: opacity 0.3s;
}

.loading-screen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--black);
	z-index: 99999999999999;
	font-size: 3.2rem;
	color: var(--white);
	overflow: hidden;
	opacity : 0;
	transition: opacity 1s;
}

.loading-screen.showing, .subsequent-loading-screen.showing {
	opacity: 1;
}

.loading-text-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--black);
	opacity: 0.5;
	height: 3.2rem;
	z-index: 99999999999999;
	font-size: 3.2rem;
	color: var(--white);
}

.loading-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	text-shadow: 5px 3px 4px rgb(0 0 0 / 50%);
}

.loading-dots {
	position: absolute;
	text-shadow: 5px 3px 4px rgb(0 0 0 / 50%);
}

/*# sourceMappingURL=main.848f0098.css.map */