MediaWiki:Common.css: различия между версиями

Версия от 10:11, 2 марта 2025

.client-js .mw-collapsible-toggle-li,
.client-js ol.mw-collapsible:before,
.client-js ul.mw-collapsible:before {
	display: list-item;
	list-style: none;
	margin-bottom: .1em
}

.client-js ol.mw-made-collapsible:before,
.client-js ul.mw-made-collapsible:before {
	display: none
}

.client-js div.mw-collapsible:not(.mw-made-collapsible):before,
.client-js ol.mw-collapsible:not(.mw-made-collapsible):before,
.client-js table.mw-collapsible:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
.client-js table.mw-collapsible:not(.mw-made-collapsible)>caption:first-child:after,
.client-js ul.mw-collapsible:not(.mw-made-collapsible):before {
	content: '[свернуть]'
}

.client-js div.mw-collapsed:not(.mw-made-collapsible):before,
.client-js table.mw-collapsed:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
.client-js table.mw-collapsed:not(.mw-made-collapsible)>caption:first-child:after,
.client-js td.mw-collapsed:not(.mw-made-collapsible):before {
	content: '[развернуть]'
}

.client-js .mw-collapsible[id^=mw-customcollapsible] th:before,
.client-js .mw-collapsible[id^=mw-customcollapsible]:before {
	content: none !important
}

.client-js table.mw-collapsible:not(.mw-made-collapsible)>caption:first-child:after {
	float: none;
	display: block
}

.client-js .mw-collapsed:not(.mw-made-collapsible) .mw-collapsible-content,
.client-js .mw-collapsed:not(.mw-made-collapsible) tr:not(:first-child),
.client-js .mw-collapsed:not(.mw-made-collapsible)>p,
.client-js .mw-collapsed:not(.mw-made-collapsible)>table {
	display: none
}

.mw-collapsible-toggle,
.mw-collapsible:not(.mw-made-collapsible) th:before,
.mw-collapsible:not(.mw-made-collapsible):before {
	float: right
}

.mw-content-ltr .mw-collapsible-toggle,
.mw-content-ltr .mw-collapsible:not(.mw-made-collapsible) th:before,
.mw-content-ltr .mw-collapsible:not(.mw-made-collapsible):before {
	float: right
}

.mw-content-ltr li .mw-collapsible-toggle,
li .mw-collapsible-toggle {
	float: none
}

ol.mw-collapsible:not(.mw-made-collapsible):before,
ul.mw-collapsible:not(.mw-made-collapsible):before {
	float: none !important
}

#mw-clearyourcache {
	direction: ltr;
	unicode-bidi: embed
}

.action-info .mw-page-info tr:target {
	background-color: rgba(0, 127, 255, .133)
}

.citizen-toc__top:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xml:space=%22preserve%22 style=%22enable-background:new 0 0 20 20%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M1 3h18V1H1v2zm4 8h4v8h2v-8h4l-5-6-5 6z%22/%3E %3C/g%3E%3C/svg%3E")
}

@media (prefers-reduced-motion:reduce) {

	*,
	::after,
	::before {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important
	}
}

body {
	margin: 0
}

main {
	display: block
}

@supports (text-decoration:underline dotted) {
	abbr[title] {
		border-bottom: 0;
		text-decoration: underline dotted
	}
}

code,
pre {
	font-family: monospace, monospace
}

img {
	border: 0
}

button,
input,
select {
	margin: 0
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_cyrillic-ext.woff2?605e6) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_cyrillic.woff2?977ae) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_greek.woff2?832fb) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0370-03FF
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_vietnamese.woff2?6c86b) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_latin-ext.woff2?a00db) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 1000;
	src: url(https://spacestories.club/skins/Citizen/resources/skins.citizen.styles/fonts/RobotoFlex_latin.woff2?9db65) format('woff2-variations');
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
	--background-color-icon: rgba(0, 0, 0, 0.6);
	--background-color-icon--hover: rgba(0, 0, 0, 0.8);
	--background-color-icon--active: #000000;
	--background-color-quiet--hover: rgba(0, 0, 0, 0.07000000000000001);
	--background-color-quiet--active: rgba(0, 0, 0, 0.09);
	--color-destructive: #dd3333;
	--color-destructive--hover: #e35b5b;
	--color-destructive--active: #b32424;
	--color-warning: #ffcc33;
	--color-success: #00af89;
	--color-text-error: #dd3333;
	--color-text-warning: #ac6600;
	--color-text-success: #14866d;
	--color-link-new: #dd3333;
	--color-link-new--hover: #e35b5b;
	--color-link-new--active: #b32424;
	--color-syntax-red: #e53935;
	--color-syntax-orange: #f76d47;
	--color-syntax-yellow: #e2931d;
	--color-syntax-green: #91b859;
	--color-syntax-cyan: #39adb5;
	--color-syntax-blue: #6182b8;
	--color-syntax-paleblue: #8796b0;
	--color-syntax-purple: #9c3eda;
	--color-syntax-brown: #916b53;
	--color-syntax-pink: #ff5370;
	--color-syntax-violet: #945eb8;
	--color-syntax-grey: #90a4ae;
	--opacity-base--disabled: 0.3;
	--opacity-icon-base: 0.6;
	--opacity-icon-base--hover: 0.8;
	--opacity-icon-base--active: 1;
	--size-icon: 1.25rem;
	--border-color-base: rgba(0, 0, 0, 0.05);
	--border-color-base--lighter: rgba(0, 0, 0, 0.02);
	--border-color-base--darker: rgba(0, 0, 0, 0.08);
	--border-color-input: rgba(0, 0, 0, 0.05);
	--border-color-input--hover: rgba(0, 0, 0, 0.4);
	--border-radius--small: 4px;
	--border-radius--medium: 8px;
	--border-radius--large: 12px;
	--border-radius--pill: 9999px;
	--font-family-base: var(--font-family-citizen-base), var(--font-family-language-base), system-ui, -apple-system, sans-serif;
	--font-family-serif: var(--font-family-citizen-serif), var(--font-family-language-serif), 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
	--font-family-monospace: var(--font-family-citizen-monospace), var(--font-family-language-monospace), 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
	--font-family-citizen-base: 'Roboto';
	--font-family-citizen-serif: 'Roboto Serif';
	--font-family-citizen-monospace: 'Roboto Mono';
	--font-family-language-base: '';
	--font-family-language-serif: '';
	--font-family-language-monospace: '';
	--font-size-x-small: 0.75rem;
	--font-size-small: 0.875rem;
	--font-size-medium: 1rem;
	--font-size-large: 1rem;
	--font-size-x-large: 1.125rem;
	--font-size-xx-large: 1.375rem;
	--font-size-xxx-large: 1.75rem;
	--font-weight-normal: 400;
	--font-weight-medium: calc(var(--font-weight-normal) + 100);
	--font-weight-semibold: calc(var(--font-weight-normal) + 200);
	--font-weight-bold: calc(var(--font-weight-normal) + 300);
	--transition-hover: 150ms cubic-bezier(0.215, 0.61, 0.355, 1)
}

