@import url("https://fonts.googleapis.com/css?family=Cinzel+Decorative:700|Fredericka+the+Great|Jim+Nightshade|League+Gothic|Macondo+Swash+Caps|Bruno+Ace+SC&display=swap");

.charsheet {
    border: 2px solid black;
	width:825px;
	min-width:825px;
	min-height:400px;
	font-family: "Courier New, serif";
}

/* General Styles */

.charsheet input[type="text"], textarea{
	display: inline-block;
	/* background: #fff5;
	border: black solid 1px;
	border-top: none;
	border-left: none;
	border-radius: 0%;
	*/
	color: black;
}
.charsheet textarea{
	border-left: black solid 1px;
	resize: none;
	box-sizing: border-box;
}
.charsheet .sheet-label{
	background: white;
	/* color: #968c6a; */
	color: black;
	padding-right: 10px;
	display: inline-block; 
	padding: 5px 10px 3px 5px;
	height: 21px;
	/*margin-right: -.5%;*/
	font-size: 1.5em;
	font-weight: bold;
	vertical-align:middle;
}
.charsheet .sheet-title{
	background: white;
	color: black;
	display: inline-block; 
	padding: 2px 2px 2px 2px;
	height: 21px;
	font-size: 1.5em;
	font-weight: bold;
	vertical-align: middle;
	text-transform: uppercase;
}
.charsheet .sheet-label2{
	font-size: 9pt;
	margin: 1%;
}
.charsheet .sheet-label3{
	font-style: italic;
	font-size: 9pt;
	padding-right: 2%;
}
.charsheet .sheet-label4{
	font-weight: bold;
	font-size: 9pt;
}
    
.sheet-row {
    height: 32px;
    margin: 0 0 2px;
}
.charsheet .sheet-attributes input[type="number"],
.charsheet .sheet-skills1 input[type="number"],
.charsheet .sheet-skills2 input[type="number"] {
	border: none;
	font-size: 2em;
	background: none;
	color: black;
	text-align: center;
	width: 2em /*!important*/;
}
.charsheet button{
	/*background: #fff5;
	font-size: 9pt !important;
	border: 1.5px solid #968c6a;
	font-style: italic;*/
	text-align: left;
	color: black;
}
.charsheet button:hover{
	background: black;
	color: #968c6a;
	text-shadow: none;
}
/*
.charsheet button[type=roll]:before {
	content: none !important;
}  
*/
.charsheet h4{
	text-align: center;
}
.charsheet input:focus, .charsheet textarea:focus{
	outline: none;
}

.charsheet input[type=checkbox]{
	opacity: 0;
	margin-right: -1.5em;
	height: 1em;
	width: 1em;
}
.charsheet input[type=checkbox] + span:before{
	content: "❌";
	border: 2px solid black;
	height: 1em;
	width: 1em;
	color: #00000000;
	font-size: 1em;
}
.charsheet input[type=checkbox]:checked + span:before{
	color: #000000FF;
}

.sheet-modifier-popup-toggle{
	text-align:right;
	float:right;
	/*background-color: #fff5;
	padding:3px 5px 1px 4px;
	border: 1.5px solid #968c6a;*/
}

.sheet-modifier-popup-toggle  input[type=checkbox]{
	display: inline-block;
	margin-left:10px;
}

.charsheet .sheet-hidden {
	display:none;
}

/* Expandable textboxes */
.charsheet .sheet-auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
}
.charsheet .sheet-auto-expand span {
	visibility: hidden;
	white-space: pre-wrap;
	display: block;
	min-height:28px;
	padding:5px;
	box-sizing: border-box;
	border: black solid 1px;
	border-top: none;
}
.charsheet .sheet-auto-expand textarea {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	resize: none;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	box-shadow: none;
	padding:5px;
	border: black solid 1px;
	border-top: none;
}

/* PAGE 1 */
    
