edsy.css

/*
EDSY was created using assets and imagery from Elite Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes.
It is not endorsed by nor reflects the views or opinions of Frontier Developments and no employee of Frontier Developments was involved in the making of it.

Except where noted otherwise, all design, markup and script code for EDSY is copyright (c) 2015-2024 taleden
and is provided under a Creative Commons Attribution-NonCommercial 4.0 International License (http://creativecommons.org/licenses/by-nc/4.0/).

The Elite Dangerous game logic and data in this file remains the property of Frontier Developments plc, and is used here as authorized by
Frontier Customer Services (https://forums.frontier.co.uk/threads/elite-dangerous-media-usage-rules.510879/).
*/

:root {
	--edsy-versions-css: v-419039901-423009901-423009901-423009901; /* HTML,CSS,DB,JS */
	--edsy-lastmodified-css: d-20251202;
	
	--colorblack: black;
	--colorwhite: white;
	--colorgrey5: #d9d9d9; /* hsl(0,0%,85%); */
	--colorgrey4: #b3b3b3; /* hsl(0,0%,70%); */
	--colorgrey3: #808080; /* hsl(0,0%,50%); */
	--colorgrey2: #4d4d4d; /* hsl(0,0%,30%); */
	--colorgrey1: #262626; /* hsl(0,0%,15%); */
	--colororange5: #ff8f33; /* hsl(27,100%,60%); */
	--colororange4: #f56e00; /* hsl(27,100%,48%); */
	--colororange3: #b85300; /* hsl(27,100%,36%); */
	--colororange2: #552a07; /* hsl(27, 85%,18%); */
	--colororange1: #321d0b; /* hsl(27, 65%,12%); */
	--colorred5: #ff3333; /* hsl(0,100%,60%); */
	--colorred4: #f50000; /* hsl(0,100%,48%); */
	--colorred3: #b80000; /* hsl(0,100%,36%); */
	--colorred2: #740606; /* hsl(0, 90%,24%); */
	--colorred1: #430a0a; /* hsl(0, 75%,15%); */
	--colorblue5: #33c5ff; /* hsl(197,100%,60%); */
	--colorblue4: #00aff5; /* hsl(197,100%,48%); */
	--colorblue3: #0084b8; /* hsl(197,100%,36%); */
	--colorblue2: #065574; /* hsl(197, 90%,24%); */
	--colorblue1: #0b3d50; /* hsl(197, 75%,18%); */
	--colorgreen5: #47eb94; /* hsl(148, 80%,60%); */
	--colorgreen4: #0bda6c; /* hsl(148, 90%,45%); */
	--colorgreen3: #009947; /* hsl(148,100%,30%); */
	--colorgreen2: #007a39; /* hsl(148,100%,24%); */
	--colorgreen1: #005c2b; /* hsl(148,100%,18%); */
	--coloryellow5: #ffc233; /* hsl(42,100%,60%); */
	--coloryellow4: #f5ab00; /* hsl(42,100%,48%); */
	--coloryellow3: #b88100; /* hsl(42,100%,36%); */
	--coloryellow2: #5c4000; /* hsl(42,100%,18%); */
	--coloryellow1: #3d2b00; /* hsl(42,100%,12%); */
	
	--fontcaps: 1rem 'EuroCaps', 'Verdana', 'Geneva', sans-serif;
	--fonttext: 0.875rem 'Sintony', 'Helvetica', 'Arial', sans-serif;
	--fontfixed: 0.875rem 'Telegrama', 'Courier New', 'Courier', monospace;
	
	--textempty: '(empty)';
}

@font-face {
	font-family: 'EuroCaps';
	src: url('EuroCaps.woff2') format('woff2'), url('EuroCaps.woff') format('woff'), url('EuroCaps.ttf') format('truetype');
}
@font-face {
	font-family: 'Sintony';
	src: local('Sintony'), url('Sintony.woff2') format('woff2'), url('Sintony.woff') format('woff'), url('Sintony.ttf') format('truetype');
}
@font-face {
	font-family: 'Telegrama';
	src: local('Telegrama'), url('Telegrama.woff2') format('woff2'), url('Telegrama.woff') format('woff'), url('Telegrama.ttf') format('truetype');
}


/*
* BASIC TAGS
*/


*,
*::before,
*::after {
	box-sizing: border-box;
}

HTML,
BODY {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: var(--colorgrey1);
	color: var(--colorwhite);
	font: var(--fontcaps);
	font-size: 100%;
}

DIV::-webkit-scrollbar,
DIV::-webkit-scrollbar-corner {
	width: 0.75rem;
	height: 0.75rem;
	background-color: var(--colororange1);
}
DIV::-webkit-scrollbar-thumb {
	background-color: var(--colororange5);
}
DIV {
	scrollbar-color: var(--colororange5) var(--colororange1);
}

HEADER {
	margin: 0;
}

P {
	margin: 0;
}

ABBR {
	display: inline-block;
	margin: 0.125rem 0;
	border-bottom: 0.0625rem dotted var(--colorwhite);
	cursor: help;
	line-height: 0.8571;
	text-decoration: none;
}
ABBR.attribute {
	color: var(--colororange5);
	border-color: var(--colororange5);
	font: var(--fonttext);
	line-height: 0.8571;
}
A.button ABBR {
	margin: 0;
	border: none;
}

SMALL {
	font-size: 75%;
	color: var(--colorgrey4);
}
.modgood SMALL,
.modbad SMALL,
.togglebutton SMALL {
	color: inherit;
}

A:link,
A:visited {
	color: var(--colorblue4);
	text-decoration: none;
}
A:hover {
	color: var(--colorblue5);
	text-decoration: underline;
}
A.button {
	display: inline-block;
	margin: 0.25rem;
	padding: 0.125rem 0.5rem;
	background-color: var(--colororange1);
	color: var(--colororange5);
	font: var(--fontcaps);
}
A.button:hover {
	color: var(--colororange5);
	text-decoration: none;
}
A.button:active {
	background-color: var(--colorwhite);
	color: var(--colorblack);
}
A.button:not(:link):not(:visited) {
	background-color: var(--colorgrey1);
	color: var(--colorgrey4);
	cursor: default;
}
A.button.text {
	font: var(--fonttext);
}

DL {
	margin: 0;
	padding: 0;
}
DD {
	margin-left: 2em;
}

UL {
	margin: 0;
	padding: 0;
}
LI {
	margin: 0 1rem;
	padding: 0;
}

TABLE {
	margin: 0;
	border: none;
	border-collapse: collapse;
}

TH,
TD {
	padding: 0;
	border: none;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

FORM {
	margin: 0;
	padding: 0;
}

BUTTON {
	margin: 0;
	border: 0.0625rem solid transparent;
	padding: 0;
	background-color: var(--colororange1);
	color: var(--colororange5);
	font: var(--fontcaps);
	cursor: pointer;
}
BUTTON:active {
	border-color: transparent;
	background-color: var(--colorwhite) !important;
	color: var(--colorblack) !important;
}
BUTTON:disabled {
	border-color: transparent;
	background-color: var(--colorgrey1) !important;
	color: var(--colorgrey4) !important;
	cursor: auto;
}

LABEL {
	margin: 0;
	padding: 0;
}

INPUT {
	margin: 0;
	border: none;
	padding: 0;
	font: var(--fontcaps);
}
INPUT[type=text] {
	border: 0.0625rem solid var(--colorwhite);
	padding: 0.0625rem 0.25rem;
	background-color: var(--colorgrey2);
	color: var(--colorwhite);
	font: var(--fonttext);
}
INPUT:disabled {
	border-color: transparent;
	background-color: transparent;
	color: inherit;
}

SELECT {
	margin: 0;
	border: 0.0625rem solid var(--colorwhite);
	padding: 0;
	background-color: var(--colorgrey2);
	color: var(--colorwhite);
	cursor: pointer;
	font: var(--fonttext);
}
SELECT:disabled {
	border-color: transparent;
	background-color: transparent;
	color: inherit;
	cursor: auto;
}

OPTGROUP {
	background-color: var(--colorgrey4);
	color: var(--colorblack);
}

OPTION {
	background-color: var(--colorgrey5);
	color: var(--colorblack);
	margin: 0;
	border: 0.0625rem solid transparent;
	padding: 0 0.25rem;
}
OPTION:disabled {
	color: var(--colorgrey2);
	font-style: italic;
}

TEXTAREA {
	margin: 0;
	border: 0.0625rem solid var(--colorwhite);
	padding: 0 0.25rem;
	background-color: var(--colorgrey2);
	color: var(--colorwhite);
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 87.5%;
	white-space: pre;
	overflow: auto;
}
TEXTAREA::-webkit-scrollbar,
TEXTAREA::-webkit-scrollbar-corner {
	width: 0.75rem;
	height: 0.75rem;
	background-color: var(--colorgrey1);
}
TEXTAREA::-webkit-scrollbar-thumb {
	background-color: var(--colorwhite);
}


/*
* BASIC CLASSES
*/


.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.vam { vertical-align: middle; }

.dropok {
	border-color: var(--colorblue5) !important;
}

.modgood {
	color: var(--colorblue5);
}
.modbad {
	color: var(--colorred5);
}
.modoverride {
	background-color: var(--colorgrey1);
}

.iconsvg {
	display: inline-block;
	vertical-align: middle;
	box-sizing: content-box;
	margin: 0;
	border: 0;
	padding: 0;
	width: 13px;
	height: 13px;
	line-height: 13px;
}
.iconsvg.blueprint {
	color: var(--colorblue5);
}
.iconsvg.community {
	color: var(--colorgreen5);
}
.iconsvg.engineer {
	color: var(--colororange5);
}
.iconsvg.guardian {
	color: var(--colorblue5);
}
.iconsvg.powerplay {
	color: var(--coloryellow4);
}
.iconsvg.techbroker {
	color: var(--colorblue4);
}
.iconsvg.warning {
	color: var(--colorred3);
}

.togglebutton {
	display: inline-block;
	white-space: nowrap;
	cursor: pointer;
}

.togglebutton INPUT,
INPUT.toggleinput {
	position: absolute;
	margin: -1px;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.togglebutton INPUT + DIV {
	white-space: normal;
}
.togglebutton INPUT:disabled + DIV {
	cursor: default;
}

.togglebutton INPUT + DIV.togglebox {
	border: 1px solid var(--colororange3);
	background-color: var(--colororange1);
	color: var(--colororange4);
	padding: 0 0.2em;
	text-align: center;
}
.togglebutton INPUT:checked + DIV.togglebox {
	border-color: var(--colororange5);
	background-color: var(--colororange5);
	color: var(--colorblack);
}
.togglebutton INPUT:active + DIV.togglebox {
	border-color: var(--colorwhite);
	background-color: var(--colorwhite);
	color: var(--colorblack);
}
.togglebutton INPUT:disabled + DIV.togglebox {
	border-color: var(--colorgrey3);
	background-color: var(--colorgrey1);
	color: var(--colorgrey4);
}
.togglebutton INPUT:disabled:checked + DIV.togglebox {
	border-color: var(--colorgrey3);
	background-color: var(--colorgrey3);
	color: var(--colorblack);
}

.togglebutton ABBR {
	cursor: inherit;
}

.checkbox {
	display: inline-block;
	white-space: nowrap;
}

.checkbox INPUT {
	position: absolute;
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.checkbox INPUT + DIV {
	position: relative;
	padding-right: 15px;
	cursor: pointer;
}
.checkbox.left INPUT + DIV {
	padding-right: 0;
	padding-left: 15px;
}
.checkbox INPUT + DIV::before {
	display: inline;
	content: '\200B';
}
.checkbox INPUT:disabled + DIV {
	cursor: default;
}

.checkbox INPUT + DIV .check,
.checkbox INPUT + DIV .radio {
	display: inline-block;
	position: absolute;
	right: 4px;
	bottom: 6px;
	width: 7px;
	height: 7px;
}
.checkbox.left INPUT + DIV .check,
.checkbox.left INPUT + DIV .radio {
	right: auto;
	left: 4px;
}
.checkbox INPUT + DIV .radio {
	transform-origin: 50% 50%;
	transform: rotate(45deg);
}
.checkbox INPUT:checked + DIV .check,
.checkbox INPUT:checked + DIV .radio {
	background-color: var(--colororange5);
}
.checkbox INPUT:checked:disabled + DIV .check,
.checkbox INPUT:checked:disabled + DIV .radio {
	background-color: var(--colorgrey3) !important;
}

.checkbox INPUT + DIV .check::before,
.checkbox INPUT + DIV .check::after {
	content: '';
	display: block;
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 4px;
	border: 2px solid var(--colororange3);
}
.checkbox INPUT + DIV .check::before {
	left: -4px;
	border-right: none;
}
.checkbox INPUT + DIV .check::after {
	right: -4px;
	border-left: none;
}

.checkbox INPUT + DIV .radio::before,
.checkbox INPUT + DIV .radio::after {
	content: '';
	display: block;
	position: absolute;
	height: 9px;
	width: 9px;
	border: 0 solid var(--colororange3);
}
.checkbox INPUT + DIV .radio::before {
	top: 2px;
	left: -4px;
	border-width: 0 0 2px 2px;
}
.checkbox INPUT + DIV .radio::after {
	bottom: 2px;
	right: -4px;
	border-width: 2px 2px 0 0;
}

.checkbox INPUT:checked + DIV .check::before,
.checkbox INPUT:checked + DIV .check::after,
.checkbox INPUT:checked + DIV .radio::before,
.checkbox INPUT:checked + DIV .radio::after {
	border-color: var(--colororange5);
}
.checkbox INPUT:active + DIV .check::before,
.checkbox INPUT:active + DIV .check::after,
.checkbox INPUT:active + DIV .radio::before,
.checkbox INPUT:active + DIV .radio::after {
	border-color: var(--colorwhite) !important;
}
.checkbox INPUT:disabled + DIV .check::before,
.checkbox INPUT:disabled + DIV .check::after,
.checkbox INPUT:disabled + DIV .radio::before,
.checkbox INPUT:disabled + DIV .radio::after {
	border-color: var(--colorgrey3) !important;
}


.scroller {
	position: relative;
	overflow: auto;
}


TABLE.striped {
	border-collapse: separate;
	border-spacing: 0;
	border: 0.5em solid var(--colorblack);
}

TABLE.striped TH,
TABLE.striped TD {
	border: 0 solid var(--colororange3);
	padding: 1px 0.25em;
}

TABLE.striped THEAD TH,
TABLE.striped THEAD TD {
	border-width: 2px 0 2px 2px;
	color: var(--colororange5);
	font-weight: bold;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}
TABLE.striped THEAD TD {
	border-width: 0 0 2px 0;
}
TABLE.striped THEAD TR.colgroup TH {
	border-width: 0;
}
TABLE.striped THEAD TR.colgroup TH.colgroup {
	border-top-width: 2px;
	border-left-width: 2px;
	text-align: center;
}
TABLE.striped THEAD TR.colgroup TH.colgroup + TH:not(.colgroup),
TABLE.striped THEAD TH + TD {
	border-left-width: 2px;
}
TABLE.striped THEAD TR TH:last-child {
	border-right-width: 2px;
}
TABLE.striped TBODY TD.colgroup.first,
TABLE.striped TBODY TD.colgroup + TD:not(.colgroup) {
	border-left-width: 2px;
}

TABLE.striped THEAD TH ABBR {
	border-color: var(--colororange5);
}

TABLE.striped TH.stickytop {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	border-bottom-width: 2px;
	background-color: var(--colorblack);
}
TABLE.striped TD.stickytop {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--colorblack);
}
TABLE.striped TD.stickyleft {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 1;
	border-right-width: 2px;
	background-color: var(--colorblack);
}
TABLE.striped TH.stickytopleft {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 2;
	border: 2px solid var(--colororange3);
	border-right-width: 2px;
	border-bottom-width: 2px;
	background-color: var(--colorblack);
}
TABLE.striped TH.stickytopleft + TH {
	border-left-width: 0;
}

TABLE.striped TBODY TR:nth-child(even) TD {
	background-color: var(--colororange1);
}
TABLE.striped TBODY TR:hover TD {
	background-color: var(--colororange2);
}

TABLE.striped TBODY TD.text {
	font: var(--fonttext);
}

TABLE.striped TBODY + TBODY TR:first-of-type TH,
TABLE.striped TBODY + TBODY TR:first-of-type TD,
TABLE.striped TFOOT TR:first-of-type TH,
TABLE.striped TFOOT TR:first-of-type TD {
	border-top-width: 2px;
}

TABLE.striped SMALL:not(.semantic) {
	display: none;
}

TABLE.striped BUTTON {
	background-color: transparent;
}
TABLE.striped A.label,
TABLE.striped BUTTON.label {
	display: block;
	width: 100%;
	max-width: 100%;
	font: var(--fonttext);
	color: var(--coloryellow5);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

TABLE.striped BUTTON .iconsvg {
	margin: 2px;
}

TABLE.striped .togglebutton INPUT + DIV .iconsvg {
	color: var(--colororange3);
}
TABLE.striped .togglebutton INPUT:checked + DIV .iconsvg {
	color: var(--colororange5);
}
TABLE.striped .togglebutton INPUT:active + DIV .iconsvg {
	color: var(--colorwhite);
}


.popout {
	position: relative;
}

.popout > .toggleinput + LABEL {
	display: inline-block;
	border: 1px solid var(--colororange3);
	background-color: var(--colororange1);
	padding: 0 0.2em;
	color: var(--colororange4);
	cursor: pointer;
}
.popout > .toggleinput:checked + LABEL {
	border-color: var(--colororange5);
	background-color: var(--colororange5);
	color: var(--colorblack);
}
.popout > .toggleinput:active + LABEL {
	border-color: var(--colorwhite);
	background-color: var(--colorwhite);
	color: var(--colorblack);
}
.popout > .toggleinput:disabled + LABEL {
	border-color: var(--colorgrey1);
	background-color: var(--colorgrey1);
	color: var(--colorgrey4);
	cursor: auto;
}

.popout > .toggleinput ~ DIV {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	right: 0;
	box-shadow: 0 0 2em 1em rgba(0, 0, 0, 0.75);
	clip-path: inset(0 -2em -2em -2em);
	border: 2px solid var(--colororange5);
	padding: 0.25em 0.5em;
	background-color: var(--colorblack);
	z-index: 2;
}
.popout > .toggleinput:checked ~ DIV {
	display: flex;
}


/*
* MAIN BLOCK LAYOUT
*/


#svg_defs {
	display: none;
	position: absolute;
	width: 0;
	height: 0;
}

#page {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	font: var(--fontcaps);
}

#page_header {
	flex: 0 0 auto;
}