html {
	--header-size: 3.5rem;
	--header-card-maxheight: 70vh;
	--width-layout: 1080px;
	--width-layout--extended: calc(var(--width-layout) * 1.5);
	--width-toc: 240px;
	--line-height: 1.6;
	--line-height-xs: 1.25;
	--line-height-sm: 1.375;
	--space-unit: 1rem;
	--space-xxs: calc(0.25 * var(--space-unit));
	--space-xs: calc(0.5 * var(--space-unit));
	--space-sm: calc(0.75 * var(--space-unit));
	--space-md: var(--space-unit);
	--space-lg: calc(1.25 * var(--space-unit));
	--space-xl: calc(1.5 * var(--space-unit));
	--space-xxl: calc(2 * var(--space-unit));
	--margin-layout: calc((100vw - var(--width-layout)) / 2);
	--padding-page: 16px
}

:root.skin-citizen-dark {
	--background-color-icon: rgba(255, 255, 255, 0.6);
	--background-color-icon--hover: rgba(255, 255, 255, 0.8);
	--background-color-icon--active: rgba(255, 255, 255, 0.4);
	--background-color-quiet--hover: rgba(255, 255, 255, 0.07000000000000001);
	--background-color-quiet--active: rgba(255, 255, 255, 0.03);
	--color-text-error: #e35b5b;
	--color-text-warning: #ffcc33;
	--color-text-success: #00af89;
	--color-link-new: #e35b5b;
	--color-link-new--hover: #fee7e6;
	--color-link-new--active: #b32424;
	--color-syntax-red: #f07178;
	--color-syntax-orange: #f78c6c;
	--color-syntax-yellow: #ffcb6b;
	--color-syntax-green: #c3e88d;
	--color-syntax-cyan: #89ddff;
	--color-syntax-blue: #82aaff;
	--color-syntax-paleblue: #b2ccd6;
	--color-syntax-purple: #c792ea;
	--color-syntax-brown: #916b53;
	--color-syntax-pink: #ff9cac;
	--color-syntax-violet: #bb80b3;
	--opacity-icon-base--active: 0.4;
	--border-color-base: rgba(255, 255, 255, 0.05);
	--border-color-base--lighter: rgba(255, 255, 255, 0.02);
	--border-color-base--darker: rgba(255, 255, 255, 0.08);
	--border-color-input: rgba(255, 255, 255, 0.05);
	--border-color-input--hover: rgba(255, 255, 255, 0.5)
}

@media (min-width:640px) {
	:root {
		--font-size-x-small: 0.8125rem;
		--font-size-large: 1.125rem;
		--font-size-x-large: 1.25rem;
		--font-size-xx-large: 1.5rem;
		--font-size-xxx-large: 2rem
	}

	html {
		--padding-page: 24px
	}
}

@media (min-width:1120px) {
	html {
		--padding-page: 32px;
		--header-card-maxheight: calc(100vh - var(--space-sm) * 2)
	}
}

@media (prefers-contrast:more) {
	:root {
		--font-weight-normal: 500
	}
}

@media (prefers-contrast:less) {
	:root {
		--font-weight-normal: 300
	}
}

html {
	font-size: 100%
}

body,
html {
	font-family: var(--font-family-base);
	font-variation-settings: 'GRAD' var(--font-grade);
	font-weight: var(--font-weight-normal)
}

input {
	font-family: var(--font-family-base)
}

b,
strong {
	font-weight: var(--font-weight-semibold)
}

.mw-logo-wordmark {
	font-weight: var(--font-weight-semibold)
}

.citizen-body,
.mw-body-content {
	line-height: var(--line-height)
}

a {
	color: var(--color-link);
	text-decoration: none
}

a:not([href]) {
	cursor: pointer
}

a:hover {
	color: var(--color-link--hover)
}

a:active {
	color: var(--color-link--active)
}

a:focus,
a:hover {
	text-decoration: underline
}

a:lang(ar),
a:lang(kk-arab),
a:lang(mzn),
a:lang(ps),
a:lang(ur) {
	text-decoration: none
}

img {
	vertical-align: middle
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	margin-bottom: .25em;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-xs);
	color: var(--color-base--emphasized)
}

h1,
h2 {
	margin-top: 2em
}

h3,
h4 {
	margin-top: 1.5em
}

h5,
h6 {
	margin-top: 1.25em
}

h1 {
	font-size: var(--font-size-xxx-large)
}

h2 {
	font-size: var(--font-size-xx-large)
}

h3 {
	font-size: var(--font-size-x-large)
}

h4 {
	font-size: var(--font-size-large)
}

h5 {
	font-size: var(--font-size-medium)
}

h6 {
	font-size: var(--font-size-medium)
}

p {
	margin: var(--space-md) 0;
	overflow-wrap: break-word
}

p img {
	margin: 0
}

ul {
	padding: 0;
	margin: var(--space-md) 0 var(--space-md) var(--space-lg)
}

ol {
	padding: 0;
	margin: var(--space-md) 0 var(--space-md) var(--space-lg)
}

dl {
	margin: var(--space-md) 0
}

.mw-code,
code,
pre {
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-small)
}

.mw-code,
code,
pre {
	color: var(--color-base--emphasized);
	background-color: var(--color-surface-2);
	border: 1px solid var(--border-color-base)
}

code {
	padding: 2px 4px;
	border-radius: var(--border-radius--small)
}

.mw-code,
pre {
	padding: 1rem;
	overflow: auto;
	border-radius: var(--border-radius--large)
}

figure {
	margin: 0
}

.center {
	width: 100%;
	text-align: center
}

.center * {
	margin-right: auto;
	margin-left: auto
}

figure[typeof~='mw:File'].mw-halign-none,
figure[typeof~='mw:File/Frame'].mw-halign-none,
figure[typeof~='mw:File/Frameless'].mw-halign-none,
figure[typeof~='mw:File/Thumb'].mw-halign-none {
	float: none;
	clear: none
}

figure[typeof~='mw:File'].mw-halign-center,
figure[typeof~='mw:File/Frame'].mw-halign-center,
figure[typeof~='mw:File/Frameless'].mw-halign-center,
figure[typeof~='mw:File/Thumb'].mw-halign-center {
	margin-right: auto;
	margin-left: auto
}

