/* --------------------------------------------------- */
/* 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: 3px;
	
	/* 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;
	}
}

@-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                                     */
/* --------------------------------------------------- */

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

input {
	font-size: 13px;
	border: hidden;
	border-radius: 3px;
	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;
}


/* --------------------------------------------------------------- */
/* 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: 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-alternate-skill {
	display: grid;
	grid-template-areas: "select";
	align-items: center;
	position: relative;
	min-width: 34px;
	max-height: 20px;
	border: 1px solid gray;
	border-radius: 3px;
	padding: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
	padding-right: 3px;
	cursor: pointer;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

.custom-select-skill,
.custom-select-alternate-skill {
	margin-top: 2px;
	margin-bottom: 1px;
	max-height: 20px;
}

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

.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-alternate-skill::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 {
	background-color: olive;
}

.custom-select-alternate::after,
.custom-select-alternate-skill::after {
	background-color: salmon;
}

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

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

.custom-select-skill,
.custom-select-alternate-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: dodgerblue;
	border: 8px;
	border-bottom: 0px;
	border-radius: 4px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: dodgerblue;
	border-style: solid;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #CCCCFF;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  margin-right: 0px;
  transition: 0.3s;
  font-size: 18px;
  border: 0px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: yellow;
}

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

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

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

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

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

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

.sheet-flex-tallybar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	width: 668px;
	height: 36px;
	border: 3px solid #fff990;
	border-radius: 5px;
	background: royalblue;
	margin: 0px;
	padding-left: 3px;
	padding-right: 3px;
}

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

.sheet-flex-tallybar span:nth-child(1) {
	color: white;

}

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

.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: #fff990;
	padding-right: 0px;
	min-width: 36px;
	max-width: 40px;
	text-align: center;
}

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

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

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

/* characteristics tab left side */

.grid-container-characteristics-leftGrid {
	grid-area: leftGrid;
	display: grid;
	grid-template-areas:
	"logo"
	"bio"
	"earnings"
	"primaryAbilities"
	"combatAbilities"
	"movementAbilities";
	grid-template-columns: 329px;
	grid-gap: 0px;
	background: royalblue;
	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: logo graphic bio0 */

.item-characteristics-logo {
	grid-area: logo;
	padding: 2px;
	background-color: royalblue;
	margin-bottom: 4px;
}

/* Item: character bio bio1*/

.item-characteristics-bio {	
	max-width: 330px;
	grid-area: bio;
	display: grid;
	grid-template-areas:
	"nameLabel nameText nameText nameText"
	"titleLabel titleText titleText titleText"
	"backgroundLabel backgroundText backgroundText backgroundText";
	grid-template-columns: 85px 105px 57px 73px;
	grid-template-rows: 30px 30px 48px;
	margin-left: 6px;
	margin-bottom: 0px;
	padding: 5px;
	padding-bottom: 0px;
	background-color: gold;
	border-top: solid 1px goldenrod;
	border-right: solid 1px goldenrod;
	border-left: solid 1px goldenrod;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	vertical-align: top;
}

.item-characteristics-bio input[type=text] {
	text-align:left;
	width: 222px;
	padding: 2px;
	padding-left: 4px;
	margin-left: 5px;
	border: solid 1px goldenrod;
	font-size: 13;
	font-weight: bold;
}

.item-characteristics-bio textarea {
	width: 214px;
	max-height: 36px;
	padding: 2px;
	padding-left: 4px;
	margin-left: 5px;
	border: solid 1px black;
	text-align: left;
	border: solid 1px goldenrod;
}

/* Subitem: Character Name Label */
.item-characteristics-bio-nameLabel {
	grid-area: nameLabel;
	background: gold;
}

/* Subitem: Character Name Text */
.item-characteristics-bio-name {
	grid-area: nameText;
}

/* Subitem: Character Title Label */
.item-characteristics-bio-titleLabel {
	grid-area: titleLabel;
	background: gold;
}

/* Subitem: Character Title Text */
.item-characteristics-bio-titleText {
	grid-area: titleText;
}

/* Subitem: Character background label */
.item-characteristics-bio-backgroundLabel {
	grid-area: backgroundLabel;
	background: gold;
}

/* Subitem: Character background text */
.item-characteristics-bio-backgroundText {
	grid-area: backgroundText;
}

/* Item: character bio experience and money*/

.item-characteristics-earnings {	
	max-width: 330px;
	grid-area: earnings;
	display: grid;
	grid-template-areas:
	"experienceLabel experience moneyLabel money";
	grid-template-columns: 90px 57px 95px 83px;
	grid-template-rows: 23px;
	margin-left: 6px;
	margin-bottom: 6px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding: 5px;
	padding-bottom: 0px;
	background-color: #fff990;
	border-left: solid 1px goldenrod;
	border-right: solid 1px goldenrod;
	border-bottom: solid 1px goldenrod;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	vertical-align: top;
}

.item-characteristics-earnings h1 {
	margin-bottom: 10px;
	padding-left: 3px;
	padding-top: 4px;
	line-height: 1.3;
}

.item-characteristics-earnings-experience input {
	min-width: 54px;
	padding-right: 0px;
	padding-top: 0px;
}

.item-characteristics-earnings input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;
	padding-top: 0px;
	margin-bottom: 5px;
}

.item-characteristics-earnings input[type=text] {
	font-size: 13px;
	max-width: 90px;
	text-align: right;
	background-color: #fff990;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 1px;
	color: black;
}

/* Subitem: Character Experience */
.item-characteristics-earnings-experienceLabel {
	grid-area: experienceLabel;
}

/* Subitem: Character Experience */
.item-characteristics-earnings-experience {
	grid-area: experience;
}

/* Subitem: Character Money */
.item-characteristics-earnings-moneyLabel {
	grid-area: moneyLabel;
}

/* Subitem: Character Money */
.item-characteristics-earnings-money {
	grid-area: money;
}

.item-characteristics-earnings-money input[type=number] {
	min-width: 70px;
	margin-bottom: 5px;
}

/* Item: core abilities */
.item-characteristics-primary-attributes {
	grid-area: primaryAbilities;
	display: grid;
	grid-template-areas:
	"primaryAbilityNames primaryAbilityValues primaryAbilityChances primaryAbilityButtons primaryAbilityCosts";
	grid-template-columns: 126px 49px 50px 45px 45px;
	min-width: 300px;
	vertical-align: middle;
	margin-left: 6px;
	background-color: #fff990; 
	border-top: solid 1px goldenrod;
	border-left: solid 1px goldenrod;
	border-right: solid 1px goldenrod;
	border-bottom: 0px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding-bottom: 2px;
}

.item-characteristics-primary-attributes h1 {
	background: gold;
	padding-left: 5px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: 0px;
	margin-top: 0px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.item-characteristics-primary-attributes h2 {
	margin-left: 8px;
}

.item-characteristics-primary-attributes input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;	
}

.item-characteristics-primary-attributes input[readonly] {
	text-align: center;
	border: none;	
	max-width: 45px;
}

/* Sub-Item: core abilities characteristics */
.item-characteristics-primary-attributes-names {
	grid-area: primaryAbilityNames;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	min-height: 130px;
	max-height: 160px;
}

/* Sub-Item: core abilities values */
.item-characteristics-primary-attributes-values {
	grid-area: primaryAbilityValues;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	min-height: 130px;
	max-height: 160px;
	max-width: 55px;
}

/* Sub-Item: core abilities values */
.item-characteristics-primary-attributes-rollChances {
	grid-area: primaryAbilityChances;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	min-height: 130px;
	max-height: 160px;
}