#page_body {
	flex: 1 0 10px;
	min-width: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0.25em;
}


#page_body.shipyard #page_body_loading,
#page_body.outfitting #page_body_loading,
#page_body.analysis #page_body_loading,
#page_body.options #page_body_loading,
#page_body:not(.shipyard) #page_body_shipyard,
#page_body:not(.outfitting) #page_body_outfitting,
#page_body:not(.analysis) #page_body_analysis,
#page_body:not(.options) #page_body_options {
	display: none;
}


#page_body_shipyard {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
}

#shipyard_tabs {
	flex: 0 0 auto;
}

#shipyard_container {
	flex: 1 0 10px;
	width: 100%;
	min-width: 0;
	border: 2px solid var(--colororange5);
	background-color: var(--colorblack);
}


#page_body_outfitting {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

#outfitting_top {
	flex: 1 0 10px;
	min-width: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	overflow-x: auto;
}

#outfitting_bottom {
	flex: 0 0 auto;
	display: block;
	min-width: 0;
}

#outfitting_modules {
	flex: 0 1 26em;
	width: 25%;
	min-width: 18em;
	max-width: 26em;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: arrow;
}

#outfitting_fit {
	flex: 0 2 70em;
	width: 50%;
	min-width: 18em;
	max-width: 70em;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: arrow;
}

#outfitting_details {
	flex: 0 1 26em;
	width: 25%;
	min-width: 18em;
	max-width: 26em;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
}


#page_body_analysis {
	flex: 1 0 10px;
	min-width: 0;
	max-width: 70em;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
}

#analysis_tabs {
	flex: 0 0 auto;
}

#analysis_container {
	flex: 1 0 10px;
	width: 100%;
	min-width: 0;
	border: 2px solid var(--colororange5);
	background-color: var(--colorblack);
}


#page_body_options {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 60em;
	display: flex;
	flex-direction: column;
	margin: 0.25em;
}

#options_container {
	flex: 1 0 10px;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--colororange5);
	padding: 0.5em;
	background-color: var(--colorblack);
	overflow: auto;
}


#page_body_loading {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 33%;
}

#page_body_loading IMG {
	flex: 0 0 auto;
	width: auto;
	height: auto;
}


/*
* HEADER BLOCK
*/


#page_header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: var(--colorred2);
}

#header_title {
	flex: 1 0 10px;
	padding: 0 0.5rem;
	font: var(--fonttext);
	font-size: 1.125rem;
	font-weight: bold;
}

#header_title BUTTON {
	margin-left: 0.5rem;
	padding: 2px;
	background-color: transparent;
	color: var(--colorwhite);
	font-size: 1rem;
	line-height: 1rem;
	vertical-align: baseline;
}
#window_maximize,
#window_minimize {
	display: none;
}

#header_title A {
	color: inherit;
	text-decoration: none;
}

#page_tabs {
	flex: 0 0 auto;
	align-self: flex-end;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}

#page_tabs .togglebutton INPUT + DIV {
	padding: 0 0.5em;
}
#page_tabs .togglebutton INPUT:checked + DIV {
	background-color: var(--colorgrey1);
	color: var(--colorred5);
}
#page_tabs .togglebutton INPUT:active + DIV {
	background-color: var(--colorwhite);
	color: var(--colorblack);
}

#page_tabs .togglebutton INPUT + DIV SPAN {
	margin-left: 0.25em;
}

#header_version {
	flex: 1 0 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	justify-content: flex-end;
	align-items: center;
	align-content: space-between;
	padding: 0 0.5em;
	font: var(--fonttext);
	font-size: 0.75rem;
}

#query_glow {
	display: none;
	position: absolute;
	z-index: 99;
	opacity: 0.75;
	box-shadow: 0 0 1rem 1rem var(--coloryellow5);
}

#query_start {
	min-width: 1.5em;
	min-height: 1.5em;
	border-bottom: none;
}

#query_tool {
	display: block;
	position: static;
	z-index: 99;
	top: 0;
	left: 0;
	cursor: move;
	border-radius: 50%;
	background-color: var(--coloryellow5);
	color: var(--colorblack);
	padding: 0.125rem;
	text-decoration: none;
}

#query_info {
	display: none;
	position: absolute;
	border: 2px solid var(--colorblack);
	background-color: var(--colorgrey5);
	color: var(--colorblack);
	font-size: 125%;
	padding: 0.5rem;
	min-width: 15em;
	max-width: 40em;
}

#version_label {
	margin: 0 0.5em;
	border: none;
}


/*
* SHIPYARD BLOCK
*/


#shipyard_tabs {
	display: flex;
	flex-direction: row;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: arrow;
}

#shipyard_tabs LABEL {
	flex: 0 0 auto;
	margin-left: 0.2em;
}
#shipyard_tabs LABEL:first-child {
	margin-left: 0;
}

#shipyard_tabs SPAN {
	flex: 1 0 0px;
}

#shipyard_tabs .togglebutton INPUT + DIV.togglebox {
	border-bottom: none;
	padding: 0 0.5em;
}

#page_body_shipyard:not(.ships) #shipyard_ships_container,
#page_body_shipyard:not(.storedbuilds) #shipyard_storedbuilds_container {
	display: none;
}

#shipyard_container {
	overflow: auto;
	overflow-y: scroll;
	white-space: nowrap;
}

#shipyard_container TABLE.striped THEAD TH {
	padding: 0;
}

#shipyard_container TABLE.striped THEAD TH SPAN {
	padding: 1px 0.25em;
}

#shipyard_container TABLE.striped THEAD TH .togglebutton {
	display: block;
}

#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT + DIV {
	display: flex;
	align-items: center;
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:active + DIV {
	background-color: var(--colorwhite);
	color: var(--colorblack);
}

#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked + DIV::after {
	content: '';
	display: block;
	float: right;
	margin: 0.125em 0.25em;
	border: 0 solid transparent;
	border-width: 6px 3px;
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked.asc + DIV::after {
	border-bottom-color: var(--colororange5);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked.desc + DIV::after {
	border-top-color: var(--colororange5);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked.key1 + DIV::after {
	border-left-color: var(--colororange5);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked.key2 + DIV::after {
	border-right-color: var(--colororange5);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked:active.asc + DIV::after {
	border-bottom-color: var(--colorblack);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked:active.desc + DIV::after {
	border-top-color: var(--colorblack);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked:active.key1 + DIV::after {
	border-left-color: var(--colorblack);
}
#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT:checked:active.key2 + DIV::after {
	border-right-color: var(--colorblack);
}

#shipyard_container TABLE.striped THEAD TH .togglebutton INPUT + DIV SPAN {
	flex: 1 0 auto;
}

#shipyard_container TABLE.striped TBODY TD:first-child {
	max-width: 15em;
}


/*
* OUTFITTING MODULES BLOCK
*/


#outfitting_modules_tabs {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	flex-direction: row;
}

#outfitting_modules_tabs LABEL {
	flex: 0 0 auto;
	margin-left: 0.2em;
}
#outfitting_modules_tabs LABEL:first-child {
	margin-left: 0;
}