figure[typeof~='mw:File']>figcaption,
figure[typeof~='mw:File/Frameless']>figcaption {
	display: none
}

figure[typeof~='mw:File/Frame'],
figure[typeof~='mw:File/Thumb'] {
	display: table;
	margin: var(--space-xs) auto var(--space-md) auto;
	font-size: var(--font-size-x-small);
	text-align: center
}

figure[typeof~='mw:File/Frame']>figcaption,
figure[typeof~='mw:File/Thumb']>figcaption {
	display: table-caption;
	padding-right: var(--border-radius--small);
	padding-left: var(--border-radius--small);
	margin-top: var(--space-xs);
	color: var(--color-base--subtle);
	letter-spacing: .025em;
	caption-side: bottom
}

@media (min-width:640px) {

	figure[typeof~='mw:File/Frame']>figcaption,
	figure[typeof~='mw:File/Thumb']>figcaption {
		text-align: start
	}

	.mw-content-ltr figure[typeof~='mw:File/Frame'],
	.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
		float: right;
		margin-left: var(--space-lg);
		clear: right
	}

	figure[typeof~='mw:File'].mw-halign-right,
	figure[typeof~='mw:File/Frame'].mw-halign-right,
	figure[typeof~='mw:File/Frameless'].mw-halign-right,
	figure[typeof~='mw:File/Thumb'].mw-halign-right {
		float: right;
		margin-left: var(--space-lg);
		clear: right
	}

	figure[typeof~='mw:File'].mw-halign-left,
	figure[typeof~='mw:File/Frame'].mw-halign-left,
	figure[typeof~='mw:File/Frameless'].mw-halign-left,
	figure[typeof~='mw:File/Thumb'].mw-halign-left {
		float: left;
		margin-right: var(--space-lg);
		clear: left
	}

	figure[typeof~='mw:File'].mw-halign-center,
	figure[typeof~='mw:File/Frame'].mw-halign-center,
	figure[typeof~='mw:File/Frameless'].mw-halign-center,
	figure[typeof~='mw:File/Thumb'].mw-halign-center {
		float: none;
		margin-right: auto;
		margin-left: auto;
		clear: both;
		text-align: center
	}
}

.mw-content-ltr ul {
	padding: 0;
	margin: var(--space-md) 0 var(--space-md) var(--space-lg)
}

.mw-content-ltr ol {
	padding: 0;
	margin: var(--space-md) 0 var(--space-md) var(--space-lg)
}

#contentSub,
#contentSub2,
#siteSub {
	font-size: var(--font-size-x-small);
	line-height: var(--line-height-xs);
	color: var(--color-base--subtle)
}

#contentSub,
#contentSub2 {
	margin-bottom: var(--space-md)
}

#contentSub+#contentSub2 {
	margin-top: calc(var(--space-xs) * -1)
}

#citizen-tagline-user>span+span::before {
	margin: 0 var(--space-xxs);
	content: '·';
	-webkit-user-select: none;
	user-select: none
}

.timeline {
	width: 100%;
	margin: 20px 0;
	background-color: transparent
}

.timeline-entry {
	padding: 10px;
	border-bottom: 1px solid #555;
	background-color: var(--timeline-entry-bg, #333)
}

.timeline-header {
	font-size: 18px;
	font-weight: 700;
	color: var(--timeline-header-color, #fff);
	cursor: pointer
}

.timeline-content {
	padding: 10px;
	font-size: 16px;
	color: var(--timeline-content-color, #ddd);
	background-color: var(--timeline-content-bg, #444);
	display: none
}

.timeline-entry:nth-child(even) {
	background-color: var(--timeline-entry-bg-even, #222)
}

.timeline-entry:hover {
	background-color: var(--timeline-entry-bg-hover, #555)
}

.timeline-entry a {
	color: var(--timeline-link-color, #ff9800);
	text-decoration: none
}

.timeline-entry a:hover {
	text-decoration: underline
}

.planets-table-wrapper {
	width: 100%;
	overflow-x: auto;
	margin: 0 auto
}

.planets-table {
	width: 100%;
	max-width: 150%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: "Segoe UI", Arial, sans-serif;
	background: linear-gradient(to bottom, #0d1117, #161b22);
	border: 1px solid #5a5a5a;
	border-radius: 12px;
	color: #b0b0b0;
	overflow: hidden
}

.planets-table th {
	background-color: #3a3a3a;
	color: #dcdcdc;
	text-align: center;
	padding: 12px;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 1px solid #5a5a5a
}

.planets-table td {
	text-align: center;
	padding: 12px;
	font-size: 16px;
	border-top: 1px solid #5a5a5a
}

.planets-table td img {
	border-radius: 50%;
	margin: 10px 0;
	width: 80px;
	height: 80px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .6)
}

.planets-table tr:first-child th:first-child {
	border-top-left-radius: 12px
}

.planets-table tr:first-child th:last-child {
	border-top-right-radius: 12px
}

.planets-table tr:last-child td:first-child {
	border-bottom-left-radius: 12px
}

.planets-table tr:last-child td:last-child {
	border-bottom-right-radius: 12px
}

.planets-table tr:nth-child(even) {
	background-color: rgba(255, 255, 255, .03)
}

.planets-table tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, .06)
}

.planets-table td:nth-child(2),
.planets-table th:nth-child(2) {
	text-align: center
}

.planets-table caption {
	margin: 10px 0;
	font-size: 20px;
	font-weight: 700;
	color: #a0a0a0;
	text-align: left
}

#snow-toggle {
	position: fixed;
	top: 200px;
	left: 10px;
	font-size: 30px;
	cursor: pointer;
	z-index: 9999;
	color: #000;
	transition: transform .3s ease;
	user-select: none
}

@media screen and (max-width:768px) {
	#snow-toggle {
		top: 100px;
		left: 10px;
		font-size: 24px
	}
}

#snow-toggle.snow-on {
	animation: swing 1s infinite ease-in-out
}

#snow-toggle.snow-off {
	animation: none
}

.snowflake {
	position: fixed;
	top: -50px;
	font-size: 1.5rem;
	color: #fff;
	opacity: .8;
	pointer-events: none;
	animation: fall linear infinite;
	user-select: none
}

@keyframes swing {

	0%,
	100% {
		transform: rotate(0)
	}

	50% {
		transform: rotate(10deg)
	}
}

@keyframes fall {
	0% {
		transform: translateX(0) rotate(0)
	}

	50% {
		transform: translateX(20px) rotate(180deg)
	}

	100% {
		transform: translateX(-20px) rotate(360deg);
		top: 100vh
	}
}

.planets-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px 0
}