.item-characteristics-primary-attributes-rollChances h1 {
	margin-left: 6px;
}

/* Sub-Item: core abilities values */
.item-characteristics-primary-attributes-rollButtons {
	grid-area: primaryAbilityButtons;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 130px;
	max-height: 160px;
}

/* Sub-Item: core abilities values */
.item-characteristics-primary-attributes-costs {
	grid-area: primaryAbilityCosts;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 130px;
	max-height: 160px;
}

.item-characteristics-primary-attributes-costs h1 {
	margin-left: 8px;
	text-align: left;
	min-width: 32px;
}

/* Item: combat abilities */
.item-characteristics-combat-attributes {
	grid-area: combatAbilities;
	display: grid;
	grid-template-areas:
	"combatAbilityNames combatAbilityValues . . combatAbilityCosts";
	grid-template-columns: 126px 49px 50px 45px 45px;
	min-width: 300px;
	vertical-align: middle;
	margin-left: 6px;
	background-color: #fff990; 
	border: solid 1px goldenrod;
	border-right: solid 1px goldenrod;
	border-left: solid 1px goldenrod;
	border-bottom: none;
	border-top: none;
	padding-bottom: 2px;
}

.item-characteristics-combat-attributes input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;
}

.item-characteristics-combat-attributes input[readonly] {
	text-align: center;
	padding-right: 2px;
	border: none;
	max-width: 45px;
}

