@import url("https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Lancelot&family=Style+Script&family=Sunshiney&display=swap");


.charsheet {
	opacity: 1.0;
	min-width: 822px;
	max-width: 826px;
	height:    1300px;
}

.charsheet label {
    width: auto;
    display: inline-block;
    font-size: .75em;
}
.charsheet .sheet-myStuff {
  display: grid;
  grid-template-columns: 204px 204px;
  background-color: Transparent;
  width: 408px;
  margin-top: 40px;
  margin-left: 6px;
  padding: 3px;
}

.charsheet .sheet-myStuff > div {
  background-color: #f1f1f1;
  border: 2px solid Black;
  padding: 5px;
  height: 31px;
  font-size: 30px;
  text-align: center;
}

.charsheet .sheet-weapons {
  display: grid;
  grid-template-columns: 200px 136px;
  background-color: Transparent;
  width: 336px;
  margin-top: 0px;
  margin-left: 0px;
  padding: 1px;
}

.charsheet .sheet-weapons > div {
  background-color: #f1f1f1;
  border: 2px solid Black;
  padding: 5px;
  height: 33px;
  font-size: 30px;
  text-align: center;
}
.charsheet .sheet-edge {
	font-weight: 400; 
	font-size: 17px; 
	height: 40px !important;	
	border: none; 
	border-bottom: 2px solid Black; 
	margin-left: 6%;	
	width: 86%; 
	border-radius: 0%;
	text-align: center;
}

.charsheet .sheet-round label {
	height: 20px;	
	border: 1px solid Black; 
	border-radius: 50%; 
	width: 20px; 
	text-align: center;
}

.charsheet button[type=roll].sheet-attack-button {
	box-sizing: content-box;
	color: rgb(215, 153, 167);
    background-color: White;
	background-image: none;
	height: 24px;
	width:  14px;
    font-size: 16px;
	font-weight: bold;
    border: 0px solid rgb(215, 153, 167);
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	margin: -4px 0px 0px -8px;
	padding: 0px 1px 4px 1px;
}
.charsheet button[type=roll].sheet-melee-button {
	box-sizing: content-box;
	color: White;
    background-color: rgb(215, 153, 167);
	background-image: none;
	height: 18px;
	width:  14px;
    font-size: 16px;
	font-weight: bold;
    border: 0px solid rgb(215, 153, 167);
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	margin: -6px 0px 0px -8px;
	padding: 2px 2px 2px 2px;
}
.charsheet button[type=roll].sheet-range-button {
	box-sizing: content-box;
	color: rgb(215, 153, 167);
    background-color: White;
	background-image: none;
	height: 24px;
	width:  14px;
    font-size: 16px;
	font-weight: bold;
    border: 0px solid rgb(215, 153, 167);
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	margin: -4px 0px 0px -7px;
	padding: 0px 1px 4px 1px;
}
input[type=text].attribute {
	width: 134px; 
	height: 134px; 
	text-align: center; 
	border-radius: 50%;
	font-weight: bold; 
	font-size: 6em; 
	background-color: rgba(255,255,255,0.1);
	border: 12px double Pink; 
}
input[type=checkbox].itemCheck {
	height: 16px; 
	width: 16px; 
	accent-color: Black; 
	margin: 0px 0px 0px -6px;
}
input[type=text].item {
	width: 168px; 
	height: 40px; 
	text-align: center; 
	font-weight: bold; 
	font-size: 22px; 
	margin: -9px 0px 0px 0px; 
	border-bottom: 4px solid Black;	
}
input[type=text].weaponName {
	width: 168px; 
	height: 40px; 
	text-align: center; 
	font-weight: bold; 
	font-size: 22px; 
	margin: -8px 0px 0px 0px; 
	border-bottom: 3px solid Black;	
}

input[type=text].weaponDmg {
	width: 91px; 
	height: 40px; 
	text-align: center; 
	font-weight: bold; 
	font-size: 22px; 
	margin: -8px 0px 0px -5px;
	padding: 3px 0px 3px 0px;	
	border-bottom: 3px solid Black;	
}

input[type="radio"]:checked + label {
  color: white;
}


input[type="radio"]:checked + label.contrast {
  color: #DA70D6;
}

input[type="radio"]:hover + label {
  color: blue;
}


.charsheet input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: none;
    border-bottom: dotted 1px black;
    color: black;
    width: 45px;
    text-align: center;
}

.charsheet input[type=number]::-webkit-outer-spin-button,
.charsheet input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -webkit-appearance: textfield;
}

/* Trauma checkbox via image */

input[type="checkbox"][id^="cb"] {
  display: none;
}

label.trauma {
  display: inline-block; 
  vertical-align: top;
  height: 45px;
  width: 45px;
  border: 1px solid #fff;
  padding: 5px;
  position: relative;
  margin: 5px 0px 0px 5px;
  cursor: pointer;
}

label.trauma:before {
  display: inline-block; 
  vertical-align: top;
  background-color: white;
  color: white;
  content: " ";
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label.trauma img {
  display: inline-block; 
  vertical-align: top;

  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label.trauma {
  border-color: #ddd;
}

:checked + label.trauma:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label.trauma img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}



/* Check and MeleeRoll Template */
.sheet-rolltemplate-check .sheet-container {
	color: Black;
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}
.sheet-rolltemplate-meleeRoll .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-meleeRoll .sheet-container h1{
	color: inherit;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

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

.sheet-rolltemplate-check span,
.sheet-rolltemplate-meleeRoll 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-meleeRoll .sheet-subheader,
.sheet-rolltemplate-initiative .sheet-subheader {
	color: currentColor;
    font-size: 1em;
    font-style: italic;
}
										   
.sheet-rolltemplate-check .sheet-arrow-right,
.sheet-rolltemplate-meleeRoll .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-meleeRoll .sheet-tcat,
.sheet-rolltemplate-initiative .sheet-tcat,
.sheet-rolltemplate-check .sheet-tcat {
    font-style: italic;
}


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



/* Button Styling*/

.charsheet button[type=roll].sheet-textButton {
    background-color: transparent;
    color: black;
    border: none;
    font-size: 1.25em;
    font-weight: bold;
    text-align: right;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
    margin: 0px;

}

.charsheet span.sheet-diceroll {
    font-family: "dicefontd20";
}

.charsheet button[type=roll].sheet-textButton::before,
.charsheet button[type=roll].sheet-powerButton::before {
    content: "" !important;
}

/*End Button Styling*/


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