.planet-card {
	width: 220px;
	border: 2px solid #555;
	border-radius: 15px;
	overflow: hidden;
	background-color: #333;
	color: #fff;
	text-align: center;
	padding: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .7);
	transition: transform .3s ease, box-shadow .3s ease
}

.planet-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-bottom: 2px solid #555;
	border-radius: 8px
}

.planet-card h3 {
	font-size: 1.3em;
	margin: 15px 0 10px;
	color: #fc0;
	text-transform: uppercase;
	letter-spacing: 1px
}

.planet-card p {
	font-size: 1em;
	color: #ddd;
	margin: 0;
	line-height: 1.5;
	max-height: 100px;
	overflow: hidden;
	text-overflow: ellipsis
}

.planet-card:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .8)
}

.planet-card .more-info {
	margin-top: 10px;
	padding: 5px;
	background-color: #fc0;
	color: #222;
	border-radius: 5px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s ease
}

.planet-card .more-info:hover {
	background-color: #fa0
}

@media (max-width:768px) {
	.planets-row {
		justify-content: center
	}

	.planet-card {
		width: 90%;
		max-width: 280px
	}
}

@media (max-width:480px) {
	.planet-card {
		width: 100%
	}
}

:root {
	--transition-duration: 0.4s;
	--primary-bg-color: #1e1e1e;
	--secondary-bg-color: #292929;
	--item-bg-color: #2a2a2a;
	--item-hover-bg-color: #3a3a3a;
	--border-color: #555;
	--text-color: #d3d3d3;
	--hover-text-color: #ffffff;
	--font-family: 'Arial', sans-serif;
	--menu-border-radius: 25px;
	--header-padding: 30px;
	--item-height: 180px;
	--icon-size: 72px;
	--text-font-size: 18px
}

.custom-lore-menu {
	max-width: 1200px;
	margin: 30px auto;
	padding: 40px;
	border: 1px solid var(--border-color);
	border-radius: var(--menu-border-radius);
	background-color: var(--primary-bg-color);
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px
}

.custom-header {
	text-align: center;
	background-color: var(--secondary-bg-color);
	padding: var(--header-padding);
	border-bottom: 2px solid var(--border-color)
}

.custom-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 25px;
	padding: 25px;
	justify-items: center;
	align-items: center
}

.custom-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--item-height);
	text-align: center;
	border: 1px solid var(--border-color);
	border-radius: 15px;
	background-color: var(--item-bg-color);
	transition: transform var(--transition-duration), background-color var(--transition-duration);
	cursor: pointer
}

.custom-item:hover {
	background-color: var(--item-hover-bg-color);
	transform: scale(1.05)
}

.custom-item a {
	text-decoration: none;
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: color var(--transition-duration)
}

.custom-item a:hover {
	color: var(--hover-text-color)
}

.custom-icon {
	width: var(--icon-size);
	height: var(--icon-size);
	margin-bottom: 15px
}

.custom-text {
	font-size: var(--text-font-size);
	font-weight: 700;
	color: var(--text-color);
	transition: color var(--transition-duration)
}

.custom-text:hover {
	color: var(--hover-text-color)
}

@media (max-width:768px) {
	.custom-lore-menu {
		padding: 20px
	}

	.custom-links {
		grid-template-columns: 1fr
	}

	.custom-item {
		height: auto
	}

	.custom-text {
		font-size: 16px
	}
}

body.page-Лор_СМ #contentSub,
body.page-Лор_СМ #siteSub,
body.page-Лор_СМ h1.firstHeading {
	display: none !important
}

.CMMainFigure {
	height: 130px;
	width: 575px;
	background: #292f2d;
	border-radius: 6px
}

.CMMainText {
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	color: #a1a2a5;
	padding-top: 6px;
	padding-left: 9px
}

.CMMainButton {
	height: 40px;
	width: 180px;
	background: #151a22;
	border-radius: 6px;
	margin-top: 7px;
	margin-left: 7px
}

.CMMainButton2 {
	transform: translate(190px, -94px);
	height: 40px;
	width: 180px;
	background: #151a22;
	border-radius: 6px;
	margin-top: 7px;
	margin-left: 7px
}

.CMMainButton3 {
	transform: translate(380px, -188px);
	height: 40px;
	width: 180px;
	background: #151a22;
	border-radius: 6px;
	margin-top: 7px;
	margin-left: 7px
}

.CMMainButtonText {
	display: inline-block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 7px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	color: #fff;
	text-decoration: none
}

body.page-Провост_Маршал #siteSub,
body.page-Провост_Маршал .citizen-header,
body.page-Провост_Маршал .mw-body-header,
body.page-Провост_Маршал .mw-page-title-main {
	display: none !important
}

body.page-Провост_Маршал .citizen-page-container {
	background: #14181f;
	background: linear-gradient(90deg, rgba(20, 24, 31, 1) 0, rgba(40, 11, 15, 1) 75%, rgba(82, 0, 0, 1) 100%)
}