#outfitting_modules_tabs SPAN {
	flex: 1 0 0px;
}

#outfitting_modules_tabs .togglebutton INPUT + DIV.togglebox {
	border-bottom: none;
	font-size: 0.875rem;
}


#outfitting_modules_container {
	flex: 1 0 10px;
	min-width: 0;
	display: flex;
	flex-direction: row;
	border: 2px solid var(--colororange5);
	background-color: var(--colorblack);
	overflow-y: auto;
}
#outfitting_modules_container.dragready {
	border-color: var(--colorblue5);
}


#outfitting_modules_buttons {
	flex: 0 0 auto;
	min-width: 0;
	display: none;
	flex-direction: row;
	margin: 0 -0.25em;
}

#outfitting_modules_buttons BUTTON {
	flex: 1 0 10px;
	margin: 0.25em 0.25em 0 0.25em;
}


#outfitting_modules_picker {
	flex: 1 1 auto;
	width: 10px;
	position: relative;
}

#outfitting_modules .group > HEADER {
	background-color: var(--colorgrey4);
	color: var(--colorblack);
	text-align: center;
	font-weight: bold;
}

#outfitting_modules .mtype {
	margin-bottom: 0.5em;
}

#outfitting_modules .mtype > HEADER {
	color: var(--colorwhite);
	text-align: center;
}

#outfitting_modules.STORED .group:not(.stored),
#outfitting_modules.STORED .mtype:not(.stored),
#outfitting_modules.STORED .row:not(.stored):not(.empty),
#outfitting_modules.hardpoint .group:not(.hardpoint),
#outfitting_modules.hardpoint .group > HEADER,
#outfitting_modules.hardpoint .row.stored,
#outfitting_modules.utility .group:not(.utility),
#outfitting_modules.utility .group > HEADER,
#outfitting_modules.utility .row.stored,
#outfitting_modules.component .group:not(.component):not(.internal),
#outfitting_modules.component .group > HEADER,
#outfitting_modules.component .mtype.internal:not(.cft),
#outfitting_modules.component .row.stored,
#outfitting_modules.component .row.empty,
#outfitting_modules.military .group:not(.internal),
#outfitting_modules.military .group > HEADER,
#outfitting_modules.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb),
#outfitting_modules.military .row.stored,
#outfitting_modules.internal .group:not(.internal),
#outfitting_modules.internal .group > HEADER,
#outfitting_modules.internal .row.stored,
#outfitting_modules.SLOT #outfitting_modules_picker.hardpoint .group > HEADER,
#outfitting_modules.SLOT #outfitting_modules_picker.utility .group > HEADER,
#outfitting_modules.SLOT #outfitting_modules_picker.component .group > HEADER,
#outfitting_modules.SLOT #outfitting_modules_picker.military .group > HEADER,
#outfitting_modules.SLOT #outfitting_modules_picker.internal .group > HEADER {
	display: none;
}

#outfitting_modules.SLOT #outfitting_modules_picker.hardpoint .group:not(.hardpoint),
#outfitting_modules.SLOT #outfitting_modules_picker.utility .group:not(.utility),
#outfitting_modules.SLOT #outfitting_modules_picker.component .group:not(.component):not(.internal),
#outfitting_modules.SLOT #outfitting_modules_picker.component .row.empty,
#outfitting_modules.SLOT #outfitting_modules_picker.component_BH .mtype:not(.cbh),
#outfitting_modules.SLOT #outfitting_modules_picker.component_PP .mtype:not(.cpp),
#outfitting_modules.SLOT #outfitting_modules_picker.component_TH .mtype:not(.ct),
#outfitting_modules.SLOT #outfitting_modules_picker.component_FD .mtype:not(.cfsd):not(.cfsdo),
#outfitting_modules.SLOT #outfitting_modules_picker.component_LS .mtype:not(.cls),
#outfitting_modules.SLOT #outfitting_modules_picker.component_PD .mtype:not(.cpd),
#outfitting_modules.SLOT #outfitting_modules_picker.component_SS .mtype:not(.cs),
#outfitting_modules.SLOT #outfitting_modules_picker.component_FT .mtype:not(.cft),
#outfitting_modules.SLOT #outfitting_modules_picker.military .group:not(.internal),
#outfitting_modules.SLOT #outfitting_modules_picker.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb),
#outfitting_modules.SLOT #outfitting_modules_picker.internal .group:not(.internal) {
	display: none;
}

#outfitting_modules_picker .togglebutton INPUT.hidden + DIV {
	display: none;
}

BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size1 .sized:not(.fitsize1),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size2 .sized:not(.fitsize2),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size3 .sized:not(.fitsize3),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size4 .sized:not(.fitsize4),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size5 .sized:not(.fitsize5),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size6 .sized:not(.fitsize6),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size7 .sized:not(.fitsize7),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size8 .sized:not(.fitsize8),
BODY:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.reserved .mtype:not(.reserved) {
	display: none;
}

BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size2 .row:not(.empty):not(.size2),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size3 .row:not(.empty):not(.size3),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size4 .row:not(.empty):not(.size4),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size5 .row:not(.empty):not(.size5),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size6 .row:not(.empty):not(.size6),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size7 .row:not(.empty):not(.size7),
BODY.onlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size8 .row:not(.empty):not(.size8),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size2:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size2),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size3:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size3),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size4:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size4),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size5:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size5),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size6:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size6),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size7:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size7),
BODY.mostlybest:not(.experimental) #outfitting_modules.SLOT #outfitting_modules_picker.size8:not(.component_PP):not(.component_TH):not(.component_PD):not(.component_FT) .row:not(.empty):not(.size8) {
	display: none;
}

BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size2 .row:not(.empty):not(.size8):not(.size7):not(.size6):not(.size5):not(.size4):not(.size3):not(.size2),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size3 .row:not(.empty):not(.size8):not(.size7):not(.size6):not(.size5):not(.size4):not(.size3),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size4 .row:not(.empty):not(.size8):not(.size7):not(.size6):not(.size5):not(.size4),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size5 .row:not(.empty):not(.size8):not(.size7):not(.size6):not(.size5),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size6 .row:not(.empty):not(.size8):not(.size7):not(.size6),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size7 .row:not(.empty):not(.size8):not(.size7),
BODY.onlybest.experimental #outfitting_modules.SLOT #outfitting_modules_picker.size8 .row:not(.empty):not(.size8) {
	display: none;
}

#outfitting_modules_picker .row {
	margin: 0 0.5em;
	display: flex;
	flex-direction: row;
}
#outfitting_modules_picker .row.stored {
	font: var(--fonttext);
}
#outfitting_modules_picker .row.empty {
	margin: 0.5em;
}

#outfitting_modules_picker .togglebutton {
	flex: 1 0 10px;
	max-width: 100%;
}

#outfitting_modules_picker .togglebutton INPUT + DIV {
	position: relative;
	margin: 1px;
	border: 1px solid transparent;
	padding: 0 0.2em;
	background-color: var(--colororange1);
	color: var(--colororange5);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#outfitting_modules_picker .togglebutton.fullname INPUT + DIV {
	text-align: left;
}
#outfitting_modules_picker .row.stored:not(.builtin) .togglebutton INPUT + DIV {
	background-color: var(--coloryellow1);
	color: var(--coloryellow5);
}
#outfitting_modules_picker .togglebutton INPUT + DIV:empty::after {
	display: inline;
	content: var(--textempty);
}
#outfitting_modules_picker .togglebutton INPUT:checked + DIV {
	border-color: var(--colororange5);
}
#outfitting_modules_picker .row.stored:not(.builtin) .togglebutton INPUT:checked + DIV {
	border-color: var(--coloryellow5);
}
#page_body_outfitting.focusmodule #outfitting_modules_picker .togglebutton INPUT:checked + DIV {
	background-color: var(--colororange5);
	color: var(--colorblack);
}
#page_body_outfitting.focusmodule #outfitting_modules_picker .row.stored:not(.builtin) .togglebutton INPUT:checked + DIV {
	background-color: var(--coloryellow5);
}
#outfitting_modules_picker .togglebutton INPUT:active + DIV,
#outfitting_modules_picker .togglebutton.active INPUT + DIV {
	border-color: var(--colorwhite) !important;
	background-color: var(--colorwhite) !important;
	color: var(--colorblack) !important;
}

#outfitting_modules_picker .togglebutton INPUT + DIV .iconsvg.warning {
	display: none;
	position: absolute;
	right: 0;
	margin: 3px 0;
}
#outfitting_modules_picker .togglebutton.fullname INPUT + DIV .iconsvg.warning {
	float: right;
	position: relative;
	right: 0;
}
#outfitting_modules_picker .togglebutton INPUT + DIV .iconsvg.engineer {
	display: none;
	float: right;
	margin: 3px 0;
}
#outfitting_modules_picker .togglebutton INPUT.notenough + DIV .iconsvg.warning,
#outfitting_modules_picker .row.engineer .togglebutton INPUT + DIV .iconsvg.engineer {
	display: inline-block;
}
#outfitting_modules_picker .togglebutton INPUT:checked + DIV .iconsvg,
#outfitting_modules_picker .togglebutton INPUT:active + DIV .iconsvg,
#outfitting_modules_picker .togglebutton.active INPUT + DIV .iconsvg {
	color: inherit;
}

#outfitting_modules_picker .togglebutton INPUT.notallowed + DIV,
#outfitting_modules_picker.size1 .sized:not(.fitsize1) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size2 .sized:not(.fitsize2) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size3 .sized:not(.fitsize3) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size4 .sized:not(.fitsize4) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size5 .sized:not(.fitsize5) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size6 .sized:not(.fitsize6) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size7 .sized:not(.fitsize7) .togglebutton INPUT + DIV,
#outfitting_modules_picker.size8 .sized:not(.fitsize8) .togglebutton INPUT + DIV,
#outfitting_modules_picker.reserved .mtype:not(.reserved) .togglebutton INPUT + DIV {
	background-color: var(--colorred1);
	color: var(--colorred5);
}
#outfitting_modules_picker .togglebutton INPUT.notallowed:checked + DIV,
#outfitting_modules_picker.size1 .sized:not(.fitsize1) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size2 .sized:not(.fitsize2) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size3 .sized:not(.fitsize3) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size4 .sized:not(.fitsize4) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size5 .sized:not(.fitsize5) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size6 .sized:not(.fitsize6) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size7 .sized:not(.fitsize7) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.size8 .sized:not(.fitsize8) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.reserved .mtype:not(.reserved) .togglebutton INPUT:checked + DIV {
	border-color: var(--colorred5);
}
#page_body_outfitting.focusmodule #outfitting_modules_picker .togglebutton INPUT.notallowed:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size1 .sized:not(.fitsize1) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size2 .sized:not(.fitsize2) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size3 .sized:not(.fitsize3) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size4 .sized:not(.fitsize4) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size5 .sized:not(.fitsize5) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size6 .sized:not(.fitsize6) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size7 .sized:not(.fitsize7) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.size8 .sized:not(.fitsize8) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.reserved .mtype:not(.reserved) .togglebutton INPUT:checked + DIV {
	background-color: var(--colorred5);
	color: var(--colorblack);
}
#outfitting_modules_picker .togglebutton INPUT.notallowed + DIV .iconsvg,
#outfitting_modules_picker.size1 .sized:not(.fitsize1) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size2 .sized:not(.fitsize2) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size3 .sized:not(.fitsize3) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size4 .sized:not(.fitsize4) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size5 .sized:not(.fitsize5) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size6 .sized:not(.fitsize6) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size7 .sized:not(.fitsize7) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.size8 .sized:not(.fitsize8) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.reserved .mtype:not(.reserved) .togglebutton INPUT + DIV .iconsvg {
	color: inherit;
}

