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

.charsheet {
	background-color: white;
	background: dodgerblue;
	width: 680px;
}

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

button[type=roll] {
	border: none;
	line-height: 13px;
	background-image: none;
	box-shadow: none;
	font-weight: bold;
	font-size: 13px !important;
	padding: 0px;
	margin: 0px;
}

button[type=roll]::before{
	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.) */
	.charsheet {
		height: 890px;
	}
}

@-moz-document url-prefix() {
	/* CSS Statements that only apply on Firefox */
	.charsheet {
		height: 910px;
	}
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number]:read-write:hover::-webkit-inner-spin-button,
input[type=number]:read-write:focus::-webkit-inner-spin-button {
	-webkit-appearance: inner-spin-button;
	margin: 0;
}

input[type=number]:read-write:hover::-webkit-outer-spin-button,
input[type=number]:read-write:focus::-webkit-outer-spin-button {
	-webkit-appearance: outer-spin-button;
	margin: 0;
}

input[type=number]:read-only {
	  -moz-appearance: textfield;
}

input[type=number]:hover,
input[type=number]:focus {
	-moz-appearance: number-input;
}

input[type=number]::-webkit-inner-spin-button {  
	width: 16px;
	height: 20px;
	margin: 0;
}

input[type=number]::-webkit-outer-spin-button {  
	width: 16px;
	height: 20px;
	margin: 0;
}

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

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

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

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

input[type=text]:focus,
textarea:focus,
button:focus {
	//outline: none;
}

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;
	cursor: inherit;
	line-height: inherit;
	z-index: 1;
	outline: none;
	max-height: 22px;
}