.rectangleCM {
	width: 250px;
	height: 60px;
	background: linear-gradient(to right, #05141d 85%, #14181f);
	position: relative;
	transform: translate(835px, 20px)
}

.rectangleCM2 {
	width: 250px;
	height: 60px;
	background: linear-gradient(to right, #05141d 85%, #14181f);
	position: relative;
	transform: translate(835px, 30px)
}

.rectangleCM3 {
	width: 800px;
	height: 130px;
	background: #590000;
	position: relative;
	transform: translate(0, -100px)
}

.rectangleCM4 {
	width: 1085px;
	height: 60px;
	background: linear-gradient(to right, #05141d 85%, #14181f);
	position: relative;
	transform: translate(0, -90px)
}

.rectangleCMTwo {
	width: 10px;
	height: 60px;
	background: #0087bd;
	position: relative;
	transform: translate(0, -52px)
}

.rectangleCMTwo2 {
	width: 10px;
	height: 60px;
	background: #0087bd;
	position: relative;
	transform: translate(0, -52px)
}

.classifieldCM {
	color: #bebebe;
	position: relative;
	transform: translate(15px, 5px);
	font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: .75em;
	font-weight: 500
}

.classifieldCMRisk {
	color: #bebebe;
	position: relative;
	transform: translate(17.5px, 6px);
	font-family: "Gill Sans", sans-serif;
	font-size: calc(11px +(12 - 8)*((100vw - 400px)/ (800 - 400)));
	font-weight: 700
}

.rectangleCMTwo3 {
	width: 10px;
	height: 130px;
	background: #ce0000;
	position: relative;
	transform: translate(0, -79px)
}

.classifieldCM3 {
	color: #bebebe;
	position: relative;
	transform: translate(17.5px, 5px);
	font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: .9em;
	font-weight: 500
}

.classifieldCMRisk3 {
	color: #bebebe;
	position: relative;
	transform: translate(20px, 21px);
	font-family: "Gill Sans", sans-serif;
	font-size: 35px;
	font-weight: 700
}

.triangle-bottomrightCM {
	width: 450px;
	height: 0;
	border-bottom: 130px solid #700;
	border-left: 100px solid transparent;
	position: relative;
	transform: translate(350px, -210px)
}

.MarshalsLogoCM {
	right: 0;
	bottom: 0;
	position: absolute
}

.hrCMLore {
	border: none;
	border-top: 1.5px solid #c6c3b5
}

.second_block {
	display: none
}

.imggg {
	float: right
}

.home-card:hover .second_block {
	display: block;
	font-family: "Gill Sans", sans-serif
}

.divisionis {
	color: #c6c3b5;
	opacity: 1;
	text-align: center;
	font-family: system-ui;
	font-size: 30px
}

.loreCMwelcom {
	color: #c6c3b5;
	opacity: .5;
	text-align: left;
	font-family: "Gill Sans", sans-serif;
	font-size: 15px;
	font-weight: lighter
}

.loreCMwelcomWork {
	color: #c6c3b5;
	opacity: .75;
	text-align: left;
	font-family: "Gill Sans", sans-serif;
	font-size: 15px;
	font-weight: lighter
}

.loreCMtext {
	color: #fff;
	text-align: left;
	font-family: system-ui;
	font-size: 30px;
	font-weight: 700
}

.home-grid {
	display: grid;
	grid: auto-flow dense/repeat(auto-fit, minmax(9.375rem, 1fr));
	grid-auto-rows: minmax(3rem, auto);
	grid-gap: calc(.5 * 1rem);
	font-family: "Gill Sans", sans-serif
}

.home-grid--col2 {
	grid-template-columns: 1fr 1fr
}

.home-grid a.external {
	background-image: none
}

.home-card {
	position: relative;
	padding: 1rem;
	background: #161c26;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .04), 0 3px 6px rgba(0, 0, 0, .0575);
	font-size: .875rem
}

.home-card table.timeline {
	margin-top: .2rem
}

.home-card--col2 {
	grid-column: span 2
}

.home-card--row3 {
	grid-row: span 3
}

.home-card--row4 {
	grid-row: span 4
}

.home-card--row8 {
	grid-row: span 8/auto
}

.home-card__label {
	color: #72777d;
	font-size: .8125rem;
	letter-spacing: .75px
}

.home-card__header {
	color: #202122;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25
}

.home-card__header a {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.home-card__header a:after {
	content: '▶';
	font-size: .8125rem
}

.home-card__background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #242a31;
	border-radius: 8px
}

.home-card__background:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	background: linear-gradient(to right, #000, transparent);
	content: ""
}

.home-card__background img,
.home-card__background picture {
	width: 100%;
	height: 100%
}

.home-card__background img {
	object-fit: cover;
	object-position: center
}

.home-card__foreground {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(.25 * 1rem);
	color: #fff;
	line-height: 1.25
}

.home-card__foreground .home-card__header {
	color: #fff
}

.home-card__foreground .home-card__label {
	color: #bababa
}

.home-card p {
	margin-top: calc(0 * 1rem);
	font-size: .875rem
}

.home-card.home-card--button {
	overflow: hidden;
	padding: 0;
	background: #242a31;
	border: 0
}

.home-card--button a {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
	background: 0 0;
	color: #fff;
	font-weight: 500
}

.home-card--button--navigation a {
	display: contents;
	height: 100%;
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
	background: 0 0;
	color: #fff;
	font-weight: 500
}

.home-card--button .home-card__background a {
	padding: 0
}

.home-card--button img {
	transition: transform .2s ease
}

.home-card--button:hover img {
	transform: scale(1.1)
}

.home-link {
	display: grid;
	margin-top: calc(.5 * 1rem);
	font-size: .875rem;
	font-weight: 500;
	grid-gap: calc(.5 * 1rem);
	text-align: center
}

.home-link__button {
	display: flex
}

.home-link__button a {
	flex-grow: 1;
	padding: calc(.5 * 1rem);
	border: 1px solid rgba(255, 255, 255, .05);
	background: #1c232f;
	border-radius: 8px;
	color: #fff !important;
	line-height: 1.25;
	text-decoration: none !important
}

.home-link__button a:hover {
	background: #212b3e
}

.home-link__button a:active {
	background: #131924
}

#home-content {
	margin-top: calc(1.25 * 1rem)
}

.home-card .template-statsbar {
	margin: 0
}

.home-footer {
	font-size: .8125rem;
	font-family: monospace;
	text-align: center
}

#home-nav {
	margin-top: 1rem
}

#home-nav .home-card__foreground {
	font-weight: 500
}

.tabber {
	border: 1px solid #20242a !important;
	border-radius: 10px !important;
	overflow: hidden
}

.tabber__tab {
	background: #19191d !important;
	padding: 8px 16px
}

.tabber__panel {
	padding: 0 12px;
	border-radius: 8px !important
}

.tabs-tabbox {
	background: rgba(255, 0, 0, .07) !important;
	border-radius: 8px !important
}

@keyframes gradient-animation {

	0%,
	100% {
		background-position: 0 50%
	}

	50% {
		background-position: 100% 50%
	}
}