#outfitting_modules_picker.hardpoint .group:not(.hardpoint) .togglebutton INPUT + DIV,
#outfitting_modules_picker.utility .group:not(.utility) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component:not(.component_FT) .group:not(.component) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_BH .mtype:not(.cbh) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_PP .mtype:not(.cpp) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_TH .mtype:not(.ct) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_FD .mtype:not(.cfsd):not(.cfsdo) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_LS .mtype:not(.cls) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_PD .mtype:not(.cpd) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_SS .mtype:not(.cs) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_FT .group:not(.internal) .togglebutton INPUT + DIV,
#outfitting_modules_picker.component_FT .mtype:not(.cft) .togglebutton INPUT + DIV,
#outfitting_modules_picker.military .group:not(.internal) .togglebutton INPUT + DIV,
#outfitting_modules_picker.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb) .togglebutton INPUT + DIV,
#outfitting_modules_picker.internal .group:not(.internal) .togglebutton INPUT + DIV {
	background-color: var(--colorgrey1);
	color: var(--colorgrey5);
}
#outfitting_modules_picker.hardpoint .group:not(.hardpoint) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.utility .group:not(.utility) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component:not(.component_FT) .group:not(.component) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_BH .mtype:not(.cbh) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_PP .mtype:not(.cpp) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_TH .mtype:not(.ct) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_FD .mtype:not(.cfsd):not(.cfsdo) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_LS .mtype:not(.cls) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_PD .mtype:not(.cpd) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_SS .mtype:not(.cs) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_FT .group:not(.internal) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.component_FT .mtype:not(.cft) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.military .group:not(.internal) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb) .togglebutton INPUT:checked + DIV,
#outfitting_modules_picker.internal .group:not(.internal) .togglebutton INPUT:checked + DIV {
	border-color: var(--colorgrey5);
}
#page_body_outfitting.focusmodule #outfitting_modules_picker.hardpoint .group:not(.hardpoint) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.utility .group:not(.utility) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component:not(.component_FT) .group:not(.component) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_BH .mtype:not(.cbh) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_PP .mtype:not(.cpp) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_TH .mtype:not(.ct) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_FD .mtype:not(.cfsd):not(.cfsdo) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_LS .mtype:not(.cls) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_PD .mtype:not(.cpd) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_SS .mtype:not(.cs) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_FT .group:not(.internal) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.component_FT .mtype:not(.cft) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.military .group:not(.internal) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb) .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusmodule #outfitting_modules_picker.internal .group:not(.internal) .togglebutton INPUT:checked + DIV {
	background-color: var(--colorgrey5);
	color: var(--colorblack);
}
#outfitting_modules_picker.hardpoint .group:not(.hardpoint) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.utility .group:not(.utility) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component:not(.component_FT) .group:not(.component) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_BH .mtype:not(.cbh) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_PP .mtype:not(.cpp) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_TH .mtype:not(.ct) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_FD .mtype:not(.cfsd):not(.cfsdo) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_LS .mtype:not(.cls) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_PD .mtype:not(.cpd) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_SS .mtype:not(.cs) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_FT .group:not(.internal) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.component_FT .mtype:not(.cft) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.military .group:not(.internal) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.military .mtype:not(.ihrp):not(.isrp):not(.imahrp):not(.imrp):not(.iscb) .togglebutton INPUT + DIV .iconsvg,
#outfitting_modules_picker.internal .group:not(.internal) .togglebutton INPUT + DIV .iconsvg {
	color: inherit;
}


/*
* OUTFITTING FIT BLOCK
*/


#outfitting_fit_settings {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#outfitting_fit_settings > * {
	flex: 0 0 auto;
}
#outfitting_fit_settings > SPAN {
	flex: 1 0 auto;
	font: var(--fonttext);
	text-align: right;
}

#outfitting_stored_container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#outfitting_stored_container SELECT {
	flex: 0 1 auto;
	min-width: 5em;
	font-size: 0.75rem;
}

#outfitting_stored_container BUTTON {
	margin: 0 0.125rem;
	padding: 3px;
	line-height: 0;
	white-space: nowrap;
}

#outfitting_fit_settings .togglebutton INPUT + DIV.togglebox {
	margin: 0 0 2px 2px;
}

#outfitting_fit_settings .popout {
	align-self: stretch;
	font-size: 0.875rem;
	margin-left: 0.25rem;
}

#outfitting_fit_settings .popout > .toggleinput + LABEL {
	margin-bottom: 2px;
}

#outfitting_fit_settings .popout > .toggleinput ~ DIV {
	margin-top: -2px;
}

#outfitting_cols_popout > .toggleinput:checked ~ DIV {
	flex-direction: row;
}

.popout > .toggleinput ~ DIV BUTTON {
	flex: 1 0 auto;
	align-self: stretch;
	margin: 0.25rem;
	text-align: left;
	white-space: nowrap;
}


#outfitting_fit_slots {
	flex: 1 0 10px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--colororange5);
	background-color: var(--colorblack);
	overflow-y: auto;
}

#outfitting_fit_slots #outfitting_fit_header {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0 0.25em;
}

#outfitting_fit_slots #outfitting_fit_body {
	flex: 1 0 10px;
	min-width: 0;
	display: flex;
	flex-direction: row;
	margin: 0 0.25em;
}


#outfitting_fit_header DIV {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0.25em;
}
#outfitting_fit_header DIV.grow {
	flex: 1 0 auto;
}

#outfitting_fit_header SPAN {
	align-self: flex-end;
	margin-right: 0.25em;
	color: var(--colorgrey5);
	font: var(--fonttext);
	text-align: right;
}
#outfitting_fit_header SPAN#fit_header_export {
	margin-left: 0.25em;
}

#outfitting_fit_header INPUT {
	flex: 0 0 auto;
	width: 6em;
	font: var(--fontcaps);
}
#outfitting_fit_header DIV.grow INPUT {
	flex: 1 0 auto;
}

#outfitting_fit_header BUTTON {
	align-self: stretch;
	padding: 0.125rem;
	line-height: 0;
}


/* TODO move/rename powerdist controls to stats section */
.outfitting_stats_panel .nopad {
	padding: 0;
}
.outfitting_powerdist {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-end;
}

.outfitting_powerdist BUTTON {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: bottom;
	min-width: 23px;
	height: 100%;
	margin: 0 1px;
	border: none;
	padding: 0;
	background-color: transparent;
	font-size: 0.6875rem;
}
.outfitting_powerdist BUTTON:active,
.outfitting_powerdist BUTTON:disabled {
	background-color: transparent !important;
}

.outfitting_powerdist BUTTON DIV:first-child {
	height: 5px;
	line-height: 0;
}
.outfitting_powerdist BUTTON DIV:last-child {
	position: relative;
	padding: 1px 2px;
	color: var(--colororange5);
	text-align: center;
}
.outfitting_powerdist BUTTON:active DIV:last-child {
	background-color: var(--colororange5);
	color: var(--colorblack);
}
.outfitting_powerdist BUTTON:disabled DIV:last-child {
	background-color: transparent;
	color: var(--colorgrey4);
}

.outfitting_powerdist BUTTON#outfitting_fit_powerdist_rst DIV:last-child::before,
.outfitting_powerdist BUTTON#outfitting_fit_powerdist_rst DIV:last-child::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border: 1px solid var(--colororange5);
}
.outfitting_powerdist BUTTON#outfitting_fit_powerdist_rst DIV:last-child::before {
	top: 0;
	border-bottom: none;
}
.outfitting_powerdist BUTTON#outfitting_fit_powerdist_rst DIV:last-child::after {
	bottom: 0;
	border-top: none;
}

.outfitting_powerdist BUTTON SPAN {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 1px;
	border: 2px solid var(--colororange1);
	border-radius: 2px;
	background-color: var(--colororange1);
}
.outfitting_powerdist BUTTON SPAN:first-child {
	margin-left: 0;
}
.outfitting_powerdist BUTTON .crewpips SPAN {
	border-color: var(--colorblue1);
	background-color: var(--colorblue1);
}

.outfitting_powerdist BUTTON.dist1 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist3 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist5 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.dist7 SPAN:nth-child(4) {
	border-color: var(--colororange3);
	background-color: var(--colororange3);
}
.outfitting_powerdist BUTTON.dist2 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist3 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist4 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist5 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist6 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist7 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist8 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.dist4 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist5 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist6 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist7 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist8 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.dist6 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.dist7 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.dist8 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.dist8 SPAN:nth-child(4) {
	border-color: var(--colororange5);
	background-color: var(--colororange5);
}

.outfitting_powerdist BUTTON.crew1 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.crew2 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.crew3 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.crew4 SPAN:nth-child(1),
.outfitting_powerdist BUTTON.crew2 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.crew3 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.crew4 SPAN:nth-child(2),
.outfitting_powerdist BUTTON.crew4 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.crew4 SPAN:nth-child(3),
.outfitting_powerdist BUTTON.crew4 SPAN:nth-child(4) {
	border-color: var(--colorblue5);
	background-color: var(--colorblue5);
}

.outfitting_powerdist BUTTON:not(.max4):not(.max3):not(.max2):not(.max1) .crewpips SPAN:nth-child(1),
.outfitting_powerdist BUTTON:not(.max4):not(.max3):not(.max2) .crewpips SPAN:nth-child(2),
.outfitting_powerdist BUTTON:not(.max4):not(.max3) .crewpips SPAN:nth-child(3),
.outfitting_powerdist BUTTON:not(.max4) .crewpips SPAN:nth-child(4) {
	display: none;
}
/* */


#outfitting_fit_body .slots_body_column {
	flex: 1 0 10px;
	margin: 0.25em;
}

#outfitting_fit_slots TABLE {
	border-collapse: separate;
	border-spacing: 0;
}

#outfitting_fit_slots TH {
	width: 0%;
	padding: 0 0.25em;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}
#outfitting_fit_slots THEAD TH {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	border: 0 solid var(--colororange3);
	border-width: 2px 0;
	background-color: var(--colorblack);
	color: var(--colorgrey5);
	z-index: 1;
}
#outfitting_fit_slots TBODY TH {
	border-top: 0.5em solid var(--colorblack);
	background-color: var(--colorgrey4);
	color: var(--colorblack);
}

#outfitting_fit_slots THEAD ABBR {
	border-color: var(--colorgrey5);
}

#outfitting_fit_slots TD {
	width: 0%;
	border-top: 2px solid var(--colorblack);
	padding: 0 0.25em;
	text-align: right;
	white-space: nowrap;
}
#outfitting_fit_slots #outfitting_fit_ship_hull TR:first-child TD,
#outfitting_fit_slots #outfitting_fit_ship_hatch TR:first-child TD {
	border-top-width: 0.5em;
}

#outfitting_fit_slots .outfitting_fit_class {
	text-align: center;
}

#outfitting_fit_slots .outfitting_fit_module {
	width: 100%;
	min-width: 7em;
	text-align: left;
}

#outfitting_fit_slots TBODY TH.outfitting_fit_module DIV {
	position: relative;
}
#outfitting_fit_slots TBODY TH.outfitting_fit_module DIV::before {
	display: inline;
	content: '\200B';
}


#outfitting_fit_slots TBODY TH.outfitting_fit_module SPAN {
	position: absolute;
}

#outfitting_fit_slots TH.outfitting_fit_pwrdraw {
	text-align: center;
}

#outfitting_fit_slots .outfitting_fit_attrs {
	text-align: left;
}

#outfitting_fit_slots .outfitting_fit_mass SMALL:not(.semantic),
#outfitting_fit_slots .outfitting_fit_pwrdraw SMALL:not(.semantic),
#outfitting_fit_slots .outfitting_fit_price SMALL:not(.semantic) {
	display: none;
}

#outfitting_fit_slots TH.outfitting_fit_attrs LABEL.checkbox ABBR { /* TODO? only for 'sustained' toggle */
	border-color: var(--colorblack);
	margin: 0 0.25em;
}

#outfitting_fit_slots TH.outfitting_fit_attrs SELECT {
	font-size: 75%;
}

#outfitting_fit.nomass .outfitting_fit_mass,
#outfitting_fit.nopower SPAN.outfitting_fit_pwrdraw,
#outfitting_fit.noattrs .outfitting_fit_attrs,
#outfitting_fit.noprice .outfitting_fit_price {
	display: none;
}

#outfitting_fit_slots .togglebutton {
	display: block;
	position: relative;
}
#outfitting_fit_slots .togglebutton::after {
	display: block;
	content: '\200B';
	border: 1px solid transparent;
}

#outfitting_fit_slots .togglebutton .iconsvg.warning,
#outfitting_fit_slots .togglebutton .iconsvg.engineer {
	float: right;
	margin: 3px 0;
}
#outfitting_fit_slots .togglebutton .iconsvg.warning {
	display: none;
}
#outfitting_fit_slots .notenough .togglebutton .iconsvg.warning {
	display: inline-block;
}

#outfitting_fit_slots .togglebutton INPUT + DIV {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	padding: 0 0.2em;
	background-color: var(--colororange1);
	color: var(--colororange5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#outfitting_fit_slots .togglebutton INPUT + DIV SPAN:empty::after {
	display: inline;
	content: var(--textempty);
	color: var(--colororange3);
}

