@import url("https://fonts.googleapis.com/css?&family=Anta&family=Kite+One&family=Amarante&display=swap");
.charsheet div.sheet-page1 {
	opacity: 1.0;
	min-width: 822px;
	max-width: 826px;
	font-family: "Anta";
	height:    1210px;
}
.charsheet div.sheet-page2 {
	opacity: 1.0;
	min-width: 822px;
	max-width: 826px;
	height:    1080px;
}
.charsheet div.sheet-page3 {
	opacity: 1.0;
	min-width: 822px;
	max-width: 826px;
	height:    1080px;
}

.ui-dialog .charsheet button[type=roll]::before {
    content: "";
}

.sheet-attribLabel {
	display: inline-block !important; 
	vertical-align: top !important;
	width: 110px !important; 
	font-weight: bold; 
	font-size: 14px; 
	text-align: left; 
	border: 0px solid Gray;
}

.sheet-pointsLabel {
	display: inline-block !important; 
	vertical-align: top !important;
	width: 210px !important; 
	font-weight: bold; 
	font-size: 14px; 
	text-align: left; 
	border: 0px solid Gray;
}
.sheet-pointsSpec {	
	display: inline-block; 
	vertical-align: top; 
	width: 120px; 
	height: 18px; 
	border: 1px solid DimGray; 
	margin: 6px 0px 0px 0px; 
	padding: 1px 3px 1px 3px;
}

.sheet-attribMax {
	display: inline-block; 
	vertical-align: top;
	width: 20px; 
	height: 18px; 
	text-align: center;
	border: 1px solid Black; 
	margin: 0px 0px 0px 0px; 
	padding: 1px 2px 1px 2px;
}
.sheet-attribArray {
	display: inline-block; 
	vertical-align: top; 
	margin: 0px 0px 0px 0px; 
	padding: 1px 2px 1px 2px;
	border: 0px solid Brown;
}
	
.sheet-skillName {
	display: inline-block !important; 
	vertical-align: top !important; 
	width: 110px !important; 
	height: 18px; 
	font-weight: bold; 
	font-size: 14px; 
	text-align: left; 
	border: 1px solid Gray;
	margin: 6px 0px 0px 0px !important;
	padding: 1px 3px 1px 3px;
	border: 0px solid DimGray;
}	

.sheet-skillValue {	
	display: inline-block; 
	vertical-align: top; 
	width: 24px;  
	height: 18px; 
	text-align: center;
	border: 1px solid DimGray; 
	margin: 6px 0px 0px 0px; 
	padding: 1px 3px 1px 3px;
}

.sheet-skillSpec {	
	display: inline-block; 
	vertical-align: top; 
	width: 220px; 
	height: 18px; 
	border: 1px solid DimGray; 
	margin: 6px 0px 0px 0px; 
	padding: 1px 3px 1px 3px;
}

.sheet-smallCap {
	text-transform: capitalize;
/*    font-family: "Times New Roman", Times, serif;*/
	font-family: "Anta";
    font-variant: small-caps;
}

.repcontrol[data-groupname="repeating_roll"] {
    width: 334px;
}
.repcontrol[data-groupname="repeating_tmroll"] {
    width: 334px;
}

.charsheet label.skillChoosen {
  display: inline-block;
  text-align: center;
  font-size: 1.1em;
  width: 66px;
  height: 20px;
  border: solid 0px transparent;
  margin-left: 6px;
}

input[type="radio"].skillChoosen {
  display: none;
}

input[type="radio"].skillChoosen:checked + label {
  border: solid 1px black;
  background-color: PaleTurquoise;
}

