/* --------------------------------------------------- */
/* Roll20-specific styling                             */
/* --------------------------------------------------- */

.charsheet {
	background: white;
}

body.sheet-darkmode .charsheet {
	background: #1f1f1f;
}

/* Roll20 Roll Button re-styling, Thanks to Scott C. */

button[type=roll] {
	/* Override Roll20 default styling */
	border: none;
	text-shadow: none;
	line-height: 14px;
	background-image: none;
	box-shadow: none;
	
	/* Set global border radius of 'Roll' buttons here. */
	border-radius: 2px;
	
	/* Set global font weight and size here. */
	font-style: normal;
	font-weight: bold;
	font-size: 13px !important;
}

button[type=roll]::before{
	/* Remove Roll20 d20 */
	content: "" !important;
}

/* --------------------------------------------------- */
/* Browser-specific Styling                            */
/* --------------------------------------------------- */

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
	
	input[type=number]:hover,
	input[type=number]:focus {
		padding-right: 1px;  /* Keeps some numbers from shifting during mouse hover and click. */
	}
	
	input:read-only::-webkit-outer-spin-button,
	input:read-only::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	
	/* Stop Safari from offering to autofill name fields. */
	input::-webkit-contacts-auto-fill-button, 
	input::-webkit-credentials-auto-fill-button {
		visibility: hidden;
		position: absolute;
		top: -50px;
	}
}

@-moz-document url-prefix() {
	/* CSS Statements that only apply on Firefox */

	input[type=number]:hover,
	input[type=number]:focus {
		-moz-appearance: number-input;
		padding-right: 0px;  /* Keeps some numbers from shifting during mouse hover and click. */
	}
	
	input[type=number]:read-only {
		-moz-appearance: textfield;
	} 
	
}

/* ----------------------------------------------------	*/
/* General Styling 										*/
/* ----------------------------------------------------	*/

/* For better color accessibility, the sheet makes		*/
/* frequent use of the Okabe and Ito palette and its	*/
/* tints and shades.									*/
/* 														*/
/* Green: 			#009E73								*/
/* Blue: 			#0072B2 							*/
/* Light blue: 		#4ba6ff 							*/
/* Yellow: 			#F0E442								*/
/* Orange: 			#E69F00								*/
/* Orange-red: 		#D55E00								*/
/* Violet: 			#CC79A7								*/
/* A mid-tone gray:	#8A8A8A								*/
/* 														*/
/* The HERO blue theme is based on:						*/
/* Royal blue: 		#4169E1								*/
/* Dodger blue:		#1E90FF								*/

textarea {
	font-size: 14px;
	resize: none;
}

input {
	font-size: 13px;
	border: hidden;
	border-radius: 2px;
	padding: 0px;
	text-align: center;
}

input[type=number]:focus {
	outline: none;
}

input[type=text]:focus,
	textarea:focus,
	button:focus {
}

input.customCheckbox {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

::selection {
	background: #f2ceb2;
}
::-moz-selection {
	background: #f2ceb2;
}


/* Custom Scrollbars */
/* These don't work in Safari. */

/* First page */
.item-portrait-02,
.item-characteristics-history {
	scrollbar-width: thin;
	scrollbar-color: #a0b4f0 transparent;
}

/* Remaining text areas */
.item-martial-maneuver-block-text,
.item-tab-gear-slide-treasure-text,
.flex-container-talents-notes,
.flex-container-complications-notes,
.item-power-block-text,
.item-talent-block-text,
.item-complication-block-text {
	scrollbar-width: thin;
	scrollbar-color: #78bcff transparent;
}

/* Skill list */

.item-flex-container-skill-list {
	scrollbar-width: thin;
	scrollbar-color: #f0c566 transparent;
}


/* --------------------------------------------------------------- */
/* Custom select used due to differences between Firefox,          */
/* Chrome, and Safari. From:                                       */
/* @link https://moderncss.dev/custom-select-styles-with-pure-css/ */
/* --------------------------------------------------------------- */


select,
select::before,
select::after {
	box-sizing: border-box;
}
	
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0 1em 0 0;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: 12px;
	cursor: inherit;
	line-height: inherit;
	z-index: 1;
	outline: none;
	max-height: 22px;
}

.custom-select,
.custom-select-skill,
.custom-select-alternate,
.custom-select-propulsion,
.custom-select-gear,
.custom-select-option {
	display: grid;
	grid-template-areas: "select";
	align-items: center;
	position: relative;
	max-height: 20px;
	padding: 0px;
	padding-bottom: 1px;
	padding-right: 3px;
	cursor: pointer;
}

.custom-select {
	min-width: 34px;
	padding-left: 0px;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	border: 1px solid #f2cf7f;
	border-radius: 3px;
}

.custom-select-skill {
	margin-top: 2px;
	margin-bottom: 1px;
	max-height: 20px;
	min-width: 34px;
	padding-left: 0px;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	border: 1px solid #f2cf7f;
	border-radius: 3px;
}

.custom-select-alternate {
	min-width: 34px;
	padding-left: 0px;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	border: 1px solid #78bcff;
	border-radius: 3px;
}

.custom-select-propulsion {
	min-width: 76px;
	text-align-last: left;
	border: none;
	background-color: #f4ec7a;
	border-radius: 0px;
}

.custom-select-gear {
	width: 42px;
	padding-left: 4px;
	padding-bottom: 2px;
	margin-right: 18px;
	max-height: 16px;
	border: solid 1px #F0E442;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	border-radius: 3px;
}

.custom-select-option {
	width: 58px;
	padding-left: 4px;
	margin-right: 15px;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	border: 1px solid #f2cf7f;
	border-radius: 3px;
}

.custom-select select,
.custom-select-skill select,
.custom-select-alternate select,
.custom-select-gear select,
.custom-select-option select,
.custom-select-propulsion select,
.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-gear::after,
.custom-select-option::after,
.custom-select-propulsion::after {
	grid-area: select;
}