/* Layout */
.charsheet .sheet-container1 {
  display: grid;
  grid-template-columns: 265px 265px 265px;
  grid-template-rows: auto;
  /*grid-template-rows: 111px 120px 120px 320px 220px 200px;*/
  gap: 5px 8px;
  grid-template-areas:
    "logo basic1 basic2"
    "logo basic3 basic3"
	"logo basic4 basic5"
    "attributes skills1 skills2"
	"qualities impediments features"
}
.charsheet .sheet-basic1 {
	grid-area: basic1;
	border: black solid 0px;
}
.charsheet .sheet-basic2 {
	grid-area: basic2;
	border: blue solid 0px;
}
.charsheet .sheet-basic3 {
	grid-area: basic3;
	border: red solid 0px;
}
.charsheet .sheet-basic4 {
	grid-area: basic4;
	border: black solid 0px;
}
.charsheet .sheet-basic5 {
	grid-area: basic5;
	border: blue solid 0px;
}
.charsheet .sheet-logo {
	grid-area: logo;
	border: black solid 0px;
}
.charsheet .sheet-appearance {
	grid-area: appearance;
	margin-top:-13px;
	margin-bottom:10px;	
}
.charsheet .sheet-attributes { 
	grid-area: attributes; 
}
.charsheet .sheet-skills1 { 
	grid-area: skills1; 
}
.charsheet .sheet-skills2 { 
	grid-area: skills2; 
}
.charsheet .sheet-qualities { 
	grid-area: qualities; 
}
.charsheet .sheet-impediments { 
	grid-area: impediments; 
}
.charsheet .sheet-features { 
	grid-area: features; 
}
.charsheet .sheet-traits { 
	grid-area: traits; 
    display: flex;
    flex-direction: column;
}

/* Basic */
.charsheet .sheet-basic1 .sheet-label, .sheet-basic2 .sheet-label, .sheet-basic3 .sheet-label, .sheet-basic4 .sheet-label, .sheet-basic5 .sheet-label, .sheet-appearance .sheet-label {
	width: 70px;
}
.charsheet .sheet-basic1 input,  .sheet-basic2 input,  .sheet-basic4 input,  .sheet-basic5 input {
	width: 175px;
}
.charsheet .sheet-basic3 input {
	width: 450px;
}

/* Attributes */
.charsheet .sheet-attributes-header {
	color: Black;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1.8em;
	font-weight: bold;
	border: 0px blue solid;
}
.charsheet .sheet-attributes-header span {
	text-transform: uppercase;
}
.charsheet .sheet-subattributes-header {
	color: Black;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	border: 0px blue solid;
}
.charsheet .sheet-subattributes-header span {
	text-transform: uppercase;
}
.charsheet .sheet-attributes label {
	width: 54%;
	min-width: 33%;
	display: inline-block;
	font-size: 1.0em;
	text-align: left;
	border: 0px purple solid;
}
.charsheet .sheet-attributes label.base {
	width: 16px;
	height: 14px;
	display: inline;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	vertical-align: text-bottom !important;
	border: 0px red solid;
}


.charsheet .sheet-attributes label.other {
	width: 29%;
	min-width: 20%;
	font-size: 1.6em;
	display: inline-block;
	text-align: left;
	border: 0px red solid;
}

.charsheet .sheet-attributes label.afflict {
	width: 33%;
	min-width: 25%;
	display: inline-block;
	text-align: right;
	margin-left: 10%;
	font-size: 1.4em;
	border: 0px red solid;
}

.charsheet .sheet-attributes label.corrupt {
	width: 79.5%;
	min-width: 70%;
	display: inline-block;
	font-size: 1.6em;
	text-align: left;
	border: 0px red dashed;
}

.charsheet .sheet-attributes input.afflict {
	border: none; 
	border-bottom: 2px solid black; 
	text-transform: uppercase; 
	font-weight: bold; 
	width: 50%; 
	text-align: center;
	border-radius: 0%;
}
.charsheet .sheet-skill {	
	border: none; 
	border-bottom: 2px solid black; 
	text-transform: uppercase; 
	font-weight: 500; 
	font-size: 1.5em;
	width: 69%; 
	border-radius: 0%;
	text-align: left; 
	margin: 8px 8px 0px 0px; 
}
	
.charsheet .sheet-stunt {
	height: 16px !important;	
	border: none; 
	border-bottom: 2px solid black; 
	text-transform: capitalize; 
	font-weight: normal;
	margin-left: 20%;	
	width: 50%; 
	border-radius: 0%;
	text-align: left;
	vertical-align: text-bottom !important; /* yet it donesn't work */
}
	
