.charsheet {
	
	background: white url("https://github.com/Roll20/roll20-character-sheets/blob/master/Doctor%20Who%202e/DoctorWho2e_820pxFrame.png?raw=true") no-repeat 0px 58px scroll;
	opacity: 1.0;
	min-width: 822px;
	max-width: 826px;
	height:    1300px;
}

.sheet-clipPhoto {
	    clip-path: polygon(50% 8%, 100% 34%, 100% 86%, 77% 99%, 50% 84%, 23% 99%, -1% 87%, 0 34%);
}

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

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

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


.charsheet .sheet-skills label {
	display: inline-block;
	vertical-align: top; 
	text-align: left; 
	width: 120px; 
	font-style: italic; 
	font-weight: bold; 
	margin: 0px; 
	border: 0px solid black
}


/* Hide actual dot/checkbox */
input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 15px;
  cursor: pointer;
  z-index: 1;
  margin-top: 6px;
}

/* Styles common to fake dot and checkbox */
input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
  border: solid 1px #a8a8a8;
  line-height: 14px;
  text-align: middle;
  display: inline-block;
  vertical-align: middle;
  -moz-box-shadow: 0 0 2px #ccc;
  -webkit-box-shadow: 0 0 2px #ccc;
  box-shadow: 0 0 2px #ccc;
  background: #f6f6f6;
  background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
  background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
  background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
  background: -o-radial-gradient(#f6f6f6, #dfdfdf);
  background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Styles unique to fake checkbox (unchecked) */
input[type="checkbox"] + span::before {
  position: relative;
  content: "";
  opacity: 0.25;
  width: 14px;
  height: 14px;
  font-size: 12px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

input[type="radio"].sheet-used + span::before {
  content: "✖";
  width: 12px;
  height: 12px;
  font-size: 12px;
  -moz-border-radius: 0%;
  -webkit-border-radius: 0%;
  border-radius: 0%;
}

input[type="radio"].sheet-rndused + span::before {
  content: "✖";
  width: 16px;
  height: 16px;
  font-size: 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  padding: 2px 0px 0px 2px;
}
input.sheet-zero + span::before {
  font-size: 12px;
  content: "✖";
  opacity: 0.25;
}

input[type="radio"].sheet-rndused2 + span::before {
  content: "✖";
  width: 12px;
  margin-left: 1px;
  height: 12px;
  font-size: 12px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

input.sheet-DP1Spec + span::before,
input.sheet-DP2Spec + span::before,
input.sheet-DP3Spec + span::before,
input.sheet-DP4Spec + span::before,
input.sheet-DP5Spec + span::before {
  opacity: 1;
  margin-bottom: 10px;
}

input.sheet-zero:checked + span::before {
  opacity: 0;
}

input.sheet-zero:hover + span::before {
  opacity: 1;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before {
  content: "✖";
  color: #a00;
  -moz-box-shadow: 0 0 2px transparent;
  -webkit-box-shadow: 0 0 2px transparent;
  box-shadow: 0 0 2px transparent;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before {
  content: "";
}

input.sheet-DPSpec[type="checkbox"] + span::before {
  position: relative;
  content: "";
  opacity: 1;
  width: 14px;
  height: 14px;
  font-size: 12px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

input.sheet-DPSpec[type="checkbox"]:checked + span::before {
  content: "✖";
  color: #a00;
  -moz-box-shadow: 0 0 2px transparent;
  -webkit-box-shadow: 0 0 2px transparent;
  box-shadow: 0 0 2px transparent;
}
												
/* 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"] {
  display: none;
  text-align: left;
  font-size: 10px;
}

input[type="checkbox"]: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: 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 ;
}

/* 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{
	display: none;
	float: left;
}
.charsheet input[type=radio].sheet-page1 + label,
.charsheet input[type=radio].sheet-page2 + 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;
}