.job_header {
	font-family: Arial, sans-serif;
	border: 3px solid var(--border-color, #465298);
	border-radius: .5em;
	background-color: #27272e;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
	overflow: hidden;
	margin: 0 0 10px 5px
}

.job_header .header-title {
	text-align: center;
	padding: 5px 10px;
	margin: 0;
	background: linear-gradient(135deg, var(--header-color-start, #465298), var(--header-color-end, #27272e));
	background-size: 300% 300%;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: .5px;
	text-transform: uppercase;
	animation: gradient-animation 6s ease infinite;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .5)
}

.job_header .sprite-container {
	text-align: center;
	padding: 3px 0;
	margin: 0;
	background: linear-gradient(135deg, var(--sprite-color-start, #465298), var(--sprite-color-end, #27272e));
	background-size: 300% 300%;
	animation: gradient-animation 6s ease infinite;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .4)
}

.job_header .sprite-container img {
	border-radius: .2em
}

.job_header div {
	padding: 3px 10px;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #ddd;
	transition: background-color .3s ease
}

.job_header div:last-child {
	border-bottom: none
}

.job_header .label {
	font-weight: 700;
	color: #ddd
}

.job_header .value {
	color: #bbb;
	font-size: .95em
}

.job_collapsible {
	cursor: pointer;
	color: #add8e6;
	text-decoration: underline;
	margin-top: 10px
}

.job_collapsible_content {
	display: none;
	padding: 10px;
	color: #bbb;
	transition: all .3s ease
}

pre {
	display: inline-block;
	white-space: pre-wrap
}

span.ClearUnset>figure.mw-halign-right {
	clear: unset
}

.collapsible_align>tbody>tr>th>span {
	padding: 7px 5px
}

.mw-collapsible.mw-made-collapsible.mw-collapsed .mw-collapsible-text {
	color: #dbdbdb;
	box-shadow: 0 0 5px 0;
	border: 2px solid;
	padding: 4px;
	border-radius: 10px;
	transition: .5s
}

.mw-collapsible.mw-made-collapsible .mw-collapsible-text {
	color: #fff;
	border: 2px dotted;
	padding: 4px;
	border-radius: 10px;
	transition: .5s
}

.mw-collapsible-toggle-default:before {
	content: unset
}

.mw-collapsible-toggle-default:after {
	content: unset
}

@media screen and (min-width:1120px) {
	.citizen-toc-enabled .citizen-body-container {
		grid-template-areas: 'void header header''sidebar content toc''footer footer footer'
	}

	.citizen-toc-enabled .citizen-body-container {
		grid-template-columns: 10% 70% 20%;
		margin-left: 8vw
	}

	body {
		overflow-x: hidden
	}

	#IdJobsTableContainer2 {
		grid-area: sidebar;
		margin-left: -8vw
	}
}

.unheightTabber .tabber__section {
	height: unset !important
}

.page-info__item {
	flex-basis: 100%
}

.citizen-footer {
	margin: 0
}

#IdJobsTableContainer2 {
	flex-basis: 20%;
	padding: 0 38px
}

#IdJobsTableContainer2>div {
	background: #ffffff08;
	border-radius: 20px;
	padding: 5px 10px
}

.JobsTable {
	border: 2px solid #000;
	border-radius: 10px;
	margin-bottom: 5px;
	width: auto;
	height: fit-content;
	background: #28303e
}

.JobsTableHeadImg {
	margin-left: 15px;
	margin-right: 5px
}

.JobsTableHeadLink {
	margin-right: auto
}

.client-js div.mw-collapsed:not(.mw-made-collapsible):before,
.client-js div.mw-collapsible:not(.mw-made-collapsible):before,
.client-js ol.mw-collapsible:not(.mw-made-collapsible):before,
.client-js table.mw-collapsed:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
.client-js table.mw-collapsed:not(.mw-made-collapsible)>caption:first-child:after,
.client-js table.mw-collapsible:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
.client-js table.mw-collapsible:not(.mw-made-collapsible)>caption:first-child:after,
.client-js td.mw-collapsed:not(.mw-made-collapsible):before,
.client-js ul.mw-collapsible:not(.mw-made-collapsible):before {
	opacity: 0
}

#IdJobsTableContainer1 {
	display: none
}

@media screen and (max-width:1440px) {
	#IdJobsTableContainer2 {
		display: none
	}

	#IdJobsTableContainer1 {
		display: unset
	}

	.JobsTableHeadImg {
		margin-left: unset
	}

	.JobsTableHeadLink {
		margin-right: 55px
	}

	.client-js div.mw-collapsed:not(.mw-made-collapsible):before,
	.client-js div.mw-collapsible:not(.mw-made-collapsible):before,
	.client-js ol.mw-collapsible:not(.mw-made-collapsible):before,
	.client-js table.mw-collapsed:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
	.client-js table.mw-collapsed:not(.mw-made-collapsible)>caption:first-child:after,
	.client-js table.mw-collapsible:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
	.client-js table.mw-collapsible:not(.mw-made-collapsible)>caption:first-child:after,
	.client-js td.mw-collapsed:not(.mw-made-collapsible):before,
	.client-js ul.mw-collapsible:not(.mw-made-collapsible):before {
		opacity: 1
	}
}

@media screen and (min-width:1440px) {
	.JobsTable .mw-collapsible.mw-collapsed {
		display: none
	}

	.JobsTable .mw-collapsible.mw-collapsed:hover,
	.JobsTable div:hover~.mw-collapsible.mw-collapsed {
		display: unset
	}
}

@media screen and (max-width:1439px) {
	.JobsTable div:first-child {
		padding-left: 15px
	}
}

.JobsTable .mw-collapsible-toggle {
	margin-top: -35px
}

.JobsTable .mw-collapsible-toggle-default:after,
.JobsTable .mw-collapsible-toggle-default:before {
	content: unset
}

.JobsTable .mw-collapsible-text {
	background: #000;
	border: 2px solid;
	padding: 2px;
	margin-right: 5px;
	font-weight: 700
}

.JobsTable .mw-collapsible.mw-made-collapsible.mw-collapsed .mw-collapsible-text {
	color: #00ffff9e;
	box-shadow: 0 0 10px #00b9b978
}

.JobsTable .mw-collapsible.mw-made-collapsible .mw-collapsible-text {
	color: #c21111cc
}

.JobsTableList li a {
	color: #fff;
	font-size: 16px;
	background: #232323;
	display: block;
	border: 2px solid #000;
	margin-bottom: 5px;
	padding: 3px 5px;
	transition: background-color .8s
}

.JobsTableList li a:hover {
	background: #007383;
	transform: scale(1.1);
	text-decoration: unset
}