.charsheet .sheet-qif {
	height: 16px !important;	
	border: none; 
	border-bottom: 2px solid black; 
	text-transform: capitalize; 
	font-weight: normal;
	margin-left: 4%;	
	width: 45%; 
	border-radius: 0%;
	text-align: left;
	vertical-align: text-bottom !important; /* yet it donesn't work */
}
.sheet-upper {
    text-transform: uppercase;
	font-weight: 500;
}
.sheet-capital {
    text-transform: capitalize;
}


.charsheet .sheet-trib{
	border: 2px #968c6a solid;
	width: 4em;
	margin: 8px 0px 0px -5px;
	display: inline-block;
}


.charsheet .sheet-attlabel select{
    width:115px;
	display: inline-block;
	background: #fff5;
	border: black solid 1px;
	border-top: none;
	border-left: none;
	border-radius: 0%;
	margin-bottom:0;
}


/* PAGE 2 */

/* Layout */
.charsheet .sheet-container2 {
  display: grid;
  grid-template-columns: 390px 450px;
  grid-template-rows: auto;
  gap: 6px 10px;
  grid-template-areas:
    "chart combat"
}

.sheet-chart {
	grid-area:chart;
    margin-top: 6px;
	border: 0px solid black;
}

.sheet-combat {
  display: grid;
  grid-template-columns: 120px 70px 130px 50px;
  grid-template-rows: auto;
  gap: 2px 8px;
  grid-template-areas:
    "diffRatingTitle diffRatingTitle  rangeAttackTitle rangeAttackTitle"
	"diffRatingType  diffRatingValue  rangeAttackType  rangeAttackValue"
	"attackModTitle  attackModTitle   combatButtonArea combatButtonArea"
	"attackModType   attackModValue   combatButtonArea combatButtonArea"
}
.charsheet .sheet-diffRatingType label, .sheet-diffRatingValue label, .sheet-rangeAttackType label,
           .sheet-rangeAttackValue label, .sheet-attackModType label {
	font-size: 1.0em; 
	text-transform: capitalize;
	margin: 2px 2px 2px 4px;
}
.charsheet .sheet-rangeAttackValue label, .sheet-attackModValue label {
	font-size: 1.0em;
	text-align: center;	
	text-transform: capitalize;
	margin: 2px 2px 2px 4px;
}
.charsheet .sheet-diffRatingTitle label, .sheet-diffRatingTitle label, .sheet-rangeAttackTitle label, .sheet-attackModTitle label {
	margin: 2px 2px 6px 4px;
}
.sheet-diffRatingTitle {
	grid-area:diffRatingTitle;
	height: 50px;
	border: 0px dashed red;
}
.sheet-attackModTitle {
	grid-area:attackModTitle;
	border: 0px dotted purple;
}
.sheet-rangeAttackTitle {
	grid-area:rangeAttackTitle;
	height: 50px;
	border: 0px dashed green;
}
.sheet-attackModType {
	grid-area:attackModType;
	border: 0px dashed orange;
}
.sheet-attackModValue {
	grid-area:attackModValue;
	border: 0px dashed pink;
}
.sheet-rangeAttackType {
	grid-area:rangeAttackType;
    font-size: 1.0em;
	border: 0px solid red;
}
.sheet-rangeAttackValue {
	grid-area:rangeAttackValue;
	border: 0px solid green;
}
.charsheet .sheet-rangeAttackValue input[type="number"]{
	font-size: 1.0em;
	border: none;
	margin: 0px 0px 0px 16px;
	color: black;
	text-align: center;
	width: 40px ;
}
.sheet-combatButtonArea {
	grid-area:combatButtonArea;
	border: 0px dashed brown;
}


/* From https://stackoverflow.com/questions/75992689/change-the-label-background-color-when-a-checkbox-is-checked */
input[type="checkbox"] {
  display: none;
  /*height: 20px; */
  text-align: left;
  font-size: 1.0em /*!important*/;
}

input[type="checkbox"]:checked + label {
  color: DarkRed;
  /*height: 20px; */
  text-align: left;
  font-size: 1.0em /*!important*/;
}

/* Darkmode from Aborea - Don't know if needed */
body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet {
	color: #eee
}
body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
	color: #c8c3bc;
	text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
	background-color: #1e2021;
	background-image: linear-gradient(#181a1b, #26292b);
	border-color: #3e4446 #3e4446 #43494c;
	box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}