#outfitting_fit_slots .togglebutton INPUT:checked + DIV {
	border-color: var(--colororange5);
}
#page_body_outfitting.focusslot #outfitting_fit_slots .togglebutton INPUT:checked + DIV {
	background-color: var(--colororange5);
	color: var(--colorblack);
}

#outfitting_fit_slots .togglebutton INPUT:active + DIV,
#outfitting_fit_slots .togglebutton.active INPUT + DIV {
	border-color: var(--colorwhite) !important;
	background-color: var(--colorwhite) !important;
	color: var(--colorblack) !important;
}

#outfitting_fit_slots .notallowed .togglebutton INPUT + DIV,
#outfitting_fit_slots .overlimit .togglebutton INPUT + DIV {
	background-color: var(--colorred1);
	color: var(--colorred5);
}
#outfitting_fit_slots .notallowed .togglebutton INPUT:checked + DIV,
#outfitting_fit_slots .overlimit .togglebutton INPUT:checked + DIV {
	border-color: var(--colorred5);
}
#page_body_outfitting.focusslot #outfitting_fit_slots .notallowed .togglebutton INPUT:checked + DIV,
#page_body_outfitting.focusslot #outfitting_fit_slots .overlimit .togglebutton INPUT:checked + DIV {
	background-color: var(--colorred5);
	color: var(--colorblack);
}

#outfitting_fit_slots .dragready .togglebutton INPUT + DIV {
	border-color: var(--colorblue5);
}

#outfitting_fit_slots .dragerror .togglebutton INPUT + DIV {
	background-color: var(--colorgrey1);
	color: var(--colorgrey5);
}
#outfitting_fit_slots .dragerror .togglebutton INPUT + DIV SPAN:empty::after {
	color: var(--colorgrey3);
}
#outfitting_fit_slots .dragerror .togglebutton INPUT:checked + DIV {
	border-color: var(--colorgrey5);
}
#page_body_outfitting.focusslot #outfitting_fit_slots .dragerror .togglebutton INPUT:checked + DIV {
	background-color: var(--colorgrey5);
	color: var(--colorblack);
}

#page_body_outfitting.focusslot #outfitting_fit_slots .togglebutton INPUT:checked + DIV SPAN:empty::after,
#page_body_outfitting.focusslot #outfitting_fit_slots .togglebutton INPUT:checked + DIV .iconsvg,
#outfitting_fit_slots .togglebutton INPUT:active + DIV SPAN:empty::after,
#outfitting_fit_slots .togglebutton.active INPUT + DIV SPAN:empty::after,
#outfitting_fit_slots .togglebutton INPUT:active + DIV .iconsvg,
#outfitting_fit_slots .togglebutton.active INPUT + DIV .iconsvg,
#outfitting_fit_slots .notallowed .togglebutton INPUT + DIV SPAN:empty::after,
#outfitting_fit_slots .notallowed .togglebutton INPUT + DIV .iconsvg,
#outfitting_fit_slots .overlimit .togglebutton INPUT + DIV SPAN:empty::after,
#outfitting_fit_slots .overlimit .togglebutton INPUT + DIV .iconsvg,
#outfitting_fit_slots .dragerror .togglebutton INPUT + DIV .iconsvg {
	color: inherit;
}

#outfitting_fit_slots .checkbox INPUT + DIV SPAN {
	margin-right: 0.25em;
}

#outfitting_fit_slots .checkbox INPUT:disabled + DIV .check {
	visibility: hidden;
}
#outfitting_fit_slots .powerlock .checkbox INPUT + DIV .check {
	visibility: visible;
}

#outfitting_fit_slots.priority1mfnret .priority1 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2mfnret .priority2 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3mfnret .priority3 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4mfnret .priority4 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5mfnret .priority5 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority1mfndep .priority1dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2mfndep .priority2dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3mfndep .priority3dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4mfndep .priority4dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5mfndep .priority5dep .checkbox INPUT:checked + DIV .check {
	background-color: var(--colorblue5);
}
#outfitting_fit_slots.priority1mfnret .priority1 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2mfnret .priority2 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3mfnret .priority3 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4mfnret .priority4 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5mfnret .priority5 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1mfnret .priority1 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2mfnret .priority2 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3mfnret .priority3 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4mfnret .priority4 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5mfnret .priority5 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority1mfndep .priority1dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2mfndep .priority2dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3mfndep .priority3dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4mfndep .priority4dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5mfndep .priority5dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1mfndep .priority1dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2mfndep .priority2dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3mfndep .priority3dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4mfndep .priority4dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5mfndep .priority5dep .checkbox INPUT + DIV .check::after {
	border-color: var(--colorblue3);
}
#outfitting_fit_slots.priority1mfnret .priority1 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2mfnret .priority2 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3mfnret .priority3 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4mfnret .priority4 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5mfnret .priority5 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1mfnret .priority1 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2mfnret .priority2 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3mfnret .priority3 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4mfnret .priority4 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5mfnret .priority5 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority1mfndep .priority1dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2mfndep .priority2dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3mfndep .priority3dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4mfndep .priority4dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5mfndep .priority5dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1mfndep .priority1dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2mfndep .priority2dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3mfndep .priority3dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4mfndep .priority4dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5mfndep .priority5dep .checkbox INPUT:checked + DIV .check::after {
	border-color: var(--colorblue5);
}

#outfitting_fit_slots.priority1dmgret .priority1 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2dmgret .priority2 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3dmgret .priority3 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4dmgret .priority4 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5dmgret .priority5 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority1dmgdep .priority1dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2dmgdep .priority2dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3dmgdep .priority3dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4dmgdep .priority4dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5dmgdep .priority5dep .checkbox INPUT:checked + DIV .check {
	background-color: var(--colorgreen5);
}
#outfitting_fit_slots.priority1dmgret .priority1 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2dmgret .priority2 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3dmgret .priority3 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4dmgret .priority4 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5dmgret .priority5 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1dmgret .priority1 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2dmgret .priority2 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3dmgret .priority3 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4dmgret .priority4 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5dmgret .priority5 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority1dmgdep .priority1dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2dmgdep .priority2dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3dmgdep .priority3dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4dmgdep .priority4dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5dmgdep .priority5dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1dmgdep .priority1dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2dmgdep .priority2dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3dmgdep .priority3dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4dmgdep .priority4dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5dmgdep .priority5dep .checkbox INPUT + DIV .check::after {
	border-color: var(--colorgreen3);
}
#outfitting_fit_slots.priority1dmgret .priority1 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2dmgret .priority2 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3dmgret .priority3 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4dmgret .priority4 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5dmgret .priority5 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1dmgret .priority1 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2dmgret .priority2 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3dmgret .priority3 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4dmgret .priority4 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5dmgret .priority5 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority1dmgdep .priority1dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2dmgdep .priority2dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3dmgdep .priority3dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4dmgdep .priority4dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5dmgdep .priority5dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1dmgdep .priority1dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2dmgdep .priority2dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3dmgdep .priority3dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4dmgdep .priority4dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5dmgdep .priority5dep .checkbox INPUT:checked + DIV .check::after {
	border-color: var(--colorgreen5);
}

#outfitting_fit_slots.priority1errret .priority1 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2errret .priority2 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3errret .priority3 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4errret .priority4 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5errret .priority5 .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority1errdep .priority1dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority2errdep .priority2dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority3errdep .priority3dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority4errdep .priority4dep .checkbox INPUT:checked + DIV .check,
#outfitting_fit_slots.priority5errdep .priority5dep .checkbox INPUT:checked + DIV .check {
	background-color: var(--colorred5);
}
#outfitting_fit_slots.priority1errret .priority1 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2errret .priority2 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3errret .priority3 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4errret .priority4 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5errret .priority5 .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1errret .priority1 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2errret .priority2 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3errret .priority3 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4errret .priority4 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5errret .priority5 .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority1errdep .priority1dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority2errdep .priority2dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority3errdep .priority3dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority4errdep .priority4dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority5errdep .priority5dep .checkbox INPUT + DIV .check::before,
#outfitting_fit_slots.priority1errdep .priority1dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority2errdep .priority2dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority3errdep .priority3dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority4errdep .priority4dep .checkbox INPUT + DIV .check::after,
#outfitting_fit_slots.priority5errdep .priority5dep .checkbox INPUT + DIV .check::after {
	border-color: var(--colorred3);
}
#outfitting_fit_slots.priority1errret .priority1 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2errret .priority2 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3errret .priority3 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4errret .priority4 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5errret .priority5 .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1errret .priority1 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2errret .priority2 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3errret .priority3 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4errret .priority4 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5errret .priority5 .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority1errdep .priority1dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority2errdep .priority2dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority3errdep .priority3dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority4errdep .priority4dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority5errdep .priority5dep .checkbox INPUT:checked + DIV .check::before,
#outfitting_fit_slots.priority1errdep .priority1dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority2errdep .priority2dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority3errdep .priority3dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority4errdep .priority4dep .checkbox INPUT:checked + DIV .check::after,
#outfitting_fit_slots.priority5errdep .priority5dep .checkbox INPUT:checked + DIV .check::after {
	border-color: var(--colorred5);
}


#outfitting_fit_slots BUTTON.outfitting_fit_priority {
	position: relative;
	margin-left: 0.5em;
	border: none;
	padding: 0 6px 0.1em 6px;
	background-color: transparent;
	color: var(--colororange5);
	font: var(--fontfixed);
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority:active {
	background-color: transparent !important;
	color: var(--colorwhite) !important;
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots BUTTON.outfitting_fit_priority::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: 4px;
	height: 8px;
	margin-top: -4px;
	border: 4px solid transparent;
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority::before {
	left: 0;
	border-left: none;
	border-right-color: var(--colororange3);
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority:active::before {
	border-right-color: var(--colorwhite) !important;
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority::after {
	right: 0;
	border-right: none;
	border-left-color: var(--colororange3);
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority:active::after {
	border-left-color: var(--colorwhite) !important;
}
#outfitting_fit_slots BUTTON.outfitting_fit_priority:empty {
	visibility: hidden;
}

#outfitting_fit_slots.priority1mfndep .priority1 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority2mfndep .priority2 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority3mfndep .priority3 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority4mfndep .priority4 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority5mfndep .priority5 BUTTON.outfitting_fit_priority {
	color: var(--colorblue5);
}
#outfitting_fit_slots.priority1mfndep .priority1 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority2mfndep .priority2 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority3mfndep .priority3 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority4mfndep .priority4 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority5mfndep .priority5 BUTTON.outfitting_fit_priority::before {
	border-right-color: var(--colorblue3);
}
#outfitting_fit_slots.priority1mfndep .priority1 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority2mfndep .priority2 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority3mfndep .priority3 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority4mfndep .priority4 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority5mfndep .priority5 BUTTON.outfitting_fit_priority::after {
	border-left-color: var(--colorblue3);
}

#outfitting_fit_slots.priority1dmgdep .priority1 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority2dmgdep .priority2 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority3dmgdep .priority3 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority4dmgdep .priority4 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority5dmgdep .priority5 BUTTON.outfitting_fit_priority {
	color: var(--colorgreen5);
}
#outfitting_fit_slots.priority1dmgdep .priority1 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority2dmgdep .priority2 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority3dmgdep .priority3 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority4dmgdep .priority4 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority5dmgdep .priority5 BUTTON.outfitting_fit_priority::before {
	border-right-color: var(--colorgreen3);
}
#outfitting_fit_slots.priority1dmgdep .priority1 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority2dmgdep .priority2 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority3dmgdep .priority3 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority4dmgdep .priority4 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority5dmgdep .priority5 BUTTON.outfitting_fit_priority::after {
	border-left-color: var(--colorgreen3);
}