.citizen-sections-enabled .citizen-section-heading .mw-headline {
	border-bottom: 2px solid;
	border-image: linear-gradient(to right top, #5d5d5d, #272727);
	border-image-slice: 1
}

.citizen-sections-enabled .citizen-section-heading .mw-headline:empty {
	border: unset
}

.citizen-sections-enabled .citizen-section-heading--collapsed .mw-headline {
	border: unset
}

.mw-ui-icon-wikimedia-collapse:before {
	opacity: unset
}

.citizen-sections-enabled .citizen-section-indicator {
	width: 25px;
	height: 25px;
	position: absolute;
	padding: 3px;
	background: rgb(162 162 162 / 60%);
	box-shadow: 0 0 20px 0 rgb(162 162 162 / 20%);
	border: 1px solid #000;
	border-radius: 50%;
	transition: .3s;
	margin-left: -30px;
	margin-right: 5px
}

@media screen and (max-width:1119px) {
	.citizen-sections-enabled .citizen-section-indicator {
		margin-left: 0
	}

	.citizen-sections-enabled .citizen-section-indicator {
		width: 21px;
		height: 21px
	}

	.citizen-sections-enabled .citizen-section-heading .mw-headline {
		padding-left: 25px
	}
}

.citizen-sections-enabled .citizen-section-heading--collapsed .citizen-section-indicator {
	background: #000;
	opacity: 50%;
	box-shadow: unset;
	transition: .3s
}

.citizen-section-collapsible p {
	margin-bottom: 1.5em;
	margin-top: 0
}

.citizen-header__logo {
	height: 89px
}

.logo2 img {
	opacity: 0;
	animation: animOpacity .5s forwards
}

@keyframes animOpacity {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.logo1:hover,
.logo2:hover {
	background: #ffffff26;
	border-radius: 15px
}

@media screen and (max-width:1119px) {
	.citizen-header__logo {
		display: flex;
		height: auto;
		width: 89px
	}

	.logo1 {
		margin-right: 3px
	}
}

@media screen and (min-width:1120px) {
	.logo1 {
		margin-bottom: 3px
	}
}

:root.skin-citizen-dark {
	--background-color-quiet--hover: unset
}

@media screen and (max-width:1119px) {
	.citizen-scroll--down .citizen-header {
		transform: unset
	}
}

.citizen-overflow--right {
	-webkit-mask-image: unset
}

@media screen and (min-width:1421px) {
	.citizen-table-wrapper {
		overflow: unset
	}
}

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

	.citizen-overflow--left,
	.citizen-overflow--left.citizen-overflow--right,
	.citizen-overflow--right,
	.citizen-table-wrapper {
		-webkit-mask-image: unset;
		overflow: auto
	}
}

.citizen-header__logo img,
.logo img {
	image-rendering: unset
}

.nopixelated img {
	image-rendering: unset
}

@media screen and (max-width:1025px) {
	mobile_bigtable {
		font-size: 16px
	}
}

@media screen and (max-width:1024px) {
	mobile_bigtable {
		font-size: 10px
	}
}

.standard-link td,
.standard-link th {
	vertical-align: middle;
	border: 2px solid #000;
	background-color: #212126
}

.standard-link th {
	border-radius: 15px 0 0 15px
}

.standard-link th a {
	margin: 7px
}

.standard-link td a {
	margin: 5px 10px;
	padding: 17px
}

.standard-link a {
	text-decoration: none;
	font: small-caps bold 25px sans-serif;
	color: #fff;
	border: 2px solid #000;
	display: flex;
	align-items: center;
	background-color: #141417;
	transition: background-color 1s ease, border-color 1s ease, color 1s ease
}

@media screen and (max-width:850px) {
	.standard-link a {
		transition: none
	}

	.standard-link td {
		border-radius: 0 15px 15px 0
	}
}

.standard-link tr:hover a {
	background-color: #000;
	color: #fff;
	border-color: #e23229
}

.main-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

.menu-section {
	flex-basis: 23%;
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 8px;
	background-color: #14171f;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .1)
}

.marines-section {
	background-color: #222424
}

.xenos-section {
	background-color: #2b2e44
}

.other-section {
	background-color: #341d1d
}

.menu-section h3 {
	padding: 5px;
	margin: 0;
	font-size: 18px;
	text-align: center;
	color: #fff
}

.menu-section ul {
	list-style-type: none;
	padding: 0;
	margin: 10px 0 0 0
}

.menu-section ul li {
	margin: 10px 0;
	text-align: center
}

.menu-section ul li a {
	display: block;
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	text-align: center;
	background-color: #1a1e29;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .2);
	transition: background-color .3s ease, border-color .3s ease
}

.menu-section ul li a:hover {
	background-color: #666;
	border-color: rgba(255, 255, 255, .5)
}

.maps-section {
	color: #fff
}

.maps-section ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0
}

.maps-section {
	color: #fff !important
}

.maps-section ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0
}

.maps-section ul li {
	flex-basis: 48%;
	list-style: none
}

.maps-section ul li a {
	display: block;
	padding: 10px;
	background-color: #1a1e29;
	color: #fff !important;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .2);
	transition: background-color .3s ease, border-color .3s ease
}

.maps-section ul li a:hover {
	background-color: #666;
	border-color: rgba(255, 255, 255, .5)
}

.maps-section ul li a::after {
	content: none !important
}

.header-container {
	display: flex;
	align-items: center;
	background-color: #1b1e26;
	padding: 20px 30px;
	border-radius: 8px
}

.logo img {
	border-radius: 50%;
	width: 100px;
	height: auto
}

.title-text {
	margin-left: 30px;
	color: #fff
}

.title-text h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 700
}

.title-text p {
	margin: 5px 0 0;
	font-size: 18px
}

.separator {
	border-bottom: 2px solid #a9a9a9;
	margin: 10px 0 20px
}

@media (max-width:599px) {
	.main-container {
		flex-direction: column;
		align-items: stretch
	}

	.menu-section {
		flex-basis: 100%;
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: stretch
	}

	.menu-section ul {
		flex-grow: 1;
		justify-content: space-between;
		padding: 0
	}

	.menu-section ul li {
		flex-grow: 1;
		width: 100%;
		text-align: center;
		margin-bottom: 10px
	}

	.menu-section ul li a {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
		padding: 10px 0
	}

	.maps-section ul {
		flex-wrap: wrap;
		gap: 10px
	}

	.maps-section ul li {
		flex-basis: 48%;
		margin-bottom: 10px
	}

	.header-container {
		flex-direction: column;
		text-align: center;
		padding: 10px
	}

	.logo img {
		width: 80px
	}

	.title-text {
		margin-left: 0;
		margin-top: 10px
	}

	.title-text h1 {
		font-size: 24px
	}

	.title-text p {
		font-size: 16px
	}
}

.command-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px
}

.card {
	background-color: #2b2b2b;
	border-radius: 10px;
	width: 220px;
	height: auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 8px;
	text-align: center;
	position: relative;
	transition: transform .3s ease, box-shadow .3s ease;
	border: 4px solid transparent;
	color: #fff;
	overflow: hidden
}

.card.Captain {
	border-color: #b0b7c3
}

.card.HeadOfSecurity {
	border-color: red
}

.card.HeadOfPersonnel {
	border-color: #0f0
}

.card.Engineer {
	border-color: orange
}

.card.Scientist {
	border-color: purple
}

.card.Doctor {
	border-color: #127bb7
}

.card.Quartermaster {
	border-color: gold
}

.card .role-name {
	font-weight: 700;
	font-size: 1.4em;
	color: #fff;
	margin-bottom: 3px;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	word-wrap: break-word;
	display: grid;
	grid-template-columns: 212px;
	grid-template-rows: 75px
}

.role-name a {
	color: #ccc
}

.card img {
	max-width: 160px;
	max-height: 160px;
	margin-bottom: 3px
}

.card .role-description {
	font-size: .9em;
	flex-grow: 1;
	margin: 3px 0;
	color: #dcdcdc;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal
}