body.sheet-darkmode .sheet-rolltemplate-check button {
    background-color: Brown ;
}


.charsheet .sheet-container3 {
  display: grid;
  grid-template-columns: 420px 420px;
  grid-template-rows: auto;
  gap: 6px 2px;
  grid-template-areas:
    "wounds armour"
	"weapons weapons"
	"possessions notes"
}
.sheet-wounds {
	grid-area:wounds;
	border: 0px solid green
}
.sheet-armour {
	grid-area:armour;
}

.sheet-weapons {
	grid-area:weapons;
}

.sheet-possessions {
	grid-area: possessions;
	display: inline-block;
	border: 0px red solid;
	width: 49%;	

}
.sheet-notes {
	grid-area: notes;
	display: inline-block;
	width: 49%;	
}

/* Wounds */
.charsheet .sheet-woundIconGray {
	height: 20px !important;
	width: 32px;
	border: 1px solid Gray;
	background-color: transparent;
	font-size: 1.8em;
}
.charsheet .sheet-woundIconRed {
	height: 20px !important;
	width: 32px;
	border: 1px solid rgba(220, 20, 60, 0.5); /* Light Crimson */
	background-color: transparent;
	font-size: 1.8em;
}

.charsheet .sheet-wounds input[type="text"], 
.charsheet .sheet-armour input[type="text"] {
	display: inline-block;
	border: none; 
	border-bottom: 2px solid black; 
	text-transform: capitalize; 
	font-weight: bold;
	height: 32px;	
	width: 90%;
	margin-left: 4%;	
	text-align: left;
	border-radius: 0%;
}
.charsheet .sheet-row1 {
  display: grid;
  grid-template-columns: 25px 150px 118px 80px 70px 60px 50px 105px 170px;
  padding-block: 2px;
  padding-inline: 2px;
  align-items: end;
}
.charsheet .sheet-row1 span {
	font-size: 14px;
	text-align: center;
	text-transform: uppercase;
}
.charsheet .sheet-row1 input[type="text"] {
	width: auto;
	text-align: center;
	text-transform: capitalize;
}
.sheet-wounds-list{
	background-color: #fff5;
	border: black solid 1px;
	border-top: none;
	padding: 4px;
	width:340px;
}
.sheet-wounds-list input[type=text]{
	border: 1px transparent dashed;
	background-color: transparent;
	width:280px;
}
.sheet-wounds-list input[type=text]:hover{
	border-bottom: 1px black dashed;
}
.sheet-wounds-list input[type=checkbox]{
	display: inline-block;
	margin-left:20px;
}
.sheet-wounds-list input.sheet-show-wounds[type=checkbox]{
	margin-left:10px;
}
.sheet-wounds-list .sheet-label2{
	display: inline-block;
}
.sheet-wounds-list .sheet-wounds-label-left{
	width:268px;
}

/* Buttons Styling */

.charsheet button[type=action].sheet-textButton,
.charsheet button[type=roll].sheet-textButton {
    background-color: transparent;
    color: black;
    border: none;
	height: 18px;
	width: 136px;
    font-size: 1.8em;
    font-weight: bold;
    text-align: left;
 }
 
.charsheet button[type=action].sheet-orange,
.charsheet button[type=roll].sheet-orange {
	border: 2px solid Orange; 
	font-size: 1.4em; 
	width: 140px; 
	text-align: center;
	margin-top: 6px;
}

.charsheet button[type=roll].sheet-skill-button {
	color: Black;
    background-color: White;
	height: 16px;
	width:  12px;
	border: 1px solid Black;
}

.charsheet button[type=roll].sheet-skilld10-button::before {
	font-family: "dicefontd10";
	content: "k";
	color: DarkGray;
	background-image: none;
	height: 16px;
	width:  12px;
}

.charsheet button[type=roll].sheet-attackd10-button::before {
	font-family: "dicefontd10";
	content: "k";
	color: #cc0000;
	/*border: 1px solid #cc0000;*/
	background-image: none;
	height: 16px;
	width:  12px;
}