#outfitting_fit_slots.priority1errret .priority1 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority2errret .priority2 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority3errret .priority3 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority4errret .priority4 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority5errret .priority5 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority1errdep .priority1 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority2errdep .priority2 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority3errdep .priority3 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority4errdep .priority4 BUTTON.outfitting_fit_priority,
#outfitting_fit_slots.priority5errdep .priority5 BUTTON.outfitting_fit_priority {
	color: var(--colorred5);
}
#outfitting_fit_slots.priority1errret .priority1 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority2errret .priority2 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority3errret .priority3 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority4errret .priority4 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority5errret .priority5 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority1errdep .priority1 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority2errdep .priority2 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority3errdep .priority3 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority4errdep .priority4 BUTTON.outfitting_fit_priority::before,
#outfitting_fit_slots.priority5errdep .priority5 BUTTON.outfitting_fit_priority::before {
	border-right-color: var(--colorred3);
}
#outfitting_fit_slots.priority1errret .priority1 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority2errret .priority2 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority3errret .priority3 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority4errret .priority4 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority5errret .priority5 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority1errdep .priority1 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority2errdep .priority2 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority3errdep .priority3 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority4errdep .priority4 BUTTON.outfitting_fit_priority::after,
#outfitting_fit_slots.priority5errdep .priority5 BUTTON.outfitting_fit_priority::after {
	border-left-color: var(--colorred3);
}

#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled {
	color: var(--colorgrey3);
	background-color: transparent !important;
}
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::before,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::before,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::before,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::before,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::before {
	border-right-color: var(--colorgrey3);
	visibility: hidden;
}
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::after,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::after,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::after,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::after,
#outfitting_fit_slots #outfitting_fit_body BUTTON.outfitting_fit_priority:disabled::after {
	border-left-color: var(--colorgrey3);
	visibility: hidden;
}


/*
* OUTFITTING DETAILS BLOCK
*/


#outfitting_details_settings {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#outfitting_details_settings > * {
	flex: 0 0 auto;
}

#outfitting_details_settings SELECT {
	flex: 0 1 auto;
	min-width: 5em;
	font-size: 0.75rem;
}

#outfitting_details_settings BUTTON {
	margin: 0 0.125rem;
	border: 1px solid transparent;
	padding: 3px;
	background-color: transparent;
	color: var(--colororange5);
	line-height: 0;
}


#outfitting_details_container {
	flex: 1 0 10px;
	border: 2px solid var(--colororange5);
	padding: 0 0.5rem;
	background-color: var(--colorblack);
	overflow-y: auto;
}


#outfitting_details_label {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	border-bottom: 2px solid var(--colororange3);
	padding-top: 0.25rem;
	background-color: var(--colorblack);
	color: var(--colorgrey5);
	font-weight: bold;
}

#outfitting_details_label .iconsvg.engineer {
	float: right;
	margin: 3px 0;
}

#details_rank {
	margin-bottom: 0.5rem;
	font-size: 0.875em;
	font: var(--fonttext);
}


#details_cost {
	margin-bottom: 0.5rem;
	border-bottom: 2px solid var(--colororange3);
	padding-bottom: 0.5rem;
	font-size: 0.875em;
}

#details_cost .details_cost_row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-top: 0.25rem;
}
#details_cost .details_cost_row:first-child {
	margin-top: 0;
}

#details_cost .details_cost_row > * {
	margin-left: 0.25rem;
}
#details_cost .details_cost_row > *:first-child {
	margin-left: 0;
}

#details_cost INPUT {
	flex: 0 1 auto;
	min-width: 5em;
	padding: 0 0.25em;
	text-align: right;
	font-size: 0.875em;
}

#details_cost SPAN {
	margin-right: 0.25rem;
	align-self: center;
}
#details_cost SPAN#details_cost_mod {
	flex: 1 0 auto;
}

#details_cost .details_cost_row:last-child .togglebutton {
	flex: 1 0 auto;
}

#details_cost .togglebutton INPUT + DIV SMALL {
	font-size: 0.5rem;
}


#details_engineering {
	margin-bottom: 0.5rem;
	border-bottom: 2px solid var(--colororange3);
	padding-bottom: 0.5rem;
}

#engineering_controls {
	display: flex;
	align-items: center;
}

#engineering_selects {
	flex: 1 0 10px;
}

#engineering_selects SELECT {
	display: block;
	width: 100%;
	min-width: 0;
}

#engineering_selects .togglebutton {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 0.25em;
	cursor: default;
}

#engineering_selects .togglebutton SPAN {
	flex: 1 0 auto;
	align-self: center;
	padding-right: 0.25em;
	color: var(--colorgrey5);
	text-align: right;
	font-size: 0.875rem;
}

#engineering_selects .togglebutton LABEL {
	flex: 0 0 auto;
	border: 1px solid transparent;
	cursor: pointer;
}

#engineering_selects .togglebutton LABEL .iconsvg {
	margin: 2px;
	color: var(--colororange4);
}

#engineering_selects .togglebutton INPUT:disabled + LABEL,
#engineering_selects .togglebutton INPUT:disabled + * + LABEL,
#engineering_selects .togglebutton INPUT:disabled + * + * + LABEL,
#engineering_selects .togglebutton INPUT:disabled + * + * + * + LABEL,
#engineering_selects .togglebutton INPUT:disabled + * + * + * + * + LABEL {
	cursor: default;
}
#engineering_selects .togglebutton INPUT:disabled + LABEL .iconsvg,
#engineering_selects .togglebutton INPUT:disabled + * + LABEL .iconsvg,
#engineering_selects .togglebutton INPUT:disabled + * + * + LABEL .iconsvg,
#engineering_selects .togglebutton INPUT:disabled + * + * + * + LABEL .iconsvg,
#engineering_selects .togglebutton INPUT:disabled + * + * + * + * + LABEL .iconsvg {
	color: var(--colorgrey4);
}

#engineering_selects .togglebutton LABEL .iconsvg.engineered {
	display: none;
}
#engineering_selects .togglebutton INPUT:checked + LABEL .iconsvg.engineer,
#engineering_selects .togglebutton INPUT:checked + * + LABEL .iconsvg.engineer,
#engineering_selects .togglebutton INPUT:checked + * + * + LABEL .iconsvg.engineer,
#engineering_selects .togglebutton INPUT:checked + * + * + * + LABEL .iconsvg.engineer,
#engineering_selects .togglebutton INPUT:checked + * + * + * + * + LABEL .iconsvg.engineer {
	display: none;
}
#engineering_selects .togglebutton INPUT:checked + LABEL .iconsvg.engineered,
#engineering_selects .togglebutton INPUT:checked + * + LABEL .iconsvg.engineered,
#engineering_selects .togglebutton INPUT:checked + * + * + LABEL .iconsvg.engineered,
#engineering_selects .togglebutton INPUT:checked + * + * + * + LABEL .iconsvg.engineered,
#engineering_selects .togglebutton INPUT:checked + * + * + * + * + LABEL .iconsvg.engineered {
	display: inline-block;
}

#engineering_selects .togglebutton INPUT:active:not(:disabled) + * + * + * + * + LABEL .iconsvg {
	color: var(--colorwhite);
}

#engineering_roll {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 4.5em;
	height: 4.5em;
}

#engineering_roll .outer {
	position: absolute;
	left: 0.25em;
	right: 0.25em;
	top: 0.25em;
	bottom: 0.25em;
	border-radius: 50%;
	overflow: hidden;
}

#engineering_roll .mask {
	position: absolute;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
}
#engineering_roll .mask + .mask {
	left: 0;
}

#engineering_roll .inner {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: left center;
}
#engineering_roll .inner:before,
#engineering_roll .inner:after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--colorblue2);
}
#engineering_roll .inner:after {
	left: -100%;
	background-color: var(--colorblue4);
}
#engineering_roll.invalid .inner:before,
#engineering_roll.invalid .inner:after {
	background-color: var(--colorred2);
}
#engineering_roll.disabled .inner:before {
	background-color: var(--colorgrey2);
}
#engineering_roll.disabled .inner:after {
	background-color: var(--colorgrey4);
}
#engineering_roll .mask + .mask .inner {
	transform-origin: right center;
}
#engineering_roll .mask + .mask .inner:after {
	left: 100%;
}
#engineering_roll .middle {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 50%;
	top: 50%;
	width: 3em;
	height: 3em;
	margin-left: -1.5em;
	margin-top: -1.5em;
	border-radius: 50%;
	background-color: var(--colorblack);
}

#engineering_roll #blueprint_roll {
	align-self: center;
	width: 3.5em;
	border-color: var(--colorgrey3);
	background-color: transparent;
	padding: 0;
	text-align: center;
	font: var(--fontcaps);
	font-size: 0.875rem;
}
#engineering_roll #blueprint_roll:focus {
	border-color: var(--colorwhite);
	background-color: var(--colorgrey2);
}
#engineering_roll #blueprint_roll:disabled {
	border-color: transparent;
	background-color: transparent;
}

#engineering_rollbuttons {
	flex: 0 0 auto;
	display: flex;
	align-self: stretch;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.25em 0;
}

#engineering_rollbuttons BUTTON {
	font-size: 0.875rem;
	text-align: right;
}

#details_special {
	font: var(--fonttext);
}


#outfitting_details_module TABLE {
	margin-bottom: 0.25rem;
	width: 100%;
}

#outfitting_details_module TH,
#outfitting_details_module TD {
	width: 0%;
	padding: 0 0.25em;
}
#outfitting_details_module TH:first-child,
#outfitting_details_module TD:first-child {
	width: 100%;
}

#outfitting_details_module TBODY TD {
	vertical-align: bottom;
	font-size: 0.875rem;
}
#outfitting_details_module TBODY TD:nth-child(1) {
	position: relative;
}
#outfitting_details_module TBODY TD:nth-child(4) {
	text-align: right;
}

#outfitting_details_module TBODY TD ABBR {
	display: block;
	border-color: var(--colorgrey3);
	color: var(--colorgrey5);
	/*
	padding-bottom: 3px;
	overflow-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
	*/
	position: absolute;
	left: 0;
	right: 0;
	top: 0.25em;
	bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#outfitting_details_module TD .outfitting_details_input {
	display: flex;
}

#outfitting_details_module TD INPUT {
	flex: 1 0 auto;
	width: auto;
	min-width: 4em;
	margin: 1px 0;
	padding: 0 0.125rem;
	text-align: right;
	font: var(--fontcaps);
	font-size: 0.875rem;
}

#outfitting_details_module TD SPAN {
	display: block;
	padding-bottom: 2px;
}

#outfitting_details_module TD .outfitting_details_unit {
	white-space: nowrap;
}


#outfitting_details_buttons {
	flex: 0 0 auto;
	min-width: 0;
	display: none;
	flex-direction: row;
	margin: 0 -0.25em;
}

#outfitting_details_buttons BUTTON {
	flex: 1 0 10px;
	margin: 0.25em 0.25em 0 0.25em;
}


/*
* OUTFITTING STATS BLOCK
*/


#outfitting_bottom {
	padding-top: 0.125em;
}

#stats_show_handle {
	padding: 0 0.25em;
}

.stats_show_label {
	display: block;
	background-color: var(--colororange1);
	color: var(--colororange5);
	text-align: center;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#stats_show_handle DIV.hide,
#stats_show:checked ~ #stats_show_handle DIV.show {
	display: none;
}
#stats_show:checked ~ #stats_show_handle DIV.hide {
	display: block;
}

#outfitting_stats {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 0.125em;
}

.stats_toggles {
	flex: 1 0 10px;
	order: 10;
	min-width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.stats_toggle_label {
	display: block;
	padding: 0 0.25em;
	background-color: var(--colororange1);
	color: var(--colororange4);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.stats_toggles .stats_toggle_label {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 0;
	margin: 0.125em;
	border: 1px solid var(--colororange3);
	padding: 0.125em 0.25em;
	text-align: center;
}
#stats_toggle_1:checked ~ DIV .stats_toggle_label_1,
#stats_toggle_2:checked ~ DIV .stats_toggle_label_2,
#stats_toggle_3:checked ~ DIV .stats_toggle_label_3,
#stats_toggle_4:checked ~ DIV .stats_toggle_label_4,
#stats_toggle_5:checked ~ DIV .stats_toggle_label_5,
#stats_toggle_6:checked ~ DIV .stats_toggle_label_6,
#stats_toggle_7:checked ~ DIV .stats_toggle_label_7,
#stats_toggle_8:checked ~ DIV .stats_toggle_label_8 {
	border-color: var(--colororange5);
	background-color: var(--colororange5);
	color: var(--colorblack);
}
#stats_show:active ~ DIV .stats_show_label,
#stats_toggle_1:active ~ DIV .stats_toggle_label_1,
#stats_toggle_2:active ~ DIV .stats_toggle_label_2,
#stats_toggle_3:active ~ DIV .stats_toggle_label_3,
#stats_toggle_4:active ~ DIV .stats_toggle_label_4,
#stats_toggle_5:active ~ DIV .stats_toggle_label_5,
#stats_toggle_6:active ~ DIV .stats_toggle_label_6,
#stats_toggle_7:active ~ DIV .stats_toggle_label_7,
#stats_toggle_8:active ~ DIV .stats_toggle_label_8 {
	border-color: var(--colorwhite);
	background-color: var(--colorwhite);
	color: var(--colorblack);
}