/* 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 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 input:focus, .charsheet textarea:focus{
	outline: none;
}

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

.charsheet input[type=checkbox].skill {
	display: inline-block; 
	vertical-align: top;
	border: 3px solid Black;
	height: 10px;
	width: 10px;
	accent-color: DarkRed;
}
.charsheet input[type=checkbox].DTskill {
	height: 15px;
	width:  15px;
	accent-color: DarkRed;
	background-color: transparent;
	margin: -3px 1px 0px 1px; 
}
.charsheet input[type=checkbox].coin {
	height: 15px;
	width:  15px;
	border-radius: 50% !important;
	border: 1px solid Black;
	accent-color: DarkRed;
	margin: 0px 3px 0px 0px; 
}
.charsheet .sheet-hidden {
	display:none;
}

/* Round checkboxes courtesy of https://codepen.io/AllThingsSmitty/pen/WjZVjo */
.round{
	display: inline-block; 
	vertical-align: top; 
	position: relative;
	width: 8px;
}
.brass,
.silver,
.gold {
	display: inline-block; 
	vertical-align: top; 
	position: relative;
	width: 15px;
}


.brass  label,
.silver label,
.gold   label {
  background-color: transparent;
  border: 2px solid Gray;
  border-radius: 50%;
  cursor: pointer;
  height: 12px;
  left: 0;
  position: absolute;
  top: 0;
  width: 12px;
  padding: 0px;
  margin: 0px;
}
.round  label {
  background-color: transparent;
  border: 2px solid Gray;
  border-radius: 50%;
  cursor: pointer;
  height: 8px;
  left: 0;
  position: absolute;
  top: 0;
  width: 8px;
  padding: 0px;
  margin: 0px;
}

.round  label:after,
.brass  label:after,
.silver label:after,
.gold   label:after {
  padding: 0px;
  margin: 0px;
}

.round  input[type="checkbox"],
.brass  input[type="checkbox"],
.silver input[type="checkbox"],
.gold   input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label,
.brass input[type="checkbox"]:checked + label {
  background-color: #e1c16e;
  border-color: #e1c16e;
}
.silver input[type="checkbox"]:checked + label {
  background-color: #c0c0c0;
  border-color: #c0c0c0;
}
.gold input[type="checkbox"]:checked + label {
  background-color: #ffd700;
  border-color: #ffd700;
}
.round  input[type="checkbox"]:checked + label:after,
.brass  input[type="checkbox"]:checked + label:after,
.silver input[type="checkbox"]:checked + label:after,
.gold   input[type="checkbox"]:checked + label:after {
  opacity: 1;
}


.charsheet label.sheet-skills {
	display: inline-block;
	vertical-align: top; 
	text-align: left; 
	width: 64px;
	height: 16px;	
	font-style: normal; 
	font-weight: bold;
	font-size: 12px;	
	margin: 0px 0px 0px 4px;
	padding: 0px;
	padding-top: 2px;	
	border: 1px solid Transparent;
}
.charsheet label.sheet-skills-header {
	width: 38px;
	height: 14px;
	font-size: 18px; 
	padding: 0px 0px 0px 6px;
	margin: 0px 0px 0px -2px;
	border: 1px solid Transparent;
}

.charsheet input[type="text"].sheet-skills {
	display: inline-block;
	vertical-align: top; 
	text-align: center; 
	width: 26px;
	height: 16px;	
	font-style: normal; 
	font-weight: normal;
	font-size: 14px;	
	margin: 2px 0px 0px -2px;
	padding: 1px;
	background-color: transparent;	
	border: 1px solid Transparent;
	border-radius: 0;
}


.sheet-attribArray {
	display: inline-block; 
	vertical-align: top; 
	margin: 0px 0px 0px 0px; 
	padding: 1px 2px 1px 2px;
	border: 0px solid Brown;
}
/* Remove dot from all radios _after_ selected one */
input[type="radio"]:not(.sheet-tab):checked ~ input[type="radio"] + span::before {
  content: "";
}


input[type="radio"].sheet-zero + span::before {
  font-size: 6px;
  width:  6px;
  height: 6px;
  content: "✖";
  opacity: 0.25;
}
input[type="radio"].sheet-zero {
  font-size: 6px;
  width:  6px;
  height: 6px;
  content: "✖";
  opacity: 0.25;
}
input[type="radio"].sheet-zero:checked + span::before {
  opacity: 0;
}