.custom-select,
.custom-select-alternate {
	display: grid;
	grid-template-areas: "select";
	align-items: center;
	position: relative;
	min-width: 40px;
	max-height: 20px;
	border: 1px solid gray;
	border-radius: 3px;
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
	
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

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

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

.custom-select-alternate::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-alternate--disabled {
	cursor: not-allowed;
	background-color: #eee;
	background-image: linear-gradient(to top, #ddd, #eee 33%);
}

/* --------------------------------------------------- */
/* Tab Styling                                         */
/* --------------------------------------------------- */
.tab {
	display: flex;
	justify-content: space-between;
	height:36px;
	margin-right: 0px;
	widows: 100%;
	margin-bottom: 6px;
	min-width: 686px;
}

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

/* 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 the tab buttons */
.sheet-characteristics,
.sheet-skills,
.sheet-powers,
.sheet-complications,
.sheet-gear,
.sheet-options {
	display: none;
}

/* 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-flex-tallybar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	width: 674px;
	height: 36px;
	border: 3px solid #fff990;
	border-radius: 5px;
	background: royalblue;
	margin-top: 6px;
}

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

.sheet-flex-tallybar span:nth-child(1) {
	color: white;
	margin-left: 5px;
}

.sheet-flex-tallybar input {
	max-width: 40px;
	text-align: right;
	padding-right: 2px;
}

.sheet-flex-tallybar input[readonly]{
	background: #fff990;
	padding-right: 2px;
}

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

/* 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: 4px;
	margin-left: 5px;
	border: solid 1px goldenrod;
	font-size: 13px;
	font-weight: bold;
}

.item-characteristics-bio textarea {
	width: 212px;
	max-height: 36px;
	padding: 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;
}

.item-characteristics-bio-nameLabel label {
	width: 40px;
}

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

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

.item-characteristics-bio-titleLabel label {
	width: 40px;
}

/* 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 102px 50px 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 input[type=number] {
	text-align: right;
	padding-right: 0px;
	border: solid 1px palegoldenrod;
	margin-bottom: 6px;
}

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

/* 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 40px 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: none;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.item-characteristics-primary-attributes h1 {
	margin-left: 0px;
	padding-left: 0px;
	padding-top: 4px;
	padding-bottom: 0px;
	margin: 0px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.48;
	min-width: 54px;
}

.item-characteristics-primary-attributes h1:nth-child(1){
	background-color: gold;
}


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

.item-characteristics-primary-attributes input[readonly] {
	text-align: right;
	padding-right: 2px;
	border: none;	
}

.item-characteristics-primary-attributes label {
	height: 20px;
	line-height: 1.6;
	margin-left: 5px;
	margin-bottom: 1px;
	margin-top: 2px;
}

.item-characteristics-primary-attributes label:nth-child(1) {
	background: gold;
	margin-left: 0px;
	padding-left: 1px;
	padding-top: 3px;
}

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

.item-characteristics-primary-attributes h1 {
	padding-left: 5px;
}

/* 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 {
	padding-left: 8px;
}

/* 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 {
	padding-left: 2px;
}

/* Item: combat abilities */
.item-characteristics-combat-attributes {
	grid-area: combatAbilities;
	display: grid;
	grid-template-areas:
	"combatAbilityNames combatAbilityValues . . combatAbilityCosts";
	grid-template-columns: 120px 50px 55px 40px 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;
}

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

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

.item-characteristics-combat-attributes label:nth-child(1) {
	background: gold;
	margin-left: 0px;
	padding-left: 1px;
}

.item-characteristics-combat-attributes label {
	height: 20px;
	line-height: 1.6;
	margin: 0;
	margin-left: 6px;
}

.item-characteristics-combat-attributes label:nth-child(1) {
	background: gold;
}

/* Sub-Item: combat abilities characteristics */
.item-characteristics-combat-attributes-names {
	text-align: left;
	grid-area: combatAbilityNames;
}

.item-characteristics-combat-attributes-names h1 {
	background: gold;
	margin-left: 0px;
	padding-left: 2px;
	padding-right: 50px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
	min-width: 120px;
}

/* Sub-Item: core abilities values */
.item-characteristics-combat-attributes-values {
	text-align: center;
	grid-area: combatAbilityValues;
}

.item-characteristics-combat-attributes-values h1 {
	background: gold;
	margin-left: 0px;
	padding-left: 12px;
	padding-right: 17px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
	min-width: 120px;
	text-align: left;
}

/* Sub-Item: core abilities values */
.item-characteristics-combat-attributes-costs {
	grid-area: combatAbilityCosts;
	text-align: right;
}

.item-characteristics-combat-attributes-costs h1 {
	background: gold;
	margin-left: 0px;
	padding-left: 1px;
	padding-right: 17px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
	min-width: 38px;
}

/* Item: combat abilities */
.item-characteristics-movement-abilities {
	grid-area: movementAbilities;
	display: grid;
	grid-template-areas:
	"movementNames movementValues . . movementCosts";
	grid-template-columns: 120px 50px 55px 40px 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: 2px;
	border: solid 1px palegoldenrod;
}

.item-characteristics-movement-abilities input[readonly] {
	text-align: right;
	padding-right: 2px;
	border: none;
}

.item-characteristics-movement-abilities label:nth-child(1) {
	background: gold;
	margin-left: 0px;
	padding-left: 1px;
}

.item-characteristics-movement-abilities label {
	height: 20px;
	line-height: 1.6;
	margin: 0;
	margin-left: 6px;
}

.item-characteristics-movement-abilities  label:nth-child(1) {
	background: gold;
}

/* Sub-Item: combat abilities characteristics */
.item-characteristics-movement-abilities-names {
	grid-area: movementNames;
}

.item-characteristics-movement-abilities-names h1 {
	background: gold;
	margin-left: 0px;
	padding-left: 2px;
	padding-right: 50px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
	min-width: 120px;
}

/* Sub-Item: core abilities values */
.item-characteristics-movement-abilities-values {
	grid-area: movementValues;
}

.item-characteristics-movement-abilities-values h1 {
	background: gold;
	margin-left: 0px;
	padding-left: 12px;
	padding-right: 17px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin: 0px;
	margin-top: 1px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
	min-width: 130px;
	text-align: left;
}

/* Sub-Item: core abilities costs */
.item-characteristics-movement-abilities-costs {
	grid-area: movementCosts;
}

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

/* characteristics tab right side */

.grid-container-characteristics-rightGrid {
	grid-area: rightGrid;
	display: grid;
	grid-template-areas:
	"portrait health"
	"turnSegmentIndicators ."
	"history history";
	grid-template-columns: 264px 68px;
	grid-template-rows: 264px 30px 500px;
	background: royalblue;
	max-height: 801px;
	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-characteristics-health {
	grid-area: health;
	padding: 0px;
	padding-top: 2px;
	padding-left: 1px;
	width: 68px;
	background: royalblue;
	border: white;
	margin-top: 4px;
	height: 254px;
	align-content: center;
}

.item-characteristics-health input {
	max-width: 64px;
	padding: 2px;
	padding-left: 0px;
	margin-left: 2px;
	margin-top: 1px;
	padding-right: 0px;
	text-align: right;
	background: gold;
	color: black;
	font-style: bold;
	line-height: 1.49;
	font-size: 18px;
	min-width: 60px;
}

.item-characteristics-health span {
	color: white;
	text-align: center;
}

.item-characteristics-health p {
	color: white;
	text-align: center;
	font-size: 18px;
	line-height: 1.49;
	margin-top: 2px;
	margin-bottom: 0px;
	padding: 0px;
}

/* 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: 513px;
	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: 2px;
	padding-bottom: 2px;
	background-color: royalblue;
	max-height: 30px;
	width: 264px;
	margin: 0px;
}

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

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

.grid-container-tab-options label {
	font-size: 14px;
	margin-left: 5px;
}

/* Sub-Item: options */
.item-options {
	grid-area: options;
	padding-left: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #fff990;
	margin: 5px;
	width: 450px;
	margin: 0px;
	border: solid 2px goldenrod;
	border-radius: 3px;
}

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

.button {
	  border: none;
	  color: white;
	  text-decoration: none;
	  display: inline-block;
	  font-size: 14px;
	  cursor: pointer;
	  border-radius: 4px;
	  transition-duration: 0.4s;
	  font-weight: bold !important;
	  text-align: center;
	}
	
.button:hover{
	color: black;
	background-color: orange;
}
	
.buttonRecover {
	background-color: darkseagreen;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 6px;
	margin-bottom: 4px;
	padding-left: 4px;
	padding-right: 3.5px;
	vertical-align: middle;
	text-align: right;
	font-weight: 500;
}

.buttonRecover:hover,
.buttonReset:hover {
	color: black;
	background-color: lightgray;
	text-align: right;
}

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

.buttonRoll,
.buttonRollDamage,
.buttonRollActivate,
.buttonRollNormalDamage {
	margin: 0px;
	min-width: 25px;
	max-width: 25px;
	min-height: 16px;
	max-height: 16px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	border-radius: 4px;
}

.buttonRoll:hover,
.buttonRollDamage:hover,
.buttonRollActivate:hover,
.buttonRollNormalDamage:hover {
	color: black;
	background-color: lightgray;
	text-align: left;
}

.buttonRoll {
	background-color: orange;
}

.buttonRollDamage {
	background-color: indianred;
}

.buttonRollActivate {
	background-color: steelblue;
}

.buttonRollNormalDamage {
	background-color: olivedrab;
}

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

.buttonRollNormalDamage::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: 0px;
}

.grid-container-complications-talents h2 {
	font-size: 18px;
	line-height: 1.4;
	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;
	padding: 5px;
	margin-bottom: 2px;
}

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

.item-talent-heading input[type=text] {
	max-width: 260px;
	padding: 1px;
	padding-left: 3px;
	margin: 0px;
	margin-right: 45px;
	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;
	text-align: right;
	border: solid 1px darkgray;
}

.item-talent-heading h1 {
	font-size: 12px;
	line-height: 1.1;
	padding-top: 4px;
}

.item-talent-textbox textarea {
	max-width: 315px;
	max-height: 35px;
	padding: 3px;
	border: solid 1px darkgray;
}


/* 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;
	padding: 5px;
	margin-bottom: 2px;
}

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

.item-complication-heading input[type=text] {
	max-width: 260px;
	padding: 1px;
	padding-left: 3px;
	margin: 0px;
	margin-right: 45px;
	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;
	text-align: right;
	border: solid 1px darkgray;
}

.item-complication-heading h1 {
	font-size: 12px;
	line-height: 1.1;
	padding-top: 4px;
}

.item-complication-textbox textarea {
	max-width: 315px;
	max-height: 52px;
	padding: 3px;
	border: solid 1px darkgray;
}

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

.flex-container-complications-bottom textarea {
	width: 308px;
	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: 0px;
}

.grid-container-powers label {
	display:inline-block;
	font-size: 13px;
	margin: 0px;
}

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

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

.grid-container-powers select {
	font-size: 13px;
	height: 19px;
	max-width: 110px;
	margin: 0px;
}

.button-Power-END-right,
.button-Power-END-left,
.button-Power-Roll{
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 2px;
	padding-left: 2px;
	min-width: 35px;
	max-width: 35px;
	min-height: 16px;
	max-height: 16px;
	text-align: middle;
}

.button-Power-END-left {
	background-color: olive;
	margin-right: 0px;
}

.button-Power-END-right {
	background-color: salmon;
	margin-right: 0px;
}

.button-Power-Roll {
	background-color: #9184E2; // lihter than mediumslateblue
}

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

.flex-container-powers-left textarea,
.flex-container-powers-right textarea {
	color: gray; 
	max-width: 314px;
	max-height: 52px;
	padding: 3px;
	margin: 0px;
	margin-top: 1px;
}

.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 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 1px;
	margin-bottom: 1px;
}

.subitem-flex-power-heading-left input[type=text],
.subitem-flex-power-heading-right input[type=text]{
	max-width: 187px;
	min-width: 187px;
	max-height: 20px;
	text-align: left;
	font-weight: bold;
	padding-left: 2px;
	margin-right: 15px;
}

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

.subitem-flex-power-effect-left input[type=text],
.subitem-flex-power-effect-right input[type=text]{
	max-width: 140px;
	min-width: 140px;
	margin-right: 0px;
	max-height: 20px;
	text-align: left;
	font-weight: normal;
	padding-left: 3px;
}

.subitem-flex-power-effect-left input[type=text]:nth-child(2),
.subitem-flex-power-effect-right input[type=text]:nth-child(2) {
	max-width: 45px;
	min-width: 45px;
	text-align: center;
}

.subitem-flex-power-activeCost {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 1px;
	margin-bottom: 1px;
}

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

.subitem-flex-power-limitations input {
	margin-left: 4px;
}

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

.flex-container-powers-left input[type=number]{
	border: solid 1px gray;
	max-width: 60px;
}

.flex-container-powers-left input[type=number]:nth-child(4){
	border: solid 1px gray;
	min-width: 55px;
}

.flex-container-powers-left input[type=number]:nth-child(2){
	border: solid 1px gray;
	min-width: 55px;
}

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

.flex-container-powers-left input[readonly]{
	background: lightcyan;
	border: solid 1px gray;
	line-height: 1.1;
	max-width: 45px;
}

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

.subitem-flex-power-heading-left input[type=text],
.subitem-flex-power-effect-left input[type=text]{
	border: solid 1px gray;
}

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

.flex-container-powers-right input[type=number] {
	border: solid 1px goldenrod;
	max-width: 60px;
}

.flex-container-powers-right input[type=number]:nth-child(4){
	border: solid 1px goldenrod;
	min-width: 55px;
}

.flex-container-powers-right input[type=number]:nth-child(2){
	border: solid 1px goldenrod;
	min-width: 55px;
}

.flex-container-powers-right input[readonly]{
	background: #fff990;
}

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

/* ----------------------------------------------------- */
/* 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: 350px 330px;
	grid-template-rows: 275px 245px 255px;
	max-width: 692px;
	padding: 0px;
	padding-left: 2px;
	padding-top: 8px;
	font-size: 16px;
	background-color: gold;
	border: 3px solid #fff990;
	border-radius: 5px;
	justify-content: middle;
	min-height: 793px;
}

.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 .custom-select,
.grid-container-skills-tab .custom-select-alternate{
	font-size: 13px;
	max-width: 110px;
}

/* 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: 350px;
	margin-left: 5px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	line-height: 1.10;
}

.item-skillsTab-flex-container-skills-group01 {
	grid-area: theSkills1;
}

.item-skillsTab-flex-container-skills-group02 {
	grid-area: theSkills2;
}

.item-skillsTab-flex-container-skills-group03 {
	grid-area: theSkills3;
	margin-bottom: 5px;
}

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

.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: right;
	padding-right: 2px;
	margin-top: 1px;
	margin-bottom: 1px;
	background-color: #fff990; 
	border: transparent;
}

.item-skillsTab-flex-container-skills-group01 input[type=text],
.item-skillsTab-flex-container-skills-group02 input[type=text],
.item-skillsTab-flex-container-skills-group03 input[type=text] {
	max-width: 120px;
	margin-top: 1px;
	margin-bottom: 1px;
	font-size: 13px;
	text-align: left;
	margin-left: 4px;
	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: 147px 63px 40px 55px 45px;
	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;
}

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

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

.subitem-skillsTab-flex-container-skill {
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

/* 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: 136px 45px 69px 40px;
	grid-template-rows: 199px 76px;
	max-width: 297px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 3px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	line-height: 1.10;
}

.item-skillsTab-grid-container-combat-skills input[readonly] {
	text-align: right;
	background-color: #fff990;
	margin-right: 6px;
	margin-left: 0px;
}

.item-skillsTab-grid-container-combat-skills .custom-select {
	min-width: 60px;
	margin-right: 12px;
}

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

.subitem-skillsTab-flex-container-combat-skills-names input[type=text] {
	max-width: 120px;
	margin-top: 0px;
	margin-bottom: 3px;
	min-height: 20px;
	font-size: 13px;
	text-align: left;
	margin-left: 4px;
	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: 3px;
	max-height: 261px;
}

.subitem-skillsTab-flex-container-combat-skills-levels input[type=number] {
	text-align: center;
	padding-left: 3px;
	max-width: 33px;
	margin-right: 5px;
	padding-bottom: 1px;
	min-height: 20px;
	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: 2px;
}

/* 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: 6px;
	margin-bottom: 5px;
}

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

/* 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: 9px;
	margin-top: 6px;
}

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

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

/* Sub-Item: Flex containers for columns */
.subitem-skillsTab-flex-container-languages-heading {
	grid-template-areas: "skillName skillFluency literacy skillCost";
	grid-template-columns: 136px 76px 49px 38px;
	display: grid;
	margin-left: 6px;
}

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

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

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

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

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

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

.subitem-skillsTab-flex-container-language input[type=text] {
	text-align: left;
	padding-left: 3px;
	max-width: 120px;
	margin-right: 5px;
	border: solid 1px palegoldenrod;	
}

.subitem-skillsTab-flex-container-language input[readonly] {
	text-align: right;
	background-color: #fff990;
	margin-right: 1px;
	margin-left: 0px;
}

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

.subitem-skillsTab-flex-container-language .custom-select {
	min-width: 70px;
	margin-right: 12px;
}


/* 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 165px 60px 50px;
	grid-template-rows: 20px 110px 110px;
	max-width: 300px;
	padding-left: 5px;
	grid-gap:0px;
	background-color: #fff990; 
	border: solid 2px goldenrod;
	border-radius: 3px;
	max-height: 247px;

}

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

.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: 4px;
	height: 110px;
}

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

.subitem-skillsTab-flex-container-skill-enhancers-heading h1 {
	padding-right: 20px;
	line-height: 1.15;
}

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

.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: 10px;
	height: 104px;
	margin-bottom: 4px;
}

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

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

/* ----------------------------------------------------- */
/* 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: 60px 175px 155px 322px;
	max-width: 692px;
	padding: 2px;
	font-size: 16px;
	background-color: royalblue;
	border: 3px solid #fff990;
	border-radius: 5px;
	justify-content: middle;
	min-height: 797px;
}

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

/* Item: gear tab health status                      */
/* Identical to the same on the characteristics tab. */
/* Script synchronizes the two.                      */

.item-gear-health {
	grid-area: gearHealth;
	padding: 0px;
	padding-top: 0px;
	padding-left: 1px;
	width: 68px;
	background: royalblue;
	border: white;
	margin-top: 4px;
	height: 254px;
	align-content: center;
}

.item-gear-health input {
	max-width: 64px;
	padding: 2px;
	padding-left: 0px;
	margin-left: 2px;
	margin-top: 1px;
	padding-right: 0px;
	text-align: right;
	background: gold;
	color: black;
	font-style: bold;
	line-height: 1.49;
	font-size: 18px;
	min-width: 60px;
}

.item-gear-health span {
	color: white;
	text-align: center;
}

.item-gear-health p {
	color: white;
	text-align: center;
	font-size: 18px;
	line-height: 1.49;
	margin-top: 2px;
	margin-bottom: 0px;
	padding: 0px;
}

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

.subitem-tab-gear-flex-container-encumbrance {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 80px;
}

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

.subitem-tab-gear-flex-container-encumbrance input[readonly]{
	background-color: #fff990;
	text-align: center;
	max-width: 75px;
	background-color: gold;
	border: solid 1px goldenrod;
	font-size: 15px;
	margin-left: 2px;
}

/* ------------- */
/* 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: 4px;
	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;
	max-width: 576px;
	margin-bottom: 3px;
}

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

.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(5),
.subitem-tab-gear-flex-container-armor-row h1:nth-child(4) {
	min-width: 46px;
}

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

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

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

.subitem-tab-gear-flex-container-armor-row input[type=number] {
	text-align: right;
	padding-left: 3px;
	max-width: 60px;
	min-width: 40px;
	padding-right: 1px;
	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(7) {
	text-align: left;
	padding-left: 1px;
	padding-right: 1px;
	max-width: 120px;
	margin-right: 0px;
	border: solid 1px palegoldenrod;
}

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

// 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 {
	min-width: 42px;
	text-align: center;
	margin-bottom: 3px;
}

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

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

.subitem-tab-gear-flex-container-shield-row h1:nth-child(4) {
	min-width: 34px;
	max-width: 34px;
}

.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[type=number] {
	text-align: right;
	padding-left: 3px;
	max-width: 55px;
	min-width: 40px;
	padding-right: 1px;
	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: 10px;
	margin-top: 3px;
	padding-right: 0px;
}

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

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

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

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

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

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

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

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

.subitem-tab-gear-flex-container-weapon-row h1:nth-child(12) {
	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 button:nth-child(3) {
	margin-left: 3px;
	margin-right: 3px;
}

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

.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(9){
	background-color: inherit;
	text-align: right;
	padding-left: 10px;
	width: 40px;
	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: 3px;
	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: 180px;
	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;
	padding-right: 1px;
	margin-right: 0px;
	margin-left: 0px;
	border: solid 1px #eaeaea;
}

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

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

.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%;
	  left: 87%;
	  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%;
	  left: 92%;
	  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: 405px;
	height: 375px;
	padding: 0px;
	background-color: lightcyan;
	margin-left: 0px;
	margin-bottom: 0px;
	border: solid 2px lightgray;
	border-radius: 3px;
}

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

.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(1) {
	width: 105px;
	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: 165px;
	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: 108px;
}

.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: 401px;
	height: 19px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 4px;
	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: 401px;
	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: 396px;
	height: 40px;
	padding: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 4px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.subitem-tab-gear-slide-flex-container-martial-name-and-points {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 42px;
	max-width: 104px;
	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: 3px;
	padding-left: 30px;
	padding-top: 4px;
}

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

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

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

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

/* Item: Hit Locations */
.item-tab-gear-slide-flex-container-hit-locations {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 402px;
	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: 401px;
	height: 367px;
	padding: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}

.item-tab-gear-slide-treasure-text textarea {
	width: 397px;
	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 {
  margin-left: -37px;
}

.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 {
	  margin-left: -7px;
	}

.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 {
  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 .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 {
  font-size:1.1em;
}

.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 {
  font-size:.9em;
}

/* 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  {
  /* 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 {
  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 {
  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 {
  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) {
  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 {
	grid-column: span 2;
	padding-right: 10px;
	text-align: left;
}