.stats_toggles .stats_toggle_label ABBR {
	border-color: var(--colororange4);
	cursor: pointer;
}
#stats_toggle_1:checked ~ DIV .stats_toggle_label_1 ABBR,
#stats_toggle_2:checked ~ DIV .stats_toggle_label_2 ABBR,
#stats_toggle_3:checked ~ DIV .stats_toggle_label_3 ABBR,
#stats_toggle_4:checked ~ DIV .stats_toggle_label_4 ABBR,
#stats_toggle_5:checked ~ DIV .stats_toggle_label_5 ABBR,
#stats_toggle_6:checked ~ DIV .stats_toggle_label_6 ABBR,
#stats_toggle_7:checked ~ DIV .stats_toggle_label_7 ABBR,
#stats_toggle_8:checked ~ DIV .stats_toggle_label_8 ABBR,
#stats_show:active ~ DIV .stats_show_label ABBR,
#stats_toggle_1:active ~ DIV .stats_toggle_label_1 ABBR,
#stats_toggle_2:active ~ DIV .stats_toggle_label_2 ABBR,
#stats_toggle_3:active ~ DIV .stats_toggle_label_3 ABBR,
#stats_toggle_4:active ~ DIV .stats_toggle_label_4 ABBR,
#stats_toggle_5:active ~ DIV .stats_toggle_label_5 ABBR,
#stats_toggle_6:active ~ DIV .stats_toggle_label_6 ABBR,
#stats_toggle_7:active ~ DIV .stats_toggle_label_7 ABBR,
#stats_toggle_8:active ~ DIV .stats_toggle_label_8 ABBR {
	border-color: var(--colorblack);
}

#outfitting_stats_wrapper {
	flex: 1 0 10px;
	order: 5;
	min-width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#outfitting_stats_container {
	flex: 0 1 auto;
	min-width: 0;
	display: none;
	flex-direction: row;
	margin: 0.125em;
	border: 0 solid var(--colororange5);
	border-width: 2px 1px;
	background-color: var(--colorblack);
	overflow-x: auto;
}
#outfitting_bottom .stats_toggle:checked ~ DIV #outfitting_stats_container {
	display: flex;
}

.outfitting_stats_panel {
	flex: 0 0 auto;
	display: none;
	border: 0 solid var(--colororange5);
	border-width: 0 1px;
}
#stats_toggle_1:checked ~ DIV #outfitting_stats_1,
#stats_toggle_2:checked ~ DIV #outfitting_stats_2,
#stats_toggle_3:checked ~ DIV #outfitting_stats_3,
#stats_toggle_4:checked ~ DIV #outfitting_stats_4,
#stats_toggle_5:checked ~ DIV #outfitting_stats_5,
#stats_toggle_6:checked ~ DIV #outfitting_stats_6,
#stats_toggle_7:checked ~ DIV #outfitting_stats_7,
#stats_toggle_8:checked ~ DIV #outfitting_stats_8 {
	display: block;
}

.outfitting_stats_panel .error {
	color: var(--colorred5);
}
.outfitting_stats_panel ABBR.error {
	border-color: var(--colorred5);
}

.outfitting_stats_panel .error SMALL {
	color: var(--colorred4);
}
.outfitting_stats_panel SMALL:not(.semantic) {
	display: none;
}

.outfitting_stats_panel TABLE {
	width: 100%;
}

.outfitting_stats_panel TH,
.outfitting_stats_panel TD {
	padding: 0 0.25em;
	text-align: right;
}

.outfitting_stats_panel THEAD TH:first-child {
	padding: 0;
	font-weight: bold;
}

.outfitting_stats_panel .stats_toggle_label {
}

.outfitting_stats_panel .stats_toggle_label ABBR {
	border: none;
	cursor: pointer;
}

.outfitting_stats_panel THEAD TD {
	color: var(--colororange5);
	text-align: center;
	font-weight: bold;
}

.outfitting_stats_panel TBODY TH {
	color: var(--colororange5);
	text-align: right;
	font-weight: bold;
}
.outfitting_stats_panel TBODY TH.header {
	text-align: center;
}

.outfitting_stats_panel THEAD TD ABBR,
.outfitting_stats_panel TBODY TH ABBR {
	border-color: var(--colororange5);
}

.outfitting_stats_panel TBODY TD.other {
	text-align: center;
}

.outfitting_stats_panel INPUT {
	width: 2.5em;
	padding: 0 0.125rem;
	text-align: right;
	font: var(--fontcaps);
	font-size: 0.875rem;
}

.outfitting_stats_panel .outfitting_stats_powerbar {
	position: relative;
	margin-right: 0.25em;
}
.outfitting_stats_panel .outfitting_stats_powerbar::before {
	display: inline;
	content: '\200B';
}

.outfitting_stats_panel .outfitting_stats_powerbar SPAN.marker {
	pointer-events: none;
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	right: 10%;
	border-right: 1px solid var(--colorred5);
	padding-right: 3px;
}
.outfitting_stats_panel .outfitting_stats_powerbar SPAN.marker50 {
	right: 55%;
	border-color: var(--colorgreen5);
}
.outfitting_stats_panel .outfitting_stats_powerbar SPAN.marker40 {
	right: 64%;
	border-color: var(--colorblue5);
}

.outfitting_stats_panel .outfitting_stats_powerbar DIV {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background-color: var(--colororange2);
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	line-height: 1px;
}
.outfitting_stats_panel .outfitting_stats_powerbar DIV:first-of-type,
.outfitting_stats_panel .outfitting_stats_powerbar DIV:last-of-type {
	top: 2px;
	bottom: 2px;
	height: auto;
}

.outfitting_stats_panel .outfitting_stats_powerbar DIV SPAN.overload {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: 0;
	width: 10%;
	background-color: var(--colorred2);
}

.outfitting_stats_panel .outfitting_stats_powerbar ABBR {
	display: inline-block;
	position: relative;
	z-index: 2;
	height: 100%;
	margin: 0;
	border: none;
	border-right: 2px solid var(--colororange3);
	background-color: var(--colororange4);
	padding: 1px 0;
	color: var(--colorblack);
	font: var(--fontfixed);
	font-size: 0.5625rem;
	line-height: 0.4375rem;
	overflow: hidden;
	text-align: center;
}
.outfitting_stats_panel .outfitting_stats_powerbar ABBR.mfn {
	border-right: 2px solid var(--colorblue3);
	background-color: var(--colorblue4);
}
.outfitting_stats_panel .outfitting_stats_powerbar ABBR.dmg {
	border-right: 2px solid var(--colorgreen3);
	background-color: var(--colorgreen4);
}
.outfitting_stats_panel .outfitting_stats_powerbar ABBR.err {
	border-right: 2px solid var(--colorred3);
	background-color: var(--colorred4);
}

.outfitting_stats_panel .outfitting_stats_powerbar ABBR SPAN {
	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -0.4em;
}


/*
* ANALYSIS BLOCK
*/


#analysis_tabs {
	display: flex;
	flex-direction: row;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: arrow;
}

#analysis_tabs LABEL {
	flex: 0 0 auto;
	margin-left: 0.2em;
}
#analysis_tabs LABEL:first-child {
	margin-left: 0;
}

#analysis_tabs SPAN {
	flex: 1 0 0px;
}

#analysis_tabs .togglebutton INPUT + DIV.togglebox {
	border-bottom: none;
	padding: 0 0.5em;
}

#page_body_analysis:not(.compare) #analysis_compare_container,
#page_body_analysis:not(.retrofit) #analysis_retrofit_container {
	display: none;
}

#analysis_container {
	display: flex;
	flex-direction: row;
}

#analysis_retrofit_container {
	flex: 1 0 10px;
	display: flex;
	flex-direction: column;
	padding: 0.25em;
}

#analysis_retrofit_container .analysis_retrofit_section {
	flex: 1 0 10px;
	display: flex;
	flex-direction: row;
}
#analysis_retrofit_container .analysis_retrofit_section:first-child {
	flex: 0 1 auto;
}

#analysis_retrofit_container .analysis_retrofit_panel {
	flex: 1 1 auto;
	margin: 0.25em;
	display: flex;
	flex-direction: column;
}

#analysis_retrofit_container .analysis_retrofit_panel .scroller {
	flex: 1 0 10px;
}

#analysis_retrofit_container #analysis_retrofit_setup {
	flex: 0 1 auto;
}

#analysis_retrofit_container #analysis_retrofit_setup TD {
	white-space: nowrap;
}

#analysis_retrofit_container .analysis_retrofit_divider {
	flex: 0 0 auto;
	margin-bottom: 0.25em;
	display: flex;
	flex-direction: row;
}

#analysis_retrofit_container .analysis_retrofit_divider > HEADER {
	flex: 1 0 auto;
	background-color: var(--colorgrey4);
	color: var(--colorblack);
	text-align: center;
	font-weight: bold;
}

#analysis_retrofit_container .analysis_retrofit_divider > BUTTON {
	flex: 0 0 auto;
	align-self: center;
	margin-left: 0.25em;
	padding: 0.125rem;
	line-height: 0;
}

#analysis_retrofit_container TABLE {
	width: 100%;
	min-width: 0;
	border: none;
	border-right: 0.25em solid black;
}

#analysis_retrofit_container TABLE TD {
	font: var(--fonttext);
}
#analysis_retrofit_setup TABLE TD {
	padding: 0.125em 0.25em;
}
#analysis_retrofit_container TABLE.striped THEAD TD,
#analysis_retrofit_builds TABLE.striped TBODY TD:first-child {
	vertical-align: middle;
}

#analysis_retrofit_container TABLE.single TH.retrofit_steps_build,
#analysis_retrofit_container TABLE.single TD.retrofit_steps_build {
	display: none;
}

#analysis_retrofit_container TABLE LABEL {
	width: 100%;
}

#analysis_retrofit_container TABLE SELECT {
	width: 100%;
}

#analysis_retrofit_setup INPUT {
	text-align: center;
}

#analysis_retrofit_container .analysis_retrofit_buttons {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	margin: 0.25em 0;
}

#analysis_retrofit_container .analysis_retrofit_buttons BUTTON {
	flex: 1 0 auto;
	align-self: stretch;
	margin: 0 0.25em;
	padding: 0.125rem;
	line-height: 0;
}


/*
* RESPONSIVE LAYOUT
*/


@media only screen {
	#page_tabs SPAN {
		display: none;
	}
	
	BODY.show1 #outfitting_modules,
	BODY.show2 #outfitting_modules,
	BODY.show1 #outfitting_details,
	BODY.show2 #outfitting_details {
		flex: 0 2 32em;
		max-width: 32em;
	}
	
	#outfitting_modules,
	#outfitting_fit,
	#outfitting_details {
		display: flex;
	}
	/* redundant BODY.classes to match specificity */
	BODY.show3.show3 #outfitting_top #outfitting_modules,
	BODY.show3.show3 #outfitting_top #outfitting_fit,
	BODY.show3.show3 #outfitting_top #outfitting_details {
		display: flex;
	}
	BODY.show2 #outfitting_top:not(.show2modules) #outfitting_modules,
	BODY.show2 #outfitting_top:not(.show2slots) #outfitting_fit,
	BODY.show2 #outfitting_top:not(.show2details) #outfitting_details {
		display: none;
	}
	BODY.show2 #outfitting_top.show2modules #outfitting_modules,
	BODY.show2 #outfitting_top.show2slots #outfitting_fit,
	BODY.show2 #outfitting_top.show2details #outfitting_details {
		display: flex;
	}
	BODY.show1 #outfitting_top:not(.show1modules) #outfitting_modules,
	BODY.show1 #outfitting_top:not(.show1slots) #outfitting_fit,
	BODY.show1 #outfitting_top:not(.show1details) #outfitting_details {
		display: none;
	}
	BODY.show1 #outfitting_top.show1modules #outfitting_modules,
	BODY.show1 #outfitting_top.show1slots #outfitting_fit,
	BODY.show1 #outfitting_top.show1details #outfitting_details {
		display: flex;
	}
	
	#outfitting_modules_buttons,
	#outfitting_details_buttons {
		display: none;
	}
	BODY.show3 #outfitting_modules_buttons,
	BODY.show3 #outfitting_details_buttons {
		display: none;
	}
	BODY.show2 #outfitting_modules_buttons,
	BODY.show2 #outfitting_details_buttons,
	BODY.show1 #outfitting_modules_buttons,
	BODY.show1 #outfitting_details_buttons {
		display: flex;
	}
	
	#outfitting_modules_button_back,
	#outfitting_modules_button_details,
	#outfitting_details_button_back,
	#outfitting_details_button_replace {
		display: block;
	}
	/* redundant BODY.classes to match specificity */
	BODY.show2 #outfitting_top:not(.show2details) #outfitting_modules_button_back,
	BODY.show2 #outfitting_top:not(.show2slots) #outfitting_modules_button_details,
	BODY.show2.show2 #outfitting_top #outfitting_details_button_back {
		display: none;
	}
	BODY.show2 #outfitting_top.show2details #outfitting_modules_button_back,
	BODY.show2 #outfitting_top.show2slots #outfitting_modules_button_details,
	BODY.show2.show2 #outfitting_top #outfitting_details_button_replace {
		display: block;
	}
	/* redundant BODY.classes to match specificity */
	BODY.show1.show1 #outfitting_top #outfitting_modules_button_details {
		display: none;
	}
	BODY.show1.show1 #outfitting_top #outfitting_modules_button_back,
	BODY.show1.show1 #outfitting_top #outfitting_details_button_back,
	BODY.show1.show1 #outfitting_top #outfitting_details_button_replace {
		display: block;
	}
	
	#outfitting_fit_settings .togglebutton INPUT + DIV {
		margin: 1px;
	}
	
	#outfitting_fit_settings .popout > LABEL SPAN {
		display: none;
	}
	
	#outfitting_bottom .stats_show_label {
		display: none;
	}
}