.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-gear::after,
.custom-select-option::after,
.custom-select-propulsion::after {
	content: "";
	justify-self: end;
	width: 12px;
	height: 8px;
	-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-propulsion::after {
	background-color: #8A8A8A;
}

.select-skill-state-01[value="0"] ~ .custom-select-skill::after,
.select-skill-state-02[value="0"] ~ .custom-select-skill::after,
.select-skill-state-03[value="0"] ~ .custom-select-skill::after,
.select-skill-state-04[value="0"] ~ .custom-select-skill::after,
.select-skill-state-05[value="0"] ~ .custom-select-skill::after,
.select-skill-state-06[value="0"] ~ .custom-select-skill::after,
.select-skill-state-07[value="0"] ~ .custom-select-skill::after,
.select-skill-state-08[value="0"] ~ .custom-select-skill::after,
.select-skill-state-09[value="0"] ~ .custom-select-skill::after,
.select-skill-state-10[value="0"] ~ .custom-select-skill::after,
.select-skill-state-11[value="0"] ~ .custom-select-skill::after,
.select-skill-state-12[value="0"] ~ .custom-select-skill::after,
.select-skill-state-13[value="0"] ~ .custom-select-skill::after,
.select-skill-state-14[value="0"] ~ .custom-select-skill::after,
.select-skill-state-15[value="0"] ~ .custom-select-skill::after,
.select-skill-state-16[value="0"] ~ .custom-select-skill::after,
.select-skill-state-17[value="0"] ~ .custom-select-skill::after,
.select-skill-state-18[value="0"] ~ .custom-select-skill::after,
.select-skill-state-19[value="0"] ~ .custom-select-skill::after,
.select-skill-state-20[value="0"] ~ .custom-select-skill::after,
.select-skill-state-21[value="0"] ~ .custom-select-skill::after,
.select-skill-state-22[value="0"] ~ .custom-select-skill::after,
.select-skill-state-23[value="0"] ~ .custom-select-skill::after,
.select-skill-state-24[value="0"] ~ .custom-select-skill::after,
.select-skill-state-25[value="0"] ~ .custom-select-skill::after,
.select-skill-state-26[value="0"] ~ .custom-select-skill::after,
.select-skill-state-27[value="0"] ~ .custom-select-skill::after,
.select-skill-state-28[value="0"] ~ .custom-select-skill::after,
.select-skill-state-29[value="0"] ~ .custom-select-skill::after,
.select-skill-state-30[value="0"] ~ .custom-select-skill::after,
.select-skill-state-31[value="0"] ~ .custom-select-skill::after,
.select-skill-state-32[value="0"] ~ .custom-select-skill::after,
.select-skill-state-33[value="0"] ~ .custom-select-skill::after,
.select-skill-state-34[value="0"] ~ .custom-select-skill::after,
.select-skill-state-35[value="0"] ~ .custom-select-skill::after,
.select-skill-state-36[value="0"] ~ .custom-select-skill::after,
.select-skill-state-37[value="0"] ~ .custom-select-skill::after,
.select-skill-state-38[value="0"] ~ .custom-select-skill::after,
.select-skill-state-39[value="0"] ~ .custom-select-skill::after,
.select-skill-state-40[value="0"] ~ .custom-select-skill::after,
.select-skill-state-41[value="0"] ~ .custom-select-skill::after,
.select-skill-state-42[value="0"] ~ .custom-select-skill::after,
.select-skill-state-43[value="0"] ~ .custom-select-skill::after,
.select-skill-state-44[value="0"] ~ .custom-select-skill::after,
.select-skill-state-45[value="0"] ~ .custom-select-skill::after,
.select-skill-state-46[value="0"] ~ .custom-select-skill::after,
.select-skill-state-47[value="0"] ~ .custom-select-skill::after,
.select-skill-state-48[value="0"] ~ .custom-select-skill::after,
.select-skill-state-49[value="0"] ~ .custom-select-skill::after,
.select-skill-state-50[value="0"] ~ .custom-select-skill::after {
	background-color: #8A8A8A;
}

.select-skill-state-01[value="1"] ~ .custom-select-skill::after,
.select-skill-state-02[value="1"] ~ .custom-select-skill::after,
.select-skill-state-03[value="1"] ~ .custom-select-skill::after,
.select-skill-state-04[value="1"] ~ .custom-select-skill::after,
.select-skill-state-05[value="1"] ~ .custom-select-skill::after,
.select-skill-state-06[value="1"] ~ .custom-select-skill::after,
.select-skill-state-07[value="1"] ~ .custom-select-skill::after,
.select-skill-state-08[value="1"] ~ .custom-select-skill::after,
.select-skill-state-09[value="1"] ~ .custom-select-skill::after,
.select-skill-state-10[value="1"] ~ .custom-select-skill::after,
.select-skill-state-11[value="1"] ~ .custom-select-skill::after,
.select-skill-state-12[value="1"] ~ .custom-select-skill::after,
.select-skill-state-13[value="1"] ~ .custom-select-skill::after,
.select-skill-state-14[value="1"] ~ .custom-select-skill::after,
.select-skill-state-15[value="1"] ~ .custom-select-skill::after,
.select-skill-state-16[value="1"] ~ .custom-select-skill::after,
.select-skill-state-17[value="1"] ~ .custom-select-skill::after,
.select-skill-state-18[value="1"] ~ .custom-select-skill::after,
.select-skill-state-19[value="1"] ~ .custom-select-skill::after,
.select-skill-state-20[value="1"] ~ .custom-select-skill::after,
.select-skill-state-21[value="1"] ~ .custom-select-skill::after,
.select-skill-state-22[value="1"] ~ .custom-select-skill::after,
.select-skill-state-23[value="1"] ~ .custom-select-skill::after,
.select-skill-state-24[value="1"] ~ .custom-select-skill::after,
.select-skill-state-25[value="1"] ~ .custom-select-skill::after,
.select-skill-state-26[value="1"] ~ .custom-select-skill::after,
.select-skill-state-27[value="1"] ~ .custom-select-skill::after,
.select-skill-state-28[value="1"] ~ .custom-select-skill::after,
.select-skill-state-29[value="1"] ~ .custom-select-skill::after,
.select-skill-state-30[value="1"] ~ .custom-select-skill::after,
.select-skill-state-31[value="1"] ~ .custom-select-skill::after,
.select-skill-state-32[value="1"] ~ .custom-select-skill::after,
.select-skill-state-33[value="1"] ~ .custom-select-skill::after,
.select-skill-state-34[value="1"] ~ .custom-select-skill::after,
.select-skill-state-35[value="1"] ~ .custom-select-skill::after,
.select-skill-state-36[value="1"] ~ .custom-select-skill::after,
.select-skill-state-37[value="1"] ~ .custom-select-skill::after,
.select-skill-state-38[value="1"] ~ .custom-select-skill::after,
.select-skill-state-39[value="1"] ~ .custom-select-skill::after,
.select-skill-state-40[value="1"] ~ .custom-select-skill::after,
.select-skill-state-41[value="1"] ~ .custom-select-skill::after,
.select-skill-state-42[value="1"] ~ .custom-select-skill::after,
.select-skill-state-43[value="1"] ~ .custom-select-skill::after,
.select-skill-state-44[value="1"] ~ .custom-select-skill::after,
.select-skill-state-45[value="1"] ~ .custom-select-skill::after,
.select-skill-state-46[value="1"] ~ .custom-select-skill::after,
.select-skill-state-47[value="1"] ~ .custom-select-skill::after,
.select-skill-state-48[value="1"] ~ .custom-select-skill::after,
.select-skill-state-49[value="1"] ~ .custom-select-skill::after,
.select-skill-state-50[value="1"] ~ .custom-select-skill::after {
	background-color: #1e90ff;
}

.select-skill-state-01[value="2"] ~ .custom-select-skill::after,
.select-skill-state-02[value="2"] ~ .custom-select-skill::after,
.select-skill-state-03[value="2"] ~ .custom-select-skill::after,
.select-skill-state-04[value="2"] ~ .custom-select-skill::after,
.select-skill-state-05[value="2"] ~ .custom-select-skill::after,
.select-skill-state-06[value="2"] ~ .custom-select-skill::after,
.select-skill-state-07[value="2"] ~ .custom-select-skill::after,
.select-skill-state-08[value="2"] ~ .custom-select-skill::after,
.select-skill-state-09[value="2"] ~ .custom-select-skill::after,
.select-skill-state-10[value="2"] ~ .custom-select-skill::after,
.select-skill-state-11[value="2"] ~ .custom-select-skill::after,
.select-skill-state-12[value="2"] ~ .custom-select-skill::after,
.select-skill-state-13[value="2"] ~ .custom-select-skill::after,
.select-skill-state-14[value="2"] ~ .custom-select-skill::after,
.select-skill-state-15[value="2"] ~ .custom-select-skill::after,
.select-skill-state-16[value="2"] ~ .custom-select-skill::after,
.select-skill-state-17[value="2"] ~ .custom-select-skill::after,
.select-skill-state-18[value="2"] ~ .custom-select-skill::after,
.select-skill-state-19[value="2"] ~ .custom-select-skill::after,
.select-skill-state-20[value="2"] ~ .custom-select-skill::after,
.select-skill-state-21[value="2"] ~ .custom-select-skill::after,
.select-skill-state-22[value="2"] ~ .custom-select-skill::after,
.select-skill-state-23[value="2"] ~ .custom-select-skill::after,
.select-skill-state-24[value="2"] ~ .custom-select-skill::after,
.select-skill-state-25[value="2"] ~ .custom-select-skill::after,
.select-skill-state-26[value="2"] ~ .custom-select-skill::after,
.select-skill-state-27[value="2"] ~ .custom-select-skill::after,
.select-skill-state-28[value="2"] ~ .custom-select-skill::after,
.select-skill-state-29[value="2"] ~ .custom-select-skill::after,
.select-skill-state-30[value="2"] ~ .custom-select-skill::after,
.select-skill-state-31[value="2"] ~ .custom-select-skill::after,
.select-skill-state-32[value="2"] ~ .custom-select-skill::after,
.select-skill-state-33[value="2"] ~ .custom-select-skill::after,
.select-skill-state-34[value="2"] ~ .custom-select-skill::after,
.select-skill-state-35[value="2"] ~ .custom-select-skill::after,
.select-skill-state-36[value="2"] ~ .custom-select-skill::after,
.select-skill-state-37[value="2"] ~ .custom-select-skill::after,
.select-skill-state-38[value="2"] ~ .custom-select-skill::after,
.select-skill-state-39[value="2"] ~ .custom-select-skill::after,
.select-skill-state-40[value="2"] ~ .custom-select-skill::after,
.select-skill-state-41[value="2"] ~ .custom-select-skill::after,
.select-skill-state-42[value="2"] ~ .custom-select-skill::after,
.select-skill-state-43[value="2"] ~ .custom-select-skill::after,
.select-skill-state-44[value="2"] ~ .custom-select-skill::after,
.select-skill-state-45[value="2"] ~ .custom-select-skill::after,
.select-skill-state-46[value="2"] ~ .custom-select-skill::after,
.select-skill-state-47[value="2"] ~ .custom-select-skill::after,
.select-skill-state-48[value="2"] ~ .custom-select-skill::after,
.select-skill-state-49[value="2"] ~ .custom-select-skill::after,
.select-skill-state-50[value="2"] ~ .custom-select-skill::after  {
	background-color: #8fc8ff;
}

.custom-select-gear::after,
.custom-select-option::after  {
	background-color: #4ba6ff;
}

select:focus + .focus {
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: inherit;
}

.custom-select--disabled,
.custom-select-skill--disabled,
.custom-select-alternate--disabled,
.custom-select-gear--disabled,
.custom-select-option--disabled,
.custom-select-propulsion--disabled {
	cursor: not-allowed;
	background-color: #eee;
	background-image: linear-gradient(to top, #ddd, #eee 33%);
}

.custom-select-skill {
	width: 64px;
}

/* --------------------------------------------------- */
/* Tab Styling                                         */
/* --------------------------------------------------- */
.tab {
	display: flex;
	justify-content: space-between;
	height:36px;
	padding: 0px;
	widows: 100%;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 680px;
	background: #2e4a9e;
	border: 8px;
	border-bottom: 0px;
	border-radius: 4px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: #2e4a9e;
	border-style: solid;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: #b3c3f3;
	float: left;
	outline: none;
	cursor: pointer;
	padding: 10px 10px;
	margin-right: 0px;
	font-size: 18px;
	border: none;
	border-bottom: solid 3px #2e4a9e;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #F0E442;
	border-bottom: solid 3px #2e4a9e;
}

/* Create an active/current tab class */
.tab button.active {
	background-color: #F0E442;
}

/* show the selected tab */
.sheet-tabs-toggle[value="characteristics"] ~ .tab .button-tab[name="act_characteristics"],
.sheet-tabs-toggle[value="gear"] ~ .tab .button-tab[name="act_gear"],
.sheet-tabs-toggle[value="skills"] ~ .tab .button-tab[name="act_skills"],
.sheet-tabs-toggle[value="powers"] ~ .tab .button-tab[name="act_powers"],
.sheet-tabs-toggle[value="complications"] ~ .tab .button-tab[name="act_complications"],
.sheet-tabs-toggle[value="options"] ~ .tab .button-tab[name="act_options"] {
	background-color: #4169e1;
	color: white;
	border: none;
	border-bottom: solid 3px #4169e1;
}

/* --------------------------------------------------- */
/* Configure sheet and tab buttons                     */
/* --------------------------------------------------- */
.sheet-characteristics,
.sheet-skills,
.sheet-powers,
.sheet-complications,
.sheet-gear,
.sheet-options {
	display: none;
	width: 680px;
	background: #2e4a9e;
	border: 8px;
	border-top: 6px;
	border-color: #2e4a9e;
	border-style: solid;
}

/* show the selected tab */
.sheet-tabs-toggle[value="characteristics"] ~ div.sheet-characteristics,
.sheet-tabs-toggle[value="gear"] ~ div.sheet-gear,
.sheet-tabs-toggle[value="skills"] ~ div.sheet-skills,
.sheet-tabs-toggle[value="powers"] ~ div.sheet-powers,
.sheet-tabs-toggle[value="complications"] ~ div.sheet-complications,
.sheet-tabs-toggle[value="options"] ~ div.sheet-options {
	display: block;
}

/* Bottom border radius based on Tally Bar visibility. */

.sheet-tally-toggle[value="true"] ~ div.sheet-characteristics,
.sheet-tally-toggle[value="true"] ~ div.sheet-skills,
.sheet-tally-toggle[value="true"] ~ div.sheet-powers,
.sheet-tally-toggle[value="true"] ~ div.sheet-complications,
.sheet-tally-toggle[value="true"] ~ div.sheet-gear,
.sheet-tally-toggle[value="true"] ~ div.sheet-options {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.sheet-tally-toggle[value="false"] ~ div.sheet-characteristics,
.sheet-tally-toggle[value="false"] ~ div.sheet-skills,
.sheet-tally-toggle[value="false"] ~ div.sheet-powers,
.sheet-tally-toggle[value="false"] ~ div.sheet-complications,
.sheet-tally-toggle[value="false"] ~ div.sheet-gear,
.sheet-tally-toggle[value="false"] ~ div.sheet-options {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* Styling for characteristics tab labels */
.sheet-characteristics label {
	display:inline-block;
	font-size: 13px;
}

/* --------------------------------------------------- */
/* Tally Bar styling                                   */
/* --------------------------------------------------- */

.sheet-tally-toggle[value="true"] ~ div.sheet-tallybar {
	display: block;
}

.sheet-tally-toggle[value="false"] ~ div.sheet-tallybar {
	display: none;
}

.sheet-tallybar {
	width: 680px;
	background: #2e4a9e;
	border: 8px;
	border-top: 0px;
	border-radius: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-color: #2e4a9e;
	border-style: solid;
}

.sheet-flex-tallybar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-evenly;
	width: 670px;
	height: 25px;
	border: 2px solid #6787e7;
	border-radius: 0px;
	background: royalblue;
	margin: 0px;
	padding-top: 6px;
	padding-left: 3px;
	padding-right: 3px;
}

.sheet-flex-tallybar span {
	color: white;
}

.sheet-flex-tallybar input[type=number] {
	min-width: 42px;
	text-align: right;
	padding-right: 0px;
	margin-bottom: 1px;
}

.sheet-flex-tallybar input[type=number]:hover,
.sheet-flex-tallybar input[type=number]:focus {
	padding-right: 0px;  /* Keeps some numbers from shifting during mouse hover and click. Both webkit and moz. For some reason. */
}

.sheet-flex-tallybar input[readonly] {
	background: #f4ec7a;
	padding-right: 0px;
	min-width: 38px;
	max-width: 42px;
	text-align: center;
}

/* Tally Method */
.tally-net,
.tally-spent {
	display: none;
}

.tally-method[value="net"] ~ div.tally-net {
	display: block;
	position: relative;
}

.tally-method[value="spent"] ~ div.tally-spent {
	display: block;
	position: relative;
}

/* --------------------------------------------------- */
/* Characteristics Tab styling                         */
/* --------------------------------------------------- */

.grid-container-tab-characteristics {
	display: grid;
	grid-template-areas: "leftGrid rightGrid";
	grid-template-columns: 335px 335px;
	max-width: 676px;
	height: 803px;
	font-size: 16px;
	grid-gap: 5px;
	background-color: royalblue;
	border: 2px solid #6787e7;
	border-radius: 0px;
	margin-bottom: 0px;
}

.grid-container-tab-characteristics input[readonly]{
	background: #f4ec7a;
}

/* Vehicle versus Standard Sheet Display */
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-earnings,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-primary-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-combat-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-movement-abilities,
.sheet-health-display[value="standard"] ~ div.item-characteristics-health:nth-child(3),
.sheet-health-display[value="standard"] ~ div.item-gear-health:nth-child(9),
.sheet-health-display[value="standard"] ~ div.item-powers-health:nth-child(3),
.sheet-health-display[value="vehicle"] ~ div.item-characteristics-health:nth-child(4),
.sheet-health-display[value="vehicle"] ~ div.item-gear-health:nth-child(10),
.sheet-health-display[value="vehicle"] ~ div.item-powers-health:nth-child(4),
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-size-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-primary-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-systems-draw,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-systems,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-propulsion-systems {
	display: flex;
}

.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-earnings,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-primary-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-combat-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-movement-abilities,
.sheet-health-display[value="vehicle"] ~ div.item-characteristics-health:nth-child(3),
.sheet-health-display[value="vehicle"] ~ div.item-gear-health:nth-child(9),
.sheet-health-display[value="vehicle"] ~ div.item-powers-health:nth-child(3),
.sheet-health-display[value="standard"] ~ div.item-characteristics-health:nth-child(4),
.sheet-health-display[value="standard"] ~ div.item-gear-health:nth-child(10),
.sheet-health-display[value="standard"] ~ div.item-powers-health:nth-child(4),
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-size-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-primary-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-draw,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-systems,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-propulsion-systems {
	display: none;
}

/* characteristics tab left side */

.grid-container-characteristics-leftGrid {
	grid-area: leftGrid;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 5px;
}

.grid-container-characteristics-leftGrid  h1 {
	padding-left: 0px;
	padding-top: 5px;
	padding-bottom: 0px;
	margin: 0px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.40;
	min-width: 54px;
}

.grid-container-characteristics-leftGrid  h2 {
	height: 20px;
	line-height: 1.6;
	margin-left: 5px;
	margin-bottom: 0px;
	margin-top: 2px;
	font-size: 13px;
	font-style: normal;
}

.item-characteristics-bio {	
	max-width: 330px;
	height: 156px;
	margin-bottom: 4px;
	align-items: left;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/HeroSystemGraphic.png?raw=true");	
}

.item-characteristics-bio .item-name input[type=text] {
	font-family: Helvetica, Arial, sans-serif;
	background: transparent;
	font-size: 32px;
	font-weight: 400;
	text-align: left;
	margin-left: 7px;
	margin-top: 17px;
	margin-bottom: 0px;
	width: 217px;
	color: #eef7fc;
	line-height: 1.0;
	
	&:focus {
		background-color: #6787e7;
		outline: none;
	}
	
	&:hover {
		color: white;
	}
	
	&::placeholder {
		color: white;
		opacity: 0.25;
	}
}

.item-characteristics-bio .item-title input[type=text] {
	font-family: Helvetica, Arial, sans-serif;
	background: transparent;
	font-size: 22px;
	text-align: left;
	margin-left: 8px;
	margin-top: -1px;
	width: 216px;
	color: #d9e1f9;
	line-height: 1.0;
	
	&:focus {
		background-color: #6787e7;
		outline: none;
	}
	
	&:hover {
		color: white;
	}
	
	&::placeholder {
		color: white;
		opacity: 0.25;
	}
}

.item-characteristics-bio textarea {
	width: 215px;
	max-height: 72px;
	padding: 0px;
	margin-top: 8px;
	margin-left: 9px;
	border: none;
	text-align: left;
	background: transparent;
	color: #d9e1f9;
	font-size: 15px;
	overflow: hidden;
	line-height: 1.1;
	
	&:focus {
		background-color: #6787e7;
		outline: none;
	}
	
	&:hover {
		color: white;
	}
	
	&::placeholder {
		color: white;
		opacity: 0.25;
	}
}

.item-earnings,
.item-characteristics-vehicle-size-attributes,
.item-characteristics-vehicle-power-draw {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 2px;
	margin-left: 6px;
	max-height: 27px;
	min-height: 27px;
	padding-top: 1px;
	min-width: 313px;
	background: #c6d2f6;
	border: solid 1px #8da5ed;
	border-bottom: solid 2px #8da5ed;
	border-radius: 3px;
}

.item-earnings {
	padding-left: 5px;
	padding-right: 4px;
	margin-bottom: 6px;
}

.item-characteristics-vehicle-size-attributes {
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 6px;
}

.item-characteristics-vehicle-power-draw {
	margin-bottom: 1px;
}

.item-earnings h1,
.item-earnings input[type=text] {
	font-size: 13px;
	line-height: 1em;
	text-align: left;
	font-weight: bold;	
	background: transparent;
	padding: 0px;
	margin: 0px;
	color: black;
}

.item-earnings input[type=text] {
	max-width: 104px;
	min-width: 104px;
	text-align: right;
	margin-left: 4px;
		
	&:focus {
		background-color: #d9e1f9;
		outline: none;
	}
	
	&:hover {
		color: white;
	}
}

.item-earnings input[type=number] {
	padding: 0px;
	font-size: 14px;
	line-height: 1em;
	text-align: center;
	color: black;
	text-align: right;
	background: transparent;
	
	&:focus {
		background-color: #d9e1f9;
		outline: none;
	}
	
	&:hover {
		background-color: #f9f4b3;
	}
}

.item-earnings input[type=number]:nth-child(2)  {
	max-width: 52px;
	min-width: 52px;
}

.item-earnings input[type=number]:nth-child(4) {
	max-width: 68px;
	min-width: 68px;
}


/* Characteristic block */
.item-characteristics-attributes {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: 330px;
	height: 634px;
}

/* Vehicle Size Block */

.item-characteristics-size-attributes-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	min-width: 318px;}

.item-characteristics-size-attributes-row input[readonly] {
	padding-right: 0px;
	border: none; 
	background: transparent;
	
	&:focus {
		outline: none;
	}
}

.item-characteristics-size-attributes-row input[readonly]:nth-child(2) {
	max-width: 48px;
}

.item-characteristics-size-attributes-row input[readonly]:nth-child(4) {
	max-width: 48px;
}

.item-characteristics-size-attributes-row input[readonly]:nth-child(6) {
	max-width: 26px;
}

.item-characteristics-size-attributes-row input[readonly]:nth-child(8) {
	max-width: 26px;
}

/* Item: core abilities */
.item-characteristics-primary-attributes,
.item-characteristics-vehicle-primary-attributes {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	min-width: 300px;
	margin-left: 6px;
	background-color: #f4ec7a; 
	border: solid 1px #ebb232;
	border-bottom: solid 2px #ebb232;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding-bottom: 6px;
}

.item-characteristics-primary-attributes {
	min-height: 168px;
	max-height: 168px;
}

.item-characteristics-vehicle-primary-attributes {
	min-height: 237px;
	max-height: 237px;
	margin-bottom: 3px;
}

.item-characteristics-primary-attributes input[readonly],
.item-characteristics-combat-attributes input[readonly],
.item-characteristics-movement-abilities input[readonly],
.item-characteristics-vehicle-primary-attributes input[readonly],
.item-characteristics-vehicle-movement-abilities input[readonly] {
	text-align: center;
	padding-right: 0px;
	border: none; 
	max-width: 26px;
	
	&:focus {
		outline: none;
	}
}

.item-characteristics-primary-attributes input[type=number],
.item-characteristics-combat-attributes input[type=number],
.item-characteristics-movement-abilities input[type=number],
.item-characteristics-vehicle-primary-attributes input[type=number],
.item-characteristics-vehicle-movement-abilities input[type=number] {
	text-align: right;
	padding-right: 0px;
	margin-left: 0px;
	border: solid 1px transparent;
	margin-right: 0px;
	max-width: 44px;
	background: transparent;
	
	&:focus {
		background-color: #f9f4b3;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.item-characteristics-primary-attributes-heading,
.item-characteristics-primary-attributes-row,
.item-characteristics-combat-attributes-heading,
.item-characteristics-combat-attributes-row,
.item-characteristics-movement-abilities-heading,
.item-characteristics-movement-abilities-row  {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	min-width: 285px;
}

.item-characteristics-primary-attributes-heading,
.item-characteristics-combat-attributes-heading,
.item-characteristics-movement-abilities-heading {
	border-top: solid 1px #ebb232;
	background-color: #f0c566;
	border-bottom: solid 1px #ebb232;
	max-height: 22px;
	padding-left: 0px;
	padding-right: 4px;
}

.item-characteristics-primary-attributes-row,
.item-characteristics-combat-attributes-row,
.item-characteristics-movement-abilities-row {
	max-height: 20px;
	padding-left: 5px;
	padding-right: 4px;
}

.item-characteristics-primary-attributes-heading h2 {
	margin-bottom: 0px;
}

.item-characteristics-primary-attributes-heading h2:nth-child(1),
.item-characteristics-combat-attributes-heading h2:nth-child(1),
.item-characteristics-movement-abilities-heading h2:nth-child(1) {
	width: 108px;
}

.item-characteristics-primary-attributes-heading h2:nth-child(2),
.item-characteristics-combat-attributes-heading h2:nth-child(2),
.item-characteristics-movement-abilities-heading h2:nth-child(2) {
	width: 18px;
}

.item-characteristics-primary-attributes-heading h2:nth-child(3),
.item-characteristics-combat-attributes-heading h2:nth-child(3),
.item-characteristics-movement-abilities-heading h2:nth-child(3) {
	text-align: center;
	width: 40px;
}

.item-characteristics-primary-attributes-heading h2:nth-child(4),
.item-characteristics-primary-attributes-heading h2:nth-child(5),
.item-characteristics-combat-attributes-heading h2:nth-child(4),
.item-characteristics-combat-attributes-heading h2:nth-child(5),
.item-characteristics-movement-abilities-heading h2:nth-child(4),
.item-characteristics-movement-abilities-heading h2:nth-child(5) {
	width: 35px;
	text-align: center;
}

.item-characteristics-primary-attributes-heading h2:nth-child(6),
.item-characteristics-combat-attributes-heading h2:nth-child(6),
.item-characteristics-movement-abilities-heading h2:nth-child(6) {
	width: 25px;
	text-align: center;
}

.item-characteristics-primary-attributes-row input[type=text]:nth-child(1),
.item-characteristics-combat-attributes-row input[type=text]:nth-child(1),
.item-characteristics-movement-abilities-row input[type=text]:nth-child(1) {
	min-width: 29px;
	font-size: 16px;
	text-align: center;
	font-weight: 500;
	color: white;
	background-color: #7c7c7c;
}

.item-characteristics-primary-attributes-row h2:nth-child(2),
.item-characteristics-combat-attributes-row h2:nth-child(2),
.item-characteristics-movement-abilities-row h2:nth-child(2) {
	width: 100px;
	text-align: left;
}

.item-characteristics-vehicle-primary-attributes .item-characteristics-primary-attributes-row:nth-child(2) h2:nth-child(4),
.item-characteristics-vehicle-primary-attributes .item-characteristics-primary-attributes-row:nth-child(2) h2:nth-child(5) {
	width: 35px;
}

/* Item: combat abilities */
.item-characteristics-combat-attributes {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 300px;
	min-height: 297px;
	max-height: 297px;
	margin-left: 6px;
	background-color: #f4ec7a; 
	border: solid 1px #ebb232;
	border-bottom: none;
	border-top: none;
	padding-bottom: 6px;
}

.item-characteristics-combat-attributes-heading,
.item-characteristics-movement-abilities-heading {
	padding-bottom: 1px;
}

.item-characteristics-combat-attributes-row h2:nth-child(5) {
	width: 32px;
}

/* Item: combat movement abilities */
.item-characteristics-movement-abilities {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 300px;
	margin-left: 6px;
	margin-bottom: 1px;
	padding-bottom: 6px;
	background-color: #f4ec7a; 
	border: solid 1px #ebb232;
	border-top: none;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.item-characteristics-movement-abilities {
	min-height: 98px;
	max-height: 98px;
}

.item-characteristics-movement-abilities-row input[type=text]:nth-child(5) {
	margin-left: 6px;
	margin-right: 5px;
}

/* Item: vehicle propulsion systems */
.item-characteristics-vehicle-power-systems,
.item-characteristics-vehicle-propulsion-systems {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 324px;
	margin-left: 6px;
	margin-bottom: 3px;
	padding: 0px;
	background-color: transparent;
}

.item-characteristics-vehicle-power-systems {
	min-height: 116px;
	max-height: 116px;
}

.item-characteristics-vehicle-propulsion-systems {
	min-height: 157px;
	max-height: 157px;
}

.item-characteristics-power-system,
.item-characteristics-propulsion-system {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.item-characteristics-power-system input[type=text],
.item-characteristics-propulsion-system input[type=text] {
	font-size: 13px;
	max-width: 148px;
	text-align: center;
	background-color: transparent;
	color: white;
	font-weight: bold;
	margin-top: 2px;
	
	&::placeholder {
		opacity: 1;
		color: white;
	}
	
	&:focus::placeholder {
		color: transparent;
	}
}

.item-characteristics-propulsion-system-essentials,
.item-characteristics-propulsion-system-more {
	flex-direction: column;
	justify-content: space-between;
	max-width: 146px;
	min-height: 68px;
}

.item-characteristics-power-system-block,
.item-characteristics-propulsion-system-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2px;
	padding-bottom: 3px;
	gap: 2px;
	min-width: 153px;
}

.item-characteristics-power-system-block {
	background-color: #c6d2f6;
	border: solid 1px #8da5ed;
	border-bottom: solid 2px #8da5ed;
	min-height: 85px;
	max-height: 85px;
}

.item-characteristics-propulsion-system-block {
	background-color: #f4ec7a; 
	border: solid 1px #ebb232;
	border-bottom: solid 2px #ebb232;
	min-height: 126px;
	max-height: 126px;
}

.item-characteristics-power-system-row,
.item-characteristics-propulsion-system-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: transparent;
	align-items: baseline;
	padding-left: 3px;
	padding-right: 1px;
	gap: 6px;
	width: 148px;
	min-height: 20px;
	max-height: 20px;
}

.item-characteristics-power-system-row input[type=number],
.item-characteristics-propulsion-system-row input[type=number] {
	text-align: right;
	font-weight: normal;
	margin: 0px;
	margin-bottom: 2px;
	margin-left: 1px;
	padding: 0px;
	max-width: 43px;
	border: none;
	background-color: transparent;
}

.item-characteristics-power-system-row h2,
.item-characteristics-propulsion-system-row h2 {
	margin: 0px;
	font-size: 13px;
	text-align: left;
}

.item-characteristics-power-system-row input[readonly],
.item-characteristics-propulsion-system-row input[readonly] {
	text-align: center;
	padding-right: 0px;
	border: none; 
	width: 26px;
	color: #1b1b1b;
	background-color: transparent;
	
	&:focus {
		outline: none;
	}
}

.item-characteristics-propulsion-system-row input[type=text]:first-child {
	min-width: 29px;
	font-size: 16px;
	text-align: center;
	font-weight: 500;
	color: white;
	background-color: #7c7c7c;
}

.item-characteristics-system-heading {
	display: grid;
	align-items: baseline;
	min-height: 20px;
	max-height: 20px;
}

.subitem-characterstics-system-heading-deletebox,
.subitem-characterstics-system-heading-text {
	grid-column: 1;
	grid-row: 1;
}

.item-characteristics-propulsion-system-row .container-checkbox-small {
	top: -13px;
	left: 0px;
	padding: 0px;
	margin: 0px;
}

/* System subitems */

.subitem-characteristics-system-cost {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	max-width: 50px;
}

.subitem-characteristics-system-cost h2 {
	font-size: 13px;
	font-weight: bold;
}

.subitem-characteristics-system-cost input[type=text] {
	font-size: 13px;
	font-weight: bold;
}

.subitem-characteristics-system-value {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	min-width: 71px;
}

.item-characteristics-power-system-row .custom-select-alternate {
	top: -1px;
	padding-left: 3px;
	padding-bottom: 3px;
	margin: 0px;
	max-height: 17px;
	text-align-last: center;
}

.item-characteristics-power-system-row .custom-select-alternate {
	width: 40px;
	border: solid 1px #8da5ed;
}

.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:first-child {
	padding-top: 1px;
}

.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:nth-child(2) {
	padding-bottom: 2px;
}

.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(4) .custom-select-propulsion,
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion {
	min-width: 40px;
}

.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row .custom-select-propulsion {
	min-width: 90px;
}

.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:nth-child(3) .custom-select-propulsion {
	min-width: 70px;
}

.item-characteristics-power-system-block textarea,
.item-characteristics-propulsion-system-block textarea {
	width: 148px;
	padding: 2px;
	margin-top: 4px;
	border: none;
	text-align: left;
	background: transparent;
	color: #373737;
	font-size: 13px;
	overflow: hidden;
	line-height: 1.2;
}

.item-characteristics-power-system-block textarea {
	min-height: 30px;
}

.item-characteristics-propulsion-system-block textarea {
	min-height: 46px;
}

.item-characteristics-power-system-block textarea {
	&:focus {
		background-color: #d9e1f9;
		outline: none;
	}
	
	&:hover {
		background-color: #d9e1f9;
	}
	
	&::placeholder {
		opacity: 0.25;
	}
}

.item-characteristics-propulsion-system-block textarea {
	&:focus {
		background-color: #f7f1a0;
		outline: none;
	}
	
	&:hover {
		background-color: #f7f1a0;
	}
	
	&::placeholder {
		opacity: 0.5;
	}
}

/* Propulsion Mode Movement Values */
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(3),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(4),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(5),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(6) {
	display: none;
}

.primary-propulsion-details[value="standard"] ~ div.item-characteristics-propulsion-system-row:nth-child(3),
.primary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(4),
.primary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(5),
.primary-propulsion-details[value="teleport"] ~ div.item-characteristics-propulsion-system-row:nth-child(6),
.secondary-propulsion-details[value="standard"] ~ div.item-characteristics-propulsion-system-row:nth-child(3),
.secondary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(4),
.secondary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(5),
.secondary-propulsion-details[value="teleport"] ~ div.item-characteristics-propulsion-system-row:nth-child(6) {
	display: flex;
}

.primary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.primary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.secondary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.secondary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion {
	display: none;
}

/* Show additional modifiers for propulsion systems */
.show-primary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-essentials,
.show-primary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-more,
.show-secondary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-essentials,
.show-secondary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-more {
	display: flex;
}

.show-primary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-essentials,
.show-primary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-more,
.show-secondary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-essentials,
.show-secondary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-more {
	display: none;	
}

/* characteristics tab right side */
.grid-container-characteristics-rightGrid {
	grid-area: rightGrid;
	display: grid;
	grid-template-areas:
	"portrait health"
	"turnSegmentIndicators turnTracker"
	"perception perception"
	"history history";
	grid-template-columns: 264px 68px;
	grid-template-rows: 260px 24px 102px 419px;
	background: royalblue;
	max-height: 800px;
	max-width: 328px;
}


/* Item: character portrait graphic */
.item-characteristics-portrait {
	grid-area: portrait;
	position: relative;
	max-width: 252px;
	padding: 0px;
	height: 250px;
	margin: 3px;
	margin-left: 2px;
	margin-top: 4px;
	background-color: #5478e4;
}

.item-characteristics-portrait textarea {
	width: 242px;
	margin-left: 0px;
	margin-right: 5px;
	margin-bottom: 4px;
	background-color: #c6d2f6;
	height: 242px;
	font-size: 14px;
	border-radius: 0px;
}

.item-characteristics-portrait img {
	width: 100%;
	height: auto;
	margin-left: 0px;
	border-right: solid #959595 1px;
	border-bottom: solid #959595 1px;
	border-left: solid #adadad 1px;
	border-top: solid #adadad 1px;
	color: white;
}

.item-characteristics-portrait img:not([src]) {
	font-size: 0;
	position: relative;
	top: 0%;
	left: 0%;
}

.item-characteristics-portrait img:not([src]):after {  
	content: attr(alt);
	position: absolute;
	top: 92px;
	left: 0%;
	width: 248px;
	height: 25px;
	font-size: 16px;
	text-align: center;
}

.item-characteristics-portrait .button-left-arrow,
.item-characteristics-portrait .button-right-arrow {
	position: absolute;
	transform: translate(-50%, -50%);
	color: transparent;
	background-color: transparent;
	font-size: 16px;
	padding: 12px 12px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	text-align: center;
}

.item-characteristics-portrait .button-left-arrow {
	top: 50%;
	left: 8%;
}

.item-characteristics-portrait .button-right-arrow {
	top: 50%;
	left: 92.3%;
}

.item-characteristics-portrait .button-right-arrow:hover,
.item-characteristics-portrait .button-left-arrow:hover {
	background-color: #F0E442;
	border: solid 1px #E69F00;	
}


/* By deafult, hides all portrait images. Add more numbered entries to add more images, notes, or cards. */
.item-portrait-00, 
.item-portrait-01,
.item-portrait-02 {
	display: none;
}

/* show the selected portrait frame. Add more numbered entries to add more images, notes, or cards. */
.item-portrait-slideshow[value="0"] ~ div.item-portrait-00,
.item-portrait-slideshow[value="1"] ~ div.item-portrait-01,
.item-portrait-slideshow[value="2"] ~ div.item-portrait-02 {
	display: block;
	position: relative;
}

/* Alternate styling for rule cards instead of portraits */
.item-portrait-00 {
	background-color: white;
	border: solid 1px #8A8A8A;
	height: 250px;
	width: 249px;
	margin-left: 1px;
}

.item-portrait-00 h1 {
	font-size: 16px;
	color: white;
	text-align: center;
	padding-left: 0px;
	background-color: crimson;
}

.item-portrait-flex-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-height: 240px;
	padding: 0px;
}

.item-portrait-rule-description {
	max-width: 250px;
	margin: 0px;
	padding: 0px;
	line-height: 1.0;
}

.item-portrait-rule-description h1 {
	font-size: 16px;
	color: firebrick;
	text-align: center;
	padding-left: 4px;
	background-color: inherit;
	line-height: 1.4;
	padding-bottom: 0px;
}

.item-portrait-rule-description p {
	font-size: 13px;
	padding: 4px;
	margin: 0px;
	text-align: left;
	line-height: 1.2;
}

/* Item: health status                                     */
/* Item: gear tab health status                            */
/* Sheet worker used to synchronizes the contents of each  */

.item-characteristics-health,
.item-gear-health {
	padding: 0px;
	width: 68px;
	background: royalblue;
	border: white;
	margin-top: 4px;
	margin-right: 2px;
	height: 250px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.item-characteristics-health  {
	grid-area: health;
}

.item-gear-health {
	grid-area: gearHealth;
}

.item-gear-health h2,
.item-characteristics-health h2,
.item-powers-health h2 {
	color: white;
	background-color: inherit;
	text-align: center;
	font-size: 17px;
	line-height: 1.0em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.item-health-stat {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 63px;
	height: 30px;
	border-radius: 3px;
	align-items: center;
	padding: 0px;
	margin-right: 1px;
	margin-bottom: 2px;
	background-color: #F0E442;
	border: solid 1px #ebb232;
}

.item-health-stat-enclosure {
	padding: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 57px;
}

.item-health-stat-plus-minus-enclosure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-height: 20px;
	width: 20px;
	align-items: center;
	padding: 1px;
}

.item-health-stat input[type=text] {
	max-width: 45px;
	height: 30px;
	font-size: 20px;
	background-color: #F0E442;
}

.item-health-stat input[type=text]:focus{
	outline: transparent;
}

.item-health-stat button.buttonPlus,
.item-health-stat button.buttonMinus {
	background-color: LemonChiffon;
	border: solid 1px slategray;
	color: slategray;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	display: inline-block;
	font-size: 16px;
	margin: 0px 0px;
	line-height: 1.4ch;
	border-radius: 0px;
}

.item-health-stat button.buttonPlus span,
.item-health-stat button.buttonMinus span {
	display: inline-block;
	transform: rotate(-90deg);
	text-align: center;
}

.item-health-stat button.buttonPlus:hover,
.item-health-stat button.buttonMinus:hover {
	background-color: gray;
	color: white;
	transition: 0.05s;
}

.item-health-selection-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 3px;
}

/* Maneuver modifier line */
.item-maneuver-button-line h2 {
	font-size: 14px;
	max-height: 20px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	line-height: 1.0em;
}

.item-maneuver-modifier {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 48px;
	height: 20px;
	align-items: center;
	background-color: white;
	border: solid 1px #359bff;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.item-maneuver-modifier input[type=text]{
	max-width: 17px;
	height: 18px;
	font-size: 14px;
	margin: 0px;
	background-color: transparent;
	text-align: right;
}

.item-maneuver-modifier input[type=text]:focus{
	outline: transparent;
}

.item-maneuver-modifier input[readonly] {
	max-width: 16px;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-right: 1px;
	height: 18px;
	font-size: 8px;
	background-color: transparent;
}

/* Item: Turn Tracker Button Space */

.item-characteristics-turn-tracker {
	grid-area: turnTracker;
	width: 64px;
	height: 22px;
	padding: 0px;
	padding-left: 2px;
}

/* Item: character history */
.item-characteristics-history {
	grid-area: history;
	text-align: left;
	padding: 2px;
	max-width: 343px;
	background-color: inherit;
	margin-right: 6px;
	max-height: 399px;
	margin-bottom: 6px;
}

.item-characteristics-history textarea {
	width: 316px;
	height: 100%;
	border: solid 1px #c4c4c4;
}

/* Item: Speed Phase Indicator Buttons */
.item-characteristics-speedIndicatorButtons {
	grid-area: speedIndicatorButtons;
	padding-left: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: royalblue;
	width: 264px;
	margin: 0px;
}

/* Item: Perception */
.item-characteristics-perception {
	grid-area: perception;
	max-width: 326px;
	background-color: inherit;
	max-height: 95px;
	margin-left: 2px;
	border: transparent;
	margin-top: 0px;
}

.item-characteristics-perception h1 {
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
	background-color: royalblue;
	color: white;
}

.subitem-characteristics-perception-row-container {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	margin-top: 2px;
}

.subitem-characteristics-perception-stat-container {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	background-color: inherit;
	padding-left: 0px;
	align-items: center;
}

.subitem-characteristics-perception-stat-container input[type=text] {
	font-size: 13px;
	max-width: 65px;
	text-align: center;
	background-color: transparent;
	color: white;
	font-weight: bold;
	margin-top: 2px;
	
	&::placeholder {
		opacity: 1;
		color: white;
	}
	
	&:focus::placeholder {
		color: transparent;
	}
}

.subitem-characteristics-perception-column-container-first,
.subitem-characteristics-perception-column-container {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 1px;
	padding-bottom: 3px;
	align-items: center; 
	background: #c6d2f6;
	border: solid 1px #8da5ed;
	border-bottom: solid 2px #8da5ed;
	border-radius: 2px;
}

.subitem-characteristics-perception-column-container-first {
	width: 72px;
}

.subitem-characteristics-perception-column-container {
	width: 60px;
}

.item-characteristics-perception input[type=number] {
	text-align: right;
	font-weight: bold;
	margin: 0px;
	margin-bottom: 2px;
	margin-left: 2px;
	padding: 0px;
	max-width: 36px;
	background-color: white;
	border: solid 1px #8da5ed;
}

.subitem-characteristics-perception-column-container-first input[type=text],
.subitem-characteristics-perception-column-container input[type=text] {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	padding: 0px;
	margin: 0px;
	margin-bottom: 2px;
	max-width: 20px;
	color: black;
	background-color: #c6d2f6;
}

/* --------------------------------------------------- */
/* Options Tab                                         */
/* --------------------------------------------------- */

.grid-container-tab-options {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-size: 16px;
	background-color: royalblue;
	border: 2px solid #6787e7;
	border-radius: 0px;
	margin-bottom: 0px;
	min-height: 802px;
	min-width: 676px;
}

.grid-container-tab-options h1 {
	font-size: 14px;
	margin: 0px;
	color: black;
	font-weight: 400;
}

.grid-container-tab-options h2 {
	font-size: 18px;
	text-align: center;
	font-weight: 400;
	color: black;
}

.grid-container-tab-options label {
	max-width: 13px;
	padding: 8px;
}

.item-options-title {
	width: 450px;
	height: 26px;
	margin-left: 0px;
	align-items: bottom;
	margin-bottom: 2px;
	maring-left: -6px;
}

/* Sub-Item: options */
.item-options {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 2px;
	padding-top: 2px;
	padding-bottom: 15px;
	width: 450px;
	margin: 0px;
	margin-left: 110px;
	margin-bottom: 45px;
	background-color: #f7f1a0;
	border: solid 2px #f0c566;
	border-radius: 3px;
}

.item-options-row{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: baseline;
	min-width: 400px;
	max-height: 28px;
}

.item-options-row {
	margin-left: 12px;
}

.item-options-row input[type=text]{
	max-width: 22px;
	max-height: 22px;
	font-size: 16px;
	color: black;
	border: 1px solid #f0c566;
	margin-right: 7px;
	margin-left: -1px;
}

/* Thematic breaks */
.item-thematic-break {
	display: block;
	border: 0px;
	height: 26px;
	width: auto;
	margin-left: -2px;
	margin-top: 10px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/ThematicBreak.png?raw=true");	
	background-position: center;
	background-repeat: no-repeat;
}

.item-thematic-break-alt {
	display: block;
	border: 0px;
	height: 26px;
	width: auto;
	margin-left: -2px;
	margin-top: 10px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/ThematicBreakAlt.png?raw=true");	
	background-position: center;
	background-repeat: no-repeat;
}


/* --------------------------------------------------- */
/* Version Info                                        */
/* --------------------------------------------------- */

.item-version-row {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	margin-right: 3px;
}

.item-version-label h2 {
	font-size: 13px;
	color: #a0b4f0;
	height: 20px;
}

.item-version-information input[readonly] {
	background-color: transparent;
	color: #a0b4f0;
	max-width: 35px;
	height: 20px;
	margin-bottom: 1px;
}


/* --------------------------------------------------- */
/* Custom buttons                                      */
/* --------------------------------------------------- */

.button {
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition-duration: 0.2s;
	text-align: center;
}

.buttonRecover,
.buttonReset,
.buttonTracker {
	padding: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-right: 1px;
	align-content: center;
	vertical-align: middle;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	border-radius: 2px;
}
	
.buttonRecover {
	background-color: #19a781;
	max-width: 61px;
	min-width: 61px;
	margin-bottom: 1px;
}

.buttonReset {
	background-color: #E69F00;
	max-width: 61px;
	min-width: 61px;
}

.buttonTracker {
	background-color: #90A8EE;
	max-width: 51px;
	min-width: 51px;
}

.buttonRollPower,
.button-Power-END,
.button-system-more {
	padding-top: 2px;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 2px;
	min-width: 34px;
	max-width: 35px;
	min-height: 16px;
	max-height: 16px;
	text-align: middle;
	font-weight: bold;
	border-radius: 2.5px;
	margin-right: 0px;
}

.buttonRoll,
.buttonRollAttack,
.buttonRollActivate,
.buttonRollNormalAttack,
.buttonShow,
.buttonManeuverEND,
.buttonRollPowerArmor {
	padding-left: 3px;
	padding-right: 3px;
	text-align: center;
	line-height: 13px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	max-height: 16px;
	min-height: 16px;
}

.buttonRoll,
.buttonRollAttack,
.buttonRollActivate {
	min-width: 25px;
	max-width: 26px;
}

.buttonRollPower {
	min-width: 32px;
	max-width: 34px;
}

.buttonRollPowerArmor {
	min-width: 48px;
	max-width: 50px;
	background-color: #90A8EE;
	border-radius: 2px;
}

.button:hover,
.buttonRecover:hover,
.buttonReset:hover,
.buttonRoll:hover,
.buttonRollAttack:hover,
.buttonRollActivate:hover,
.buttonRollNormalAttack:hover,
.buttonShow:hover,
.buttonRollPower:hover,
.buttonRollPowerArmor:hover,
.button-system-more:hover {
	color: black;
	background-color: #d0d0d0;
	text-align: center;
}

.button-Power-END:hover,
.buttonManeuverEND:hover {
	background-color: #ff9900;
	color: black;
}

.buttonRoll {
	margin-right: 3px;
	margin-left: 3px;
	background-color: #E69F00;
	border-radius: 2px;
}

.buttonRollAttack {
	background-color: #D55E00;
	border-radius: 2px;
}

.item-talent-heading .buttonShow,
.item-complication-heading .buttonShow,
.item-flex-maneuver .buttonRollAttack,
.item-flex-maneuver .buttonShow,
.item-flex-maneuver .buttonManeuverEND {
	margin-right: 3px;
	margin-left: 3px;
	border-radius: 3px;
	min-width: 36px;
	max-width: 38px;
}

.item-flex-maneuver .buttonRollAttack {
	margin-left: 61px;
}

/* Change attack button color indicate a weapon block or other defensive action. */
.weapon-type01[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="defense"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
	background-color: #4ba6ff;
}

/* Change attack button color indicate a weapon-assisted maneuver like disarm. */
.weapon-type01[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="maneuver"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
	background-color: #E69F00;
}

/* Change attack button color to indicate weapon normal damage. */
.weapon-type01[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="normal"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
	background-color: #009E73;
}

/* Change attack button color to indicate weapon does power damage. */
.weapon-type01[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="power"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
	background-color: #CC79A7;
}

/* Change attack button color to indicate standard maneuver override. Gray with no hover changes. */
.weapon-type01[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"],
.weapon-type02[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"],
.weapon-type03[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"],
.weapon-type04[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"],
.weapon-type05[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"],
.weapon-type06[value="override"] ~ .buttonRollAttack[name="act_attackWeapon06"]
{
	background-color: #d0d0d0;
	color: white;
	cursor: default;
}


/* Martial maneuver button color default indicates killing. */
.item-martial-maneuver-button-line .buttonManeuver {
	background-color: #D55E00;
}

.item-martial-maneuver-button-line .buttonManeuver:hover {
	background-color: #dbdbdb;
	color: black;
}

/* Change maneuver attack button color to indicate normal damage. */
.maneuver-type01[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
	background-color: #009E73;
}

/* Change maneuver attack button color to indicate a non-damaging defensive action. */
.maneuver-type01[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
	background-color: #4ba6ff;
}

/* Change maneuver attack button color to indicate a dodge action. */
.maneuver-type01[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
	background-color: #0072B2;
}

/* Change maneuver attack button color to indicate a some other action such as a disarm. */
.maneuver-type01[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
	background-color: #E69F00;
}

/* Change maneuver attack button color to indicate weapon override. Gray with no hover changes. */
.maneuver-type01[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"],
.maneuver-type02[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"],
.maneuver-type03[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"],
.maneuver-type04[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"],
.maneuver-type05[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"],
.maneuver-type06[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"],
.maneuver-type07[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"],
.maneuver-type08[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"],
.maneuver-type09[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"],
.maneuver-type10[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]
{
	background-color: #d0d0d0;
	color: white;
	cursor: default;
}

.buttonRollActivate {
	margin-right: 3px;
	margin-left: 3px;
	background-color: #0072B2;
	border-radius: 2px;
}

.buttonRollNormalAttack,
.buttonManeuverEND,
.buttonShow {
	margin-right: 3px;
	margin-left: 3px;
	border-radius: 2px;
	min-width: 34px;
	max-width: 36px;
}

.buttonRollNormalAttack {
	margin-left: 61px;
	background-color: #D55E00;
}

.button-Power-END {
	background-color: #8A8A8A;
	font-weight: bold;
}

.button-system-more {
	background-color: #f2cf7f;
	font-weight: bold;
	border-radius: 0px;
}

.buttonShow,
.buttonManeuverEND {
	background-color: #8A8A8A;
}

.item-power-block-heading-container .buttonShow {
	background-color: #4ba6ff;
	
	&:hover {
		background-color: #bcdeff;
	}
}

.buttonRollPower {
	background-color: #CC79A7;
}

.buttonSetDamage {
	background-color: #f3f3f3;
	color: black;
	min-width: 66px;
	max-width: 68px;
	height: 18px;
	border: solid 1px #F0E442;
	border-radius: 2px;
	padding: 0px;
	
	&:hover {
		background-color: #bcdeff;
	}
}

.buttonSetDefense {
	background-color: #f3f3f3;
	color: black;
	min-width: 148px;
	max-width: 150px;
	height: 18px;
	border: solid 1px #F0E442;
	border-radius: 2px;
	padding: 0px;
	
	&:hover {
		background-color: #bcdeff;
	}
}

.buttonManeuver,
.buttonDefense,
.buttonAttackStrength {
	color: white;
	font-weight: bold;
	border-radius: 2px;
	width: 70px;
	max-height: 22px;
}

.buttonManeuver {
	background-color: #E69F00;
}

.buttonDefense {
	background-color: #0072B2;
}

.buttonAttackStrength {
	background-color: #009E73;
}

.buttonOK {
	color: white;
	font-weight: bold;
	background-color: #E69F00;
	border-radius: 2px;
	border: solid 1px #b87f00;
	max-height: 19px;
	width: 45px;
	padding: 0px;
}

/* Hide the hidden button */
.hiddenButton {
	max-width: 1px;
	max-height: 1px;
	background-color: transparent;
	color: transparent;
	pointer-events: none;
}

.hiddenButton:hover {
	background-color: transparent;
	color: transparent;
}

/* Custom Expand Button */

.expand-button {
	margin-right: 3px;
	width: 14px;
	height: 12px;
	line-height: 1.0em;
	position: relative;
	top: 2px;
}

.expand-button:hover .expand-icon {
	background-color: #f2cf7f;
}

.expand-button:hover .expandButton {
	background-color: white;
}

.expandButton {
	padding: 0px;
	background-color: #f2cf7f;
	width: 12px;
	height: 10px;
	border: solid 1px #f2cf7f;
	position: relative;
	top: -5px;
}

.expand-icon {
	height: 6px;
	width: 7px;
	position: relative;
	top: -2px;
	background-color: white;
}

/* --------------------------------------------------- */
/* Custom Checkbox used for options                    */
/* From w3 schools                                     */
/* --------------------------------------------------- */

/* Customize the label (the container) */
.container-checkbox {
	display: inline-block;
	position: relative;
	padding-top: 2px;
	cursor: pointer;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: transparent;
}

/* Hide the browser's default checkbox */
.container-checkbox input,
.container-checkbox-small input,
.container-checkbox-small-light input,
.container-checkbox-small-dark input,
.container-checkbox-tiny input,
.container-checkbox-tiny-light input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #f2cf7f;
}

/* On mouse-over, add background color */
.container-checkbox:hover input ~ .checkmark,
.container-checkbox-small:hover input ~ .checkmark-small,
.container-checkbox-tiny:hover input ~ .checkmark-tiny {
	background-color: #edbb4c;
	border: solid 1px #E69F00;
}

.container-checkbox-small-light:hover input ~ .checkmark-small-light,
.container-checkbox-small-dark:hover input ~ .checkmark-small-dark,
.container-checkbox-tiny-light:hover input ~ .checkmark-tiny-light {
	background-color: #4ba6ff;
	border: solid 1px #359bff;
}

/* When the checkbox is checked, add a gold background */
.container-checkbox input:checked ~ .checkmark,
.container-checkbox-small input:checked ~ .checkmark-small,
.container-checkbox-tiny input:checked ~ .checkmark-tiny {
	background-color: #f0c566;
}

.container-checkbox-small-light input:checked ~ .checkmark-small-light,
.container-checkbox-tiny-light input:checked ~ .checkmark-tiny-light {
	background-color: #8fc8ff;
}

.container-checkbox-small-dark input:checked ~ .checkmark-small-dark {
	background-color: #4ba6ff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after,
.checkmark-small:after,
.checkmark-tiny:after {
	content: "";
	position: absolute;
	display: none;
	border: solid 1px #E69F00;
}

.checkmark-small-light:after,
.checkmark-tiny-light:after {
	content: "";
	position: absolute;
	display: none;
	border: solid 1px #4ba6ff;
}

.checkmark-small-dark:after {
	content: "";
	position: absolute;
	display: none;
	border: solid 1px #4ba6ff;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after,
.container-checkbox-small input:checked ~ .checkmark-small:after,
.container-checkbox-small-light input:checked ~ .checkmark-small-light:after,
.container-checkbox-small-dark input:checked ~ .checkmark-small-dark:after,
.container-checkbox-tiny input:checked ~ .checkmark-tiny:after,
.container-checkbox-tiny-light input:checked ~ .checkmark-tiny-light:after {
	display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
	left: 7px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid black;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* --------------------------------------------------- */
/* Custom Checkbox (small) used for skill enhancers    */
/* From w3 schools                                     */
/* --------------------------------------------------- */

/* Customize the label (the container) */
.container-checkbox-small,
.container-checkbox-small-light,
.container-checkbox-small-dark,
.container-checkbox-tiny,
.container-checkbox-tiny-light {
	display: block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.container-checkbox-small,
.container-checkbox-small-light,
.container-checkbox-small-dark {
	padding-left: 20px;
	padding-top: 0px;
	max-height: 15px;
	max-width: 15px;
}

.container-checkbox-tiny,
.container-checkbox-tiny-light {
	padding: 0px;
	margin: 0px;
	max-height: 11px;
	max-width: 11px;
}

/* Create a custom checkbox */
.checkmark-small,
.checkmark-small-light,
.checkmark-small-dark,
.checkmark-tiny,
.checkmark-tiny-light {
	position: absolute;
	left: 0px;
	margin: 0px;
	padding: 0px;
	left: 0px;
}

.checkmark-small,
.checkmark-small-light,
.checkmark-small-dark {
	height: 15px;
	width: 15px;
}

.checkmark-tiny-light,
.checkmark-tiny {
	height: 11px;
	width: 11px;
}

.checkmark-small,
.checkmark-tiny {
	background-color: #f2cf7f;
}

.checkmark-small-light,
.checkmark-tiny-light {
	background-color: #8fc8ff;
}

.checkmark-small-dark {
	background-color: #62b1ff;
}

/* Style the checkmark/indicator */
.container-checkbox-small .checkmark-small:after,
.container-checkbox-small-light .checkmark-small-light:after {
	left: 4px;
	top: 2px;
	width: 4px;
	height: 7px;
	border: solid black;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container-checkbox-small-dark .checkmark-small-dark:after {
	left: 4px;
	top: 2px;
	width: 4px;
	height: 7px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container-checkbox-tiny .checkmark-tiny:after {
	left: 3px;
	top: 1px;
	width: 2px;
	height: 5px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container-checkbox-tiny-light .checkmark-tiny-light:after {
	left: 3px;
	top: 1px;
	width: 2px;
	height: 5px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.subitem-flex-container-martial-cv-damage-row {
	margin-bottom: 14px;
	padding: 0px;
}

/* Increase space for paragraph description */
.container-checkbox-small-dark ~ p {
	margin-left: 20px;
	line-height: 1.1;
}

/* Other adjustments to check boxes */
.item-maneuver-block-stats-half-row .container-checkbox-small-light {
	padding-left: 10px;
	margin-left: 3px;
	margin-top: -5px;
}

.subitem-tab-gear-flex-container-shield-heading .container-checkbox-tiny {
	top: 0px;
	left: 0px;
}

.subitem-tab-gear-flex-container-weapon-row .container-checkbox-small {
	padding-left: 10px;
	padding-right: 6px;
	margin-left: 7px;
	padding-bottom: 8px;
}

.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
	margin-top: 3px;
	padding-right: 0px;
}

.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light {
	margin-top: 4px;
	padding-right: 0px;
}

.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny,
.subitem-tab-gear-flex-container-shield-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny {
	padding-right: 0px;
}


/* --------------------------------------------------- */
/* Custom Checkboxes used for turn segment indicators  */
/* Modification of custom checkbox above               */
/* --------------------------------------------------- */

.grid-container-container-turn-segments {
	grid-area: turnSegmentIndicators;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: top;
	justify-content: space-evenly;
	width: 255px;
	height: 24px;
	background: royalblue;
	padding: 0px;
	padding-left: 2px;
	margin-top: 3px;
}

.grid-container-container-turn-segments label {
	display: inline;
	pointer-events: none;
	font-style: normal;
}

/* Custom checkbox indicator */

.container-speed-indicator {
	display: inline-block;
	position: relative;
	padding-left: 5px;
	margin-bottom: 0px;
	cursor: pointer;
	font-size: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	
/* Hide the browser's default checkbox */
.container-speed-indicator input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Custom checkbox */

.checkmark01,
.checkmark02,
.checkmark03,
.checkmark04,
.checkmark05,
.checkmark06,
.checkmark07,
.checkmark08,
.checkmark09,
.checkmark10,
.checkmark11,
.checkmark12 {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 19px;
	background-color: #6787e7;
	border: none;
	border-radius: 2px;
	pointer-events: none;
}

/* Custom segment indicator checkbox: Status */
.container-speed-indicator input:checked ~ .checkmark01,
.container-speed-indicator input:checked ~ .checkmark02,
.container-speed-indicator input:checked ~ .checkmark03,
.container-speed-indicator input:checked ~ .checkmark04,
.container-speed-indicator input:checked ~ .checkmark05,
.container-speed-indicator input:checked ~ .checkmark06,
.container-speed-indicator input:checked ~ .checkmark07,
.container-speed-indicator input:checked ~ .checkmark08,
.container-speed-indicator input:checked ~ .checkmark09,
.container-speed-indicator input:checked ~ .checkmark10,
.container-speed-indicator input:checked ~ .checkmark11,
.container-speed-indicator input:checked ~ .checkmark12 {
	background-color: hotpink;
	border: none;
	border-radius: 2px;
}

/* Custom segment indicator checkbox 01. Active/checked. */
.checkmark01:after {
	content: "1";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 01. Inactive/not checked. */
.checkmark01:before {
	content: "1";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 02. Active/checked. */
.checkmark02:after {
	content: "2";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 02. Inactive/not checked. */
.checkmark02:before {
	content: "2";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 03. Active/checked. */
.checkmark03:after {
	content: "3";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 03. Inactive/not checked. */
.checkmark03:before {
	content: "3";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 04. Active/checked. */
.checkmark04:after {
	content: "4";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 04. Inactive/not checked. */
.checkmark04:before {
	content: "4";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 05. Active/checked. */
.checkmark05:after {
	content: "5";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 05. Inactive/not checked. */
.checkmark05:before {
	content: "5";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 06. Active/checked. */
.checkmark06:after {
	content: "6";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 06. Inactive/not checked. */
.checkmark06:before {
	content: "6";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 07. Active/checked. */
.checkmark07:after {
	content: "7";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 07. Inactive/not checked. */
.checkmark07:before {
	content: "7";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 08. Active/checked. */
.checkmark08:after {
	content: "8";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 08. Inactive/not checked. */
.checkmark08:before {
	content: "8";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 09. Active/checked. */
.checkmark09:after {
	content: "9";
	color: white;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 09. Inactive/not checked. */
.checkmark09:before {
	content: "9";
	color: black;
	position: absolute;
	padding-left: 6px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 10. Active/checked. */
.checkmark10:after {
	content: "10";
	color: white;
	position: absolute;
	padding-left: 2px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 10. Inactive/not checked. */
.checkmark10:before {
	content: "10";
	color: black;
	position: absolute;
	padding-left: 2px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 11. Active/checked. */
.checkmark11:after {
	content: "11";
	color: white;
	position: absolute;
	padding-left: 3px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 11. Inactive/not checked. */
.checkmark11:before {
	content: "11";
	color: black;
	position: absolute;
	padding-left: 3px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 12. Active/checked. */
.checkmark12:after {
	content: "12";
	color: white;
	position: absolute;
	padding-left: 2px;
	padding-top: 1px;
	display: none;
}

/* Custom segment indicator checkbox 12. Inactive/not checked. */
.checkmark12:before {
	content: "12";
	color: black;
	position: absolute;
	padding-left: 2px;
	padding-top: 1px;
	display: none;
}

/* Show the checkmark when checked */
.container-speed-indicator input:checked ~ .checkmark01:after,
.container-speed-indicator input:checked ~ .checkmark02:after,
.container-speed-indicator input:checked ~ .checkmark03:after,
.container-speed-indicator input:checked ~ .checkmark04:after,
.container-speed-indicator input:checked ~ .checkmark05:after,
.container-speed-indicator input:checked ~ .checkmark06:after,
.container-speed-indicator input:checked ~ .checkmark07:after,
.container-speed-indicator input:checked ~ .checkmark08:after,
.container-speed-indicator input:checked ~ .checkmark09:after,
.container-speed-indicator input:checked ~ .checkmark10:after,
.container-speed-indicator input:checked ~ .checkmark11:after,
.container-speed-indicator input:checked ~ .checkmark12:after {
	display: block;
}

/* Show the checkmark when checked */
.container-speed-indicator input:not(:checked) ~ .checkmark01:before,
.container-speed-indicator input:not(:checked) ~ .checkmark02:before,
.container-speed-indicator input:not(:checked) ~ .checkmark03:before,
.container-speed-indicator input:not(:checked) ~ .checkmark04:before,
.container-speed-indicator input:not(:checked) ~ .checkmark05:before,
.container-speed-indicator input:not(:checked) ~ .checkmark06:before,
.container-speed-indicator input:not(:checked) ~ .checkmark07:before,
.container-speed-indicator input:not(:checked) ~ .checkmark08:before,
.container-speed-indicator input:not(:checked) ~ .checkmark09:before,
.container-speed-indicator input:not(:checked) ~ .checkmark10:before,
.container-speed-indicator input:not(:checked) ~ .checkmark11:before,
.container-speed-indicator input:not(:checked) ~ .checkmark12:before {
	display: block;
}


/* Custom checkboxes or xbox for deletion actions. */

.container-xbox,
.container-xbox-tiny {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	max-height: 1px;
	max-width: 1px;
}

.container-xbox input,
.container-xbox-tiny input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0px;
	width: 0px;
}

/* Create a custom checkbox */
.container-xbox .checkmark {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 20px;
	width: 20px;
	background-color: #f2cf7f;
}

.container-xbox-tiny .checkmark {
	position: absolute;
	margin: 0px;
	padding: 0px;
	left: 0px;
	height: 9px;
	width: 9px;
	background-color: white;
	border: solid 1px #c4c4c4;
}

.subitem-tab-gear-flex-container-armor .container-xbox-tiny .checkmark {
	top: 0px;
}

.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny .checkmark {
	top: -1px;
}

.subitem-tab-gear-flex-container-equipment .container-xbox-tiny .checkmark {
	top: 4px;
}

.subitem-characterstics-system-heading-deletebox .container-xbox-tiny .checkmark {
	top: 1px;
}

/* On mouse-over, add warning background color */
.container-xbox:hover input ~ .checkmark {
	background-color: #fb3422;
}

.container-xbox-tiny:hover input ~ .checkmark {
	background-color: #fb3422;
	border: solid 1px #fb3422;
}

/* When the checkbox is checked, add alarming background color */
.container-xbox input:checked ~ .checkmark {
	background-color: #fb3422;
}

.container-xbox-tiny input:checked ~ .checkmark {
	background-color: #fb3422;
	border: solid 1px #fb3422;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-xbox .checkmark:after,
.container-xbox-tiny .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container-xbox input:checked ~ .checkmark:after,
.container-xbox-tiny input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark cross indicator */
.container-xbox .checkmark:after {
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
	border: transparent;
	background: linear-gradient(
		to bottom,
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	), linear-gradient(
		to right, 
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container-xbox-tiny .checkmark:after {
	left: -1px;
	top: -1px;
	width: 11px;
	height: 11px;
	border: transparent;
	background: linear-gradient(
		to bottom,
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	), linear-gradient(
		to right, 
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Dummy xbox for heading indicator */

.tiny-xbox-dummy-container {
	left: 0px;
	max-height: 11px;
	min-height: 11px;
	max-width: 1px;
	min-width: 1px;
	display: inline-block;
	position: relative;
}

.tiny-xbox-dummy-container {
	background-color: #fb3422;
}

.subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container {
	top: 5px;
}

.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container,
.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container,
.subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
	top: 6px;
}

.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
	top: 3px;
}

.subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container {
	top: 4px;
	left: -116px;
}

.tiny-xbox-dummy {
	position: absolute;
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 0px;
	height: 11px;
	width: 11px;
	background: linear-gradient(
		to bottom,
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	), linear-gradient(
		to right, 
		transparent 35%, 
		white 35%, 
		white 65%,  
		transparent 65%
	);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* --------------------------------------------------- */
/* Talents, Perks, and Complications                   */
/* --------------------------------------------------- */

.grid-container-complications-talents {
	display: grid;
	grid-template-areas: 
	"talentsTitle talentsTitle"
	"talents talentsNotes"
	"complicationsTitle complicationsTitle"
	"complications complicationsNotes";
	grid-template-columns: 448px 228px;
	grid-template-rows: 31px 365px 33px 365px;
	align-self: start;
	font-size: 16px;
	background-color: royalblue;
	border: 2px solid #6787e7;
	min-height: 803px;
	min-width: 676px;
	border-radius: 0px;
	margin-bottom: 0px;
}

.flex-container-talents-title,
.flex-container-complications-title {
	height: 26px;
	width: 674px;
	padding-top: 4px;
	align-items: bottom;
}

.flex-container-talents-title {
	grid-area: talentsTitle;
}

.flex-container-complications-title {
	grid-area: complicationsTitle;
}

.flex-container-talents-title h2,
.flex-container-complications-title h2 {
	font-size: 18px;
	text-align: center;
	font-weight: normal;
	color: white;
}

.flex-container-talents-title h2 {
	line-height: 1.4;
}

.flex-container-complications-title h2 {
	line-height: 1.6;
}

.flex-container-talents {
	grid-area: talents;
	display: grid;
	grid-template-areas:
		"selectors slides";
	height: 354px;
	width: 427px;
	padding: 4px;
	margin-left: 6px;
	border: 2px solid #f0c566;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	background: #f4ec7a; /* Color Block */
}

.flex-container-talents-notes {
	grid-area: talentsNotes;
	align-items: left;
	margin-left: 3px;
	margin-right: 6px;
	padding: 0px;
	max-width: 217px;
	height: 362px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border: solid 2px #dbdbdb;
}

.flex-container-complications {
	grid-area: complications;
	display: grid;
	grid-template-areas:
		"selectors slides";
	height: 354px;
	width: 427px;
	padding: 4px;
	margin-left: 6px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	background-color: #a5d3ff;
	border: 2px solid #66bbeb;
}

.flex-container-complications-notes {
	grid-area: complicationsNotes;
	align-items: left;
	margin-left: 3px;
	margin-right: 6px;
	padding: 0px;
	max-width: 217px;
	height: 362px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border: solid 2px #dbdbdb;
}

.container-talents-text textarea,
.container-complications-text textarea {
	padding: 0px;
	margin: 0px;
	height: 356px;
	width: 209px;
	border-radius: 0px;
	border: solid 3px transparent;
	background: white;
	display: block;
}

/* Talent and Complication selectors */
.flex-container-talent-selectors,
.flex-container-complication-selectors {
	grid-area: selectors;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 190px;
	height: 354px;
	margin-left: 0px;
}

.flex-container-talent-selectors button,
.flex-container-complication-selectors button {
	height: 16px;
	text-align: left;
	font-weight: bold;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	padding-left: 4px;
	padding-right: 0px;
	line-height: 1.1;
}

.flex-container-talents .flex-container-talent-selectors button {
	border: 1px solid #faf6c6;
	background-color: #f9f4b3;
	height: 22px;
}

.flex-container-complications .flex-container-complication-selectors button {
	border: 1px solid #d2e9ff;
	background-color: #bcdeff;
	height: 22px;
}

.flex-container-talents .flex-container-talent-selectors button:hover {
	background-color: #d2e9ff;
}

.flex-container-complications .flex-container-complication-selectors button:hover {
	background-color: #faf6c6;
}

/* Talent and Complication slides */
.container-talent-slides,
.container-complication-slides {
	grid-area: slides;
}

.container-talent-slides,
.container-complication-slides {
	background-color: white;
	width: 224px;
	margin-right: 4px;
	border: 1px solid #bcdeff;
	border-left: none;
	align-content: center;
	padding: 6px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.item-talent-block-heading,
.item-complication-block-heading {
	max-height: 60px;
	width: 213px;
	padding: 6px;
	background-color: #4ba6ff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.item-talent-block-heading h1,
.item-complication-block-heading h1  {
	font-size: 17px;
	color: white;
	text-align: left;
	width: 30px;
}

.item-talent-block-heading input[type=text]:hover,
.item-complication-block-heading input[type=text]:hover {
	border: 2px solid #66bbeb;
}

.item-talent-block-heading input[readonly],
.item-complication-block-heading input[readonly] {
	text-align: right;
	font-size: 17px;
	font-weight: bold;
	text-align: right;
	color: white;
	pointer-events: none;
}

.item-talent-block-heading input[type=text],
.item-complication-block-heading input[type=text] {
	font-size: 14px;
	font-weight: bold;
	color: white;
	text-align: center;
	background: transparent;
	width: 92%;
	margin: 0px;
	padding-bottom: 0px;
	height: 25px;
	border: 2px solid transparent;
	
	&::placeholder {
		color: white;
		opacity: 0.4;
	}
}

.item-talent-block,
.item-complication-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.item-talent-block-stats,
.item-complication-block-stats {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 213px;
}

.item-talent-block-stats {
	height: 87px;
}

.item-complication-block-stats {
	height: 116px;
}

.item-talent-block-stats h1,
.item-complication-block-stats h1 {
	text-align: left;
	line-height: 1.2;
	font-size: 12px;
	margin: 0px;
}

.item-talent-block-stats-row .container-checkbox-small-light,
.item-complication-block-stats-row .container-checkbox-small-light {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	margin-right: 8px;
	padding-right: -5px;
	padding-bottom: 16px;
}

.item-complication-block-stats-row .custom-select-alternate {
	padding-left: 6px;
	text-align-last: center;
}

.item-talent-block-stats-row,
.item-talent-block-stats-half-row,
.item-complication-block-stats-row,
.item-complication-block-stats-half-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-height: 29px;
}

.item-talent-block-stats-row,
.item-complication-block-stats-row {
	width: 217px;
	padding-left: 4px;
	padding-right: 4px;
}

.item-talent-block-stats-half-row:nth-child(1),
.item-complication-block-stats-half-row:nth-child(1) {
	width: 75px;
	padding-right: 4px;
}

.item-talent-block-stats-half-row:nth-child(2),
.item-complication-block-stats-half-row:nth-child(2) {
	width: 120px;
	padding-left: 4px;
}

.item-talent-block-stats-row:nth-child(odd),
.item-complication-block-stats-row:nth-child(odd),
.item-talent-block-stats h2:nth-child(odd),
.item-complication-block-stats h2:nth-child(odd) {
	background-color: #e9f4ff;
}

.item-talent-block-stats-row:nth-child(3),
.item-complication-block-stats-row:nth-child(4) {
	justify-content: space-evenly;
}

.item-talent-block-stats-row input[type=text],
.item-complication-block-stats-row input[type=text] {
	text-align: center;
	height: 21px;
	padding-left: 2px;
	padding-right: 4px;
	border: solid 1px #bcdeff;
}

.item-talent-block-stats-row:nth-child(1) input[type=text] {
	width: 80px;
}

.item-complication-block-stats-row:nth-child(1) input[type=text] {
	width: 178px;
}

.item-complication-block-stats-row:nth-child(2) input[type=text] {
	width: 80px;
}

.item-talent-block-stats-row input[type=number],
.item-talent-block-stats-half-row input[type=number],
.item-complication-block-stats-row input[type=number],
.item-complication-block-stats-half-row input[type=number] {
	text-align: center;
	min-width: 48px;
	height: 21px;
	border: solid 1px #bcdeff;
}
	
.item-talent-block-text,
.item-complication-block-text {
	width: 217px;
	background-color: #a5d3ff;
	padding: 4px;
}

.item-talent-block-text {
	height: 207px;
}
	
.item-complication-block-text {
	height: 178px;
}
	
.item-talent-block-text textarea,
.item-complication-block-text textarea {
	font-size: 13px;
	text-align: left;
	color: black;
	width: 205px;
	border: solid 2px transparent;
	background: #a5d3ff;
	display: block;
	margin: 0px;
	
	&::placeholder {
		color: black;
		opacity: 0.33;
	}
}

.item-talent-block-text textarea {
	height: 190px;
}

.item-complication-block-text textarea {
	height: 161px;
}

.item-talent-block-text textarea:hover,
.item-complication-block-text textarea:hover {
	border: solid 2px #d2e9ff;
}

/* Talent and complication slide selection */

.item-talent-slide01,
.item-talent-slide02,
.item-talent-slide03,
.item-talent-slide04,
.item-talent-slide05,
.item-talent-slide06,
.item-talent-slide07,
.item-talent-slide08,
.item-talent-slide09,
.item-talent-slide10 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	display: none;
}

.item-complication-slide01,
.item-complication-slide02,
.item-complication-slide03,
.item-complication-slide04,
.item-complication-slide05,
.item-complication-slide06,
.item-complication-slide07,
.item-complication-slide08,
.item-complication-slide09,
.item-complication-slide10 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	display: none;
}

/* show the selected talent slide */
.item-talent-selection[value="talent01"] ~ div.container-talent-slides .item-talent-slide01,
.item-talent-selection[value="talent02"] ~ div.container-talent-slides .item-talent-slide02,
.item-talent-selection[value="talent03"] ~ div.container-talent-slides .item-talent-slide03,
.item-talent-selection[value="talent04"] ~ div.container-talent-slides .item-talent-slide04,
.item-talent-selection[value="talent05"] ~ div.container-talent-slides .item-talent-slide05,
.item-talent-selection[value="talent06"] ~ div.container-talent-slides .item-talent-slide06,
.item-talent-selection[value="talent07"] ~ div.container-talent-slides .item-talent-slide07,
.item-talent-selection[value="talent08"] ~ div.container-talent-slides .item-talent-slide08,
.item-talent-selection[value="talent09"] ~ div.container-talent-slides .item-talent-slide09,
.item-talent-selection[value="talent10"] ~ div.container-talent-slides .item-talent-slide10 {
	display: block;
	position: relative;
}

/* Show the selected complication slide */
.item-complication-selection[value="complication01"] ~ div.container-complication-slides .item-complication-slide01,
.item-complication-selection[value="complication02"] ~ div.container-complication-slides .item-complication-slide02,
.item-complication-selection[value="complication03"] ~ div.container-complication-slides .item-complication-slide03,
.item-complication-selection[value="complication04"] ~ div.container-complication-slides .item-complication-slide04,
.item-complication-selection[value="complication05"] ~ div.container-complication-slides .item-complication-slide05,
.item-complication-selection[value="complication06"] ~ div.container-complication-slides .item-complication-slide06,
.item-complication-selection[value="complication07"] ~ div.container-complication-slides .item-complication-slide07,
.item-complication-selection[value="complication08"] ~ div.container-complication-slides .item-complication-slide08,
.item-complication-selection[value="complication09"] ~ div.container-complication-slides .item-complication-slide09,
.item-complication-selection[value="complication10"] ~ div.container-complication-slides .item-complication-slide10 {
	display: block;
	position: relative;
}

/* Make a selection button appear to be continuous with its slide via color and border */
.item-talent-selection[value="talent01"] ~ .flex-container-talent-selectors button[name="act_talent01"]:not(:hover),
.item-talent-selection[value="talent02"] ~ .flex-container-talent-selectors button[name="act_talent02"]:not(:hover),
.item-talent-selection[value="talent03"] ~ .flex-container-talent-selectors button[name="act_talent03"]:not(:hover),
.item-talent-selection[value="talent04"] ~ .flex-container-talent-selectors button[name="act_talent04"]:not(:hover),
.item-talent-selection[value="talent05"] ~ .flex-container-talent-selectors button[name="act_talent05"]:not(:hover),
.item-talent-selection[value="talent06"] ~ .flex-container-talent-selectors button[name="act_talent06"]:not(:hover),
.item-talent-selection[value="talent07"] ~ .flex-container-talent-selectors button[name="act_talent07"]:not(:hover),
.item-talent-selection[value="talent08"] ~ .flex-container-talent-selectors button[name="act_talent08"]:not(:hover),
.item-talent-selection[value="talent09"] ~ .flex-container-talent-selectors button[name="act_talent09"]:not(:hover),
.item-talent-selection[value="talent10"] ~ .flex-container-talent-selectors button[name="act_talent10"]:not(:hover) {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

.item-complication-selection[value="complication01"] ~ .flex-container-complication-selectors button[name="act_complication01"]:not(:hover),
.item-complication-selection[value="complication02"] ~ .flex-container-complication-selectors button[name="act_complication02"]:not(:hover),
.item-complication-selection[value="complication03"] ~ .flex-container-complication-selectors button[name="act_complication03"]:not(:hover),
.item-complication-selection[value="complication04"] ~ .flex-container-complication-selectors button[name="act_complication04"]:not(:hover),
.item-complication-selection[value="complication05"] ~ .flex-container-complication-selectors button[name="act_complication05"]:not(:hover),
.item-complication-selection[value="complication06"] ~ .flex-container-complication-selectors button[name="act_complication06"]:not(:hover),
.item-complication-selection[value="complication07"] ~ .flex-container-complication-selectors button[name="act_complication07"]:not(:hover),
.item-complication-selection[value="complication08"] ~ .flex-container-complication-selectors button[name="act_complication08"]:not(:hover),
.item-complication-selection[value="complication09"] ~ .flex-container-complication-selectors button[name="act_complication09"]:not(:hover),
.item-complication-selection[value="complication10"] ~ .flex-container-complication-selectors button[name="act_complication10"]:not(:hover) {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

/* Ignore hover styling for selector button of current slide */
.item-talent-selection[value="talent01"] ~ .flex-container-talent-selectors button[name="act_talent01"]:hover,
.item-talent-selection[value="talent02"] ~ .flex-container-talent-selectors button[name="act_talent02"]:hover,
.item-talent-selection[value="talent03"] ~ .flex-container-talent-selectors button[name="act_talent03"]:hover,
.item-talent-selection[value="talent04"] ~ .flex-container-talent-selectors button[name="act_talent04"]:hover,
.item-talent-selection[value="talent05"] ~ .flex-container-talent-selectors button[name="act_talent05"]:hover,
.item-talent-selection[value="talent06"] ~ .flex-container-talent-selectors button[name="act_talent06"]:hover,
.item-talent-selection[value="talent07"] ~ .flex-container-talent-selectors button[name="act_talent07"]:hover,
.item-talent-selection[value="talent08"] ~ .flex-container-talent-selectors button[name="act_talent08"]:hover,
.item-talent-selection[value="talent09"] ~ .flex-container-talent-selectors button[name="act_talent09"]:hover,
.item-talent-selection[value="talent10"] ~ .flex-container-talent-selectors button[name="act_talent10"]:hover {
	background-color: white;
	border: 1px solid #f9f4b3;
	border-right: none;
}

.item-complication-selection[value="complication01"] ~ .flex-container-complication-selectors button[name="act_complication01"]:hover,
.item-complication-selection[value="complication02"] ~ .flex-container-complication-selectors button[name="act_complication02"]:hover,
.item-complication-selection[value="complication03"] ~ .flex-container-complication-selectors button[name="act_complication03"]:hover,
.item-complication-selection[value="complication04"] ~ .flex-container-complication-selectors button[name="act_complication04"]:hover,
.item-complication-selection[value="complication05"] ~ .flex-container-complication-selectors button[name="act_complication05"]:hover,
.item-complication-selection[value="complication06"] ~ .flex-container-complication-selectors button[name="act_complication06"]:hover,
.item-complication-selection[value="complication07"] ~ .flex-container-complication-selectors button[name="act_complication07"]:hover,
.item-complication-selection[value="complication08"] ~ .flex-container-complication-selectors button[name="act_complication08"]:hover,
.item-complication-selection[value="complication09"] ~ .flex-container-complication-selectors button[name="act_complication09"]:hover,
.item-complication-selection[value="complication10"] ~ .flex-container-complication-selectors button[name="act_complication10"]:hover {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

/* ----------------------------------------------------- */
/* Powers                                                */
/* Organized in two columns with different color styles. */
/* ----------------------------------------------------- */
.grid-container-powers {
	display: grid;
	grid-template-areas:
	"combatMods powerHealth"
	"upperPowers upperPowers"
	"lowerPowers lowerPowers";
	grid-gap: 0px 0px;
	grid-template-columns: 367px 305px;
	grid-template-rows: 78px 361px 361px;
	max-width: 676px;
	height: 803px;
	font-size: 16px;
	grid-gap: 0px 0px;
	background-color: royalblue;
	border: 2px solid #6787e7;
	border-radius: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.item-powers-combat-mods {
	grid-area: combatMods;
	padding: 0px;
	padding-left: 10px;
	padding-top: 7px;
	max-width: 345px;
	max-height: 56px;
	margin: 0px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.item-powers-range-mods {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	max-height: 22px;
	width: 345px;
	margin-left: 3px;
}

.item-powers-range-mods h1 {
	font-size: 13px;
	line-height: 1.2;
	color: white;
}

.item-powers-range-mods input[type=number] {
	max-width: 38px;
}

.item-powers-range-mods .container-checkbox-small-dark {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	padding-right: -5px;
	padding-bottom: 16px;
}

.item-powers-combat-mods .subitem-tab-gear-slide-flex-container-range-modifiers {
	max-width: 338px;
	height: 29px;
}

.item-powers-health {
	grid-area: powerHealth;
	padding-top: 10px;
	width: 300px;
	height: 56px;
	margin: 0px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

.flex-container-upper-powers {
	grid-area: upperPowers;
	display: grid;
	grid-template-areas:
		"actions selectors slides";
	width: 652px;
	height: 344px;
	padding: 4px;
	margin-left: 6px;
	border: 2px solid #f0c566;
	border-radius: 3px;
	background: #f4ec7a; /* Color Block */
}

.flex-container-lower-powers {
	grid-area: lowerPowers;
	display: grid;
	grid-template-areas:
		"actions selectors slides";
	width: 652px;
	height: 344px;
	padding: 4px;
	margin-left: 6px;
	border: 2px solid #66bbeb;
	border-radius: 3px;
	background: #a5d3ff;
}

/* Power Actions */

.flex-container-power-actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 82px;
	padding: 0px;
}

.item-power-action-block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	width: 82px;
	height: 26px;
	padding-top: 2px;
}

/* Power Selectors */
.flex-container-power-selectors {
	grid-area: selectors;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 152px;
	margin-left: 5px;
}

.flex-container-power-selectors button {
	height: 16px;
	text-align: left;
	font-weight: bold;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	padding-left: 4px;
	padding-right: 0px;
	line-height: 1.1;
}

.flex-container-upper-powers .flex-container-power-selectors button {
	border: 1px solid #faf6c6;
	background-color: #f9f4b3;
}

.flex-container-lower-powers .flex-container-power-selectors button {
	border: 1px solid #d2e9ff;
	background-color: #bcdeff;
}

.flex-container-power-selectors button {
	height: 22px;
}

.flex-container-upper-powers .flex-container-power-selectors button:hover {
	background-color: #d2e9ff;
}

.flex-container-lower-powers .flex-container-power-selectors button:hover {
	background-color: #faf6c6;
}

/* Power slides */

.grid-container-power-slides {
	grid-area: slides;
	background-color: white;
	width: 400px;
	margin-right: 4px;
	border: 1px solid #bcdeff;
	border-left: none;
	align-content: center;
	padding: 6px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.item-power-slide01,
.item-power-slide02,
.item-power-slide03,
.item-power-slide04,
.item-power-slide05,
.item-power-slide06,
.item-power-slide07,
.item-power-slide08,
.item-power-slide09,
.item-power-slide10,
.item-power-slide11,
.item-power-slide12,
.item-power-slide13,
.item-power-slide14,
.item-power-slide15,
.item-power-slide16,
.item-power-slide17,
.item-power-slide18,
.item-power-slide19,
.item-power-slide20 {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-height: 330px;
}

.item-power-block-heading {
	max-height: 30px;
	width: 388px;
	padding: 6px;
	background-color: #4ba6ff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.item-power-block-heading h1 {
	font-size: 17px;
	color: white;
	text-align: left;
	width: 30px;
}

.item-power-block-heading input[type=text]:hover {
	border: 2px solid #66bbeb;
}

.item-power-block-heading input[readonly] {
	text-align: right;
	font-size: 17px;
	font-weight: bold;
	text-align: right;
	color: white;
	pointer-events: none;
}

.item-power-block-heading input[type=text] {
	font-size: 17px;
	font-weight: bold;
	color: white;
	text-align: center;
	background: transparent;
	width: 50%;
	margin: 0px;
	padding-bottom: 0px;
	height: 25px;
	border: 2px solid transparent;
	
	&::placeholder {
		color: white;
		opacity: 0.33;
	}
}

.item-power-block-heading-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: transparent;
}

.item-power-block-heading-container:nth-child(1) {
	justify-content: flex-start;
	width: 78px;
}

.item-power-block-heading-container:nth-child(3) {
	justify-content: space-between;
	gap: 5px;
	padding-right: 3px;
}

.item-power-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.item-power-block-stats {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 198px;
	min-height: 280px;
}

.item-power-block-stats h1 {
	text-align: left;
	line-height: 1.2;
	font-size: 12px;
	margin: 0px;
}

.item-power-block-stats-row .container-checkbox-small-light {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	padding-right: -5px;
	padding-bottom: 16px;
}

.item-powers-range-mods .custom-select-alternate,
.item-power-block-stats-row .custom-select-alternate {
	padding-left: 4px;
}

.item-power-block-stats-row:first-child .custom-select-alternate {
	width: 87px;
}

.item-power-block-stats-row:nth-child(7) .custom-select-alternate {
	width: 104px;
}

.item-power-block-stats-row,
.item-power-block-stats-half-row,
.item-power-block-stats-thirds-row,
.item-power-block-stats-quarter-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-height: 29px;
}

.item-power-block-stats-row {
	width: 190px;
	padding-left: 4px;
	padding-right: 4px;
}

.item-power-block-stats-half-row {
	width: 91px;
}

.item-power-block-stats-thirds-row {
	width: 65px;
}

.item-power-block-stats-quarter-row {
	width: 47px;
}

.item-power-block-stats-row:nth-child(odd),
.item-power-block-stats h2:nth-child(odd) {
	background-color: #e9f4ff;
}

.item-power-block-stats-row input[type=text] {
	text-align: center;
	height: 21px;
	padding-left: 2px;
	padding-right: 4px;
	border: solid 1px #bcdeff;
	background: transparent;
}

.item-power-block-stats-row:nth-child(2) input[type=text] {
	width: 140px;
}

.item-power-block-stats-row:nth-child(3) input[type=text] {
	width: 60px;
}

.item-power-block-stats-row input[type=number],
.item-power-block-stats-half-row input[type=number] {
	text-align: center;
	min-width: 48px;
	height: 21px;
	border: solid 1px transparent;
	background: transparent;
}

.item-power-block-stats-thirds-row .container-checkbox-small-light {
	padding-right: 9px;
}

.item-power-block-stats-row:nth-child(4) input[type=number],
.item-power-block-stats-row:nth-child(5) input[type=number] {
	max-width: 38px;
	min-width: 38px;
}

.item-power-block-stats input[readonly] {
	text-align: center;
	font-weight: bold;
	width: 30px;
	height: 21px;
	padding-left: 2px;
	padding-bottom: 1px;
	padding-right: 4px;
	background-color: transparent;
	border: 1px solid transparent;
	
	&:focus {
		outline: none;
	}
}

.item-power-block-text {
	width: 194px;
	min-height: 280px;
	background-color: #a5d3ff;
	padding: 4px;
}

.item-power-block-text textarea {
	font-size: 13px;
	text-align: left;
	color: black;
	height: 267px;
	width: 182px;
	border: solid 2px transparent;
	background: #a5d3ff;
	display: block;
	margin: 0px;
	
	&::placeholder {
		color: black;
		opacity: 0.33;
	}
}

.item-power-block-text textarea:hover {
	border: solid 2px #d2e9ff;
}


/* Power slide selection display */

/* default slide visibility */
.item-power-slide01,
.item-power-slide02,
.item-power-slide03,
.item-power-slide04,
.item-power-slide05,
.item-power-slide06,
.item-power-slide07,
.item-power-slide08,
.item-power-slide09,
.item-power-slide10,
.item-power-slide11,
.item-power-slide12,
.item-power-slide13,
.item-power-slide14,
.item-power-slide15,
.item-power-slide16,
.item-power-slide17,
.item-power-slide18,
.item-power-slide19,
.item-power-slide20  {
	display: none;
}

/* show the selected power slide */
.item-upper-power-selection[value="power01"] ~ div.grid-container-power-slides .item-power-slide01,
.item-upper-power-selection[value="power02"] ~ div.grid-container-power-slides .item-power-slide02,
.item-upper-power-selection[value="power03"] ~ div.grid-container-power-slides .item-power-slide03,
.item-upper-power-selection[value="power04"] ~ div.grid-container-power-slides .item-power-slide04,
.item-upper-power-selection[value="power05"] ~ div.grid-container-power-slides .item-power-slide05,
.item-upper-power-selection[value="power06"] ~ div.grid-container-power-slides .item-power-slide06,
.item-upper-power-selection[value="power07"] ~ div.grid-container-power-slides .item-power-slide07,
.item-upper-power-selection[value="power08"] ~ div.grid-container-power-slides .item-power-slide08,
.item-upper-power-selection[value="power09"] ~ div.grid-container-power-slides .item-power-slide09,
.item-upper-power-selection[value="power10"] ~ div.grid-container-power-slides .item-power-slide10 {
	display: block;
	position: relative;
}

.item-lower-power-selection[value="power11"] ~ div.grid-container-power-slides .item-power-slide11,
.item-lower-power-selection[value="power12"] ~ div.grid-container-power-slides .item-power-slide12,
.item-lower-power-selection[value="power13"] ~ div.grid-container-power-slides .item-power-slide13,
.item-lower-power-selection[value="power14"] ~ div.grid-container-power-slides .item-power-slide14,
.item-lower-power-selection[value="power15"] ~ div.grid-container-power-slides .item-power-slide15,
.item-lower-power-selection[value="power16"] ~ div.grid-container-power-slides .item-power-slide16,
.item-lower-power-selection[value="power17"] ~ div.grid-container-power-slides .item-power-slide17,
.item-lower-power-selection[value="power18"] ~ div.grid-container-power-slides .item-power-slide18,
.item-lower-power-selection[value="power19"] ~ div.grid-container-power-slides .item-power-slide19,
.item-lower-power-selection[value="power20"] ~ div.grid-container-power-slides .item-power-slide20 {
	display: block;
	position: relative;
}

/* Make a selection button appear to be continuous with its slide via color and border */
.item-upper-power-selection[value="power01"] ~ .flex-container-power-selectors button[name="act_power01"]:not(:hover),
.item-upper-power-selection[value="power02"] ~ .flex-container-power-selectors button[name="act_power02"]:not(:hover),
.item-upper-power-selection[value="power03"] ~ .flex-container-power-selectors button[name="act_power03"]:not(:hover),
.item-upper-power-selection[value="power04"] ~ .flex-container-power-selectors button[name="act_power04"]:not(:hover),
.item-upper-power-selection[value="power05"] ~ .flex-container-power-selectors button[name="act_power05"]:not(:hover),
.item-upper-power-selection[value="power06"] ~ .flex-container-power-selectors button[name="act_power06"]:not(:hover),
.item-upper-power-selection[value="power07"] ~ .flex-container-power-selectors button[name="act_power07"]:not(:hover),
.item-upper-power-selection[value="power08"] ~ .flex-container-power-selectors button[name="act_power08"]:not(:hover),
.item-upper-power-selection[value="power09"] ~ .flex-container-power-selectors button[name="act_power09"]:not(:hover),
.item-upper-power-selection[value="power10"] ~ .flex-container-power-selectors button[name="act_power10"]:not(:hover) {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

.item-lower-power-selection[value="power11"] ~ .flex-container-power-selectors button[name="act_power11"]:not(:hover),
.item-lower-power-selection[value="power12"] ~ .flex-container-power-selectors button[name="act_power12"]:not(:hover),
.item-lower-power-selection[value="power13"] ~ .flex-container-power-selectors button[name="act_power13"]:not(:hover),
.item-lower-power-selection[value="power14"] ~ .flex-container-power-selectors button[name="act_power14"]:not(:hover),
.item-lower-power-selection[value="power15"] ~ .flex-container-power-selectors button[name="act_power15"]:not(:hover),
.item-lower-power-selection[value="power16"] ~ .flex-container-power-selectors button[name="act_power16"]:not(:hover),
.item-lower-power-selection[value="power17"] ~ .flex-container-power-selectors button[name="act_power17"]:not(:hover),
.item-lower-power-selection[value="power18"] ~ .flex-container-power-selectors button[name="act_power18"]:not(:hover),
.item-lower-power-selection[value="power19"] ~ .flex-container-power-selectors button[name="act_power19"]:not(:hover),
.item-lower-power-selection[value="power20"] ~ .flex-container-power-selectors button[name="act_power20"]:not(:hover) {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

/* Ignore hover styling for selector button of current slide */
.item-upper-power-selection[value="power01"] ~ .flex-container-power-selectors button[name="act_power01"]:hover,
.item-upper-power-selection[value="power02"] ~ .flex-container-power-selectors button[name="act_power02"]:hover,
.item-upper-power-selection[value="power03"] ~ .flex-container-power-selectors button[name="act_power03"]:hover,
.item-upper-power-selection[value="power04"] ~ .flex-container-power-selectors button[name="act_power04"]:hover,
.item-upper-power-selection[value="power05"] ~ .flex-container-power-selectors button[name="act_power05"]:hover,
.item-upper-power-selection[value="power06"] ~ .flex-container-power-selectors button[name="act_power06"]:hover,
.item-upper-power-selection[value="power07"] ~ .flex-container-power-selectors button[name="act_power07"]:hover,
.item-upper-power-selection[value="power08"] ~ .flex-container-power-selectors button[name="act_power08"]:hover,
.item-upper-power-selection[value="power09"] ~ .flex-container-power-selectors button[name="act_power09"]:hover,
.item-upper-power-selection[value="power10"] ~ .flex-container-power-selectors button[name="act_power10"]:hover {
	background-color: white;
	border: 1px solid #f9f4b3;
	border-right: none;
}

.item-lower-power-selection[value="power11"] ~ .flex-container-power-selectors button[name="act_power11"]:hover,
.item-lower-power-selection[value="power12"] ~ .flex-container-power-selectors button[name="act_power12"]:hover,
.item-lower-power-selection[value="power13"] ~ .flex-container-power-selectors button[name="act_power13"]:hover,
.item-lower-power-selection[value="power14"] ~ .flex-container-power-selectors button[name="act_power14"]:hover,
.item-lower-power-selection[value="power15"] ~ .flex-container-power-selectors button[name="act_power15"]:hover,
.item-lower-power-selection[value="power16"] ~ .flex-container-power-selectors button[name="act_power16"]:hover,
.item-lower-power-selection[value="power17"] ~ .flex-container-power-selectors button[name="act_power17"]:hover,
.item-lower-power-selection[value="power18"] ~ .flex-container-power-selectors button[name="act_power18"]:hover,
.item-lower-power-selection[value="power19"] ~ .flex-container-power-selectors button[name="act_power19"]:hover,
.item-lower-power-selection[value="power20"] ~ .flex-container-power-selectors button[name="act_power20"]:hover {
	background-color: white;
	border: 1px solid #bcdeff;
	border-right: none;
}

/* Show Power Roll Buttons */

.item-power-roll01,
.item-power-roll02,
.item-power-roll03,
.item-power-roll04,
.item-power-roll05,
.item-power-roll06,
.item-power-roll07,
.item-power-roll08,
.item-power-roll09,
.item-power-roll10,
.item-power-roll11,
.item-power-roll12,
.item-power-roll13,
.item-power-roll14,
.item-power-roll15,
.item-power-roll16,
.item-power-roll17,
.item-power-roll18,
.item-power-roll19,
.item-power-roll20  {
	visibility: hidden;
}

.item-upper-power-action01[value="all"] ~ div.item-power-action-block .item-power-roll01,
.item-upper-power-action02[value="all"] ~ div.item-power-action-block .item-power-roll02,
.item-upper-power-action03[value="all"] ~ div.item-power-action-block .item-power-roll03,
.item-upper-power-action04[value="all"] ~ div.item-power-action-block .item-power-roll04,
.item-upper-power-action05[value="all"] ~ div.item-power-action-block .item-power-roll05,
.item-upper-power-action06[value="all"] ~ div.item-power-action-block .item-power-roll06,
.item-upper-power-action07[value="all"] ~ div.item-power-action-block .item-power-roll07,
.item-upper-power-action08[value="all"] ~ div.item-power-action-block .item-power-roll08,
.item-upper-power-action09[value="all"] ~ div.item-power-action-block .item-power-roll09,
.item-upper-power-action10[value="all"] ~ div.item-power-action-block .item-power-roll10 {
	visibility: visible;
}

.item-lower-power-action11[value="all"] ~ div.item-power-action-block .item-power-roll11,
.item-lower-power-action12[value="all"] ~ div.item-power-action-block .item-power-roll12,
.item-lower-power-action13[value="all"] ~ div.item-power-action-block .item-power-roll13,
.item-lower-power-action14[value="all"] ~ div.item-power-action-block .item-power-roll14,
.item-lower-power-action15[value="all"] ~ div.item-power-action-block .item-power-roll15,
.item-lower-power-action16[value="all"] ~ div.item-power-action-block .item-power-roll16,
.item-lower-power-action17[value="all"] ~ div.item-power-action-block .item-power-roll17,
.item-lower-power-action18[value="all"] ~ div.item-power-action-block .item-power-roll18,
.item-lower-power-action19[value="all"] ~ div.item-power-action-block .item-power-roll19,
.item-lower-power-action20[value="all"] ~ div.item-power-action-block .item-power-roll20 {
	visibility: visible;
}

.item-upper-power-action01[value="roll"] ~ div.item-power-action-block .item-power-roll01,
.item-upper-power-action02[value="roll"] ~ div.item-power-action-block .item-power-roll02,
.item-upper-power-action03[value="roll"] ~ div.item-power-action-block .item-power-roll03,
.item-upper-power-action04[value="roll"] ~ div.item-power-action-block .item-power-roll04,
.item-upper-power-action05[value="roll"] ~ div.item-power-action-block .item-power-roll05,
.item-upper-power-action06[value="roll"] ~ div.item-power-action-block .item-power-roll06,
.item-upper-power-action07[value="roll"] ~ div.item-power-action-block .item-power-roll07,
.item-upper-power-action08[value="roll"] ~ div.item-power-action-block .item-power-roll08,
.item-upper-power-action09[value="roll"] ~ div.item-power-action-block .item-power-roll09,
.item-upper-power-action10[value="roll"] ~ div.item-power-action-block .item-power-roll10 {
	visibility: visible;
}

.item-lower-power-action11[value="roll"] ~ div.item-power-action-block .item-power-roll11,
.item-lower-power-action12[value="roll"] ~ div.item-power-action-block .item-power-roll12,
.item-lower-power-action13[value="roll"] ~ div.item-power-action-block .item-power-roll13,
.item-lower-power-action14[value="roll"] ~ div.item-power-action-block .item-power-roll14,
.item-lower-power-action15[value="roll"] ~ div.item-power-action-block .item-power-roll15,
.item-lower-power-action16[value="roll"] ~ div.item-power-action-block .item-power-roll16,
.item-lower-power-action17[value="roll"] ~ div.item-power-action-block .item-power-roll17,
.item-lower-power-action18[value="roll"] ~ div.item-power-action-block .item-power-roll18,
.item-lower-power-action19[value="roll"] ~ div.item-power-action-block .item-power-roll19,
.item-lower-power-action20[value="roll"] ~ div.item-power-action-block .item-power-roll20 {
	visibility: visible;
}

/* Show Power END Buttons */

.item-power-end01,
.item-power-end02,
.item-power-end03,
.item-power-end04,
.item-power-end05,
.item-power-end06,
.item-power-end07,
.item-power-end08,
.item-power-end09,
.item-power-end10,
.item-power-end11,
.item-power-end12,
.item-power-end13,
.item-power-end14,
.item-power-end15,
.item-power-end16,
.item-power-end17,
.item-power-end18,
.item-power-end19,
.item-power-end20  {
	visibility: hidden;
}

.item-upper-power-action01[value="all"] ~ div.item-power-action-block .item-power-end01,
.item-upper-power-action02[value="all"] ~ div.item-power-action-block .item-power-end02,
.item-upper-power-action03[value="all"] ~ div.item-power-action-block .item-power-end03,
.item-upper-power-action04[value="all"] ~ div.item-power-action-block .item-power-end04,
.item-upper-power-action05[value="all"] ~ div.item-power-action-block .item-power-end05,
.item-upper-power-action06[value="all"] ~ div.item-power-action-block .item-power-end06,
.item-upper-power-action07[value="all"] ~ div.item-power-action-block .item-power-end07,
.item-upper-power-action08[value="all"] ~ div.item-power-action-block .item-power-end08,
.item-upper-power-action09[value="all"] ~ div.item-power-action-block .item-power-end09,
.item-upper-power-action10[value="all"] ~ div.item-power-action-block .item-power-end10 {
	visibility: visible;
}

.item-lower-power-action11[value="all"] ~ div.item-power-action-block .item-power-end11,
.item-lower-power-action12[value="all"] ~ div.item-power-action-block .item-power-end12,
.item-lower-power-action13[value="all"] ~ div.item-power-action-block .item-power-end13,
.item-lower-power-action14[value="all"] ~ div.item-power-action-block .item-power-end14,
.item-lower-power-action15[value="all"] ~ div.item-power-action-block .item-power-end15,
.item-lower-power-action16[value="all"] ~ div.item-power-action-block .item-power-end16,
.item-lower-power-action17[value="all"] ~ div.item-power-action-block .item-power-end17,
.item-lower-power-action18[value="all"] ~ div.item-power-action-block .item-power-end18,
.item-lower-power-action19[value="all"] ~ div.item-power-action-block .item-power-end19,
.item-lower-power-action20[value="all"] ~ div.item-power-action-block .item-power-end20 {
	visibility: visible;
}

.item-upper-power-action01[value="end"] ~ div.item-power-action-block .item-power-end01,
.item-upper-power-action02[value="end"] ~ div.item-power-action-block .item-power-end02,
.item-upper-power-action03[value="end"] ~ div.item-power-action-block .item-power-end03,
.item-upper-power-action04[value="end"] ~ div.item-power-action-block .item-power-end04,
.item-upper-power-action05[value="end"] ~ div.item-power-action-block .item-power-end05,
.item-upper-power-action06[value="end"] ~ div.item-power-action-block .item-power-end06,
.item-upper-power-action07[value="end"] ~ div.item-power-action-block .item-power-end07,
.item-upper-power-action08[value="end"] ~ div.item-power-action-block .item-power-end08,
.item-upper-power-action09[value="end"] ~ div.item-power-action-block .item-power-end09,
.item-upper-power-action10[value="end"] ~ div.item-power-action-block .item-power-end10 {
	visibility: visible;
}

.item-lower-power-action11[value="end"] ~ div.item-power-action-block .item-power-end11,
.item-lower-power-action12[value="end"] ~ div.item-power-action-block .item-power-end12,
.item-lower-power-action13[value="end"] ~ div.item-power-action-block .item-power-end13,
.item-lower-power-action14[value="end"] ~ div.item-power-action-block .item-power-end14,
.item-lower-power-action15[value="end"] ~ div.item-power-action-block .item-power-end15,
.item-lower-power-action16[value="end"] ~ div.item-power-action-block .item-power-end16,
.item-lower-power-action17[value="end"] ~ div.item-power-action-block .item-power-end17,
.item-lower-power-action18[value="end"] ~ div.item-power-action-block .item-power-end18,
.item-lower-power-action19[value="end"] ~ div.item-power-action-block .item-power-end19,
.item-lower-power-action20[value="end"] ~ div.item-power-action-block .item-power-end20 {
	visibility: visible;
}

/* Buttons for maneuver, power, talent, and complication movers. */
.maneuver-mover-plus-minus-enclosure,
.power-mover-plus-minus-enclosure,
.talent-mover-plus-minus-enclosure,
.complication-mover-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-height: 22px;
	max-width: 13px;
}

.maneuver-mover-plus-minus-button,
.power-mover-plus-minus-button,
.talent-mover-plus-minus-button,
.complication-mover-plus-minus-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 22px;
	width: 13px;
	align-items: center;
	padding: 0px;
	margin-right: 1px;
}

.maneuver-mover-plus-minus-button button.buttonPlus,
.maneuver-mover-plus-minus-button button.buttonMinus,
.power-mover-plus-minus-button button.buttonPlus,
.power-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonMinus {
	display: inline-block;
	margin: 0px 0px;
	padding: 0px 0px;
	border-radius: 0px;
	max-height: 9px;
	min-height: 9px;
	max-width: 13px;
	min-width: 13px;
}

.maneuver-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonPlus {
	position: absolute;
	top: 6px;
}

.maneuver-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonMinus {
	position: absolute;
	top: 17px;
}

.power-mover-plus-minus-button button.buttonPlus {
	position: absolute;
	top: 9px;
}

.power-mover-plus-minus-button button.buttonMinus {
	position: absolute;
	top: 20px;
}

.maneuver-mover-plus-minus-button .upArrow,
.maneuver-mover-plus-minus-button .downArrow,
.power-mover-plus-minus-button .upArrow,
.power-mover-plus-minus-button .downArrow,
.talent-mover-plus-minus-button .upArrow,
.talent-mover-plus-minus-button .downArrow,
.complication-mover-plus-minus-button .upArrow,
.complication-mover-plus-minus-button .downArrow {
	position: absolute;
	left: 3px;
	right: 5px;
	height: 5px;
	width: 5px;
	padding: 0px;
	border: solid #62b1ff;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.maneuver-mover-plus-minus-button .upArrow,
.power-mover-plus-minus-button .upArrow,
.talent-mover-plus-minus-button .upArrow,
.complication-mover-plus-minus-button .upArrow {
	top: 3px;
	transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}

.maneuver-mover-plus-minus-button .downArrow,
.power-mover-plus-minus-button .downArrow,
.talent-mover-plus-minus-button .downArrow,
.complication-mover-plus-minus-button .downArrow {
	top: -1px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.maneuver-mover-plus-minus-button button.buttonPlus,
.maneuver-mover-plus-minus-button button.buttonMinus,
.power-mover-plus-minus-button button.buttonPlus,
.power-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonMinus {
	background-color: white;
	border: solid 1px #8fc8ff; 
}

.maneuver-mover-plus-minus-button button.buttonPlus:hover,
.maneuver-mover-plus-minus-button button.buttonMinus:hover,
.power-mover-plus-minus-button button.buttonPlus:hover,
.power-mover-plus-minus-button button.buttonMinus:hover,
.talent-mover-plus-minus-button button.buttonPlus:hover,
.talent-mover-plus-minus-button button.buttonMinus:hover,
.complication-mover-plus-minus-button button.buttonPlus:hover,
.complication-mover-plus-minus-button button.buttonMinus:hover {
	background-color: #8A8A8A;
	transition: 0.05s;
}

.maneuver-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.maneuver-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.power-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.power-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.talent-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.talent-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.complication-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.complication-mover-plus-minus-button button.buttonMinus:hover > .downArrow {
	height: 5px;
	width: 5px;
	padding: 0px;
	border: solid white;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

/* ----------------------------------------------------- */
/* Skills                                                */
/* Organized into a 2x3 grid of containers               */
/* ----------------------------------------------------- */
.grid-container-skills-tab {
	display: grid;
	grid-template-areas: "generalSkills otherSkills";
	grid-gap: 6px;
	grid-template-columns: 358px 322px;
	grid-template-rows: 783px;
	max-width: 692px;
	padding: 0px;
	padding-left: 0px;
	padding-top: 6px;
	margin-bottom: 0px;
	font-size: 16px;
	background-color: #f0c566;
	border: 3px solid #6787e7;
	border-radius: 0px;
	justify-content: middle;
	min-height: 795px;
}

.grid-container-skills-tab h1 {
	display:inline-block;
	margin-left: 0px;
	padding-left: 2px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.10;
	text-align: center;
}

.grid-container-skills-tab input[type=text] {
	height: 22px;
}

.flex-container-skills-left {
	grid-area: "generalSkills";
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 790px;
}

.flex-container-skills-right {
	grid-area: "otherSkills";
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 790px;
}

.grid-container-skills-tab .custom-select,
.grid-container-skills-tab .custom-select-skill,
.grid-container-skills-tab .custom-select-alternate {
	font-size: 13px;
	margin-left: 3px;
	padding-left: 3px;
}

/* Item: Skill Containers for Skill Groups */
.item-skillsTab-flex-container-cap,
.item-flex-container-skill-list,
.item-skillsTab-flex-container-base {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 358px;
	margin-left: 5px;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	line-height: 1.10;
	padding-left: 1px;
	padding-right: 4px;
}

.item-flex-container-skill-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.item-flex-container-skill-list ul {
	flex: 1 0 auto;
}

.item-skillsTab-flex-container-cap {
	border-bottom: none;
	border-radius: 3px 3px 0px 0px;
	padding-top: 5px; 
	min-height: 19px;
	max-height: 19px;
}

.item-flex-container-skill-list {
	border-top: none;
	border-bottom: none;
	max-height: 750px;
}

.item-skillsTab-flex-container-base {
	border-top: none;
	border-radius: 0px 0px 3px 3px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	min-height: 14px;
	max-height: 14px;
}

.item-flex-container-skill-list input[type=number] {
	text-align: center;
	padding-left: 3px;
	padding-right: 1px; /* Fix for shifting spinners on focus */
	max-width: 36px;
	max-height: 22px;
	border: transparent;
	background: transparent;
	
	&:focus {
		background-color: #fcf9d9;;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.item-flex-container-skill-list input[readonly] {
	text-align: center;
	max-width: 24px;
	background-color: transparent;
	border: transparent;
	
	&:focus {
		outline: none;
	}
}

.item-flex-container-skill-list input[type=text]:nth-child(1) {
	max-width: 140px;
	margin-top: 1px;
	margin-bottom: 1px;
	font-size: 13px;
	text-align: left;
	margin-left: 4px;
	margin-right: 1px;
	padding-left: 2px;
	padding-right: 1px;
	background: transparent;
	border: solid 1px transparent;
}

.item-flex-container-skill-list input[type=text]:nth-child(1):focus {
	background-color: #fcf9d9;
	outline: none;
}

.item-flex-container-skill-list input[type=text]:nth-child(1):hover {
	background-color: #ddf0fa;
}

/* Sub-Item: Flex containers for rows */
.subitem-skillsTab-grid-container-skills-heading-left {
	grid-template-areas: "skillName skillType rollChance . skillCost";
	grid-template-columns: 164px 70px 30px 22px 58px;
	display: grid;
}

.subitem-skillsTab-grid-container-skills-heading-left-name {
	grid-area: skillName;
	padding-left: 5px;
}

.subitem-skillsTab-grid-container-skills-heading-left-name h2 {
	text-align: left;
}

.subitem-skillsTab-grid-container-skills-heading-left-type {
	grid-area: skillType;
	text-align: center;
}

.subitem-skillsTab-grid-container-skills-heading-left-roll {
	grid-area: rollChance;
	text-align: center;
}

.subitem-skillsTab-grid-container-skills-heading-left-cost {
	grid-area: skillCost;
	text-align: center;
}

.subitem-skillsTab-flex-container-skill {
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-right: 2px;
	max-height: 24px;
	min-width: 340px;
	margin-bottom: 1px;
	align-items: center;
}

/* Item: Skill Container for combat skills. */
.item-skillsTab-flex-container-combat-skills {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: 292px;
	min-height: 261px;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-radius: 3px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 1px;
	padding-top: 4px;
}

.combat-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-combat-skills {
	min-height: 381px;
}

.combat-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-combat-skills .item-flex-container-combat-skills-extension {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.combat-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-combat-skills {
	min-height: 261px;
}

.combat-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-combat-skills .item-flex-container-combat-skills-extension {
	display: none;
}

.subitem-skillsTab-flex-container-combat-skill,
.subitem-skillsTab-flex-container-combat-levels {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-width: 285px;
	align-items: center;
	margin-bottom: 2px;
}

.subitem-skillsTab-flex-container-combat-skill:nth-child(n+2),
.subitem-skillsTab-flex-container-combat-levels {
	height: 22px;
}

.subitem-skillsTab-flex-container-combat-skill h1{
	min-height: 16px;
	text-align: center;
}

.subitem-skillsTab-flex-container-combat-skill h1:nth-child(1) {
	text-align: left;
	min-width: 148px;
}

.subitem-skillsTab-flex-container-combat-skill h1:nth-child(3) {
	min-width: 50px;
}

.subitem-skillsTab-flex-container-combat-skill h1:nth-child(5) {
	padding-right: 2px;
}

.subitem-skillsTab-flex-container-combat-skill input[type=text]:nth-child(1) {
	text-align: left;
	padding-left: 2px;
	width: 150px;
	margin-right: 1px;
	background: transparent;
	border: solid 1px transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.subitem-skillsTab-flex-container-combat-skill .custom-select {
	max-width: 55px;
	text-align: center;
	height: 19px;
	margin-left: 2px;
}

.subitem-skillsTab-flex-container-combat-skill input[type=number],
.subitem-skillsTab-flex-container-combat-levels input[type=number] {
	text-align: center;
	padding-left: 3px;
	padding-right: 1px; /* Fix for shifting spinners on focus */
	max-width: 36px;
	max-height: 22px;
	border: transparent;
	background: transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		/* background-color: #faf6c6; */
		background-color: #ddf0fa;
	}
}

.subitem-skillsTab-flex-container-combat-skill input[type=text]:nth-child(6),
.subitem-skillsTab-flex-container-combat-levels input[readonly] {
	text-align: center;
	background-color: transparent;
	max-width: 24px;
	margin: 0px;
	margin-left: 2px;
	border: transparent;
	
	&:focus {
		outline: none;
	}
}

.subitem-skillsTab-flex-container-combat-levels h1:nth-child(1) {
	text-align: left;
	min-width: 226px;
	margin-right: 0px;
	max-height: 16px;
	margin-top: 2px;
}

/* Item: Skill Container for Language Skills */
.item-skillsTab-flex-container-languages {
	grid-area: theLanguageSkills;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 292px;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-radius: 3px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 3px;
	padding-top: 2px;
}

.language-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-languages {
	min-height: 236px;
}

.language-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-languages .item-flex-container-language-block-extension {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.language-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-languages {
	min-height: 116px;
}

.language-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-languages .item-flex-container-language-block-extension {
	display: none;
}

.subitem-skillsTab-flex-container-language,	
.subitem-skillsTab-flex-container-language-heading {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-width: 285px;
	align-items: center;
	margin-bottom: 2px;
}

.subitem-skillsTab-flex-container-language-heading {
	height: 16px;
}

.subitem-skillsTab-flex-container-language-heading h1{
	min-height: 16px;
	text-align: center;
}

.subitem-skillsTab-flex-container-language-heading h1:nth-child(1) {
	text-align: left;
	width: 149px;
}

.subitem-skillsTab-flex-container-language-heading h1:nth-child(3) {
	padding-left: 5px;
	min-width: 56px;
}

.subitem-skillsTab-flex-container-language-heading h1:nth-child(4) {
	padding-left: 10px;
}

.subitem-skillsTab-flex-container-language-heading h1:nth-child(5) {
	margin-right: 2px;
}

.subitem-skillsTab-flex-container-language {
	height: 22px;
}

.subitem-skillsTab-flex-container-language input[type=text] {
	text-align: left;
	padding-left: 2px;
	width: 150px;
	margin-right: 1px;
	background: transparent;
	border: solid 1px transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.subitem-skillsTab-flex-container-language input[readonly] {
	text-align: center;
	background-color: transparent;
	border: transparent;
	max-width: 24px;
	margin-right: 1px;

	
	&:hover {
		outline: none;
		background: transparent;
	}
	
	&:focus {
		outline: none;
		background: transparent;
	}
}

.subitem-skillsTab-flex-container-language .container-checkbox-small {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	padding-right: -5px;
	padding-bottom: 16px;
}

.subitem-skillsTab-flex-container-language .custom-select {
	min-width: 63px;
	text-align: left;
	height: 19px;
	margin-right: 6px;
}


/* Item: Skill Container for Skill Enhancers */
.item-skillsTab-flex-container-enhancers {
	grid-area: theEnhancers;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 295px;
	min-height: 260px;
	grid-gap:0px;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-radius: 3px;
	padding-left: 4px;
	padding-right: 1px;
	padding-bottom: 3px;
	padding-top: 2px;
}

.subitem-skillsTab-flex-container-enhancers-heading,
.subitem-skillsTab-flex-container-enhancers-row,
.subitem-skillsTab-flex-container-levels-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-width: 280px;
}

.subitem-skillsTab-flex-container-enhancers-heading {
	height: 16px;
}

.subitem-skillsTab-flex-container-enhancers-heading h1{
	min-height: 16px;
	text-align: center;
}

.subitem-skillsTab-flex-container-enhancers-heading h1:nth-child(1) {
	text-align: left;
	min-width: 60px;
}

.subitem-skillsTab-flex-container-enhancers-heading h1:nth-child(2) {
	padding-right: 5px;
}

.subitem-skillsTab-flex-container-enhancers-row,
.subitem-skillsTab-flex-container-levels-row {
	height: 19px;
}

.subitem-skillsTab-flex-container-enhancers-row .container-checkbox-small {
	padding-right: 3px;
	margin-left: 2px;
}

.subitem-skillsTab-flex-container-enhancers-row h1{
	max-height: 16px;
	text-align: left;
	min-width: 241px;
}

.subitem-skillsTab-flex-container-enhancers-row input[readonly],
.subitem-skillsTab-flex-container-levels-row input[readonly] {
	text-align: center;
	background-color: transparent;
	max-width: 24px;
	margin-right: 3px;
	padding-bottom: 4px;
	border: transparent;
	
	&:focus {
		outline: none;
	}
}

.subitem-skillsTab-flex-container-levels-row h1 {
	text-align: left;
	min-width: 220px;
}

.subitem-skillsTab-flex-container-levels-row input[type=number] {
	text-align: center;
	padding-left: 3px;
	padding-right: 1px; /* Fix for shifting spinners on focus */
	max-width: 45px;
	max-height: 22px;
	border: transparent;
	background: transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		background-color: #faf6c6;
	}
}

/* ----------------------------------------------------- */
/* Gear: armor, weapons, and equipment                   */
/* Organized into a 3x4 grid of containers               */
/* ----------------------------------------------------- */

.grid-container-tab-gear {
	display: grid;
	grid-template-areas:
	"theEncumbrance theEncumbrance gearHealth"
	"theArmor theArmor gearHealth"
	"theShield theShield gearHealth"
	"theWeapons theWeapons theWeapons"
	"theEquipment theSlides theSlides";
	grid-template-columns: 258px 344px 86px;
	max-width: 694px;
	padding: 0px;
	padding-left: 2px;
	font-size: 16px;
	background-color: royalblue;
	border: 2px solid #6787e7;
	border-radius: 0px;
	justify-content: middle;
	min-height: 803px;
}

.shield-expanded[value="true"] ~ div.grid-container-tab-gear {
	grid-template-rows: 77px 130px 47px 164px 322px;
}

.shield-expanded[value="false"] ~ div.grid-container-tab-gear {
	grid-template-rows: 97px 130px 27px 164px 322px;
}

.grid-container-tab-gear h1 {
	display: inline-block;
	margin-left: 0px;
	padding-left: 2px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.10;
}

.grid-container-tab-gear .custom-select {
	font-size: 13px;
	max-width: 110px;
	max-height: 19px;
}

/* Health status styling grouped with item-health-characteristics */

.shield-expanded[value="true"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield,
.shield-expanded[value="false"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield-expanded {
	display: none;
}

.shield-expanded[value="false"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield,
.shield-expanded[value="true"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield-expanded {
	display: flex;
}

/* Encumbrance */
.item-tab-gear-flex-container-encumbrance {
	grid-area: theEncumbrance;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 4px;
	margin-top: 8px;
	padding: 0px;
	max-width: 594px;
	height: 60px;
	padding-right: 10px;
	text-align: left;
	vertical-align: middle;
	border: none;
}

.item-tab-gear-flex-container-encumbrance h1 {
	text-align: center;
	color: white;
	font-size: 13px;
}

.item-tab-gear-flex-container-encumbrance h1:nth-child(2) {
	margin-bottom: 2px;
}

.item-tab-gear-flex-container-encumbrance input[type=number],
.item-tab-gear-flex-container-encumbrance input[readonly] {
	text-align: center;
	max-width: 65px;
	background-color: #d2e9ff;
	border: solid 2px #8da5ed;
	font-size: 16px;
	margin-left: 0px;
	padding-right: 0px;
	min-height: 22px;
}

.subitem-tab-gear-flex-container-encumbrance,
.subitem-tab-gear-flex-container-encumbrance-bonus {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 75px;
	align-items: center;
}

.subitem-tab-gear-flex-container-encumbrance-bonus {
	margin-left: 0px;
}

.subitem-tab-gear-flex-container-cv-status {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 55px;
	max-height: 62px;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: transparent;
	align-items: center;
}

.cv-status-label-container {
	max-width: 34px;
	min-width: 34px;
}

.cv-status-label-container h1 {
	font-size: 12px;
	color: white;
}

.subitem-tab-gear-flex-container-ocv-status,
.subitem-tab-gear-flex-container-dcv-status {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-width: 55px;
	max-width: 55px;
	max-height: 22px;
	font-size: 12px;
	padding: 0px;
	background-color: transparent;
	align-items: center;
}

.subitem-tab-gear-flex-container-ocv-status input[readonly],
.subitem-tab-gear-flex-container-dcv-status input[readonly] {
	max-width: 22px;
	max-height: 15px;
	font-size: 13px;
	font-weight: bold;
	padding: 0px;
	background-color: #d2e9ff;
	border: solid 2px #8da5ed;
	color: black;
}

.subitem-tab-gear-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 50px;
	max-height: 20px;
	background-color: #d2e9ff;
	border: solid 2px #8da5ed;
	border-radius: 3px;
}

.subitem-tab-gear-plus-minus-enclosure input[type=text] {
	max-width: 40px;
	height: 20px;
	font-size: 16px;
	background-color: transparent;
	text-align: center;
	vertical-align: center;
}

.subitem-tab-gear-plus-minus-enclosure input[type=text]:focus{
	outline: transparent;
}

.subitem-tab-gear-flex-container-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 20px;
	width: 10px;
	align-items: center;
	padding: 0px;
}

.subitem-tab-gear-flex-container-stat button.buttonPlus,
.subitem-tab-gear-flex-container-stat button.buttonMinus {
	background-color: LemonChiffon;
	border: solid 1px slategray;
	color: slategray;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	display: inline-block;
	font-size: 10px;
	margin: 0px 0px;
	line-height: 1.4ch;
	border-radius: 0px;
	max-width: 10px;
}

.subitem-tab-gear-flex-container-stat button.buttonPlus span,
.subitem-tab-gear-flex-container-stat button.buttonMinus span {
	display: inline-block;
	transform: rotate(-90deg);
	text-align: center;
}

.subitem-tab-gear-flex-container-stat button.buttonPlus:hover,
.subitem-tab-gear-flex-container-stat button.buttonMinus:hover {
	background-color: gray;
	color: white;
	transition: 0.05s;
} 

/* ------------- */
/* Item: Armor   */
/* ------------- */

.item-tab-gear-grid-container-armor {
	grid-area: theArmor;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 585px;
	padding-bottom: 4px;
	padding-top: 0px;
	margin-left: 4px;
	background-color: #f6ee8d;
	border: solid 2px #ebb232;
	border-bottom: none;
	border-radius: 2px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	height: 132px;
}

.subitem-tab-gear-flex-container-armor-heading,
.subitem-tab-gear-flex-container-armor-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	max-width: 575px;
	height: 24px;
}

.subitem-tab-gear-flex-container-armor-heading {
	padding-left: 2px;
}

.subitem-tab-gear-flex-container-armor-row {
	padding-left: 3px;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(3) {
	min-width: 43px;
	text-align: left;
	padding-left: 3px;
}

.subitem-tab-gear-flex-container-armor-heading .set-AtoB-button {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	min-width: 31px;
	margin-right: 46px;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(5) {
	min-width: 147px;
	text-align: center;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(6) {
	min-width: 44px;
	text-align: left;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(7) {
	min-width: 34px;
	text-align: left;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(8) {
	min-width: 32px;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(9) {
	text-align: center;
	min-width: 98px;
}

.subitem-tab-gear-flex-container-armor-heading h1:nth-child(10) {
	text-align: center;
	min-width: 46px;
}

.subitem-tab-gear-flex-container-armor-row input {
	max-height: 22px;
	background: transparent;
	border: transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.subitem-tab-gear-flex-container-armor-row input[type=number] {
	text-align: right;
	padding-left: 2px;
	max-width: 36px;
	min-width: 34px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(4),
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
	padding-left: 2px;
	padding-right: 1px;
	margin-right: 0px;
}

.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(4) {
	text-align: left;
	max-width: 122px;
	margin-right: 2px;
}

.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
	text-align: center;
	max-width: 100px;
}

.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(10) {
	text-align: right;
	min-width: 48px;
}

.subitem-tab-gear-flex-container-armor-row select {
	text-align-last: center; /* For Chrome */
	text-align: center; /* Firefox */
}

/* Display or hide the armor list and set item defense worksheets */
.item-tab-gear-flex-container-armor,
.item-tab-gear-flex-container-set-defense-01,
.item-tab-gear-flex-container-set-defense-02,
.item-tab-gear-flex-container-set-defense-03,
.item-tab-gear-flex-container-set-defense-04 {
	display: none;
}

/* Set Armor Defense Worksheets */

.set-defense-toggle[value="0"] ~ div.item-tab-gear-flex-container-armor {
	display: block;
	padding-left: 2px;
}

.set-defense-toggle[value="01"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-01,
.set-defense-toggle[value="02"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-02,
.set-defense-toggle[value="03"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-03,
.set-defense-toggle[value="04"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-04 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 100%;
}

.subitem-tab-gear-flex-container-set-defense-column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 90%;
	margin-bottom: 3%;
	border-bottom: solid 2px #ebb232;
}

.subitem-tab-gear-flex-container-set-defense-column:nth-child(1),
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) {
	width: 40%;
}

.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) {
	width: 60%;
}

.subitem-tab-gear-flex-container-set-defense-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 23px;
}

.subitem-tab-gear-flex-container-set-defense-column:nth-child(1) .subitem-tab-gear-flex-container-set-defense-row {
	padding-right: 5%;
}

.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) .subitem-tab-gear-flex-container-set-defense-row {
	padding-left: 2%;
}

.subitem-flash-defense,
.subitem-flash-defense-sense {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.subitem-flash-defense {
	width: 57%;
}

.subitem-flash-defense-sense {
	width: 33%;
}

/* ------------- */
/* Item: Shield  */
/* ------------- */

.item-tab-gear-grid-container-shield {
	display: flex;
	flex-direction: column;
	grid-area: theShield;
	width: 598px;
}

.subitem-tab-gear-flex-container-shield {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-top: none;
	border-radius: 2px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 23px;
	margin-right: 5px;
	padding-left: 2px;
	margin-left: 4px;
}

.subitem-tab-gear-flex-container-shield-expanded {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-top: none;
	border-radius: 2px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 43px;
	margin-right: 5px;
	padding-left: 2px;
	margin-left: 4px;
	grid-gap: 3px;
}

.subitem-tab-gear-flex-container-shield-heading {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 38px;
	max-height: 38px;
}

.shield-title-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.shield-title-container h1 {
	margin-left: 16px;
}


/* ------------- */
/* Item: Weapons */
/* ------------- */
.item-tab-gear-flex-container-weapons,
.item-tab-gear-set-damage {
	grid-area: theWeapons;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 4px;
	padding: 0px;
	padding-bottom: 1px;
	margin-top: 8px;
	height: 142px;
	background-color: #f6ee8d; 
	border: solid 2px #ebb232;
	border-right: solid 2px #ebb232;
	border-radius: 3px;
}

.item-tab-gear-flex-container-weapons {
	width: 657px;
	padding-left: 3px;
	padding-bottom: 1px;
} 

.item-tab-gear-set-damage {
	width: 660px;
}

.subitem-tab-gear-flex-container-shield-checks {
	min-width: 14px;
	min-height: 38px;
	max-height: 38px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	grid-gap: 11px;
	margin-left: 2px;
}

.subitem-tab-gear-flex-container-shield-heading:nth-child(3) {
	align-items: start;
}

.subitem-tab-gear-flex-container-shield-heading:nth-child(3) h1 {
	padding-left: 0px;
}

.subitem-tab-gear-flex-container-weapon-heading,
.subitem-tab-gear-flex-container-weapon-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	max-width: 652px;
	height: 20px;
}

.subitem-tab-gear-flex-container-weapon-heading {
	justify-content: flex-start;
	gap: 3px;
	padding-left: 1px;
}

.subitem-tab-gear-flex-container-weapon-row {
	justify-content: space-between;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(3) {
	min-width: 61px;
	max-width: 61px;
	text-align: left;
	padding-left: 4px;
}

.subitem-tab-gear-flex-container-weapon-heading .set-AtoB-button {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	min-width: 31px;
	margin-right: 25px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:not(:nth-child(3)) {
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(5) {
	min-width: 67px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(6) {
	min-width: 42px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(7) {
	min-width: 36px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(8) {
	min-width: 37px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(9) {
	min-width: 41px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(10) {
	min-width: 29px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(11) {
	min-width: 42px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(12) {
	min-width: 48px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(13) {
	min-width: 41px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(14) {
	min-width: 33px;
}

.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(15) {
	min-width: 40px;
}

.item-tab-gear-flex-container-weapons .subitem-tab-gear-flex-container-weapon-row:nth-child(7) {
	max-height: 40px;
}

.item-tab-gear-flex-container-weapons .subitem-tab-gear-flex-container-weapon-row:nth-child(n+8) {
	max-height: 20px;
}

.subitem-tab-gear-flex-container-shield-heading input,
.subitem-tab-gear-flex-container-weapon-row input {
	max-height: 20px;
	border: transparent;
	background: transparent;
	
	&:focus {
		background-color: #fcf9d9;
		outline: none;
	}
	
	&:hover {
		background-color: #ddf0fa;
	}
}

.subitem-tab-gear-flex-container-shield-heading label,
.subitem-tab-gear-flex-container-weapon-row label {
	max-width: 5px;
	margin-left: 2px;
	margin-top: 3px;
	padding-right: 0px;
}

.subitem-tab-gear-flex-container-shield-heading input[readonly]:focus,
.subitem-tab-gear-flex-container-weapon-row input[readonly]:focus {
	outline: none;
}

.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure:nth-child(1) {
	margin-right: 1px;
}

.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2) {
	margin-right: 1px;
}

.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny:nth-child(3) {
	margin-right: 8px;
}

.subitem-tab-gear-flex-container-shield-expanded .subitem-tab-gear-flex-container-shield-heading:nth-child(3) input[type=text],
.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(4) {
	text-align: left;
	padding-left: 0px;
	padding-right: 2px;
	max-width: 120px;
	margin-right: 0px;
}

.weapon-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure {
	max-width: 12px;
	margin-left: 2px;
}

.subitem-tab-gear-flex-container-shield-heading input[type=number],
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(12) {
	text-align: right;
	padding-left: 3px;
	max-width: 38px;
	padding-right: 0px;
}

.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(12) {
	margin-right: 3px;
	margin-left: 3px;
}

.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9) {
	margin: 0px;
}

.subitem-tab-gear-flex-container-shield-heading:nth-child(13) input[type=number],
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(11),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(14),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(15) {
	text-align: right;
	padding-left: 3px;
	max-width: 46px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

.subitem-tab-gear-flex-container-shield-expanded .subitem-tab-gear-flex-container-shield-heading:nth-child(10) input[readonly],
.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10) {
	background-color: inherit;
	text-align: center;
	padding-left: 0px;
	max-width: 30px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 3px;
	margin-bottom: 2px;
}

.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10) {
	padding-left: 7px;
}

/* Switch weapon sets */

.set-AtoB-button button,
.set-AtoB-button-light button {
	color: white;
	width: 29px;
	height: 17px;
	font-size: 12px;
	font-weight: bold;
	padding: 0px;
	text-align: center;
	border: none;
	cursor: pointer;
	border-radius: 2px;
	line-height: 1.4;
}

.set-AtoB-button button {
	background-color: #f2cf7f;
	
	:hover {
		background-color: #ddf0fa;
		border-radius: 2px;
		color: black;
	}
}

.set-AtoB-button-light button {
	background-color: #9aceff;
	
	:hover {
		background-color: #fcf9d9;
		border-radius: 2px;
		color: black;
	}
}

/* Show weapons or appropriate Set Damage Dialogs */

.item-tab-gear-flex-container-set-damage-01,
.item-tab-gear-flex-container-set-damage-02,
.item-tab-gear-flex-container-set-damage-03,
.item-tab-gear-flex-container-set-damage-04,
.item-tab-gear-flex-container-set-damage-05,
.item-tab-gear-flex-container-set-damage-06 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.subitem-tab-gear-flex-container-set-defense-column input[type=number],
.subitem-tab-gear-flex-container-set-damage-column input[type=number] {
	min-width: 50px;
	max-height: 20px;
	border: solid 1px #F0E442;
}

.subitem-tab-gear-flex-container-set-defense-column input[type=text],
.subitem-tab-gear-flex-container-set-damage-column input[type=text] {
	width: 80px;
	max-height: 19px;
}

.subitem-tab-gear-flex-container-set-defense-column input[readonly],
.subitem-tab-gear-flex-container-set-damage-column input[readonly] {
	background: transparent;
	border: none;
	margin-bottom: 1px;
	padding: 0px;
	max-height: 16px;
}

.subitem-tab-gear-flex-container-set-defense-column input[readonly]:focus,
.subitem-tab-gear-flex-container-set-damage-column input[readonly]:focus {
	outline: none;
}

.item-tab-gear-set-defense-title,
.item-tab-gear-set-damage-title {
	background-color: #f2cf7f;
	padding-bottom: 1px;
	margin-bottom: 2px;
}

.item-tab-gear-set-defense-title input[type=text],
.item-tab-gear-set-damage-title input[type=text] {
	width: 160px;
	text-align: left;
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	color: black;
	padding-left: 5px;
	
	&:focus {
		background-color: #f7e2b2;
		outline: none;
	}
	
	&:hover {
		background-color: #cce8f8;
	}
}

.item-tab-gear-set-defense-title h1,
.item-tab-gear-set-damage-title h1 {
	margin-left: 5px;
}

.subitem-tab-gear-flex-container-set-damage-column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 140px;
	width: 220px;
	padding: 0px;
	padding-bottom: 3px;
}

.subitem-tab-gear-flex-container-set-damage-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 215px;
	margin-right: 5px;
	height: 23px;
}

.subitem-tab-gear-flex-container-set-damage-row:nth-child(2) {
	margin-top: 1px;
}

.subitem-tab-gear-flex-container-set-defense-row h1,
.subitem-tab-gear-flex-container-set-defense-row h2,
.subitem-tab-gear-flex-container-set-damage-row h1,
.subitem-tab-gear-flex-container-set-damage-row h2 {
	max-height: 100%;
	text-align: left;
	margin-left: 5px;
	padding: 0px;
	padding-left: 5px;
	font-size: 13px;
	line-height: 1.2;
}

.subitem-tab-gear-flex-container-set-defense-row h2,
.subitem-tab-gear-flex-container-set-damage-row h2 {
	font-weight: normal;
}

.subitem-tab-gear-flex-container-set-damage-row select {
	max-height: 18px;
}

.subitem-tab-gear-flex-container-set-damage-row .container-checkbox-small {
	margin-top: 2px;
}

.subitem-tab-gear-flex-container-set-damage-row .custom-select-gear {
	margin-right: 0px;
}

.subitem-tab-gear-flex-container-set-damage-button {
	height: 23px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

/* First column styling */

.subitem-tab-gear-flex-container-set-damage-column:first-child input[type=number] {
	margin-right: 15px;
}

.subitem-tab-gear-flex-container-set-damage-column:first-child .custom-select-gear {
	width: 55px;
	border: solid 1px #f2cf7f;
	margin-right: 8px;
}

.subitem-tab-gear-flex-container-set-defense-column:first-child .subitem-tab-gear-flex-container-set-defense-row input,
.subitem-tab-gear-flex-container-set-damage-column:first-child .subitem-tab-gear-flex-container-set-damage-row input {
	&:read-only {
		border: none;
	}
	
	&:not(:read-only) {
		border: solid 1px #f2cf7f;
	}
}

.subitem-tab-gear-flex-container-set-damage-column:first-child .container-checkbox-small {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	padding-right: 35px;
}

.subitem-tab-gear-flex-container-set-damage-column:first-child h1,
.subitem-tab-gear-flex-container-set-damage-column:first-child h2 {
	width: 110px;
}

/* Other column styling */
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2),
.subitem-tab-gear-flex-container-set-damage-column:nth-child(2) {
	background-color: #faf6c6;
}

.subitem-tab-gear-flex-container-set-damage-column:nth-child(3) input[readonly] {
	text-align: right;
}

.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) h1,
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) h2 {
	width: 150px;
}

.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) .custom-select-gear {
	width: 41px;
	border: solid 1px #F0E442;
}

.subitem-tab-gear-flex-container-set-defense-column:not(:first-child) .container-checkbox-small,
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) .container-checkbox-small {
	padding: 0px;
	margin: 0px;
	margin-top: 1px;
	padding-right: 17px;
}

/* Default weapon and set damage window states. */
.set-damage-toggle:not([value="0"]) ~ div.item-tab-gear-flex-container-weapons,
.set-damage-toggle:not([value="01"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-01,
.set-damage-toggle:not([value="02"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-02,
.set-damage-toggle:not([value="03"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-03,
.set-damage-toggle:not([value="04"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-04,
.set-damage-toggle:not([value="05"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-05,
.set-damage-toggle:not([value="06"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-06  {
	display: none;
}

/* Show weapons or selected weapon damage dialog. */
.set-damage-toggle[value="0"] ~ div.item-tab-gear-flex-container-weapons,
.set-damage-toggle[value="01"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-01,
.set-damage-toggle[value="02"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-02,
.set-damage-toggle[value="03"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-03,
.set-damage-toggle[value="04"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-04,
.set-damage-toggle[value="05"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-05,
.set-damage-toggle[value="06"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-06 {
	display: flex;
}


/* --------------- */
/* Item: Equipment */
/* --------------- */
.item-tab-gear-flex-container-equipment {
	grid-area: theEquipment;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 234px;
	margin-left: 4px;
	padding: 4px;
	padding-top: 3px;
	background-color: #bcdeff;
	border: solid 2px #66bbeb;
	border-radius: 3px;
	height: 368px;
}

.subitem-tab-gear-flex-container-equipment-heading {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	min-height: 20px;
	max-height: 20px;
	max-width: 240px;
	gap: 4px;
}

.subitem-tab-gear-flex-container-equipment-heading .set-AtoB-button-light {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	min-width: 31px;
	margin-right: 52px;
}

.subitem-tab-gear-flex-container-equipment {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	min-height: 20px;
	max-height: 20px;
	padding-left: 1px;
}

.subitem-tab-gear-flex-container-equipment-heading h1,
.subitem-tab-gear-flex-container-equipment h1 {
	margin-bottom: 2px;
}

.subitem-tab-gear-flex-container-equipment-heading h1:nth-child(3) {
	min-width:  70px;
}

.subitem-tab-gear-flex-container-equipment-heading h1:nth-child(5) {
	min-width:  54px;
	text-align: right;
}

.subitem-tab-gear-flex-container-equipment input[type=text] {
	text-align: left;
	padding-left: 2px;
	padding-right: 1px;
	max-width: 162px;
	max-height: 20px;
	margin-right: 0px;
}


/* Close spacing of equipment items means the focus border is clipped unless we move the z position to relative. */
.subitem-tab-gear-flex-container-equipment input[type=text]:focus {
	position: relative;
}

.subitem-tab-gear-flex-container-equipment input[type=number] {
	text-align: right;
	padding-left: 3px;
	max-width: 120px;
	min-width: 50px;
	max-height: 21px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 2px;
}

.subitem-tab-gear-flex-container-equipment input {
	border: transparent;
	background: transparent;
	
	&:focus {
		background-color: #e9f4ff;
		outline: none;
	}
	
	&:hover {
		background-color: #faf6c6;
	}
}

/* Buttons for armor, weapon, equipment, and skill movers. */
.armor-mover-plus-minus-enclosure,
.weapon-mover-plus-minus-enclosure,
.gear-mover-plus-minus-enclosure,
.skill-mover-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.skill-mover-plus-minus-enclosure,
.modifier-plus-minus-enclosure {
	position: relative;
	max-height: 20px;
	max-width: 10px;
}

.armor-mover-plus-minus-button,
.weapon-mover-plus-minus-button,
.gear-mover-plus-minus-button,
.skill-mover-plus-minus-button,
.modifier-plus-minus-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 20px;
	width: 10px;
	align-items: center;
	padding: 0px;
	margin-right: 1px;
}

.armor-mover-plus-minus-button button.buttonPlus,
.armor-mover-plus-minus-button button.buttonMinus,
.weapon-mover-plus-minus-button button.buttonPlus,
.weapon-mover-plus-minus-button button.buttonMinus,
.gear-mover-plus-minus-button button.buttonPlus,
.gear-mover-plus-minus-button button.buttonMinus,
.skill-mover-plus-minus-button button.buttonPlus,
.skill-mover-plus-minus-button button.buttonMinus {
	display: inline-block;
	margin: 0px 0px;
	padding: 0px 0px;
	border-radius: 0px;
	max-height: 8px;
	min-height: 8px;
	max-width: 12px;
	min-width: 12px;
}

.modifier-plus-minus-button button.buttonPlus,
.modifier-plus-minus-button button.buttonMinus {
	display: inline-block;
	margin: 0px 0px;
	padding: 0px 0px;
	border-radius: 0px;
	max-height: 9px;
	min-height: 9px;
	max-width: 12px;
	min-width: 12px;
}

.skill-mover-plus-minus-button > button.buttonPlus {
	position: absolute;
	top: 0px;
}

.skill-mover-plus-minus-button button.buttonMinus {
	position: absolute;
	top: 10px;
}

.armor-mover-plus-minus-button .upArrow,
.armor-mover-plus-minus-button .downArrow,
.weapon-mover-plus-minus-button .upArrow,
.weapon-mover-plus-minus-button .downArrow {
	position: absolute;
	left: 2px;
	height: 4px;
	width: 4px;
	padding: 0px;
	border: solid #b8b8b8;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.gear-mover-plus-minus-button .upArrow,
.gear-mover-plus-minus-button .downArrow {
	position: absolute;
	left: 2px;
	height: 4px;
	width: 4px;
	padding: 0px;
	border: solid #8fc8ff;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.skill-mover-plus-minus-button .upArrow,
.skill-mover-plus-minus-button .downArrow {
	position: absolute;
	left: 3px;
	right: 4px;
	height: 4px;
	width: 4px;
	padding: 0px;
	border: solid #b8b8b8;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.modifier-plus-minus-button .upArrow,
.modifier-plus-minus-button .downArrow  {
	position: absolute;
	left: 2px;
	height: 4px;
	width: 4px;
	padding: 0px;
	border: solid 1px #359bff;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.armor-mover-plus-minus-button .upArrow,
.weapon-mover-plus-minus-button .upArrow,
.gear-mover-plus-minus-button .upArrow,
.modifier-plus-minus-button .upArrow {
	top: 3px;
	transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}

.armor-mover-plus-minus-button .downArrow,
.weapon-mover-plus-minus-button .downArrow,
.gear-mover-plus-minus-button .downArrow,
.modifier-plus-minus-button .downArrow {
	top: 11px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.skill-mover-plus-minus-button .upArrow {
	top: 2px;
	transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}

.skill-mover-plus-minus-button .downArrow {
	top: 0px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.armor-mover-plus-minus-button button.buttonPlus,
.armor-mover-plus-minus-button button.buttonMinus,
.weapon-mover-plus-minus-button button.buttonPlus,
.weapon-mover-plus-minus-button button.buttonMinus,
.skill-mover-plus-minus-button button.buttonPlus,
.skill-mover-plus-minus-button button.buttonMinus {
	background-color: #fcf9d9;
	border: solid 1px #b8b8b8; 
}

.gear-mover-plus-minus-button button.buttonPlus,
.gear-mover-plus-minus-button button.buttonMinus {
	background-color: white;
	border: solid 1px #8fc8ff;
}

.modifier-plus-minus-button button.buttonPlus,
.modifier-plus-minus-button button.buttonMinus {
	background-color: #ecf0fc;
	border: solid 1px #359bff;
}

.armor-mover-plus-minus-button button.buttonPlus:hover,
.armor-mover-plus-minus-button button.buttonMinus:hover,
.weapon-mover-plus-minus-button button.buttonPlus:hover,
.weapon-mover-plus-minus-button button.buttonMinus:hover,
.gear-mover-plus-minus-button button.buttonPlus:hover,
.gear-mover-plus-minus-button button.buttonMinus:hover,
.skill-mover-plus-minus-button button.buttonPlus:hover,
.skill-mover-plus-minus-button button.buttonMinus:hover,
.modifier-plus-minus-button button.buttonPlus:hover,
.modifier-plus-minus-button button.buttonMinus:hover  {
	background-color: #8A8A8A;
	transition: 0.05s;
}

.armor-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.armor-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.weapon-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.weapon-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.gear-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.gear-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.skill-mover-plus-minus-button button.buttonPlus:hover .upArrow,
.skill-mover-plus-minus-button button.buttonMinus:hover .downArrow,
.modifier-plus-minus-button button.buttonPlus:hover .upArrow,
.modifier-plus-minus-button button.buttonMinus:hover .downArrow  {
	height: 4px;
	width: 4px;
	padding: 0px;
	border: solid white;
	border-width: 0 2px 2px 0;
	display: inline-block;
}

.armor-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.armor-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.weapon-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.weapon-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.gear-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.gear-mover-plus-minus-button button.buttonMinus:hover > .downArrow {
	left: 2px;
}

/* ---------------------------------- */
/* Sheet line item DELETE check boxes */
/* ---------------------------------- */

/* Show or hide vehicle system checkmarks */

.subitem-characterstics-system-heading-deletebox {
	display: none;
}

.vehicle-checks[value="delete"] ~ div.item-characteristics-vehicle-propulsion-systems .item-characteristics-propulsion-system .item-characteristics-system-heading .subitem-characterstics-system-heading-deletebox,
.vehicle-checks[value="delete"] ~ div.item-characteristics-vehicle-power-systems .item-characteristics-power-system .item-characteristics-system-heading .subitem-characterstics-system-heading-deletebox {
	display: block;
	position: relative;
}

/* Show or hide armor carried checkmarks */
.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny,
.subitem-tab-gear-flex-container-armor-row .armor-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-armor-row .container-xbox-tiny,
.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container {
	display: none;
}

.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny {
	display: block;
	position: relative;
}

.armor-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny {
	display: block;
	position: relative;
}

.armor-checks[value="move"] ~ div.subitem-tab-gear-flex-container-armor-row .armor-mover-plus-minus-enclosure {
	display: block;
	position: relative;
}

.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-row .container-xbox-tiny,
.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container {
	display: block;
	position: relative;
}

.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny {
	display: none;
}

.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .set-AtoB-button button {
	background-color: #d0d0d0;
	color: white;
	cursor: default;
	
	:hover {
		color: white;
		background-color: #d0d0d0;
	}
	
	:focus {
		color: white;
		background-color: #d0d0d0;
	}
}


/* Show or hide shield ready or delete checkmarks */
.subitem-tab-gear-flex-container-shield-checks .container-checkbox-tiny,
.subitem-tab-gear-flex-container-shield-checks .container-xbox-tiny {
	display: none;
	top: 0px;
}

.shield-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-shield-checks .container-checkbox-tiny {
	display: block;
	position: relative;
}

.shield-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-shield-checks .container-xbox-tiny {
	display: block;
	position: relative;
}


/* Show or hide weapons readied or deletion checkmarks */
.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
	max-width: 10px;
	align-text: center;
}

.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2),
.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny,
.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container {
	display: none;
}

.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
	display: block;
	position: relative;
}

.weapon-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2) {
	display: block;
	position: relative;
	max-width: 11px;
	padding-bottom: 4px;
}

.weapon-checks[value="move"] ~ div.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure {
	display: block;
	position: relative;
}

.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny,
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container {
	display: block;
	position: relative;
}

.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(3),
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(4) {
	margin-left: -1px;
}

.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
	display: none;
}

.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .set-AtoB-button button {
	background-color: #d0d0d0;
	color: white;
	cursor: default;
	
	:hover {
		color: white;
		background-color: #d0d0d0;
	}
	
	:focus {
		color: white;
		background-color: #d0d0d0;
	}
}


/* Show or hide equipment carried checkmarks */
.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light,
.subitem-tab-gear-flex-container-equipment .gear-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-equipment .container-xbox-tiny,
.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
	display: none;
}

.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
	display: block;
	position: relative;
}

.equipment-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light {
	display: block;
	position: relative;
}

.equipment-checks[value="move"] ~ div.subitem-tab-gear-flex-container-equipment .gear-mover-plus-minus-enclosure {
	display: block;
	position: relative;
}

.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment .container-xbox-tiny,
.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
	display: block;
	position: relative;
}

.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
	display: none;
}

.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .set-AtoB-button-light button {
	background-color: #d0d0d0;
	color: white;
	cursor: default;
	
	:hover {
		color: white;
		background-color: #d0d0d0;
	}
	
	:focus {
		color: white;
		background-color: #d0d0d0;
	}
}

/* Martial Skill Delete Boxes */
.item-martial-skill-delete-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	top: 33px;
	left: 114px;
	background: transparent;
	width: 14px;
	height: 286px;
}

.item-martial-skill-delete-panel {
	display: none;
}

.maneuver-checks[value="delete"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers .item-martial-skill-delete-panel {
	display: flex;
}


/* Skill delete boxes */
.subitem-skillsTab-flex-container-skill .container-xbox-tiny,
.item-skillsTab-flex-container-combat-skills .container-xbox-tiny,
.subitem-skillsTab-flex-container-language .container-xbox-tiny,
.subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container{
	display: none;
}

.subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container,
.subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
	opacity: 0;
}

.subitem-skillsTab-flex-container-skill .skill-mover-plus-minus-enclosure,
.item-skillsTab-flex-container-combat-skills .skill-mover-plus-minus-enclosure,
.subitem-skillsTab-flex-container-language .skill-mover-plus-minus-enclosure {
	display: none;
}

.skill-checks[value="move"] ~ div.flex-container-skills-left .item-flex-container-skill-list .subitem-skillsTab-flex-container-skill .skill-mover-plus-minus-enclosure,
.skill-checks[value="move"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .skill-mover-plus-minus-enclosure,
.skill-checks[value="move"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language .skill-mover-plus-minus-enclosure {
	display: flex;
}

.skill-checks[value="delete"] ~ div.flex-container-skills-left .item-skillsTab-flex-container-cap .subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container,
.skill-checks[value="delete"] ~ div.flex-container-skills-left .item-flex-container-skill-list .subitem-skillsTab-flex-container-skill .container-xbox-tiny,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .container-xbox-tiny,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language .container-xbox-tiny {
	display: flex;
}

.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
	opacity: 1;
}


/* Power Delete Boxes */
.item-upper-power-delete-panel,
.item-lower-power-delete-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	top: -337px;
	left: 226px;
	background: transparent;
	width: 14px;
	height: 329px;
}

.item-upper-power-delete-panel,
.item-lower-power-delete-panel {
	display: none;
}

.upper-power-checks[value="delete"] ~ div.item-upper-power-delete-panel,
.lower-power-checks[value="delete"] ~ div.item-lower-power-delete-panel {
	display: flex;
}

/* Talent and Complication Delete Boxes */
.item-talent-delete-panel,
.item-complication-delete-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	top: -346px;
	left: 177px;
	background: transparent;
	width: 14px;
	height: 338px;
}

.item-talent-delete-panel,
.item-complication-delete-panel {
	display: none;
}

.talent-checks[value="delete"] ~ div.item-talent-delete-panel,
.complication-checks[value="delete"] ~ div.item-complication-delete-panel {
	display: flex;
}


/* ----------------------------------------------------------- */
/* Item: Attacks and Maneuvers or treasures text box slideshow */
/* ----------------------------------------------------------- */

.item-tab-gear-slide-container {
	grid-area: theSlides;
	position: relative;
}

.flex-container-maneuvers-heading,
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
	padding-left: 2px;
}

.flex-container-maneuvers-heading h1,
.item-tab-gear-slide-flex-container-hit-locations h1,
.item-tab-gear-slide-flex-container-martial-maneuvers h1 {
	text-align: left;
	line-height: 1.2;
	font-size: 12px;
	margin: 0px;
}

.item-tab-gear-slide-flex-container-hit-locations h2,
.item-tab-gear-slide-flex-container-martial-maneuvers h2,
.subitem-tab-gear-slide-flex-container-range-modifiers h2 {
	font-size: 12px;
	text-align: center;
	font-weight: 400;
	line-height: 1.2;
}


.item-tab-gear-slide-container .button-gear-slide {
	position: absolute;
	transform: translate(-50%, -50%);
	color: white;
	background-color: #4ba6ff;
	width: 19px;
	height: 17px;
	font-size: 12px;
	font-weight: bold;
	padding: 0px;
	text-align: center;
	border: none;
	cursor: pointer;
	line-height: 1.4;
}

.maneuver-checks[value="delete"] ~ .button-gear-slide {
	background-color: #d0d0d0;
}

.maneuver-checks[value="delete"] ~ .button-gear-slide:hover {
	background-color: #d0d0d0;
	border: 2px solid #d2e9ff;
	color: white;
	cursor: default;
}

.item-tab-gear-slide-container .button-gear-slide > div {
	padding-left: 0px;
}

.item-tab-gear-slide-container .button-gear-slide .container {
	position: absolute;
	top: 1px;
	left: 2px;
	height: 15px;
	width: 15px;
	background-color: #D55E00;
	border-radius: 50%;
	padding: 0px;
}

.maneuver-checks[value="delete"] ~ .button-gear-slide .container {
	background-color: #a1a1a1;
}

.item-tab-gear-slide-container .button-gear-slide .container .circle {
	position: absolute;
	top: 2px;
	left: 2px;
	height: 11px;
	width: 11px;
	background-color: white;
	border-radius: 50%;
	padding: 0px;
}

.item-tab-gear-slide-container .button-gear-slide .container .circle .spot {
	position: absolute;
	top: 2px;
	left: 2px;
	height: 7px;
	width: 7px;
	background-color: #D55E00;
	border-radius: 50%;
	padding: 0px;
}

.maneuver-checks[value="delete"] ~ .button-gear-slide .container .circle .spot {
	background-color: #a1a1a1;
}

.item-tab-gear-slide-container .button-gear-slide:nth-of-type(1) {
	top: 13px;
	left: 325px;
	border: 2px solid #d2e9ff;
	border-radius: 0px;
}

.item-tab-gear-slide-container .button-gear-slide:nth-of-type(2) {
	top: 13px;
	left: 348px;
	border: 2px solid #d2e9ff;
	border-radius: 0px;
}

.item-tab-gear-slide-container .button-gear-slide:nth-of-type(3) {
	top: 13px;
	left: 371px;
	border: 2px solid #d2e9ff;
	border-radius: 0px;
}

.item-tab-gear-slide-container .button-gear-slide:nth-of-type(4) {
	top: 13px;
	left: 394px;
	border: 2px solid #d2e9ff;
	border-radius: 0px;
}

.item-tab-gear-slide-container .button-gear-slide:hover {
	background-color: #F0E442;
	border: solid 2px #4ba6ff;
	border-radius: 0px;
	color: black;
}

.item-tab-gear-slide-flex-container-maneuvers,
.item-tab-gear-slide-flex-container-martial-maneuvers {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 406px;
	height: 374px;
	padding: 0px;
	padding-top: 1px;
	margin-left: 0px;
	margin-bottom: 0px;
	background-color: #bcdeff;
	border: solid 2px #66bbeb;
	border-radius: 3px;
}

.flex-container-maneuvers {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 303px;
}

.flex-container-maneuver-selectors {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 120px;
	margin-left: 5px;
}

.flex-container-maneuver-selectors button {
	height: 16px;
	text-align: left;
	font-weight: bold;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #e9f4ff;
	background-color: #d2e9ff;
	padding-left: 4px;
	padding-right: 0px;
	line-height: 1.1;
}

.flex-container-maneuver-selectors button:hover {
	background-color: #faf6c6;
}

.item-tab-gear-slide-flex-container-martial-maneuvers .flex-container-maneuvers .flex-container-maneuver-selectors button {
	height: 22px;
}

.flex-container-maneuver-slides {
	background-color: white;
	min-width: 264px;
	margin-right: 4px;
	border-top: 1px solid white;
	border-right: 1px solid #a5d3ff;
	border-bottom: 1px solid #a5d3ff;
	border-left: none;
	padding: 6px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.item-maneuver-block-heading {
	height: 30px;
	background-color: #4ba6ff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 1px;
}

.item-maneuver-block-heading h1 {
	width: 252px;
	font-size: 17px;
	font-weight: bold;
	color: white;
	text-align: center;
}

.item-maneuver-block-heading input[type=text] {
	font-size: 17px;
	font-weight: bold;
	color: white;
	text-align: center;
	background: transparent;
	width: 150px;
	padding-bottom: 3px;
	height: 25px;
	border: 2px solid transparent;
	
	&::placeholder {
		color: white;
		opacity: 0.33;
	}
}

.item-maneuver-block-heading input[type=text]:hover {
	border: 2px solid #66bbeb;
}

.item-maneuver-block-heading-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.item-maneuver-block-heading-container:nth-child(1) {
	justify-content: flex-start;
	margin-bottom: 4px;
	margin-right: 2px;
}

.item-maneuver-block-heading-container input[type=number] {
	max-width: 30px;
	font-size: 16px;
	padding: 0px;
	margin-bottom: 4px;
	font-weight: bold;
	color: white;
	background-color: transparent;
}

.item-maneuver-block-heading-container h1 {
	font-size: 13px;
	color: #bcdeff;
	text-align: center;
	width: 24px;
	margin-bottom: 3px;
}

.item-maneuver-block-heading-container:nth-child(3) {
	justify-content: flex-end;
	margin-left: 31px;
	margin-right: 3px;
}

.item-martial-maneuver-block-stats {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.item-martial-maneuver-block-stats {
	height: 114px;
}

.item-maneuver-block-stats input[type=text],
.item-martial-maneuver-block-stats input[type=text] {
	width: 24px;
	background: transparent;
}

.item-maneuver-block-stats-full-row,
.item-maneuver-block-stats-half-row,
.item-maneuver-block-stats-half-row-alt {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	padding-left: 6px;
}

.item-maneuver-block-stats-half-row,
.item-maneuver-block-stats-half-row-alt {
	min-width: 120px;
	padding-right: 6px;
}

.item-maneuver-block-stats-full-row {
	min-width: 240px;
	padding-right: 12px;
}

.item-maneuver-block-stats-standard-row,
.item-maneuver-block-stats-special-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	padding-left: 6px;
}

.item-maneuver-block-stats-full-row input[type=text],
.item-maneuver-block-stats-half-row input[type=text] {
	text-align: center;
	height: 21px;
	padding-left: 2px;
	padding-right: 4px;
}

.item-maneuver-block-stats-half-row input[type=text] {
	width: 30px;
	margin-right: 3px;
}

.item-maneuver-block-stats-standard-row input[type=number],
.item-maneuver-block-stats-special-row input[type=number],
.item-maneuver-block-stats-full-row input[type=number],
.item-maneuver-block-stats-half-row input[type=number],
.item-maneuver-block-stats-half-row-alt input[type=number] {
	padding-right: 1px;
	margin-left: 2px;
	margin-bottom: 2px;
	background: transparent;
	border: none;
}

.item-maneuver-block-stats-standard-row input[type=number],
.item-maneuver-block-stats-full-row input[type=number],
.item-maneuver-block-stats-half-row input[type=number] {
	text-align: right;
	max-width: 30px;
}

.item-maneuver-block-stats-special-row input[type=number]:nth-child(2) {
	text-align: right;
	max-width: 40px;
}

.item-maneuver-block-stats-special-row input[type=number]:nth-child(4) {
	text-align: right;
	max-width: 30px;
}

.item-maneuver-block-stats-half-row-alt input[type=number] {
	text-align: right;
	max-width: 60px;
}

.item-maneuver-block-stats-half-row-alt input[type=text] {
	width: 80px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: center;
}

.item-maneuver-block-stats-half-row .custom-select-alternate,
.item-maneuver-block-stats-half-row-alt .custom-select-alternate {
	padding-left: 3px;
}

.item-maneuver-block-stats-standard-row h2,
.item-maneuver-block-stats-special-row h2 {
	font-size: 12px;
	color: black;
	text-align: center;
	line-height: 28px;
}

.item-maneuver-block-stats-row,
.item-maneuver-block-stats-row-empty {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	min-height: 28px;
}

.item-maneuver-block-stats-standard-row:nth-child(odd),
.item-maneuver-block-stats-row:nth-child(odd),
.item-maneuver-block-stats-special-row:nth-child(odd) {
	background-color: #e9f4ff;
}

.item-maneuver-block-stats-row-empty {
	background-color: #8fc8ff;
}

.item-maneuver-block-text,
.item-martial-maneuver-block-text {
	background-color: #8fc8ff;
	height: 126px;
	padding-top: 4px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 0px;
}

.item-martial-maneuver-block-text {
	background-color: #8fc8ff;
	height: 96px;
	padding: 4px;
	padding-bottom: 0px;
}

.item-martial-maneuver-block-text textarea {
	font-size: 13px;
	text-align: left;
	color: black;
	max-height: 76px;
	max-width: 245px;
	margin-top: 5px;
	border-radius: 3px;
	border: solid 2px transparent;
	background: transparent;
	display: block;
	
	&::placeholder {
		color: black;
		opacity: 0.33;
	}
}

.item-martial-maneuver-block-text textarea:hover {
	border: solid 2px #b2d4e7;
}

.item-maneuver-button-line {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 264px;
	height: 30px;
	padding-bottom: 5px;
	background-color: #8fc8ff;
}

.item-martial-maneuver-button-line {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 264px;
	height: 30px;
	padding-bottom: 5px;
	background-color: #8fc8ff;
}

.item-maneuver-line-flex {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center;
}

.item-maneuver-line-flex input[type=number] {
	width: 30px;
	border: 1px solid #8fc8ff;
	text-align: center;
	padding-left: 2px;
	height: 20px;
	margin-left: 3px;
}

/* Maneuver type-specific variables */
.item-maneuver-block-stats-attack01,
.item-maneuver-block-stats-attack02,
.item-maneuver-block-stats-attack03,
.item-maneuver-block-stats-attack04,
.item-maneuver-block-stats-attack05,
.item-maneuver-block-stats-attack06,
.item-maneuver-block-stats-attack07,
.item-maneuver-block-stats-attack08,
.item-maneuver-block-stats-attack09,
.item-maneuver-block-stats-attack10,
.item-maneuver-block-stats-defense01,
.item-maneuver-block-stats-defense02,
.item-maneuver-block-stats-defense03,
.item-maneuver-block-stats-defense04,
.item-maneuver-block-stats-defense05,
.item-maneuver-block-stats-defense06,
.item-maneuver-block-stats-defense07,
.item-maneuver-block-stats-defense08,
.item-maneuver-block-stats-defense09,
.item-maneuver-block-stats-defense10,
.item-maneuver-block-stats-contest01,
.item-maneuver-block-stats-contest02,
.item-maneuver-block-stats-contest03,
.item-maneuver-block-stats-contest04,
.item-maneuver-block-stats-contest05,
.item-maneuver-block-stats-contest06,
.item-maneuver-block-stats-contest07,
.item-maneuver-block-stats-contest08,
.item-maneuver-block-stats-contest09,
.item-maneuver-block-stats-contest10,
.item-maneuver-block-stats-wp-attack01,
.item-maneuver-block-stats-wp-attack02,
.item-maneuver-block-stats-wp-attack03,
.item-maneuver-block-stats-wp-attack04,
.item-maneuver-block-stats-wp-attack05,
.item-maneuver-block-stats-wp-attack06,
.item-maneuver-block-stats-wp-attack07,
.item-maneuver-block-stats-wp-attack08,
.item-maneuver-block-stats-wp-attack09,
.item-maneuver-block-stats-wp-attack10,
.item-maneuver-block-stats-wp-contest01,
.item-maneuver-block-stats-wp-contest02,
.item-maneuver-block-stats-wp-contest03,
.item-maneuver-block-stats-wp-contest04,
.item-maneuver-block-stats-wp-contest05,
.item-maneuver-block-stats-wp-contest06,
.item-maneuver-block-stats-wp-contest07,
.item-maneuver-block-stats-wp-contest08,
.item-maneuver-block-stats-wp-contest09,
.item-maneuver-block-stats-wp-contest10 {
	display: none;
}

.martial-damage-display01[value="attack"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-attack01,
.martial-damage-display02[value="attack"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-attack02,
.martial-damage-display03[value="attack"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-attack03,
.martial-damage-display04[value="attack"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-attack04,
.martial-damage-display05[value="attack"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-attack05,
.martial-damage-display06[value="attack"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-attack06,
.martial-damage-display07[value="attack"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-attack07,
.martial-damage-display08[value="attack"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-attack08,
.martial-damage-display09[value="attack"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-attack09,
.martial-damage-display10[value="attack"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-attack10 {
	display: block;
	position: relative;
}

.martial-damage-display01[value="defense"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-defense01,
.martial-damage-display02[value="defense"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-defense02,
.martial-damage-display03[value="defense"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-defense03,
.martial-damage-display04[value="defense"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-defense04,
.martial-damage-display05[value="defense"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-defense05,
.martial-damage-display06[value="defense"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-defense06,
.martial-damage-display07[value="defense"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-defense07,
.martial-damage-display08[value="defense"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-defense08,
.martial-damage-display09[value="defense"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-defense09,
.martial-damage-display10[value="defense"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-defense10 {
	display: block;
	position: relative;
}

.martial-damage-display01[value="contest"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-contest01,
.martial-damage-display02[value="contest"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-contest02,
.martial-damage-display03[value="contest"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-contest03,
.martial-damage-display04[value="contest"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-contest04,
.martial-damage-display05[value="contest"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-contest05,
.martial-damage-display06[value="contest"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-contest06,
.martial-damage-display07[value="contest"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-contest07,
.martial-damage-display08[value="contest"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-contest08,
.martial-damage-display09[value="contest"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-contest09,
.martial-damage-display10[value="contest"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-contest10 {
	display: block;
	position: relative;
}

.martial-damage-display01[value="wpAttack"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-wp-attack01,
.martial-damage-display02[value="wpAttack"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-wp-attack02,
.martial-damage-display03[value="wpAttack"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-wp-attack03,
.martial-damage-display04[value="wpAttack"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-wp-attack04,
.martial-damage-display05[value="wpAttack"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-wp-attack05,
.martial-damage-display06[value="wpAttack"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-wp-attack06,
.martial-damage-display07[value="wpAttack"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-wp-attack07,
.martial-damage-display08[value="wpAttack"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-wp-attack08,
.martial-damage-display09[value="wpAttack"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-wp-attack09,
.martial-damage-display10[value="wpAttack"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-wp-attack10 {
	display: block;
	position: relative;
}

.martial-damage-display01[value="wpContest"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-wp-contest01,
.martial-damage-display02[value="wpContest"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-wp-contest02,
.martial-damage-display03[value="wpContest"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-wp-contest03,
.martial-damage-display04[value="wpContest"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-wp-contest04,
.martial-damage-display05[value="wpContest"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-wp-contest05,
.martial-damage-display06[value="wpContest"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-wp-contest06,
.martial-damage-display07[value="wpContest"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-wp-contest07,
.martial-damage-display08[value="wpContest"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-wp-contest08,
.martial-damage-display09[value="wpContest"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-wp-contest09,
.martial-damage-display10[value="wpContest"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-wp-contest10 {
	display: block;
	position: relative;
}


/* default standard maneuver slide visibility */
.item-maneuver-block,
.item-maneuver-disarm,
.item-maneuver-dodge,
.item-maneuver-grab,
.item-maneuver-grabBy,
.item-maneuver-haymaker,
.item-maneuver-moveBy,
.item-maneuver-moveThrough,
.item-maneuver-multipleAttack,
.item-maneuver-set,
.item-maneuver-shove,
.item-maneuver-strike,
.item-maneuver-throw,
.item-maneuver-trip {
	display: none;
}

/* show the selected maneuver slide */
.item-maneuver-selection[value="block"] ~ div.flex-container-maneuver-slides .item-maneuver-block,
.item-maneuver-selection[value="disarm"] ~ div.flex-container-maneuver-slides .item-maneuver-disarm,
.item-maneuver-selection[value="dodge"] ~ div.flex-container-maneuver-slides .item-maneuver-dodge,
.item-maneuver-selection[value="grab"] ~ div.flex-container-maneuver-slides .item-maneuver-grab,
.item-maneuver-selection[value="grabBy"] ~ div.flex-container-maneuver-slides .item-maneuver-grabBy,
.item-maneuver-selection[value="haymaker"] ~ div.flex-container-maneuver-slides .item-maneuver-haymaker,
.item-maneuver-selection[value="moveBy"] ~ div.flex-container-maneuver-slides .item-maneuver-moveBy,
.item-maneuver-selection[value="moveThrough"] ~ div.flex-container-maneuver-slides .item-maneuver-moveThrough,
.item-maneuver-selection[value="multipleAttack"] ~ div.flex-container-maneuver-slides .item-maneuver-multipleAttack,
.item-maneuver-selection[value="set"] ~ div.flex-container-maneuver-slides .item-maneuver-set,
.item-maneuver-selection[value="shove"] ~ div.flex-container-maneuver-slides .item-maneuver-shove,
.item-maneuver-selection[value="strike"] ~ div.flex-container-maneuver-slides .item-maneuver-strike,
.item-maneuver-selection[value="throw"] ~ div.flex-container-maneuver-slides .item-maneuver-throw,
.item-maneuver-selection[value="trip"] ~ div.flex-container-maneuver-slides .item-maneuver-trip {
	display: block;
	position: relative;
}

/* Make a selection button appear to be continuous with its slide via color and border */
.item-maneuver-selection[value="block"] ~ .flex-container-maneuver-selectors button[name="act_block"]:not(:hover),
.item-maneuver-selection[value="disarm"] ~ .flex-container-maneuver-selectors button[name="act_disarm"]:not(:hover),
.item-maneuver-selection[value="dodge"] ~ .flex-container-maneuver-selectors button[name="act_dodge"]:not(:hover),
.item-maneuver-selection[value="grab"] ~ .flex-container-maneuver-selectors button[name="act_grab"]:not(:hover),
.item-maneuver-selection[value="grabBy"] ~ .flex-container-maneuver-selectors button[name="act_grabBy"]:not(:hover),
.item-maneuver-selection[value="haymaker"] ~ .flex-container-maneuver-selectors button[name="act_haymaker"]:not(:hover),
.item-maneuver-selection[value="moveBy"] ~ .flex-container-maneuver-selectors button[name="act_moveBy"]:not(:hover),
.item-maneuver-selection[value="moveThrough"] ~ .flex-container-maneuver-selectors button[name="act_moveThrough"]:not(:hover),
.item-maneuver-selection[value="multipleAttack"] ~ .flex-container-maneuver-selectors button[name="act_multipleAttack"]:not(:hover),
.item-maneuver-selection[value="set"] ~ .flex-container-maneuver-selectors button[name="act_set"]:not(:hover),
.item-maneuver-selection[value="shove"] ~ .flex-container-maneuver-selectors button[name="act_shove"]:not(:hover),
.item-maneuver-selection[value="strike"] ~ .flex-container-maneuver-selectors button[name="act_strike"]:not(:hover),	
.item-maneuver-selection[value="throw"] ~ .flex-container-maneuver-selectors button[name="act_throw"]:not(:hover),
.item-maneuver-selection[value="trip"] ~ .flex-container-maneuver-selectors button[name="act_trip"]:not(:hover) {
	background-color: white;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid #a5d3ff;
	border-right: none;
}

/* Ignore hover styling for selector button of current slide */
.item-maneuver-selection[value="block"] ~ .flex-container-maneuver-selectors button[name="act_block"]:hover,
.item-maneuver-selection[value="disarm"] ~ .flex-container-maneuver-selectors button[name="act_disarm"]:hover,
.item-maneuver-selection[value="dodge"] ~ .flex-container-maneuver-selectors button[name="act_dodge"]:hover,
.item-maneuver-selection[value="grab"] ~ .flex-container-maneuver-selectors button[name="act_grab"]:hover,
.item-maneuver-selection[value="grabBy"] ~ .flex-container-maneuver-selectors button[name="act_grabBy"]:hover,
.item-maneuver-selection[value="haymaker"] ~ .flex-container-maneuver-selectors button[name="act_haymaker"]:hover,
.item-maneuver-selection[value="moveBy"] ~ .flex-container-maneuver-selectors button[name="act_moveBy"]:hover,
.item-maneuver-selection[value="moveThrough"] ~ .flex-container-maneuver-selectors button[name="act_moveThrough"]:hover,
.item-maneuver-selection[value="multipleAttack"] ~ .flex-container-maneuver-selectors button[name="act_multipleAttack"]:hover,
.item-maneuver-selection[value="set"] ~ .flex-container-maneuver-selectors button[name="act_set"]:hover,
.item-maneuver-selection[value="shove"] ~ .flex-container-maneuver-selectors button[name="act_shove"]:hover,
.item-maneuver-selection[value="strike"] ~ .flex-container-maneuver-selectors button[name="act_strike"]:hover,	
.item-maneuver-selection[value="throw"] ~ .flex-container-maneuver-selectors button[name="act_throw"]:hover,
.item-maneuver-selection[value="trip"] ~ .flex-container-maneuver-selectors button[name="act_trip"]:hover {
	background-color: white;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid #a5d3ff;
	border-right: none;
}

/* Martial Maneuvers */
/* default slide visibility */
.item-martial-maneuver01,
.item-martial-maneuver02,
.item-martial-maneuver03,
.item-martial-maneuver04,
.item-martial-maneuver05,
.item-martial-maneuver06,
.item-martial-maneuver07,
.item-martial-maneuver08,
.item-martial-maneuver09,
.item-martial-maneuver10 {
	display: none;
}

/* show the selected maneuver slide */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ div.flex-container-maneuver-slides .item-martial-maneuver01,
.item-martial-maneuver-selection[value="martialManeuver02"] ~ div.flex-container-maneuver-slides .item-martial-maneuver02,
.item-martial-maneuver-selection[value="martialManeuver03"] ~ div.flex-container-maneuver-slides .item-martial-maneuver03,
.item-martial-maneuver-selection[value="martialManeuver04"] ~ div.flex-container-maneuver-slides .item-martial-maneuver04,
.item-martial-maneuver-selection[value="martialManeuver05"] ~ div.flex-container-maneuver-slides .item-martial-maneuver05,
.item-martial-maneuver-selection[value="martialManeuver06"] ~ div.flex-container-maneuver-slides .item-martial-maneuver06,
.item-martial-maneuver-selection[value="martialManeuver07"] ~ div.flex-container-maneuver-slides .item-martial-maneuver07,
.item-martial-maneuver-selection[value="martialManeuver08"] ~ div.flex-container-maneuver-slides .item-martial-maneuver08,
.item-martial-maneuver-selection[value="martialManeuver09"] ~ div.flex-container-maneuver-slides .item-martial-maneuver09,
.item-martial-maneuver-selection[value="martialManeuver10"] ~ div.flex-container-maneuver-slides .item-martial-maneuver10 {
	display: block;
	position: relative;
}

/* Make a selection button appear to be continuous with its slide via color and border */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver01"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver02"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver02"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver03"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver03"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver04"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver04"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver05"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver05"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver06"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver06"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver07"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver07"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver08"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver08"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver09"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver09"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver10"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver10"]:not(:hover) {
	background-color: white;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid #a5d3ff;
	border-right: none;
}

/* Ignore hover styling for selector button of current slide */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver01"]:hover,
.item-martial-maneuver-selection[value="martialManeuver02"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver02"]:hover,
.item-martial-maneuver-selection[value="martialManeuver03"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver03"]:hover,
.item-martial-maneuver-selection[value="martialManeuver04"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver04"]:hover,
.item-martial-maneuver-selection[value="martialManeuver05"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver05"]:hover,
.item-martial-maneuver-selection[value="martialManeuver06"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver06"]:hover,
.item-martial-maneuver-selection[value="martialManeuver07"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver07"]:hover,
.item-martial-maneuver-selection[value="martialManeuver08"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver08"]:hover,
.item-martial-maneuver-selection[value="martialManeuver09"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver09"]:hover,
.item-martial-maneuver-selection[value="martialManeuver10"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver10"]:hover {
	background-color: white;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-bottom: 1px solid #a5d3ff;
	border-right: none;
}


/* Range Modifier Table */
.subitem-tab-gear-slide-flex-container-range-modifiers {
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	width: 390px;
	height: 30px;
	padding: 3px;
	margin-top: 6px;
	margin-bottom: 7px;
	margin-right: 0px;
	margin-left: 4px;
	background-color: white;
	border-radius: 3px;
	border: solid 1px #a5d3ff;
}

.subitem-tab-gear-slide-range-modifier-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 33px;
	align-items: top;
	padding: 0px;
	margin: 0px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(1) {
	width: 60px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(2) {
	width: 37px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(3) {
	width: 43px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(4) {
	width: 49px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(5) {
	width: 50px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(6) {
	width: 57px;
}

.subitem-range-modifier-container-column h2:nth-child(1) {
	font-weight: bold;
}

.subitem-range-modifier-container-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 30px;
	padding-top: 0px;
}

.subitem-range-modifier-button-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 30px;
	padding-top: 1px;
}

.subitem-tab-gear-slide-range-modifier-container:nth-child(1) .subitem-range-modifier-container-column {
	margin-bottom: 3px;
	height: 30px;
}

/* Item: Hit Locations */
.item-tab-gear-slide-flex-container-hit-locations {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 403px;
	height: 375px;
	padding: 0px;
	padding-left: 3px;
	margin-left: 0px;
	margin-bottom: 0px;
	background-color: #bcdeff;
	border: solid 2px #66bbeb;
	border-radius: 3px;
}

.item-gear-slide-container-hit-locations-flex-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-radius: 3px;
	width: 400px;
}

/* Special Hit Locations */
.item-gear-slide-flex-container-hit-locations-special {
	width: 260px;
	height: 145px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-gear-slide-flex-container-hit-locations-special label {
	display: inline-block;
	margin-left: 14px;
	margin-right: 4px;
	margin-top: 2px; /* A fix to get a uniform look with the hit location table */
}

.subitem-gear-slide-flex-container-hit-locations-special-heading {
	height: 20px;
	margin-bottom: 3px;
}

.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(1){
	width: 42px;
	text-align: left;
	margin-left: 2px;
}

.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(2){
	width: 40px;
	text-align: center;
	margin-left: 3px;
}

.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(3){
	width: 52px;
	text-align: center;
	margin-left: 30px;
}

.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(4){
	width: 44px;
	text-align: right;
	margin-left: 15px;
}

.subitem-gear-slide-flex-container-hit-locations-special-top-row,
.subitem-gear-slide-flex-container-hit-locations-special-middle-row,
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: white;
	border-left: solid 1px #a5d3ff;
	border-right: solid 1px #a5d3ff;
	width: 260px;
	height: 20px;
}

.subitem-gear-slide-flex-container-hit-locations-special-top-row {
	border-top: solid 1px #a5d3ff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding-top: 5px;
}

.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
	border-bottom: solid 1px #a5d3ff;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.subitem-gear-slide-flex-container-hit-locations-special-top-row h1,
.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1,
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1 {
	width: 65px;
	text-align: center;
}

.subitem-gear-slide-flex-container-hit-locations-special-top-row h1:nth-child(4),
.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1:nth-child(4),
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1:nth-child(4) {
	width: 35px;
	text-align: right;
	padding-right: 19px;
}

/* Targeting Options */
.item-gear-slide-container-hit-locations-options {
	width: 130px;
	height: 100px;
	margin-top: 50px;
}

.subitem-gear-slide-container-hit-locations-options-top,
.subitem-gear-slide-container-hit-locations-options-bottom {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 115px;
	margin: 3px;
	margin-bottom: 15px;
}

.subitem-gear-slide-container-hit-locations-options-top {
	margin-left: 10px;
}

.subitem-gear-slide-container-hit-locations-options-top h1,
.subitem-gear-slide-container-hit-locations-options-bottom h1 {
	padding-top: 4px;
	margin: 0px;
}

.subitem-gear-slide-container-hit-locations-options-top label {
	max-width: 0px;
	margin-left: 2px;
	margin-right: 0px;
	margin-top: 3px;
	padding-right: 0px;
}

.subitem-gear-slide-container-hit-locations-options-bottom input {
	margin-left: 5px;
	border: solid 1px #a5d3ff;
}

/* Hit Location Table */
.item-gear-slide-container-hit-locations-table {
	width: 399px;
	height: 215px;
}

.item-gear-slide-container-hit-locations-table h1 {
	width: 51px;
	text-align: center;
}

.item-gear-slide-container-hit-locations-table label {
	display: inline-block;
	margin-left: 14px;
	margin-right: 3px;
}

.subitem-gear-slide-container-hit-locations-table-heading {
	height: 20px;
	margin-bottom: 3px;
}

.subitem-gear-slide-container-hit-locations-table-heading h1 {
	text-align: center;
	margin-left: 2px;
}

.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(1){
	width: 42px;
	text-align: left;
}

.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(2){
	width: 34px;
	text-align: center;
	margin-right: 9px;
	margin-left: 3px;
}

.subitem-gear-slide-container-hit-locations-table-top-row,
.subitem-gear-slide-container-hit-locations-table-middle-row,
.subitem-gear-slide-container-hit-locations-table-bottom-row {
	height: 19px;
}

.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
	width: 40x;
	text-align: center;
	margin-right: 11px;
}

.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
	width: 34px;
	text-align: center;
	margin-left: 21px;
}

.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(6),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(6),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(6){
	width: 45px;
	text-align: center;
	margin-left: 6px;
	margin-right: 0px;
}

.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(7),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(7),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(7){
	width: 34px;
	text-align: right;
	margin-left: 4px;
	margin-right: 17px;
}

.subitem-gear-slide-container-hit-locations-table-top-row {
	background-color: white;
	border: solid 1px #a5d3ff;
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.subitem-gear-slide-container-hit-locations-table-middle-row {
	background-color: white;
	border-left: solid 1px #a5d3ff;
	border-right: solid 1px #a5d3ff;
}

.subitem-gear-slide-container-hit-locations-table-bottom-row {
	background-color: white;
	border: solid 1px #a5d3ff;
	border-top: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding-bottom: 5px;
}

/* Item: Slide of treasure and notes box  */
.item-tab-gear-slide-treasure-text {
	width: 402px;
	height: 367px;
	padding: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}

.item-tab-gear-slide-treasure-text textarea {
	width: 398px;
	height: 367px;
	margin: 0px;
	border: solid 2px #66bbeb;
	border-radius: 3px;
}

/* hide all gear tab slides by default */
.item-tab-gear-slide-flex-container-maneuvers,
.item-tab-gear-slide-flex-container-martial-maneuvers,
.item-tab-gear-slide-flex-container-hit-locations,
.item-tab-gear-slide-treasure-text {
	display: none;
}

/* show the selected gear slide */
.item-gear-slide-selection[value="gearManeuvers"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
.item-gear-slide-selection[value="gearMartialManeuvers"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
.item-gear-slide-selection[value="gearHitLocations"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
.item-gear-slide-selection[value="gearTreasures"] ~ div.item-tab-gear-slide-treasure-text {
	display: block;
}

/* ---------------------------------------------------------------- */
/* Custom radio button from w3 schools.                             */
/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp    */
/* ---------------------------------------------------------------- */

/* Customize the label (the container) */
.custom-radio-button-container {
	display: block;
	position: relative;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	font-size: 12px;
	max-width: 0px;
	max-height: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.custom-radio-button-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.custom-radio-button,
.custom-radio-button-health {
	position: absolute;
	left: 0px;
	height: 11px;
	width: 11px;
	border-radius: 50%;
	margin-bottom: 0px;
	padding: 0px;
}

.custom-radio-button {
	top: -2px;
	background-color: white;
	border: solid 2px lightsteelblue;
}

.custom-radio-button-health {
	top: 1px;
	background-color: white;
	border: solid 2px white;
}

/* On mouse-over, add a grey background color */
.custom-radio-button-container:hover input ~ .custom-radio-button {
	background-color: lightsteelblue;
}

.custom-radio-button-container:hover input ~ .custom-radio-button-health {
	background-color: #009E73;
}

/* When the radio button is checked, add a blue background */
.custom-radio-button-container input:checked ~ .custom-radio-button {
	background-color: #D55E00;
	border: solid 2px #D55E00;
}

.custom-radio-button-container input:checked ~ .custom-radio-button-health {
	background-color: #009E73;
	border: solid 2px white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio-button:after,
.custom-radio-button-health:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-radio-button-container input:checked ~ .custom-radio-button:after,
.custom-radio-button-container input:checked ~ .custom-radio-button-health:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.custom-radio-button-container .custom-radio-button:after,
.custom-radio-button-container .custom-radio-button-health:after {
	top: 0px;
	left: 0px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin: 0px;
	padding: 0px;
}

.custom-radio-button-container .custom-radio-button:after {
	border: solid 2px white;
	background: #D55E00;
}

.custom-radio-button-container .custom-radio-button-health:after {
	border: solid 2px #009E73;
	background: #32b18f;	
}

/* ---------------------------------------------------------------- */
/* Jackob's Roll Template                                           */
/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
/* ---------------------------------------------------------------- */

.sheet-rolltemplate-custom-contest a[href^='!'],
.sheet-rolltemplate-custom-contest a[href^='~'],
.sheet-rolltemplate-custom-attack a[href^='!'],
.sheet-rolltemplate-custom-attack a[href^='~'],
.sheet-rolltemplate-custom-normal-attack a[href^='!'],
.sheet-rolltemplate-custom-normal-attack a[href^='~'],
.sheet-rolltemplate-custom-power-attack a[href^='!'],
.sheet-rolltemplate-custom-power-attack a[href^='~'] {
	color: white;
	font-weight: bold;
	line-height: 12px;
	border-radius: 3px;
}

.sheet-rolltemplate-custom-attack a[href^='!'],
.sheet-rolltemplate-custom-attack a[href^='~']{
	background-color: #D55E00;
	border: 2px solid #aa4b00;
}

.sheet-rolltemplate-custom-normal-attack a[href^='!'],
.sheet-rolltemplate-custom-normal-attack a[href^='~']{
	background-color: #009E73;
	border: 2px solid #007e5c;
}

.sheet-rolltemplate-custom-contest a[href^='!'],
.sheet-rolltemplate-custom-contest a[href^='~']{
	background-color: #E69F00;
	border: 2px solid #b87f00;
}

.sheet-rolltemplate-custom-power-attack a[href^='!'],
.sheet-rolltemplate-custom-power-attack a[href^='~']{
	background-color: #CC79A7;
	border: 2px solid #a36085;
}

.sheet-rolltemplate-custom-contest a[href^='!']:hover,
.sheet-rolltemplate-custom-contest a[href^='~']:hover,
.sheet-rolltemplate-custom-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-attack a[href^='~']:hover,
.sheet-rolltemplate-custom-normal-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-normal-attack a[href^='~']:hover,
.sheet-rolltemplate-custom-power-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-power-attack a[href^='~']:hover {
	background-color: #d0d0d0;
	color: black;
	border: 2px solid transparent;
}

/* Three different Templates for attacks, armor activation, and skills ability checks. */
.sheet-rolltemplate-custom,
.sheet-rolltemplate-custom-success-roll,
.sheet-rolltemplate-custom-defense,
.sheet-rolltemplate-custom-attack,
.sheet-rolltemplate-custom-normal-attack,
.sheet-rolltemplate-custom-power-attack,
.sheet-rolltemplate-custom-damage,
.sheet-rolltemplate-custom-normal-damage,
.sheet-rolltemplate-custom-power-damage,
.sheet-rolltemplate-custom-contest-damage,
.sheet-rolltemplate-custom-activate,
.sheet-rolltemplate-custom-contest,
.sheet-rolltemplate-custom-show {
	margin-left: -37px;
	color: #181818;
}

.withoutavatars .sheet-rolltemplate-custom,
.withoutavatars .sheet-rolltemplate-custom-success-roll,
.withoutavatars .sheet-rolltemplate-custom-defense,
.withoutavatars .sheet-rolltemplate-custom-attack,
.withoutavatars .sheet-rolltemplate-custom-normal-attack,
.withoutavatars .sheet-rolltemplate-custom-power-attack,
.withoutavatars .sheet-rolltemplate-custom-damage,
.withoutavatars .sheet-rolltemplate-custom-normal-damage,
.withoutavatars .sheet-rolltemplate-custom-power-damage,
.withoutavatars .sheet-rolltemplate-custom-contest-damage,
.withoutavatars .sheet-rolltemplate-custom-activate,
.withoutavatars .sheet-rolltemplate-custom-contest,
.withoutavatars .sheet-rolltemplate-custom-show {
	margin-left: -7px;
	color: #181818;
}

.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-success-roll .sheet-container,
.sheet-rolltemplate-custom-defense .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-damage .sheet-container,
.sheet-rolltemplate-custom-normal-damage .sheet-container,
.sheet-rolltemplate-custom-power-damage .sheet-container,
.sheet-rolltemplate-custom-contest-damage .sheet-container,
.sheet-rolltemplate-custom-activate .sheet-container,
.sheet-rolltemplate-custom-contest .sheet-container,
.sheet-rolltemplate-custom-show .sheet-container {
	border: 1px solid;
	/* by default, the border is the same color as the header. You can change this here, e.g. to black */
	border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header,
.sheet-rolltemplate-custom-success-roll .sheet-header,
.sheet-rolltemplate-custom-contest .sheet-header,
.sheet-rolltemplate-custom-contest-damage .sheet-header, {
	background-color: #E69F00;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-defense .sheet-header {
	background-color: #4ba6ff;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-damage .sheet-header,
.sheet-rolltemplate-custom-attack .sheet-header {
	background-color: #D55E00;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-normal-damage .sheet-header,
.sheet-rolltemplate-custom-normal-attack .sheet-header {
	background-color: #009E73;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-power-damage .sheet-header,
.sheet-rolltemplate-custom-power-attack .sheet-header {
	background-color: #CC79A7;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-activate .sheet-header {
	background-color: #0072B2;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom-show .sheet-header {
	background-color: #8A8A8A;
	/* change text-align to center to center the header text */
	text-align: left;
	color: var(--header-text-color);
	padding: 5px;
}

.sheet-rolltemplate-custom .sheet-title,
.sheet-rolltemplate-custom-success-roll .sheet-title,
.sheet-rolltemplate-custom-defense .sheet-title,
.sheet-rolltemplate-custom-attack .sheet-title,
.sheet-rolltemplate-custom-normal-attack .sheet-title,
.sheet-rolltemplate-custom-power-attack .sheet-title,
.sheet-rolltemplate-custom-damage .sheet-title,
.sheet-rolltemplate-custom-normal-damage .sheet-title,
.sheet-rolltemplate-custom-power-damage .sheet-title,
.sheet-rolltemplate-custom-contest-damage .sheet-title,
.sheet-rolltemplate-custom-activate .sheet-title,
.sheet-rolltemplate-custom-contest .sheet-title,
.sheet-rolltemplate-custom-show .sheet-title {
	padding-top: 0.4em;
	font-size: 1.2em;
	font-weight: bold;
}

.sheet-rolltemplate-custom-defense .sheet-header,
.sheet-rolltemplate-custom-attack .sheet-header,
.sheet-rolltemplate-custom-normal-attack .sheet-header,
.sheet-rolltemplate-custom-power-attack .sheet-header,
.sheet-rolltemplate-custom-contest .sheet-header,
.sheet-rolltemplate-custom-activate .sheet-header {
	display: grid;
	width: 98%;
	grid-template-areas: 
		"title label"
		"title data"
		"subtitle data";
	grid-template-columns: auto 40px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 4px;
	padding-bottom: 4px;	
}

.sheet-rolltemplate-custom-defense .sheet-header .sheet-title,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-title,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-title {
	grid-area: title;
	padding-right: 3px;
}

.sheet-rolltemplate-custom-defense .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-subtitle {
	grid-area: subtitle;
	padding-right: 3px;
}

.sheet-rolltemplate-custom-defense .sheet-header .sheet-label,
.sheet-rolltemplate-custom-defense .sheet-header .sheet-data {
	border: 2px solid #a5d3ff;
}

.sheet-rolltemplate-custom-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-data {
	border: 2px solid #eaae7f;
}

.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-data {
	border: 2px solid #7fceb9;
}

.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-data {
	border: 2px solid #e5bcd3;
}

.sheet-rolltemplate-custom-contest .sheet-header .sheet-label,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-data {
	border: 2px solid #f2cf7f;
}

.sheet-rolltemplate-custom-activate .sheet-header .sheet-label,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-data {
	border: 2px solid #a0b4f0;
}

.sheet-rolltemplate-custom-defense .sheet-header .sheet-label,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-label,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-label {
	grid-area: label;
	text-align: center;
	font-size: 0.8em;
	width: 34px;
	height: 12px;
	padding: 0px;
	padding-bottom: 3px;
	border-bottom: none;
	border-radius: 3px 3px 0px 0px;
	background-color: #8A8A8A;
}

.sheet-rolltemplate-custom-defense .sheet-header .sheet-data,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-data,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-data {
	grid-area: data;
	font-size: 2.2em;
	font-weight: bold;
	text-align: center;
	width: 34px;
	height: 24px;
	padding: 0px;
	padding-top: 2px;
	color: white;
	border-top: none;
	border-radius: 0px 0px 3px 3px;
	background-color: #8A8A8A;
}

.sheet-rolltemplate-custom .sheet-subtitle,
.sheet-rolltemplate-custom-success-roll .sheet-subtitle,
.sheet-rolltemplate-custom-defense .sheet-subtitle,
.sheet-rolltemplate-custom-attack .sheet-subtitle,
.sheet-rolltemplate-custom-normal-attack .sheet-subtitle,
.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
.sheet-rolltemplate-custom-damage .sheet-subtitle,
.sheet-rolltemplate-custom-normal-damage .sheet-subtitle,
.sheet-rolltemplate-custom-power-damage .sheet-subtitle,
.sheet-rolltemplate-custom-contest-damage .sheet-subtitle,
.sheet-rolltemplate-custom-activate .sheet-subtitle,
.sheet-rolltemplate-custom-contest .sheet-subtitle,
.sheet-rolltemplate-custom-show .sheet-subtitle {
	font-size: 1.0em;
	padding-bottom: 0.2em;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-success-roll .sheet-container,
.sheet-rolltemplate-custom-defense .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-damage .sheet-container,
.sheet-rolltemplate-custom-normal-damage .sheet-container,
.sheet-rolltemplate-custom-power-damage .sheet-container,
.sheet-rolltemplate-custom-contest-damage .sheet-container,
.sheet-rolltemplate-custom-activate .sheet-container,
.sheet-rolltemplate-custom-contest .sheet-container,
.sheet-rolltemplate-custom-show .sheet-container  {
	/* this is the default color */
	--header-bg-color: black;
	--header-text-color: #FFF;
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content,
.sheet-rolltemplate-custom-success-roll .sheet-content,
.sheet-rolltemplate-custom-defense .sheet-content,
.sheet-rolltemplate-custom-attack .sheet-content,
.sheet-rolltemplate-custom-normal-attack .sheet-content,
.sheet-rolltemplate-custom-power-attack .sheet-content,
.sheet-rolltemplate-custom-damage .sheet-content,
.sheet-rolltemplate-custom-normal-damage .sheet-content,
.sheet-rolltemplate-custom-power-damage .sheet-content,
.sheet-rolltemplate-custom-contest-damage .sheet-content,
.sheet-rolltemplate-custom-activate .sheet-content,
.sheet-rolltemplate-custom-contest .sheet-content,
.sheet-rolltemplate-custom-show .sheet-content {
	display: grid;
	background: #FFF;
	/* Header formatting - modify the column layout below */
	grid-template-columns: auto auto;
	/* Line height to match default roll template */
	line-height:1.4em;
}

.sheet-rolltemplate-custom .sheet-content > div,
.sheet-rolltemplate-custom-success-roll .sheet-content > div,
.sheet-rolltemplate-custom-defense .sheet-content > div,
.sheet-rolltemplate-custom-attack .sheet-content > div,
.sheet-rolltemplate-custom-normal-attack .sheet-content > div,
.sheet-rolltemplate-custom-power-attack .sheet-content > div,
.sheet-rolltemplate-custom-damage .sheet-content > div,
.sheet-rolltemplate-custom-normal-damage .sheet-content > div,
.sheet-rolltemplate-custom-power-damage .sheet-content > div,
.sheet-rolltemplate-custom-contest-damage .sheet-content > div,
.sheet-rolltemplate-custom-activate .sheet-content > div,
.sheet-rolltemplate-custom-contest .sheet-content > div,
.sheet-rolltemplate-custom-show .sheet-content > div {
	padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key,
.sheet-rolltemplate-custom-success-roll .sheet-content .sheet-key,
.sheet-rolltemplate-custom-defense .sheet-content .sheet-key,
.sheet-rolltemplate-custom-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-normal-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-power-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-normal-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-power-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-contest-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-activate .sheet-content .sheet-key,
.sheet-rolltemplate-custom-contest .sheet-content .sheet-key,
.sheet-rolltemplate-custom-show .sheet-content .sheet-key {
	font-weight: bold;
	padding-right: 10px;
	text-align: right;
	color: #222222; /* To fix dark mode in Chrome. */
}

/* Right column. Color to fix dark mode in Chrome. */
.sheet-rolltemplate-custom .sheet-value,
.sheet-rolltemplate-custom-success-roll .sheet-value,
.sheet-rolltemplate-custom-defense .sheet-value,
.sheet-rolltemplate-custom-attack .sheet-value,
.sheet-rolltemplate-custom-normal-attack .sheet-value,
.sheet-rolltemplate-custom-power-attack .sheet-value,
.sheet-rolltemplate-custom-damage .sheet-value,
.sheet-rolltemplate-custom-normal-damage .sheet-value,
.sheet-rolltemplate-custom-power-damage .sheet-value,
.sheet-rolltemplate-custom-contest-damage .sheet-value,
.sheet-rolltemplate-custom-activate .sheet-value,
.sheet-rolltemplate-custom-contest .sheet-value,
.sheet-rolltemplate-custom-show .sheet-value {
	color: #222222;
}

/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-success-roll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-success-roll .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-defense .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-defense .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-normal-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-normal-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-power-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-power-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-contest-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-contest-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-contest .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-contest .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n) {
	background:#EEE;
}

/* Description field */
.sheet-rolltemplate-custom .sheet-desc,
.sheet-rolltemplate-custom-success-roll .sheet-desc,
.sheet-rolltemplate-custom-defense .sheet-desc,
.sheet-rolltemplate-custom-attack .sheet-desc,
.sheet-rolltemplate-custom-normal-attack .sheet-desc,
.sheet-rolltemplate-custom-power-attack .sheet-desc,
.sheet-rolltemplate-custom-damage .sheet-desc,
.sheet-rolltemplate-custom-normal-damage .sheet-desc,
.sheet-rolltemplate-custom-power-damage .sheet-desc,
.sheet-rolltemplate-custom-contest-damage .sheet-desc,
.sheet-rolltemplate-custom-activate .sheet-desc,
.sheet-rolltemplate-custom-contest .sheet-desc,
.sheet-rolltemplate-custom-show .sheet-desc {
	grid-column: span 2;
	padding-right: 10px;
	text-align: left;
	color: #222222; /* To fix dark mode in Chrome. */
}

/* Dice roll face colors. Needed to prevent problems with dark mode. */
.sheet-rolltemplate-custom .inlinerollresult,
.sheet-rolltemplate-custom-success-roll .inlinerollresult,
.sheet-rolltemplate-custom-defense .inlinerollresult,
.sheet-rolltemplate-custom-attack .inlinerollresult,
.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
.sheet-rolltemplate-custom-power-attack .inlinerollresult,
.sheet-rolltemplate-custom-damage .inlinerollresult,
.sheet-rolltemplate-custom-normal-damage .inlinerollresult,
.sheet-rolltemplate-custom-power-damage .inlinerollresult,
.sheet-rolltemplate-custom-contest-damage .inlinerollresult,
.sheet-rolltemplate-custom-activate .inlinerollresult,
.sheet-rolltemplate-custom-contest .inlinerollresult,
.sheet-rolltemplate-custom-show .inlinerollresult {
	display: inline-block;
	/* min-width: 1.5em; */
	text-align: center;
	background: #fff990;
	border: 2px solid #d8cd3b;
}

.sheet-rolltemplate-custom-activate .sheet-header .sheet-data .inlinerollresult {
	background-color: transparent;
	border: none;
}

.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
	background-color: #fff990;
	border: 2px solid #d8cd3b;
}

.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullcrit {
	border: 2px solid #228833;
}

.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
	border: 2px solid #AA3377;
}