body {
	background-color: #100c0b;
	color: white;
	font-family: Nunito,Century Gothic,Arial,Trebuchet MS,Verdana,Open Sans,sans-serif;
	font-size: 1.2rem;
}
.small {
	color: #ddab76;
	font-size: 1.1rem;
}
.footer {
	opacity: 0.8;
	font-size: 65%;
	width: 950px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0,0,0,.33);
	text-align: center;
}
.footer strong {
	width: calc(100% - 10px);
	display: flex;
	padding: 5px;
	background-color: rgba(0,0,0,.5);
	align-items: center;
	justify-content: center;
}
.footer-content {
	padding: 5px;
}
.footer-content a {
	color: #eee
}
.main-content {
	padding: 10px;
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.main-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: #7e4d2a;
	background-image:
		linear-gradient(0deg, rgb(100 59 37 / 83%) 34%,
		rgb(100 59 37 / 63%) 65%, rgb(100 59 37 / 0%) 90%),
		url('/img/header.jpg');
	background-repeat: no-repeat;
}
img.icon {
	margin-bottom: -2px;
	width: 16px;
	height: 16px;
}
img.icon.small {
	margin-bottom: -2px;
	width: 10px;
	height: 10px;
}
.content {
	background-color: rgba(153, 103, 57, 0.4);
	padding: 10px;
}
h3 {
	background: linear-gradient(0deg,#643b25 0,rgba(100,59,37,0) 50%,rgba(100,59,37,0));
	border-bottom: 2px solid #ddab76;
	color: #ddab76;
	font-variant: small-caps;
	font-weight: 700;
	margin: 0 0 10px;
}
h5 {
	background: linear-gradient(0deg,#643b25 0,rgba(100,59,37,0) 50%,rgba(100,59,37,0));
	border-bottom: 2px solid #ddab76;
	color: #ddab76;
	font-variant: small-caps;
	font-weight: 700;
	margin: 15px 0 2px;
}

h6 {
	background: linear-gradient(0deg,#643b25 0,rgba(100,59,37,0) 50%,rgba(100,59,37,0));
	border-bottom: 2px solid #ddab76;
	color: #ddab76;
	font-variant: small-caps;
	font-weight: 700;
	margin: 10px 0 5px;
}
select {
	background-color: #965c36;
	border: 1px solid #ddab76;
	color: #f0d79e;
	cursor: pointer;
	font-size: 14px;
	outline: 1px solid #000;
}
.input-label {
	padding: 3px;
	display: flex;
	flex-direction: column;
}
.aligned {
	width: 100%;
	display: flex;
}
.third {
	width: calc(100% / 3);
}
.loading {
	color: white;
}
.hidden {
	display: none;
}
.lang-switch {
	margin: 10px auto;
}
button {
	background: url('img/bg_button.gif') 50%/cover no-repeat;
	border: solid #000;
	border-width: 1px 1px 2px;
	box-shadow: 0 0 2px #000;
	color: #f0d79e;
	cursor: pointer;
	font-variant: small-caps;
	font-weight: 700;
	min-height: 25px;
	outline: 1px solid transparent;
	padding: 0 8px;
	text-align: left;
	transition: outline-color .5s;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 4px;
}
button.active {
	box-shadow: 0 0 9px #ffdbbc;
}
button:hover {
	border-color: #f0d79e;
	color: #fff;
}
.citizen-tabs-container {
	display: flex;
	gap: 5px;
}
.citizen-tabs {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.expeditions-tabs-container {
	display: flex;
	gap: 5px;
}
.expeditions-tabs {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.note.note-lightest {
    background-color: #996739;
    border: none;
    color: #f0d79e;
    padding: 3px 8px 3px 3px;
}

.note {
    background: #5c2b20;
    border: 1px solid #efdba8;
    font-size: 1.2rem;
    margin: 5px 0;
    padding: 5px;
	font-size: 13px;
}

.input_normal {
	color: #ddab76;
	background-color: #483927;
	border: 1px solid #be9766;
	padding: 1px 3px;
	width: 16px;
}
.input_ap {
	color: #ddab76;
	background-color: #483927;
	border: 1px solid #be9766;
	padding: 1px 3px;
	width: 16px;
	padding-left: 19px;
}
.input_normal::-webkit-outer-spin-button,
.input_normal::-webkit-inner-spin-button,
.input_ap::-webkit-outer-spin-button,
.input_ap::-webkit-inner-spin-button {
    -webkit-appearance: none;
	margin: 0 !important;
}

.icon-for-ap-input {
    position: absolute;
    left: 4px;
    top: 5px;
}

.citizen-expedition-header {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.icon-for-ap-recap {
    position: absolute;
	left: 1px;
    top: 1px;
}

.exp-recap-pa {
	display: flex;
	gap: 5px;
	margin: 5px auto;
}

.exp-recap-pa-part {
	color: #ddab76;
	background-color: #483927;
	border: 1px solid #be9766;
	padding: 1px 3px;
	width: 9px;
	padding-left: 19px;
	font-size: 13px;
}

.relative {
	position: relative;
}

.hspace {
	width: 100%;
}

.citizen-options {
	display: flex;
	gap: 10px;
}
.citizen-expedition-name {
	text-align: center;
}

.expedition-container {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
	gap: 20px;
}

.next-step {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.step-container {
	position: relative;
}

.next-step-container {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	width: 100%;
	gap: 20px;
}

.text-small {
	background-color: #996739;
    border: none;
	color: #e2d890;
	font-size: 12px;
	width: 100%;
	padding: 3px 8px 3px 3px;
}

.text-note {
	color: #ddab76;
    font-size: 11px;
    font-style: normal;
}

.step-things {
	border-right: 1px dashed #ddab76;
	height: 20px;
	margin: 5px auto;
	width: 1px;
}

.moving-step {
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
}

.moving-step:hover {
	background-color: #643b25;
}

.shared-actions {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(calc(-50% + -13px));

	display: flex;
	gap: 5px;

	background-color: #5c2b20;
	border: 1px solid #efdba8;
}
.shared-actions .step-action:hover {
	background-color: #643b25;
}

.rotate-left {
	rotate: -90deg;
}

.rotate-right {
	rotate: 90deg;
}

.down1left2 {
	translate: -2px 1px;
}

.left1 {
	translate: -1px 0;
}

.step-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-action {
	cursor: pointer;
}

.fit {
	width: fit-content;
}

.citizen-expedition-contents {
	display: flex;
	flex-direction: column;
    align-items: stretch;
	position: relative;
}

.center {
	margin: 0 auto;
}

.consume-step-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.flex {
	display: flex;
}

.align-center {
	align-items: center;
}

.gap5 {
	gap: 5px;
}