@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Russo+One&display=swap");

.charsheet {
    border: 2px solid Black;
	width: 820px;
	min-width: 820px;
	min-height: 1110px;
	font-family: "Courier New, serif";
}

.charsheet .sheet-container1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  overflow: visible;
  gap: 5px 4px;
  grid-template-areas:
	"logo profile profile"
}

/* Layout */
.charsheet .sheet-logo {
	grid-area: logo;
	height: 170px; 
	width: 270px;
	border: 0px solid Black;
}
.charsheet .sheet-profile {
	grid-area: profile;
	grid-column: span 2;
	height: 170px;
	border: 0px solid Black;
}

/* General Styles */
.charsheet .sheet-profileTitle{
	display: inline-block; 
	vertical-align: bottom; 
	box-sizing: border-box;
	font-family: "Russo One";
	font-weight: 500;
	font-size: 32px;	
	width: 99%; 
	height: 50px; 
	text-align: center; 
	color: White; 
	background-color: Black;
	border: 4px solid Black;	
	margin: 50px 0px 0px 0px; 
	padding: 12px 0px 6px 0px;"
}
.charsheet .sheet-profileLabel{
	display: inline-block; 
	vertical-align: bottom; 
	box-sizing: border-box;
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-size: 20px;	
	width: 80px; 
	height: 44px; 
	text-align: left; 
	color: Black; 
	background-color: White;
	border-top: 6px solid transparent;	
	margin: 4px 0px 0px 0px; 
	padding: 20px 0px 0px 0px;"
}
.charsheet .sheet-profileInput{
	box-sizing: content-box;
	width:  250px;
	height: 44px ;
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-size: 26px;	
	margin: 0px 0px 0px -4px;
	display: inline-block;
	text-align: center;
	padding: 0px 4px 1px 2px;
	border: 2px solid LightGray;
}

.charsheet .sheet-level{
	display: inline-block;
	vertical-align: top;
	width:  50px;
	height: 80px !important;
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-size: 28px;
	margin: 0px 0px 0px -4px;	
	text-align: center;
	padding: 0px 2px 1px 2px;
	border: 3px solid Black;
}
.charsheet .sheet-AuxName,
.charsheet .sheet-skillName{
	display: inline-block;
	vertical-align: top;
	box-sizing: content-box;
	width:  200px;
	height: 36px;
	color: White;
	background-color: Black;
	font-family: "Russo One";
	font-weight: 300;
	font-size: 30px;	
	margin: 0px 0px 0px 0px;
	text-align: right;
	padding: 3px 0px 0px 0px;
	border-top: 6px solid Black;
}
.charsheet .sheet-skillDefnLeft{
	display: inline-block;
	vertical-align: top;
	box-sizing: content-box;
	width:  100px;
	height: 52px;
	color: White;
	background-color: Black;
	font-family: "Barlow Condensed";
	font-weight: 200;
	font-size: 16px;	
	margin: 0px 0px 0px 0px;
	text-align: right;
	margin-top: -40px;
	padding: 0px 6px 0px 96px;
	border: 0px solid White;
	border-right: 10px solid Black;
}
.charsheet .sheet-skillDefnRight{
	display: inline-block;
	vertical-align: top;
	box-sizing: content-box;
	width:  112px;
	height: 52px;
	color: White;
	background-color: Black;
	font-family: "Barlow Condensed";
	font-weight: 200;
	font-size: 16px;	
	margin: 0px 0px 0px 0px;
	text-align: right;
	margin-top: -40px;
	margin-left: 48px;
	padding: 0px 6px 0px 76px;
	border: 0px solid White;
	border-right: 18px solid Black;
}
.charsheet input[type="text"]{
	display: inline-block;
	color: Black;
}
.charsheet textarea{
	display: inline-block;
	color: Black;
	margin: 2px 2px 2px 2px; 
	border: 8px double LightGray; 
	font-size: 18px; 
	line-height: 22px;
	resize: none;
	box-sizing: border-box;
}

.charsheet .sheet-skill{
	display: inline-block; 
	vertical-align: top;
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-size: 16px;	
	width: 137px; 
	height: 26px; 
	text-align: left; 
	color: Black; 
	background-color: White; 
	margin: 0px 0px 0px 0px; 
	padding: 4px 0px 0px 0px;
}

.charsheet button{
	text-align: left;
	color: black;
}
.charsheet button:hover{
	background: black;
	color: #968c6a;
	text-shadow: none;
}

/* Buttons Styling */
.charsheet button[type=action].sheet-skillName,
.charsheet button[type=roll].sheet-skillName {
	display: inline-block;
	vertical-align: top;
	box-sizing: content-box;
	background-color: Black;
	width:  200px;
	height: 36px;
	color: White;
	font-family: "Barlow Condensed";
	font-weight: 500;
	font-size: 36px;	
	margin: 0px 0px 0px 0px;
	text-align: right;
	padding: 0px 0px 0px 0px;
	border: 6px solid Black;
}
.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=roll].sheet-textButton::before,
.charsheet button[type=action].sheet-textButton::before {
    content: "" !important;
}
.charsheet button[type=roll].sheet-skillName::before,
.charsheet button[type=action].sheet-skillName::before {
	padding: 0px 0px 0px 0px;
    content: "" ;
}


.charsheet label.sheet-skillName:hover {
	background-color: rgba(255,255,0,0.3)!important;
}
/*End Button Styling*/


/* Roll Template */
/* Check, Melee, WarDie, Initiative Templates */
.sheet-rolltemplate-check .sheet-container {
	color: Black;
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}
.sheet-rolltemplate-warDie .sheet-container,
.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-warDie .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-warDie div,
.sheet-rolltemplate-melee div,
.sheet-rolltemplate-initiative div,
.sheet-rolltemplate-check div {
    padding: 2px;
}

.sheet-rolltemplate-check span,
.sheet-rolltemplate-warDie 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-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-warDie .sheet-tcat,											 
.sheet-rolltemplate-melee .sheet-tcat,
.sheet-rolltemplate-initiative .sheet-tcat,
.sheet-rolltemplate-check .sheet-tcat {
    font-style: italic;
}


.sheet-rolltemplate-check .inlinerollresult  {
    /*background-color: #ffffff;*/
	background-color: LightGray !important;
    border: none;
}
.sheet-rolltemplate-initiative .inlinerollresult,
.sheet-rolltemplate-warDie .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*/