.item-characteristics-combat-attributes h1 {
	background: gold;
	padding-left: 5px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: 0px;
	margin-top: 0px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.item-characteristics-combat-attributes h2 {
	margin-left: 8px;
}

/* Sub-Item: combat abilities characteristics */
.item-characteristics-combat-attributes-names {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	grid-area: combatAbilityNames;
	min-width: 120px;
}

/* Sub-Item: core abilities values */
.item-characteristics-combat-attributes-values {
	text-align: center;
	grid-area: combatAbilityValues;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 152px;
	text-align: left;
}

/* Sub-Item: core abilities values */
.item-characteristics-combat-attributes-costs {
	grid-area: combatAbilityCosts;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-characteristics-combat-attributes-costs h1 {
	margin-left: 8px;
	text-align: left;
	min-width: 32px;
}

/* Item: combat abilities */
.item-characteristics-movement-abilities {
	grid-area: movementAbilities;
	display: grid;
	grid-template-areas:
	"movementNames movementValues . . movementCosts";
	grid-template-columns: 126px 49px 50px 45px 45px;
	background: purple;
	min-width: 300px;
	margin-left: 6px;
	padding-bottom: 2px;
	background-color: #fff990; 
	border-right: solid 1px goldenrod;
	border-left: solid 1px goldenrod;
	border-bottom: solid 1px goldenrod;
	border-top: none;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.item-characteristics-movement-abilities input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;
}

.item-characteristics-movement-abilities input[readonly] {
	text-align: center;
	padding-right: 0px;
	border: none; 
	max-width: 45px;
}

.item-characteristics-movement-abilities h1 {
	background: gold;
	padding-left: 5px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: 0px;
	margin-top: 0px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.item-characteristics-movement-abilities h2 {
	margin-left: 8px;
}

/* Sub-Item: combat abilities characteristics */
.item-characteristics-movement-abilities-names {
	grid-area: movementNames;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Sub-Item: core abilities values */
.item-characteristics-movement-abilities-values {
	grid-area: movementValues;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-characteristics-movement-abilities-values h1 {
	min-width: 141px;
}

/* Sub-Item: core abilities costs */
.item-characteristics-movement-abilities-costs {
	grid-area: movementCosts;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-characteristics-movement-abilities-costs h1 {
	margin-left: 8px;
	text-align: left;
	min-width: 32px;
}

/* 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 22px 100px 419px;
	background: royalblue;
	max-height: 800px;
	max-width: 300px;
}


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

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

.item-characteristics-portrait img {
	width: 100%;
	height: auto;
	margin-left: 7px;
	border-right: solid gray 1px;
	border-bottom: solid gray 1px;
	border-left: solid darkgray 1px;
	border-top: solid darkgray 1px;
}

.item-characteristics-portrait .button-left-arrow {
	  position: absolute;
	  top: 50%;
	  left: 11%;
	  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-right-arrow {
	position: absolute;
	  top: 50%;
	  left: 95%;
	  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-right-arrow:hover,
.item-characteristics-portrait .button-left-arrow:hover {
	background-color: gold;	
}


/* 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;// #fff990;
	border: solid 2px gray;
	height: 250px;
	margin-left: 12px;
}

.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: 240px;
	margin: 0px;
	padding: 0px;
	line-height: 1.0;
}

.item-portrait-rule-description h1 {
	font-size: 16px;
	color: firebrick;
	text-align: left;
	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 {
	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;
	background-color: gold;
	border-radius: 3px;
	align-items: center;
	padding: 0px;
	margin-right: 1px;
	margin-bottom: 2px;
	border: solid 1px darkgoldenrod;
}

.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: gold;
}

.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: Turn Tracker Button Space */

.item-characteristics-turn-tracker {
	grid-area: turnTracker;
	width: 68px;
	height: 22px;
	padding: 0px;
	line-height: 20px;
}

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

.item-characteristics-history textarea {
	width: 316px;
	height: 100%;
}

/* 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: 323px;
	background-color: inherit;
	max-height: 95px;
	margin-left: 3px;
	border: transparent;
	margin-top: 0px;
}

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

.item-characteristics-perception input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;
	margin: 0px;
	margin-bottom: 3px;
	background-color: white;
	max-width: 40px;
}

.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: royalblue;
	color: white;
	font-weight: bold;
	margin-top: 2px;
}

.subitem-characteristics-perception-column-container {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	background-color: lightblue;
	padding: 2px;
	align-items: center;
	border-radius: 5px;
	border: solid lightcyan 2px;
}

.subitem-characteristics-perception-column-container input[type=text] {
	font-size: 13px;
	max-width: 32px;
	line-height: 1.3;
	text-align: center;
	background-color: lightcyan;
	padding: 0px;
	color: black;
	font-weight: normal;
}

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

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

.grid-container-tab-options {
	display: grid;
	grid-template-areas: ". . ." 
		". options ."
		". . .";
	grid-template-columns: 110px 500px 100px;
	grid-template-rows: 100px 185px 100px;
	font-size: 16px;
	background-color: royalblue;
	border: 3px solid #fff990;
	border-radius: 5px;
	margin-bottom: 1px;
	min-height: 800px;
	min-width: 674px;
}

.grid-container-tab-options h1 {
	font-size: 14px;
	margin-left: 0px;
	color: black;
	padding-bottom: 5px;
	font-weight: 500;
}

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

/* Sub-Item: options */
.item-options {
	grid-area: options;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-left: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #fff990;
	margin: 5px;
	width: 450px;
	height: 213px;
	margin: 0px;
	border: solid 2px goldenrod;
	border-radius: 3px;
}

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

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

.button {
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition-duration: 0.2s;
	text-align: center;
}
	
.buttonRecover {
	background-color: darkseagreen;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 4px;
	padding-right: 3.5px;
	vertical-align: middle;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	border-radius: 3px;
}

.buttonReset {
	background-color: orange;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 12px;
	padding-right: 12px;
	vertical-align: middle;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	border-radius: 3px;
}

.buttonTracker {
	background-color: dodgerblue;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
}

.button-Power-END-right,
.button-Power-END-left {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 2px;
	padding-left: 2px;
	min-height: 16px;
	max-height: 16px;
	text-align: middle;
	font-weight: bold;
	border-radius: 2.5px;
}

.button-Power-END-left {
	background-color: olive;
	margin-right: 0px;
	min-width: 34px;
	max-width: 35px;
}

.button-Power-END-right {
	background-color: salmon;
	margin-right: 0px;
	min-width: 34px;
	max-width: 35px;
}

.buttonRoll,
.buttonRollAttack,
.buttonRollActivate,
.buttonRollNormalAttack,
.buttonRollShieldAttack,
.buttonRollShow,
.buttonRollPower {
	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: 15px;
}

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


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

.button:hover,
.buttonRecover:hover,
.buttonReset:hover,
.buttonRoll:hover,
.buttonRollAttack:hover,
.buttonRollActivate:hover,
.buttonRollNormalAttack:hover,
.buttonRollShieldAttack:hover,
.buttonRollShow:hover,
.buttonRollPower:hover {
	color: black;
	background-color: lightgray;
	text-align: center;
}

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

.buttonRoll {
	background-color: orange;
}

.buttonRollAttack {
	background-color: indianred;
	border-radius: 2.5px;
}

.buttonRollActivate {
	background-color: steelblue;
}

.buttonRollNormalAttack {
	background-color: olivedrab;
	border-radius: 2.5px;
}

.buttonRollShieldAttack  {
	background-color: DarkGoldenrod;
	border-radius: 2.5px;
}

.buttonRollShow {
	background-color: lightslategray;
	min-width: 36px;
	max-width: 38px;
}

.buttonRollPower {
	background-color: #9184E2; /* lighter than mediumslateblue */
	border-radius: 2.5px;
}

/* The d6 of dicefontd6 doesn't look good. Let's hold off for a better idea or stick with the label 'Roll' on the buttons.

.buttonRollNormalAttack::before {
	font-family: 'dicefontd6';
	font-size: 16px;
	content: 'F';
} */

.portrait-display-button-left,
.portrait-display-button-right {
	background-color: orange;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 4px 2px;
	padding-left: 14px;
	padding-right: 14px;
	vertical-align: middle;
	text-align: center;
}

.portrait-display-button-left:hover,
.portrait-display-button-right:hover {
	color: black;
	background-color: limegreen;
	text-align: center;
}


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

/* Customize the label (the container) */
.container-checkbox {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	padding-top: 2px;
	//margin-bottom: 10px;
	cursor: pointer;
	max-width: 400px;
	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-gray 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: gold;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark,
.container-checkbox-small:hover input ~ .checkmark-small {
	background-color: goldenrod;
	border: solid 1px darkgoldenrod;
}

.container-checkbox-small-gray:hover input ~ .checkmark-small-gray {
	background-color: lightsteelblue;
	border: solid 1px darkgray;
}

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

.container-checkbox-small-gray input:checked ~ .checkmark-small-gray {
	background-color: lightgray;
}

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

.checkmark-small-gray:after {
	content: "";
	position: absolute;
	display: none;
	border: solid 1px gray;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after,
.container-checkbox-small input:checked ~ .checkmark-small:after,
.container-checkbox-small-gray input:checked ~ .checkmark-small-gray: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-gray {
	display: block;
	position: relative;
	padding-left: 20px;
	padding-top: 0px;
	cursor: pointer;
	font-size: 12px;
	max-width: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Create a custom checkbox */
.checkmark-small {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	background-color: gold;
}

.checkmark-small-gray {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	background-color: lightgray;
}

/* Style the checkmark/indicator */
.container-checkbox-small .checkmark-small:after,
.container-checkbox-small-gray .checkmark-small-gray: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);
}


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

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

.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: 20px;
	background-color: dodgerblue;
	border: none;
	border-radius: 5px;
	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: 5px;
}

/* 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;
}

/* --------------------------------------------------- */
/* Talents, Perks, and Complications                   */
/* --------------------------------------------------- */
.grid-container-complications-talents {
	display: grid;
	grid-gap: 4px;
	grid-template-areas: 
	"theTalentsAndPerks theComplications"
	"theNotes theNotes";
	grid-template-columns: 338px 338px;
	grid-template-rows: 642px 160px;
	max-width: 685px;
	padding: 0px;
	font-size: 16px;
	background-color: dodgerblue;
	justify-content: middle;
	padding-bottom: 0px;
	margin-bottom: 1px;
}

.grid-container-complications-talents h2 {
	font-size: 18px;
	line-height: 1.3;
	text-align: center;
	font-weight: normal;
}

/* Complications and Talents Tab: Talents and Perks */
.flex-container-complications-talents-left {
	grid-area: theTalentsAndPerks;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	border: 3px solid #fff990;
	border-radius: 5px;
	max-width: 333px;
	background: gold;
	height: 630px;
	padding: 5px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.item-talent-heading {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	margin-bottom: 0px;
	padding: 0px;
	max-width: 333px;
}

.item-talent-heading input[type=text] {
	max-width: 200px;
	padding: 1px;
	padding-left: 3px;
	margin: 0px;
	margin-right: 0px;
	margin-left: 2px;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	border: solid 1px darkgray;
}

.item-talent-heading input[type=number] {
	max-width: 45px;
	padding: 2px;
	margin: 0px;
	padding-right: 0px;
	text-align: right;
	border: solid 1px darkgray;
}

.item-talent-heading h1 {
	font-size: 12px;
	line-height: 1.1;
	padding-right: 2px;
	padding-left: 6px;
}

.item-talent-textbox textarea {
	max-width: 314px;
	max-height: 36px;
	padding: 3px;
	border: solid 1px darkgray;
	margin-bottom: 6px;
}


/* Complications and Talents Tab: Complications */
.flex-container-complications-talents-right {
	grid-area: theComplications;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	border: 3px solid lightcyan;
	border-radius: 5px;
	max-width: 333px;
	background: lightblue;
	height: 630px;
	padding: 5px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.item-complication-heading {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	margin-bottom: 0px;
	padding: 0px;
	max-width: 333px;
}

.item-complication-heading input[type=text] {
	max-width: 210px;
	padding: 1px;
	padding-left: 3px;
	margin: 0px;
	margin-right: 0px;
	margin-left: 2px;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	border: solid 1px darkgray;
}

.item-complication-heading input[type=number] {
	max-width: 45px;
	padding: 2px;
	margin: 0px;
	padding-right: 0px;
	text-align: right;
	border: solid 1px darkgray;
}

.item-complication-heading h1 {
	font-size: 12px;
	line-height: 1.1;
	padding-right: 2px;
	padding-left: 6px;
}

.item-complication-textbox textarea {
	max-width: 314px;
	max-height: 54px;
	padding: 3px;
	border: solid 1px darkgray;
	margin-bottom: 6px;
}

/* Complications Tab: Notes Text Panel */

.flex-container-complications-bottom {
	grid-area: theNotes;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	border: 3px solid lightgray;
	border-radius: 5px;
	max-width: 674px;
	padding: 5px;
	margin: 0px;
	height: 145px;
	background: white;
}

.flex-container-complications-bottom textarea {
	width: 322px;
	max-height: 143px;
	padding: 0px;
	margin: 0px;
	border: transparent;
}

/* ----------------------------------------------------- */
/* Powers                                                */
/* Organized in two columns with different color styles. */
/* ----------------------------------------------------- */
.grid-container-powers {
	display: grid;
	grid-gap: 4px;
	grid-template-areas: 
	"leftPowers rightPowers";
	grid-template-columns: 338px 338px;
	grid-template-rows: 806px;
	max-width: 686px;
	min-width: 676px;
	padding: 0px;
	font-size: 16px;
	background-color: dodgerblue;
	justify-content: middle;
	padding-bottom: 0px;
	margin-bottom: 1px;
}

.grid-container-powers 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.35;
}

.grid-container-powers input[type=number] {
	padding-right: 0px;
	padding-top: 2px;
	width: 30px;
	height: 20px;
	margin: 0px;
	text-align: right;
}

.flex-container-powers-right,
.flex-container-powers-left {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	border-radius: 5px;
	max-width: 333px;
	padding-top: 1px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 2px;
	margin: 0px;
	height: 797px;
}

.flex-container-powers-left textarea,
.flex-container-powers-right textarea {
	color: gray; 
	max-width: 316px;
	height: 54px;
	padding: 3px;
	margin: 0px;
	margin-top: 1px;
	font-size: 8;
}

.flex-container-powers-right textarea {
	border: solid 1px goldenrod;
}

// Subitems to organize rows within each power flex item.

.item-flex-power {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.subitem-flex-power-heading-left,
.subitem-flex-power-heading-right,
.subitem-flex-power-effect-left,
.subitem-flex-power-effect-right {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 1px;
	margin-bottom: 1px;
	align-items: center;
}

.subitem-flex-power-heading-left input[type=text],
.subitem-flex-power-heading-right input[type=text],
.subitem-flex-power-effect-left input[type=text],
.subitem-flex-power-effect-right input[type=text]{
	min-height: 22px;
	text-align: left;
	padding-left: 2px;
	margin-right: 0px;
}

.subitem-flex-power-heading-left input[type=text]:nth-child(2),
.subitem-flex-power-heading-right input[type=text]:nth-child(2) {
	font-weight: bold;
	min-width: 134px;
}

.subitem-flex-power-heading-left input[type=text]:nth-child(4),
.subitem-flex-power-heading-right input[type=text]:nth-child(4) {
	font-weight: bold;
	text-align: center;
}

.subitem-flex-power-effect-left input[type=text],
.subitem-flex-power-effect-right input[type=text]{
	min-width: 140px;
}

.subitem-flex-power-heading-left select,
.subitem-flex-power-heading-right select {
	font-size: 13px;
	height: 19px;
	width: 96px;
	margin: 0px;
}

.subitem-flex-power-effect-left input[type=text]:nth-child(1),
.subitem-flex-power-effect-right input[type=text]:nth-child(1){
	min-width: 150px;
}

.subitem-flex-power-effect-left input[type=text]:nth-child(2), /* Dice */
.subitem-flex-power-effect-right input[type=text]:nth-child(2) /* Dice */ {
	min-width: 58px;
	text-align: center;
	margin-left: 2px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

.subitem-flex-power-effect-left input[type=number]:nth-child(4), /* Roll chance */
.subitem-flex-power-effect-right input[type=number]:nth-child(4) /* Roll chance */ {
	max-width: 41px;
	min-width: 41px;
	text-align: right;
	margin-left: 1px;
	margin-right: 2px;
}

.subitem-flex-power-activeCost input[type=number]:nth-child(2), /* Advantages */
.subitem-flex-power-activeCost input[type=number]:nth-child(4) /* Limitations */ {
	border: solid 1px gray;
	min-width: 55px;
}

/* Powers Tab: Left Powers */
.flex-container-powers-left {
	grid-area: leftPowers;
	border: 3px solid lightcyan;
	background: lightblue;
}

.flex-container-powers-left textarea {
	border: solid 1px black;
}

.flex-container-powers-left input[readonly]{
	background: lightcyan;
	border: solid 1px #89abb9;
	line-height: 1.0;
}

.flex-container-powers-left textarea{
	border: 1px solid #89ABB9;
}

.subitem-flex-power-heading-left input[type=text]{
	border: solid 1px #89ABB9;
	max-width: 28px;
}

.subitem-flex-power-effect-left input[type=text],
.subitem-flex-power-effect-left input[type=number]{
	border: solid 1px #89ABB9;
}

.subitem-flex-power-active-cost-left {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.subitem-flex-power-active-cost-left input[type=number] {
	/* Active, Real Cost */
	border: solid 1px #89ABB9;
}

.subitem-flex-power-active-cost-left input[readonly] {
	/* Active, Real Cost */
	max-width: 38px;
	text-align: center;
	padding: 0px;
}

.subitem-flex-power-limitations-left {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 333px;
	margin-top: 1px;
	margin-bottom: 1px;
}

.subitem-flex-power-limitations-left input[type=number]{
	/* Advantages, limitations */
	border: solid 1px #89ABB9;
	min-width: 50px;
}

.subitem-flex-power-limitations-left select {
	font-size: 13px;
	height: 19px;
	max-width: 115px;
	margin: 0px;
	align-items: center;
}


/* Powers Tab: Right Powers */
.flex-container-powers-right {
	grid-area: rightPowers;
	border: 3px solid #fff990;
	background: gold;
}

.flex-container-powers-right textarea {
	border: solid 1px black;
}

.flex-container-powers-right input[readonly]{
	background: #fff990;
	border: solid 1px goldenrod;
	line-height: 1.0;
}

.flex-container-powers-right textarea{
	border: 1px solid goldenrod;
}

.subitem-flex-power-heading-right input[type=text] {
	max-width: 28px;
	border: solid 1px goldenrod;
}

.subitem-flex-power-effect-right input[type=text],
.subitem-flex-power-effect-right input[type=number]{
	border: solid 1px goldenrod;
}

.subitem-flex-power-active-cost-right {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.subitem-flex-power-active-cost-right input[type=number] {
	/* Active, Real Cost */
	border: solid 1px goldenrod;
}

.subitem-flex-power-active-cost-right input[readonly] {
	/* Active, Real Cost */
	max-width: 38px;
	text-align: center;
}

.subitem-flex-power-limitations-right {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 333px;
	margin-top: 1px;
	margin-bottom: 1px;
	align-items: center;
}

.subitem-flex-power-limitations-right input[type=number]{
	/* Advantages, limitations */
	border: solid 1px goldenrod;
	min-width: 50px;
}

.subitem-flex-power-limitations-right select {
	font-size: 13px;
	height: 19px;
	max-width: 115px;
	margin: 0px;
}

// Buttons for power, talent, and complication movers.

.power-mover-plus-minus-enclosure,
.talent-mover-plus-minus-enclosure,
.complication-mover-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}

.power-mover-plus-minus-button,
.talent-mover-plus-minus-button,
.complication-mover-plus-minus-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 24px;
	width: 10px;
	align-items: center;
	padding: 0px;
	margin-right: 2px;
	margin-left:3px;
}

.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: LemonChiffon;
	border: solid 1px silver;
	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.25ch;
	border-radius: 0px;
	max-width: 10px;
}

.power-mover-plus-minus-button button.buttonPlus span,
.power-mover-plus-minus-button button.buttonMinus span,
.talent-mover-plus-minus-button button.buttonPlus span,
.talent-mover-plus-minus-button button.buttonMinus span,
.complication-mover-plus-minus-button button.buttonPlus span,
.complication-mover-plus-minus-button button.buttonMinus span {
	display: inline-block;
	transform: rotate(-90deg);
	text-align: center;
}

.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: gray;
	color: white;
	transition: 0.05s;
} 


/* ----------------------------------------------------- */
/* Skills                                                */
/* Organized into a 2x3 grid of containers               */
/* ----------------------------------------------------- */
.grid-container-skills-tab {
	display: grid;
	grid-template-areas:
	"theSkills1 theCombatSkills"
	"theSkills2 theLanguageSkills"
	"theSkills3 theEnhancers";
	grid-gap: 6px;
	grid-template-columns: 358px 322px;
	grid-template-rows: 273px 251px 259px;
	max-width: 692px;
	padding: 0px;
	padding-left: 0px;
	padding-top: 6px;
	margin-bottom: 0px;
	font-size: 16px;
	background-color: gold;
	border: 3px solid #fff990;
	border-radius: 5px;
	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;
}

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

/* Item: Skill Containers for Skill Groups 01, 02, and 03 */
.item-skillsTab-flex-container-skills-group01,
.item-skillsTab-flex-container-skills-group02,
.item-skillsTab-flex-container-skills-group03 {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	max-width: 358px;
	margin-left: 5px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	line-height: 1.10;
	padding-left: 1px;
	padding-right: 4px;
}

.item-skillsTab-flex-container-skills-group01 {
	grid-area: theSkills1;
	padding-bottom: 2px;
}

.item-skillsTab-flex-container-skills-group02 {
	grid-area: theSkills2;
	padding-top: 3px;
	padding-bottom: 2px;
}

.item-skillsTab-flex-container-skills-group03 {
	grid-area: theSkills3;
	padding-top: 3px;
	padding-bottom: 2px;
	margin-bottom: 4px;
}

.item-skillsTab-flex-container-skills-group01 input[type=number],
.item-skillsTab-flex-container-skills-group02 input[type=number],
.item-skillsTab-flex-container-skills-group03 input[type=number] {
	text-align: right;
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border: solid 1px palegoldenrod;
	max-height: 22px;
}

.item-skillsTab-flex-container-skills-group01 input[readonly],
.item-skillsTab-flex-container-skills-group02 input[readonly],
.item-skillsTab-flex-container-skills-group03 input[readonly] {
	text-align: center;
	background-color: #fff990; 
	border: transparent;
	max-width: 24px;
}

.item-skillsTab-flex-container-skills-group01 input[type=text]:nth-child(1),
.item-skillsTab-flex-container-skills-group02 input[type=text]:nth-child(1),
.item-skillsTab-flex-container-skills-group03 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: 1px;
	padding-right: 1px;
	border: solid 1px palegoldenrod;
}

/* 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 26px 38px 46px;
	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;
	max-height: 24px;
}

.subitem-skillsTab-flex-container {
	text-align: right;
}

// Buttons for skill movers.

.skill-mover-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.skill-mover-plus-minus-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 24px;
	width: 10px;
	align-items: center;
	padding: 0px;
	margin-right: 2px;
	margin-left: 2px;
}

.skill-mover-plus-minus-button button.buttonPlus,
.skill-mover-plus-minus-button button.buttonMinus {
	background-color: LemonChiffon;
	border: solid 1px silver;
	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.25ch;
	border-radius: 0px;
	max-width: 10px;
}

.skill-mover-plus-minus-button button.buttonPlus span,
.skill-mover-plus-minus-button button.buttonMinus span {
	display: inline-block;
	transform: rotate(-90deg);
	text-align: center;
}

.skill-mover-plus-minus-button button.buttonPlus:hover,
.skill-mover-plus-minus-button button.buttonMinus:hover {
	background-color: gray;
	color: white;
	transition: 0.05s;
} 

/* Item: Skill Container for combat skill flex "columns" */
.item-skillsTab-grid-container-combat-skills {
	grid-area: theCombatSkills;
	display: grid;
	grid-template-areas: 
	"skillNames skillLevels skillTypes skillCosts"
	"skillLevelNames skillLevels . skillCosts";
	grid-template-columns: 150px 50px 61px 38px;
	grid-template-rows: 199px 76px;
	max-width: 292px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 3px;
	padding-top: 0px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	line-height: 1.10;
}

/* Subitem: flex container for combat skill name "column" */
.subitem-skillsTab-flex-container-combat-skills-names {
	grid-area: skillNames;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 3px;
	padding-top: 0px;
}

.subitem-skillsTab-flex-container-combat-skills-names input[type=text] {
	max-width: 140px;
	margin-top: 0px;
	margin-bottom: 3px;
	font-size: 13px;
	text-align: left;
	margin-left: 4px;
	padding-left: 1px;
	padding-right: 1px;
	border: solid 1px palegoldenrod;
}

.subitem-skillsTab-flex-container-combat-skills-names h1 {
	text-align: left;
	padding-top: 3px;
	padding-bottom: 3px;
	max-height: 18px;
}

.subitem-skillsTab-flex-container-combat-skills-level-names {
	grid-area: skillLevelNames;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 8px;
	padding-top: 0px;
} 

.subitem-skillsTab-flex-container-combat-skills-level-names h1 {
	text-align: left;
	padding-top: 3px;
	padding-bottom: 3px;
	max-height: 18px;
	font-weight: bold;
}

/* Subitem: flex container for combat skill levels "column" */
.subitem-skillsTab-flex-container-combat-skills-levels {
	grid-area: skillLevels;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 7px;
	margin-bottom: 6px;
	max-height: 264px;
	margin-top: 3px;
	padding-bottom: 2px;
}

.subitem-skillsTab-flex-container-combat-skills-levels input[type=number] {
	text-align: center;
	padding-left: 3px;
	padding-right: 1px; /* Fix for shifting spinners on focus */
	max-width: 45px;
	margin-right: 5px;
	padding-bottom: 1px;
	max-height: height: 22px;
	border: solid 1px palegoldenrod;
}

.subitem-skillsTab-flex-container-combat-skills-levels h1 {
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	max-height: 18px;
	margin-left: 0px;
}

/* Subitem: flex container for combat skill type "column" */
.subitem-skillsTab-flex-container-combat-skills-types {
	grid-area: skillTypes;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 3px;
	margin-bottom: 5px;
	margin-left: 0px;
	height: 189px;
}

.subitem-skillsTab-flex-container-combat-skills-types h1 {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
	max-height: 18px;
	margin-left: 0px;
}

.subitem-skillsTab-flex-container-combat-skills-types .custom-select {
	max-width: 55px;
	text-align: center;
	height: 19px;
}

/* Subitem: flex container for combat skill costs "column" */
.subitem-skillsTab-flex-container-combat-skills-costs {
	grid-area: skillCosts;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 7px;
	margin-top: 3px;
	padding-bottom: 2px;
}

.subitem-skillsTab-flex-container-combat-skills-costs h1 {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	max-height: 18px;
	max-width: 40px;
}

.subitem-skillsTab-flex-container-combat-skills-costs input[readonly] {
	text-align: center;
	background-color: #fff990;
	max-width: 30px;
	margin-left: 5px;
}

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

/* Sub-Item: Flex containers for columns */
.subitem-skillsTab-flex-container-languages-heading {
	grid-template-areas: "skillName skillFluency literacy skillCost";
	grid-template-columns: 148px 83px 31px 36px;
	display: grid;
	margin-left: 0px;
}

.subitem-skillsTab-flex-container-languages-heading-name {
	grid-area: skillName;
	text-align: left;
}

.subitem-skillsTab-flex-container-languages-heading-fluency {
	grid-area: skillFluency;
	text-align: center;
}

.subitem-skillsTab-flex-container-languages-heading-literacy {
	grid-area: literacy;
	text-align: center;
}

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

.subitem-skillsTab-flex-container-language {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 285px;
	margin-left: 0px;
	padding: 0px;
	margin-left: 4px;
}

.subitem-skillsTab-flex-container-language input[type=text]:nth-child(1) {
	text-align: left;
	padding-left: 2px;
	min-width: 140px;
	margin-right: 0px;
	border: solid 1px palegoldenrod;	
}

.subitem-skillsTab-flex-container-language input[readonly] {
	text-align: center;
	background-color: #fff990;
	max-width: 22px;
	margin-right: 0px;
	margin-left: 3px;
	border: transparent;
}

.subitem-skillsTab-flex-container-language .container-checkbox-small {
	margin-top: 3px;
	margin-left: 10px;
}

.subitem-skillsTab-flex-container-language .custom-select {
	min-width: 70px;
	margin-left: 8px;
	max-height: 19px;
}


/* Item: Skill Container for Skill Enhancers */
.item-skillsTab-grid-container-skill-enhancers {
	grid-area: theEnhancers;
	display: grid;
	grid-template-areas: 
	". skillEnhancersHeading skillEnhancersHeading skillEnhancersHeading"
	"checkboxes skillNames . skillCosts"
	". skillNames skillLevels skillCosts";
	grid-template-columns: 25px 175px 65px 38px;
	grid-template-rows: 20px 112px 112px;
	max-width: 295px;
	padding-left: 5px;
	grid-gap:0px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	max-height: 251px;
}

.item-skillsTab-grid-container-skill-enhancers input[readonly]{
	background-color: #fff990;
	text-align: center;
	height: 18px;
	max-width: 30px;
}

.subitem-skillsTab-flex-container-skill-enhancers-checkboxes {
	grid-area: checkboxes;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	line-height: 1.2;
	padding-bottom: 5px;
	padding-top: 5px;
	height: 113px;
}

.subitem-skillsTab-flex-container-skill-enhancers-heading {
	grid-area: skillEnhancersHeading;
	text-align: left;
	display: flex;
	flex-direction: row;
	padding-top: 4px;
	justify-content: space-between;
	line-height: 1.15;
	width: 264px;
}

.subitem-skillsTab-flex-container-skill-enhancers-heading h1:nth-child(2) {
	padding-right: 0px;
	line-height: 1.15;
}

.subitem-skillsTab-flex-container-skill-enhancers-names {
	grid-area: skillNames;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 229px;
}

.subitem-skillsTab-flex-container-skill-enhancers-names h1 {
	text-align: left;
	line-height: 1.15;
	font-weight: bold;
}

.subitem-skillsTab-flex-container-skill-enhancers-levels {
	grid-area: skillLevels;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	line-height: 1.15;
	margin-top: 11px;
	height: 107px;
	margin-bottom: 4px;
}

.subitem-skillsTab-flex-container-skill-enhancers-levels input[type=number]{
	border: solid 1px palegoldenrod;
	height: 19px;
	margin-bottom: 2px;
}

.subitem-skillsTab-flex-container-skill-enhancers-costs {
	grid-area: skillCosts;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	line-height: 1.15;
	height: 229px;
}

/* ----------------------------------------------------- */
/* 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"
	"theWeapons theWeapons theWeapons"
	"theEquipment theSlides theSlides";
	grid-gap: 8px;
	grid-template-columns: 250px 336px 84px;
	grid-template-rows: 63px 174px 155px 322px;
	max-width: 692px;
	padding: 0px;
	padding-left: 2px;
	font-size: 16px;
	background-color: royalblue;
	border: 3px solid #fff990;
	border-radius: 5px;
	justify-content: middle;
	min-height: 801px;
}

.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;
	text-align: center;
}

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

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

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

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

.item-tab-gear-flex-container-encumbrance input[type=number]{
	background-color: #fff990;
	text-align: center;
	max-width: 70px;
	background-color: gold;
	border: solid 1px goldenrod;
	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: 80px;
	align-items: center;
}

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

.subitem-tab-gear-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	background-color: gold;
	justify-content: space-between;
	width: 50px;
	max-height: 20px;
	border: solid 1px goldenrod;
	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;
	max-width: 594px;
	padding-left: 5px;
	margin-left: 3px;
	padding-top: 0px;
	grid-gap: 3px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	height: 175px;
}

.subitem-tab-gear-flex-container-armor-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	max-width: 576px;
	margin-bottom: 1px;
	height: 24px;
}

.subitem-tab-gear-flex-container-armor-row h1:nth-child(1) {
	min-width: 118px;
	text-align: left;
}

.subitem-tab-gear-flex-container-armor-row h1:nth-child(2),
.subitem-tab-gear-flex-container-armor-row h1:nth-child(3),
.subitem-tab-gear-flex-container-armor-row h1:nth-child(4),
.subitem-tab-gear-flex-container-armor-row h1:nth-child(5) {
	min-width: 34px;
	text-align: center;
}

.subitem-tab-gear-flex-container-armor-row h1:nth-child(6),
.subitem-tab-gear-flex-container-armor-row h1:nth-child(7) {
	min-width: 44px;
}

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

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

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

.subitem-tab-gear-flex-container-armor-row input {
	max-height: 22px;
}

.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;
	border: solid 1px palegoldenrod;
}

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

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

.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
}

// Shield

.subitem-tab-gear-flex-container-shield {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 5px;
	margin-top: 5px;
}

.subitem-tab-gear-flex-container-shield-row h1 {
	margin-bottom: 3px;
	padding: 0px;
}

.subitem-tab-gear-flex-container-shield-row input {
	max-height: 21px;
}

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

.subitem-tab-gear-flex-container-shield-row .container-checkbox-small {
	padding-left: 10px;
	margin-right: 3px;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(1) {
	min-width: 120px;
	text-align: left;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(3) {
	min-width: 67px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(4) {
	min-width: 24px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(6) {
	min-width: 38px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(7) {
	min-width: 48px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(5),
.subitem-tab-gear-flex-container-shield-row h1:nth-child(8),
.subitem-tab-gear-flex-container-shield-row h1:nth-child(9) {
	min-width: 32px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(2),
.subitem-tab-gear-flex-container-shield-row h1:nth-child(10),
.subitem-tab-gear-flex-container-shield-row h1:nth-child(11) {
	min-width: 40px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row h1:nth-child(12) {
	min-width: 42px;
	text-align: center;
}

.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1),
.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
	padding-left: 1px;
	padding-right: 1px;
	margin-right: 0px;
	border: solid 1px palegoldenrod;
}

.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1) {
	max-width: 120px;
	text-align: left;
}

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

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

.subitem-tab-gear-flex-container-shield-row input[type=number] {
	text-align: right;
	padding-left: 3px;
	max-width: 38px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	border: solid 1px palegoldenrod;
}

.subitem-tab-gear-flex-container-shield-row input[type=number]:nth-child(12) {
	text-align: right;
	padding-left: 3px;
	min-width: 42px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	border: solid 1px palegoldenrod;
}

.subitem-tab-gear-flex-container-shield-row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 576px;
}

/* ------------- */
/* Item: Weapons */
/* ------------- */
.item-tab-gear-flex-container-weapons {
	grid-area: theWeapons;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 4px;
	padding: 0px;
	padding-left: 5px;
	margin-top: 8px;
	max-height: 145px;
	max-width: 655px;
	background-color: #fff990;
	border: solid 2px goldenrod;
	border-radius: 3px;
}

.subitem-tab-gear-flex-container-weapon-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 650px;
}

.subitem-tab-gear-flex-container-weapon-row input {
	max-height: 21px;
}

.subitem-tab-gear-flex-container-weapon-row h1 {
	min-width: 39px;
	text-align: center;
}

.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-weapon-row h1:nth-child(1) {
	min-width: 120px;
	text-align: left;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(2) {
	min-width: 65px;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(3) {
	min-width: 26px;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(4) {
	min-width: 32px;
	text-align: left;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(5) {
	min-width: 36px;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(6) {
	min-width: 40x;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(7) {
	min-width: 44px;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(8) {
	min-width: 42px;
	text-align: center;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(9) {
	min-width: 32px;
	text-align: right;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(10) {
	min-width: 34px;
	text-align: right;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(11) {
	min-width: 45px;
	text-align: center;
	padding-left: 0px;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(12) {
	min-width: 32px;
	text-align: center;
	padding: 0px;
}

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(13) {
	min-width: 32px;
	text-align: right;
	margin-right: 6px;
}

.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(1) {
	text-align: left;
	padding-left: 1px;
	padding-right: 1px;
	max-width: 120px;
	margin-right: 0px;
	border: solid 1px palegoldenrod;
}

.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(2) {
	text-align: center;
	padding-left: 1px;
	padding-right: 1px;
	max-width: 68px;
	margin-right: 0px;
	border: solid 1px palegoldenrod;
}

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

.subitem-tab-gear-flex-container-weapon-row button:nth-child(4) {
	margin-left: 0px;
	margin-right: 0px;
}

.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(5),
.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(7),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9) {
	text-align: right;
	padding-left: 3px;
	max-width: 38px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	border: solid 1px palegoldenrod;
}

.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(11),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13) {
	text-align: right;
	padding-left: 3px;
	max-width: 46px;
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	border: solid 1px palegoldenrod;
}

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

/* --------------- */
/* Item: Equipment */
/* --------------- */
.item-tab-gear-flex-container-equipment {
	grid-area: theEquipment;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 248px;
	padding-left: 5px;
	margin-left: 4px;
	padding: 4px;
	background-color: lightcyan;
	border: solid 2px lightgray;
	border-radius: 3px;
	height: 367px;
}

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

.subitem-tab-gear-flex-container-equipment h1 {
	margin-right: 8px;
}

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

.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;
	border: solid 1px #eaeaea;
}

// Buttons for equipment movers.

.gear-mover-plus-minus-enclosure {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}

.gear-mover-plus-minus-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 22px;
	width: 10px;
	align-items: center;
	padding: 0px;
	margin-right: 2px;
}

.gear-mover-plus-minus-button button.buttonPlus,
.gear-mover-plus-minus-button button.buttonMinus {
	background-color: white;
	border: solid 1px lightgray;
	color: lightskyblue;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	display: inline-block;
	font-size: 8px;
	margin: 0px 0px;
	line-height: 1.25ch;
	border-radius: 0px;
	max-width: 10px;
}

.gear-mover-plus-minus-button button.buttonPlus span,
.gear-mover-plus-minus-button button.buttonMinus span {
	display: inline-block;
	transform: rotate(-90deg);
	text-align: center;
}

.gear-mover-plus-minus-button button.buttonPlus:hover,
.gear-mover-plus-minus-button button.buttonMinus:hover {
	background-color: silver;
	transition: 0.05s;
	color: white;
} 

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

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

.item-tab-gear-slide-container h1 {
	text-align: left;
	line-height: 1.2;
	font-size: 12px;
	margin: 0px;
}

.item-tab-gear-slide-container h2 {
	font-size: 12px;
	text-align: center;
	font-weight: 400;
	line-height: 1.2;
}

.item-tab-gear-slide-container .button-left-arrow {
	  position: absolute;
	  top: 4.5%;
	  left: 88%;
	  transform: translate(-50%, -50%);
	  color: gray;
	  background-color: lightgray;
	  font-size: 12px;
	  padding: 1px 5px;
	  border: none;
	  cursor: pointer;
	  border-radius: 3px;
	  text-align: center;
}

.item-tab-gear-slide-container .button-right-arrow {
	position: absolute;
	  top: 4.5%;
	  left: 92.5%;
	  transform: translate(-50%, -50%);
	  color: gray;
	  background-color: lightgray;
	  font-size: 12px;
	  padding: 1px 5px;
	  border: none;
	  cursor: pointer;
	  border-radius: 3px;
	  text-align: center;
}

.item-tab-gear-slide-container .button-right-arrow:hover,
.item-tab-gear-slide-container .button-left-arrow:hover {
	background-color: gold;
	color: black;
}

.item-tab-gear-slide-flex-container-maneuvers,
.item-tab-gear-slide-flex-container-martial-maneuvers {
	width: 406px;
	height: 375px;
	padding: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	background-color: lightcyan;
	border: solid 2px lightgray;
	border-radius: 3px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: 280px;
	min-height: 270px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text] {
	height: 20px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=number] {
	height: 20px;
	border: solid 1px lightgray;
	margin: 0px;
	padding: 0px;
	padding-right: 0px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(1) {
	width: 135px;
	border: 1px solid lightgray;
	margin: 0px;
	text-align: left;
	padding-left: 2px;
	height: 20px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(2),
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(3),
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(4) {
	width: 30px;
	border: 1px solid lightgray;
	margin: 0px;
	margin-left: 6px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(5) {
	// Probably not going to be used.
	width: 165px;
	border: 1px solid lightgray;
	margin: 0px;
	margin-left: 3px;
	text-align: left;
}

.item-tab-gear-slide-flex-container-martial-maneuvers textarea {
	width: 135px;
	border: 1px solid lightgray;
	height: 36px;
	padding: 1px;
	font-size: 12px;
}

.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(1),
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(1) {
	width: 108px;
}

.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(2),
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(2),
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(3),
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(3),
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(4),
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(4),
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(2),
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(3),
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(4) {
	width: 40px;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(5),
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(5) {
	text-align: left;
	padding-left: 0px;
	margin-left: 0px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(1) {
	width: 138px;
}

.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(5) {
	text-align: left;
	padding-left: 0px;
	margin-left: 0px;
}

.subitem-tab-gear-slide-flex-container-maneuvers-heading,
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
	flex-direction: row;
	display: flex;
	justify-content: flex-start;
	width: 402px;
	height: 19px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-left: 4px;
	margin-bottom: 0px;
	background-color: lightcyan;
}

.subitem-tab-gear-slide-flex-container-maneuvers-light-row,
.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
	flex-direction: row;
	display: flex;
	justify-content: flex-start;
	width: 402px;
	height: 19px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 4px;
	padding-left: 4px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.subitem-tab-gear-slide-flex-container-maneuvers-light-row {
	background-color: white;
}

.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
	background-color: lightcyan;
}

.subitem-tab-gear-slide-flex-container-martial-maneuvers-row {
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	width: 397px;
	height: 40px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 4px;
	margin-top: 0px;
	margin-bottom: 0px;
}


.subitem-tab-gear-slide-flex-container-martial-name-and-points {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 42px;
	max-width: 134px;
	padding: 0px 0px;
}

.subitem-tab-gear-slide-flex-container-martial-name-and-points-row {
	display: flex;
	flex-direction: row;
	justify-content: right;
}

.subitem-tab-gear-slide-flex-container-martial-name-and-points-row h1 {
	padding-right: 0px;
	padding-left: 30px;
	padding-top: 4px;
}

.subitem-tab-gear-slide-flex-container-martial-name-and-points-row input[type=number] {
	max-width: 42px;
}

/* Basic Attack */

.subitem-tab-gear-slide-flex-container-standard-attack {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 13px;
	align-items: center;
}

.subitem-tab-gear-slide-flex-container-standard-attack h1 {
	max-width: 90px;
	margin-right: 5px;
	margin-top: 2px;
}

.subitem-tab-gear-slide-flex-container-standard-attack span {
	min-width: 42px;
	align-content: left;
}

.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(3),
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(4),
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(5) {
	width: 40px;
	text-align: center;
	padding-right: 0px;
	margin-top: 2px;
}

.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(6) {
	max-width: 130px;
	text-align: left;
	margin-right: 6px;
	margin-top: 2px;
}

.subitem-tab-gear-slide-flex-container-range-modifiers {
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	width: 397px;
	height: 30px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 5px;
	margin-top: 13px;
	margin-bottom: 0px;
}

.subitem-tab-gear-slide-range-modifier-container-first,
.subitem-tab-gear-slide-range-modifier-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 30px;
}

.subitem-tab-gear-slide-range-modifier-container-first {
	min-width: 83px;
	align-items: flex-start;
}

.subitem-tab-gear-slide-range-modifier-container {
	min-width: 50px;
	align-items: center;
}

.subitem-tab-gear-slide-range-modifier-container h2:nth-child(1) {
	font-weight: bold;
}

.subitem-tab-gear-slide-range-modifier-container-first h2 {
	font-weight: bold;
}

/* 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;
	background-color: lightcyan;
	margin-left: 0px;
	margin-bottom: 0px;
	border: solid 2px lightgray;
	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 {
	background-color: lightcyan;
	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 lightgray;
	border-right: solid 1px lightgray;
	width: 260px;
	height: 20px;
}

.subitem-gear-slide-flex-container-hit-locations-special-top-row {
	border-top: solid 1px lightgray;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding-top: 5px;
}

.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
	border-bottom: solid 1px lightgray;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.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 lightgray;
}

/* 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 {
	background-color: lightcyan;
	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-top: solid 1px lightgray;
	border-left: solid 1px lightgray;
	border-right: solid 1px lightgray;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.subitem-gear-slide-container-hit-locations-table-middle-row {
	background-color: white;
	border-left: solid 1px lightgray;
	border-right: solid 1px lightgray;
}

.subitem-gear-slide-container-hit-locations-table-bottom-row {
	background-color: white;
	border-left: solid 1px lightgray;
	border-right: solid 1px lightgray;
	border-bottom: solid 1px lightgray;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	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 lightgray;
	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-slideshow[value="1"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
.item-gear-slideshow[value="2"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
.item-gear-slideshow[value="3"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
.item-gear-slideshow[value="4"] ~ div.item-tab-gear-slide-treasure-text {
	display: block;
	position: relative;
}

/* ---------------------------------------------------------------- */
/* 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;
	background-color: orange;
}

/* 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 {
	position: absolute;
	top: -2px; /* A fix to get a uniform look with the hit location table */
	left: 0px;
	height: 11px;
	width: 11px;
	background-color: white;
	border: solid 2px lightsteelblue;
	border-radius: 50%;
	margin-bottom: 0px;
	padding: 0px;
}

/* On mouse-over, add a grey background color */
.custom-radio-button-container:hover input ~ .custom-radio-button {
	background-color: lightsteelblue;
}

/* When the radio button is checked, add a blue background */
.custom-radio-button-container input:checked ~ .custom-radio-button {
	background-color: indianred;
	border: solid 2px indianred;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio-button:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-radio-button-container input:checked ~ .custom-radio-button:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.custom-radio-button-container .custom-radio-button:after {
	top: 0px;
	left: 0px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: solid 2px white;
	background: indianred;
	margin: 0px;
	padding: 0px;
}

/* ---------------------------------------------------------------- */
/* Jackob's Roll Template                                           */
/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
/* ---------------------------------------------------------------- */

/* Three different Templates for attacks, armor activation, and skills ability checks. */
.sheet-rolltemplate-custom,
.sheet-rolltemplate-custom-normal-attack,
.sheet-rolltemplate-custom-power-attack,
.sheet-rolltemplate-custom-attack,
.sheet-rolltemplate-custom-activate,
.sheet-rolltemplate-custom-show {
	margin-left: -37px;
	color: #181818;
}

.withoutavatars .sheet-rolltemplate-custom,
.withoutavatars .sheet-rolltemplate-custom-normal-attack,
.withoutavatars .sheet-rolltemplate-custom-power-attack,
.withoutavatars .sheet-rolltemplate-custom-attack,
.withoutavatars .sheet-rolltemplate-custom-activate,
.withoutavatars .sheet-rolltemplate-custom-show {
	margin-left: -7px;
	color: #181818;
}

.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-activate .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 {
	  background-color: orange;
	  /* change text-align to center to center the header text */
	  text-align: left;
	  color: var(--header-text-color);
	  padding: 5px;
	}
	
.sheet-rolltemplate-custom-attack .sheet-header {
  background-color: indianred;
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}

.sheet-rolltemplate-custom-normal-attack .sheet-header {
	  background-color: olivedrab;
	  /* change text-align to center to center the header text */
	  text-align: left;
	  color: var(--header-text-color);
	  padding: 5px;
	}
	
.sheet-rolltemplate-custom-power-attack .sheet-header {
	 background-color: #9184E2; // lighter than mediumslateblue;
	  /* 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: steelblue;
	  /* 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: lightslategray;
	  /* 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-normal-attack .sheet-title,
.sheet-rolltemplate-custom-power-attack .sheet-title,
.sheet-rolltemplate-custom-attack .sheet-title,
.sheet-rolltemplate-custom-activate .sheet-title,
.sheet-rolltemplate-custom-show .sheet-title {
	font-size:1.2em;
}

.sheet-rolltemplate-custom .sheet-subtitle,
.sheet-rolltemplate-custom-normal-attack .sheet-subtitle,
.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
.sheet-rolltemplate-custom-attack .sheet-subtitle,
.sheet-rolltemplate-custom-activate .sheet-subtitle,
.sheet-rolltemplate-custom-show .sheet-subtitle {
	font-size:1.0em;
	padding-top: 0.1em;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-activate .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-normal-attack .sheet-content,
.sheet-rolltemplate-custom-power-attack .sheet-content,
.sheet-rolltemplate-custom-attack .sheet-content,
.sheet-rolltemplate-custom-activate .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-normal-attack .sheet-content > div,
.sheet-rolltemplate-custom-power-attack .sheet-content > div,
.sheet-rolltemplate-custom-attack .sheet-content > div,
.sheet-rolltemplate-custom-activate .sheet-content > div,
.sheet-rolltemplate-custom-show .sheet-content > div {
	padding: 5px;
}

/* Left column */
.sheet-rolltemplate-custom .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-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-activate .sheet-content .sheet-key,
.sheet-rolltemplate-custom-show .sheet-content .sheet-key {
	font-weight: bold;
	padding-right: 10px;
	text-align: right;
}

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-custom .sheet-value {
}
*/

/* 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-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-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-attack .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-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-normal-attack .sheet-desc,
.sheet-rolltemplate-custom-power-attack .sheet-desc,
.sheet-rolltemplate-custom-attack .sheet-desc,
.sheet-rolltemplate-custom-activate .sheet-desc,
.sheet-rolltemplate-custom-show .sheet-desc {
	grid-column: span 2;
	padding-right: 10px;
	text-align: left;
}

// Dice roll face colors. Needed to prevent problems with dark mode.

.sheet-rolltemplate-custom .inlinerollresult,
.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
.sheet-rolltemplate-custom-power-attack .inlinerollresult,
.sheet-rolltemplate-custom-attack .inlinerollresult,
.sheet-rolltemplate-custom-activate .inlinerollresult,
.sheet-rolltemplate-custom-show .inlinerollresult {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 2px solid palegoldenrod;
	background: #fff990;
}

.sheet-rolltemplate-custom .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-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
	background-color: #fff990;
	border: 2px solid palegoldenrod;
}

.sheet-rolltemplate-custom .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-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullcrit {
	border: 2px solid #3FB315;
}

.sheet-rolltemplate-custom .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-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
	border: 2px solid #B31515;
}