input[type="radio"].sheet-zero:hover + span::before {
  opacity: 1;
}



input[type="radio"].sheet-rndused + span::before {
  content: "✖";
  width: 16px;
  height: 16px;
  font-size: 15px;
  border-radius: 0;
  border: 2px solid Black;
  padding: 2px 0px 0px 2px;
}

input[type="radio"].sheet-tab {
  margin-top: 0px;
  padding-top: 6px;
  height: 20px;
}




											
/* Details Button */
											
.charsheet button[type=roll].sheet-details::before {
	background-image: none;
	border: none;
	font-family: Pictos;
	content: "i";
	color: #aba9a4; 
}

.charsheet button[type=roll].sheet-details {
	background-image: none;
	background-color: white;
	height: 16px;
	border: none;
	padding: 0px;
	margin: -4px 0px 0px 0px;
}

select
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.charsheet .sheet-gray {
	background-color: rgb(229, 228, 226); 
}

/* CSS Wizardry */
.charsheet .sheet-columns {
  display: flex;
  justify-content: space-between;
  width: 400px;
}
.charsheet .sheet-columns > * {
  flex: 1;
}

.charsheet input[type=checkbox].sheet-toggle-show:not(:checked) ~ div.sheet-body,
.charsheet input[type=checkbox].sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

.charsheet input[type=checkbox].sheet-toggle-show:checked + span:before,
.charsheet input[type=checkbox].sheet-toggle-hide:checked + span:before{
	color: Red;
}
/* End CSS Wizardry */


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

input[type="checkbox"].changeable:checked + label {
  color: DarkRed;
  text-align: left;
  /*font-size: 1.0em; */
  font-size: 10px;
}

/* 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: none;
	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 ;
}
*/
body.sheet-darkmode .charsheet {
	background-color: #ccc
}
bo
/* 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=roll].sheet-attack-button {
	color: #cc0000;
    background-color: white;
	background-image: none;
	height: 16px;
	width:  12px;
    font-size: 1em;
    border: 1px solid #cc0000;
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	content: "j";
	margin: 0px 0px 0px 2px;
	padding: 1px 1px 1px 1px;
}

.charsheet label.sheet-attack-button {
	box-sizing: content-box;
	color: rgb(0, 59, 111);
    background-color: white;
	background-image: none;
	height: 24px;
	width:  14px;
    font-size: 1.4em;
    border: 0px solid #cc0000;
    text-shadow: none;
    box-shadow: none;
	font-family: "dicefontd20";
	margin: 0px 0px 0px 4px;
	padding: 0px 1px 0px 1px;
}

.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, Initiative & Display Templates */
.sheet-rolltemplate-check .sheet-container,
.sheet-rolltemplate-display .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-display .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-display div,
.sheet-rolltemplate-check div {
    padding: 2px;
}

.sheet-rolltemplate-display 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-display .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-display .sheet-arrow-right,
.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-melee .sheet-tcat,
.sheet-rolltemplate-initiative .sheet-tcat,
.sheet-rolltemplate-display .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-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, Melee, Initiative & Display Templates */

/* TAB HANDLING */

.charsheet input[type=radio].sheet-page1,
.charsheet input[type=radio].sheet-page2,
.charsheet input[type=radio].sheet-page3,
.charsheet input[type=radio].sheet-page4{
	display: none;
	float: left;
}
.charsheet input[type=radio].sheet-page1 + label,
.charsheet input[type=radio].sheet-page2 + label,
.charsheet input[type=radio].sheet-page3 + label,
.charsheet input[type=radio].sheet-page4 + 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, .charsheet div.sheet-page3, .charsheet div.sheet-page4 {
	display: none;
}
.charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2,
.charsheet input.sheet-page3:checked ~ div.sheet-page3, .charsheet input.sheet-page4:checked ~ div.sheet-page4 {
	display: block;
}