.card .role-guide {
	font-size: .85em;
	margin-top: 3px;
	text-align: center
}

.card .role-guide a {
	color: #00bfff;
	text-decoration: none
}

.card .role-guide a:hover {
	text-decoration: underline
}

.card:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .3)
}

* {
	font-family: Arial
}

body {
	color: #fafafa
}

img {
	image-rendering: pixelated
}

.flex-container {
	display: flex;
	align-items: flex-start
}

.flex-image {
	flex-shrink: 0;
	margin-right: 20px
}

.flex-image-description {
	flex-grow: 1
}

.uplinkbuybutton {
	background: #464966;
	width: 62px;
	height: 27px;
	color: #fff;
	text-align: center;
	font-weight: bolder;
	float: right;
	padding-top: 4px;
	clip-path: polygon(0 0, 0 18px, 9px 27px, 62px 27px, 62px 10px, 53px 0)
}

.tooltip {
	position: relative;
	display: inline
}

.tooltiptext {
	position: absolute;
	display: initial;
	z-index: 99999;
	width: 295px;
	left: -120px;
	top: 42px;
	padding: 5px;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	white-space: normal;
	text-align: left;
	transition: all .2s;
	border: 1px solid #b80000;
	border-radius: 10px;
	background-color: #24242a;
	box-shadow: 0 0 5px #b80000
}

.tooltip:hover>.tooltiptext {
	visibility: visible;
	opacity: .98
}

.wikitable td dl,
.wikitable td ol,
.wikitable td ul {
	text-align: left
}

.wikitable>*>tr>td,
.wikitable>*>tr>th,
.wikitable>tr>td,
.wikitable>tr>th {
	border: 1px solid #000
}

.wikitable>*>tr>th {
	background: #27272e;
	color: #fff
}

@media screen and (min-width:851px) {
	.mobile {
		display: none
	}

	.job_header {
		float: right;
		width: 25%
	}
}

@media screen and (max-width:1420px) {
	.tooltiptext {
		box-shadow: 0 0 100vw 100vh rgb(0 0 0 / 60%);
		position: fixed;
		width: 80vw;
		top: 40vh;
		left: 0;
		margin: 0 auto;
		right: 0
	}
}

@media screen and (max-width:850px) {
	.nomobile {
		display: none
	}

	.mobilefont {
		font-size: 80%
	}

	.mobile_sprite,
	.mobile_text {
		transform: scale(.75)
	}
}

.hover_img_special {
	top: 0;
	left: 0;
	display: none
}

.img_special:hover .hover_img_special {
	display: inline
}

.img_special:hover .img_spec {
	display: none
}

.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
	border-color: #fc3;
	background-color: #fef6e7
}

html body.mediawiki .mbox-small {
	clear: right;
	float: right;
	margin: 4px 0 4px 1em;
	width: 238px;
	font-size: 88%;
	line-height: 1.25em
}

.messagebox.small {
	width: 238px;
	font-size: 85%;
	float: right;
	margin: 0 0 1em 1em;
	line-height: 1.25em
}

.messagebox.small-talk {
	width: 238px;
	font-size: 85%;
	float: right;
	margin: 0 0 1em 1em;
	line-height: 1.25em;
	background-color: #f8eaba
}

.infobox {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	color: #000;
	margin: .5em 0 .5em 1em;
	padding: .2em;
	float: right;
	font-size: 88%;
	line-height: 1.5em;
	width: 22em
}

.infobox td,
.infobox th,
.infobox-above,
.infobox-below,
.infobox-data,
.infobox-full-data,
.infobox-header,
.infobox-image,
.infobox-label,
.infobox-navbar,
.infobox-subheader {
	vertical-align: top
}

.infobox td,
.infobox th,
.infobox-data,
.infobox-label {
	text-align: left
}

.infobox .infobox-above,
.infobox .infobox-title,
.infobox caption {
	font-size: 125%;
	font-weight: 700;
	text-align: center
}

.infobox caption,
.infobox-title {
	padding: .2em
}

.infobox .infobox-below,
.infobox .infobox-full-data,
.infobox .infobox-header,
.infobox .infobox-image,
.infobox .infobox-subheader {
	text-align: center
}

.infobox .infobox-navbar {
	text-align: right
}

.mw-default-size {
	background-color: #21212600 !important;
	border-color: #000 !important
}

.mw-default-size img {
	border-color: #000 !important
}

.mw-default-size figcaption {
	background-color: #21212600 !important;
	border-color: #000 !important
}

.mw-halign-right {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

.mw-halign-right img {
	border-color: #000 !important
}

.mw-halign-right figcaption {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

.mw-halign-left {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

.mw-halign-left img {
	border-color: #000 !important
}

.mw-halign-left figcaption {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

.mw-halign-center {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

.mw-halign-center img {
	border-color: #000 !important
}

.mw-halign-center figcaption {
	background-color: #27272E00 !important;
	border-color: #000 !important
}

th.navbox-group {
	white-space: nowrap;
	text-align: right
}

.mw-parser-output .mw-collapsible-toggle {
	font-weight: 400;
	text-align: right
}

td.mbox-image {
	border: none;
	padding: 2px 0 2px .9em;
	text-align: center
}

td.mbox-imageright {
	border: none;
	padding: 2px .9em 2px 0;
	text-align: center
}

#p-namespaces {
	float: left;
	width: 100%
}

p {
	margin-bottom: 1.5em
}

.infobox-table {
	z-index: 3 !important;
	width: 400px;
	max-width: 100%;
	margin-bottom: 1rem;
	padding-bottom: 20px !important;
	background: #1c272f;
	border-radius: 8px;
	border-spacing: 0;
	font-size: .875rem;
	text-align: left
}

.infobox-table tr:not(#infobox-table-img-bg) {
	display: flex;
	margin-top: 10px
}

.infobox-table td,
.infobox-table th {
	padding: 0 15px !important
}

.infobox-table th,
th.infobox-table-name {
	color: #e8f3fc
}

.infobox-table th {
	padding-top: 15px !important;
	border-top: 1px solid rgba(255, 255, 255, .05);
	font-size: 1rem;
	text-align: left !important
}

th.infobox-table-name {
	padding-top: 0 !important;
	border: 0 !important;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 1.4rem !important;
	line-height: 1.4
}

.infobox-table-img img {
	max-width: 100%;
	height: auto !important
}

.infobox-table-img img[src$='.svg'] {
	background: #eaecf0
}

.infobox-table .image:hover img {
	transform: scale(1.1)
}

.infobox-button {
	display: block;
	width: 100%
}

.infobox-button>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

@media only screen and (max-width:720px) {
	.infobox-table {
		margin-right: auto;
		margin-left: auto
	}
}