.charsheet button[type=roll].sheet-attack-button {
	color: #cc0000;
    background-color: white;
	background-image: none;
	height: 16px;
	width:  12px;
    font-size: 3em;
    border: 1px solid #cc0000;
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	content: "j";
}
/*
.charsheet span.sheet-diceroll {
    font-family: "dicefontd20";
}
*/
.charsheet button[type=roll].sheet-textButton::before,
.charsheet button[type=action].sheet-textButton::before {
    content: "" !important;
}


button[type=action]:hover, button[type=roll]:hover {
	background-color: rgba(255,255,0,0.3)!important;
}
/*End Button Styling*/


/* Roll Template */

/* Check, Melee, Ranged Manifest Template */
.sheet-rolltemplate-check .sheet-container,
.sheet-rolltemplate-complication .sheet-container {
	color: Black;
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-melee .sheet-container {
    background-color: rgb(153, 0, 0); /* Dark Red */
	color: rgb(255, 179, 179);        /* Light Red */
    border: 3px solid rgb(255, 179, 179);
    padding: 2px;
    width: 189px;
}											 
																														  
 
.sheet-rolltemplate-initiative .sheet-container {
    background-color: Thistle;
	color: Blue;
    border: 3px solid Blue;
    padding: 2px;
    width: 189px;
}


.sheet-rolltemplate-check .sheet-container h1,
.sheet-rolltemplate-complication .sheet-container h1,
.sheet-rolltemplate-melee .sheet-container h1,
.sheet-rolltemplate-initiative .sheet-container h1{
	color: inherit;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-melee div,
.sheet-rolltemplate-initiative div,
.sheet-rolltemplate-complication div,
.sheet-rolltemplate-check div {
    padding: 2px;
}

.sheet-rolltemplate-complication span,
.sheet-rolltemplate-check span,
.sheet-rolltemplate-melee span,
.sheet-rolltemplate-initiative span {
    color: currentColor;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.4em;
    padding-left: 5px;
    text-align: left;
}

.sheet-rolltemplate-complication .sheet-subheader,
.sheet-rolltemplate-check .sheet-subheader,
.sheet-rolltemplate-melee .sheet-subheader,
.sheet-rolltemplate-initiative .sheet-subheader {
	color: currentColor;
    font-size: 1em;
    font-style: italic;
}
										   
.sheet-rolltemplate-check .sheet-arrow-right,
.sheet-rolltemplate-melee .sheet-arrow-right,
.sheet-rolltemplate-initiative .sheet-arrow-right {
    border-bottom: 3px solid transparent;
    border-left: 180px solid currentColor;
    border-top: 3px solid transparent;
}
.sheet-rolltemplate-complication .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid Crimson;
    border-top: 2px solid transparent;
}
											 
.sheet-rolltemplate-melee .sheet-tcat,
.sheet-rolltemplate-initiative .sheet-tcat,
.sheet-rolltemplate-complication .sheet-tcat,
.sheet-rolltemplate-check .sheet-tcat {
    font-style: italic;
}


.sheet-rolltemplate-complication .inlinerollresult,
.sheet-rolltemplate-check .inlinerollresult  {
    /*background-color: #ffffff;*/
	background-color: LightGray !important;
    border: none;
}
.sheet-rolltemplate-initiative .inlinerollresult,
.sheet-rolltemplate-melee .inlinerollresult {
	color: Red;
    background-color: Yellow;
    border: none;
}

.sheet-rolltemplate-check .inlinerollresult.fullcrit {
    color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-check .inlinerollresult.fullfail {
    color: #B31515;
    border: none;
}
 
.sheet-rolltemplate-check .inlinerollresult.importandivoll {
    color: #4A57ED;
    border: none;
}
/* End Check, Ranged & Manifest templates*/

/* TAB HANDLING */

.charsheet input[type=radio]{
	display: none;
	float: left;
}
.charsheet input[type=radio] + label{
	content: '';
	border: solid 1px black;
	background: white;
	color: black;
	font-weight: bold;
	width: auto;
	text-align: center;
	padding: 0 2px;;
	float: left;
}
.charsheet input[type=radio]:hover + label{
	background: #990000;
}
.charsheet input[type=radio]:checked + label{
	background: black;
	color: white;
}
.charsheet div.sheet-page1, .charsheet div.sheet-page2 {
	display: none;
}
.charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2 {
	display: block;
}