@media only screen and (min-width: 30em) {
	#outfitting_fit_settings .popout > LABEL SPAN {
		display: inline;
	}
}

@media only screen and (min-width: 46em) {
	#page_tabs SPAN {
		display: inline;
	}
	
	BODY:not(.show2) #outfitting_top {
		justify-content: center;
	}
	
	BODY.show2 #outfitting_top:not(.show2modules) #outfitting_modules,
	BODY.show2 #outfitting_top:not(.show2slots) #outfitting_fit,
	BODY.show2 #outfitting_top:not(.show2details) #outfitting_details {
		display: none;
	}
	BODY.show2 #outfitting_top.show2modules #outfitting_modules,
	BODY.show2 #outfitting_top.show2slots #outfitting_fit,
	BODY.show2 #outfitting_top.show2details #outfitting_details {
		display: flex;
	}
	
	/* redundant BODY.classes to match specificity */
	BODY.show2 #outfitting_top:not(.show2details) #outfitting_modules_button_back,
	BODY.show2 #outfitting_top:not(.show2slots) #outfitting_modules_button_details,
	BODY.show2.show2 #outfitting_top #outfitting_details_button_back {
		display: none;
	}
	BODY.show2 #outfitting_top.show2details #outfitting_modules_button_back,
	BODY.show2 #outfitting_top.show2slots #outfitting_modules_button_details,
	BODY.show2.show2 #outfitting_top #outfitting_details_button_replace {
		display: block;
	}
}

@media only screen and (min-width: 46em) and (orientation:landscape) {
	#outfitting_bottom .stats_toggle:checked ~ DIV .stats_toggles {
		flex: 0 0 auto;
		min-width: 0;
		flex-direction: column;
	}
	#outfitting_bottom .stats_toggle:checked ~ DIV #stats_toggles_left {
		order: 1;
	}
}

@media only screen and (min-width: 46em) and (max-height: 30em) {
	#outfitting_bottom .stats_show_label {
		display: block;
	}
	
	#outfitting_bottom #stats_show:not(:checked) ~ DIV .stats_toggles,
	#outfitting_bottom #stats_show:not(:checked) ~ DIV #outfitting_stats_container {
		display: none;
	}
}

@media only screen and (min-width: 65em) {
	BODY:not(.show3) #outfitting_top {
		justify-content: center;
	}
	
	BODY.show3 #outfitting_modules,
	BODY.show3 #outfitting_details {
		flex: 0 1 26em;
		max-width: 26em;
	}
	
	/* redundant BODY.classes to match specificity */
	BODY.show3.show3 #outfitting_top #outfitting_modules,
	BODY.show3.show3 #outfitting_top #outfitting_fit,
	BODY.show3.show3 #outfitting_top #outfitting_details {
		display: flex;
	}
	
	BODY.show3 #outfitting_modules_buttons,
	BODY.show3 #outfitting_details_buttons {
		display: none;
	}
}


/*
* OPTIONS BLOCK
*/


#page_body_options SECTION {
	flex: 0 0 auto;
	font: var(--fonttext);
}
#page_body_options SECTION:last-of-type {
	flex: 1 0 auto;
}

#page_body_options HEADER {
	margin-bottom: 1em;
	font-weight: bold;
	text-decoration: underline;
}

#page_body_options SECTION > DIV,
#page_body_options P {
	margin-bottom: 1em;
}

#page_body_options UL {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
}

#page_body_options LI {
	margin-left: 1.25em;
}

#page_body_options .checkbox SPAN {
	margin-left: 0.5em;
	color: var(--colororange5);
}

#page_body_options BUTTON {
	padding: 0.25em 0.5em;
}
#page_body_options BUTTON.iconsvg {
	padding: 2px;
	background-color: transparent;
}

#page_body_options TABLE {
	margin-left: 2em;
}

#page_body_options TH,
#page_body_options TD {
	padding: 0.125em 0.25em;
}

#options_builtin LABEL {
	display: block;
}

#options_appearance TH,
#options_appearance TD {
	vertical-align: middle;
}

#options_appearance INPUT {
	font-size: 0.875em;
	width: 100%;
}

#options_appearance BUTTON {
	padding: 0 0.5em;
}

#page_body_options .colorpicker {
	display: flex;
}

#page_body_options .colorpicker INPUT {
	width: 6em;
	align-self: center;
}

#page_body_options .colorpicker BUTTON {
	align-self: stretch;
	border: 1px solid var(--colorwhite);
	padding: 0;
	width: 1.5em;
}
#page_body_options .colorpicker BUTTON.colororange1 { background-color: var(--colororange1); }
#page_body_options .colorpicker BUTTON.colororange2 { background-color: var(--colororange2); }
#page_body_options .colorpicker BUTTON.colororange3 { background-color: var(--colororange3); }
#page_body_options .colorpicker BUTTON.colororange4 { background-color: var(--colororange4); }
#page_body_options .colorpicker BUTTON.colororange5 { background-color: var(--colororange5); }
#page_body_options .colorpicker BUTTON.colorred1 { background-color: var(--colorred1); }
#page_body_options .colorpicker BUTTON.colorred2 { background-color: var(--colorred2); }
#page_body_options .colorpicker BUTTON.colorred3 { background-color: var(--colorred3); }
#page_body_options .colorpicker BUTTON.colorred4 { background-color: var(--colorred4); }
#page_body_options .colorpicker BUTTON.colorred5 { background-color: var(--colorred5); }
#page_body_options .colorpicker BUTTON.colorblue1 { background-color: var(--colorblue1); }
#page_body_options .colorpicker BUTTON.colorblue2 { background-color: var(--colorblue2); }
#page_body_options .colorpicker BUTTON.colorblue3 { background-color: var(--colorblue3); }
#page_body_options .colorpicker BUTTON.colorblue4 { background-color: var(--colorblue4); }
#page_body_options .colorpicker BUTTON.colorblue5 { background-color: var(--colorblue5); }
#page_body_options .colorpicker BUTTON.colorgreen1 { background-color: var(--colorgreen1); }
#page_body_options .colorpicker BUTTON.colorgreen2 { background-color: var(--colorgreen2); }
#page_body_options .colorpicker BUTTON.colorgreen3 { background-color: var(--colorgreen3); }
#page_body_options .colorpicker BUTTON.colorgreen4 { background-color: var(--colorgreen4); }
#page_body_options .colorpicker BUTTON.colorgreen5 { background-color: var(--colorgreen5); }
#page_body_options .colorpicker BUTTON.coloryellow1 { background-color: var(--coloryellow1); }
#page_body_options .colorpicker BUTTON.coloryellow2 { background-color: var(--coloryellow2); }
#page_body_options .colorpicker BUTTON.coloryellow3 { background-color: var(--coloryellow3); }
#page_body_options .colorpicker BUTTON.coloryellow4 { background-color: var(--coloryellow4); }
#page_body_options .colorpicker BUTTON.coloryellow5 { background-color: var(--coloryellow5); }

#page_body_options FOOTER {
	flex: 0 0 auto;
	color: var(--colorgrey5);
	font: var(--fonttext);
	font-size: 0.75rem;
}


/*
* MODAL BLOCK
*/


#popup_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
    background-color: rgba(32, 32, 32, 0.75);
	font: var(--fontcaps);
}

#popup_form {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#popup_box {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 90%;
	min-height: 0;
	max-height: 90%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 2em 2em rgba(0, 0, 0, 0.75);
	border: 2px solid var(--colororange5);
	padding: 0.25rem;
	background-color: var(--colorblack);
}

#popup_desc {
	flex: 0 0 auto;
	max-width: 50em;
	margin: 0.25rem;
	font: var(--fonttext);
}
#popup_desc:empty {
	display: none;
}

#popup_desc P {
	margin: 0.5rem 1rem;
}

#popup_desc UL {
	margin: 0.5rem 1rem;
}
#popup_desc LI {
	padding: 0.125rem 0;
}

#popup_desc BUTTON {
	padding: 0.125rem 0.5rem;
}

#popup_textarea {
	flex: 0 1 auto;
	margin: 0.25rem;
}

#popup_table_container {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0.25rem;
	overflow: auto;
}

#popup_table {
	width: 100%;
	min-width: 0;
	border: none;
}

#popup_table TH,
#popup_table TD {
	width: 0;
	padding: 0.125rem 0.5rem;
	white-space: nowrap;
}
#popup_table TH.import_store,
#popup_table TD.import_store {
	position: relative;
	width: 25em;
	min-width: 0;
	padding: 0;
}

#popup_table SPAN.text {
	font: var(--fonttext);
}

#popup_table BUTTON {
	border: none;
}
#popup_table BUTTON.text {
	padding: 0.125rem 0.5rem;
}

#popup_table BUTTON.import_saveas,
#popup_table INPUT.import_saveas + LABEL {
	margin-right: 0.5rem;
}

#popup_table BUTTON .iconsvg {
	margin: 0.125rem 0.25rem;
}

#popup_table LABEL .iconsvg,
#popup_table ABBR .iconsvg {
	margin: 0.25rem;
}
#popup_table ABBR .iconsvg.warning {
	color: var(--colorred5);
}

#popup_table DIV.import_store {
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
}

#popup_table DIV.import_store BUTTON,
#popup_table DIV.import_store INPUT.toggleinput + LABEL,
#popup_table DIV.import_store ABBR {
	flex: 0 0 auto;
	display: inline-block;
	border: none;
}

#popup_table DIV.import_store SPAN.import_ignore_label {
	padding: 0.0625rem 0;
}
#popup_table DIV.import_store SPAN.import_ignore_label,
#popup_table DIV.import_store SELECT.import_save_label,
#popup_table DIV.import_store INPUT.import_saveas_label {
	display: none;
	flex: 1 0 auto;
	width: 8em;
	min-width: 0;
}
#popup_table DIV.import_store INPUT.import_ignore:checked ~ SPAN.import_ignore_label,
#popup_table DIV.import_store INPUT.import_save:checked ~ SELECT.import_save_label,
#popup_table DIV.import_store INPUT.import_saveas:checked ~ INPUT.import_saveas_label {
	display: inline-block;
}

#popup_table INPUT.toggleinput + LABEL {
	color: var(--colororange5);
}
#popup_table INPUT.toggleinput:checked + LABEL {
	background-color: var(--colororange5);
	color: var(--colorblack);
}
#popup_table INPUT.toggleinput:active + LABEL {
	background-color: var(--colorwhite);
	color: var(--colorblack);
}
#popup_table INPUT.toggleinput:disabled + LABEL {
	background-color: transparent;
	color: var(--colorgrey4);
}

#popup_table TD.export {
	width: 30em;
	min-width: 5em;
	padding: 0;
}

#popup_table DIV.export {
	display: flex;
	flex-direction: row;
	width: 100%;
	min-width: 0;
	padding: 0.125rem 0.5rem;
}

#popup_table INPUT.export,
#popup_table TEXTAREA.export {
	flex: 1 1 10px;
	min-width: 5em;
}


#popup_controls {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
}

#popup_status {
	flex: 1 1 auto;
	margin: 0.25rem;
	font: var(--fonttext);
}
#popup_status:empty {
	display: none;
}

#popup_controls BUTTON {
	flex: 0 0 auto;
	align-self: flex-end;
	margin: 0.25rem;
	padding: 0.125rem 0.5rem;
}