/**********************************************************************************************************/
/***************************              GLOBAL SETTINGS                      ***************************/
/********************************************************************************************************/
	* {
	    box-sizing: border-box;
	    font-family: sans-serif;}

 	button {
		background-color: transparent;
		background-image: none;
		border-color: transparent;
		border: none;
		box-shadow: none;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 0.8em;
		text-shadow: none;}

		button:before {display: none;}
		button:hover {background-color: transparent;}

		button[type="roll"] {
			font-size: 1em;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px;}

	div {
		background-color: transparent;}

	fieldset {
		background: transparent;}

	h1, h2, h3, label {
		display     : inline-block;
		font-family: sans-serif;}

	h1 {
		font-size: 1.5em;}

	h2 {
		font-size: 1.3em;}

	hr {
		border-bottom: 2px solid #333;}

	 label {
	 	font-size: 1.2em;
	 	font-weight: normal;}

	input[type="text"],
	input[type="number"] {
		background-color: transparent;
		border          : none;
		border-bottom   : 1px solid #a0a0a0;
		border-radius   : 0px;
	}

	input[type="text"]:hover,
	input[type="number"]:hover {
		background-color: #ccc;
	}

	input[type="checkbox"],
	input[type="radio"],
	input[type="checkbox"] + span,
	input[type="radio"] + span {
		position: relative;}	

	input[type="checkbox"],
	input[type="radio"] {
		opacity: 0;
	    z-index: 2;}


	span {
		word-break: break-word;}

	textarea {
		font-size     : 12px;
		font-weight   : normal;
		height        : 50px;
		line-height   : 18px;
		overflow-wrap : break-word;
		overflow      : hidden;
		padding       : 2px;
		resize        : vertical;
		text-align    : left;
		vertical-align: top;
		white-space   : pre-line;}

	.charsheet {
		width: 850px;
	}

/**********************************************************************************************************/
/***************************                  GENERAL                          ***************************/
/********************************************************************************************************/	
.sheet-header-row {
	margin-bottom: 3%;
}

.sheet-header-row button {
	float         : right;
	font-family   : "pictos";
	font-size     : 2em;
	margin-right  : 5%;
	vertical-align: bottom;
}

.sheet-header-row div {
	display       : inline-block;
	vertical-align: top;
}

.sheet-header-row div:nth-of-type(1) {
	vertical-align: top;
	width         : 60%;
}

.sheet-header-row h2 {;
	font-size   : 1.3em;
	margin-right: 2%;
	width       : auto;
}

/*  'Logo' on the top right */
.sheet-reach {
	width: 35%;
}

.sheet-reach div:nth-of-type(1) {
	margin-top: 1%;
	width     : 30%;
}

.sheet-reach div:nth-of-type(3)  {
	margin-top: -1%;
	margin-left: 3%;
}

.sheet-reach h1 {
	font-weight: normal;
}

.sheet-reach h1:nth-of-type(1) {
	font-weight: 900;
	line-height: 0px;
}

.sheet-reach h1:nth-of-type(2) {
	font-size     : 1.2em;
	vertical-align: top;
	margin-top    : -10%;
}

.sheet-reach h1:nth-of-type(3) {
	font-weight: 500;
	margin-left: 1%;
	margin-top : -10%;
}

.sheet-reach h3 {
	font-weight: normal;
}

.sheet-reach h3:nth-of-type(1) {
	font-size     : 0.8em;
	margin-top    : -3%;
	vertical-align: top;
}

.sheet-reach h3:nth-of-type(2){ 
	margin-bottom: -3%;
}

.sheet-reach h3:nth-of-type(3) {
	margin-left: 20%;
	margin-top : -5%;
}

.sheet-line {
	background-color: black;
	display         : inline-block;
	border-left     : 2px solid black;
	height          : 50px;
	width           : 2px;
}

/**********************************************************************************************************/
/***************************                    PC                             ***************************/
/********************************************************************************************************/	
.sheet-pc button[type="roll"] {
	margin-bottom: 2%;
	margin-right : 10%;
}

.sheet-pc button[type="roll"]:hover {
	color: #81a9ca;
}

.sheet-pc button[type="roll"] + label {
	text-transform: capitalize;
}

.sheet-pc button[type="roll"] > span {
	font-family: 'dicefontd6'; 
	font-size: 3em;
}

.sheet-pc input[type="number"] {
	vertical-align: top;
	text-align    : center;
}

.sheet-pc label {
	vertical-align: top;
	width         : auto;
}


/* SQUARES ROWS CUSTOMIZATIONS */
.sheet-dice-row {
	height: 6em;
}

.sheet-dice-row label {
	width: 15%;
}

.sheet-square {
	border : 1px solid #a0a0a0;
	display: inline-block;
	height : 60px;
	margin : 0.5%;
	width  : 60px;
}

.sheet-dice-row span {
	font-size  : 5em;
	left       : 5%;
	opacity    : 0;
	position   : relative;
	top        : -135%;
}

.sheet-die-radio + span {
	font-family: "dicefontd6";
}

.sheet-die-radio + span + span {
	color      : #610b0d;
	font-family: sans-serif;
}

.sheet-die-radio:checked + span {
	opacity: 1
}

input.sheet-die-radio {
	height: 100%;
	width : 100%;
}

.sheet-damage[value="1"] ~ .sheet-square:nth-of-type(6) input + span,
.sheet-damage[value="2"] ~ .sheet-square:nth-of-type(1n+5)  input + span,
.sheet-damage[value="3"] ~ .sheet-square:nth-of-type(1n+4)  input + span,
.sheet-damage[value="4"] ~ .sheet-square:nth-of-type(1n+3)  input + span,
.sheet-damage[value="5"] ~ .sheet-square:nth-of-type(1n+2)  input + span,
.sheet-damage[value="6"] ~ .sheet-square:nth-of-type(1n+1)  input + span  {
	opacity: 0;
}

.sheet-damage[value="1"] ~ .sheet-square:nth-of-type(6) input + span + span,
.sheet-damage[value="2"] ~ .sheet-square:nth-of-type(1n+5) input + span + span,
.sheet-damage[value="3"] ~ .sheet-square:nth-of-type(1n+4) input + span + span,
.sheet-damage[value="4"] ~ .sheet-square:nth-of-type(1n+3) input + span + span,
.sheet-damage[value="5"] ~ .sheet-square:nth-of-type(1n+2) input + span + span,
.sheet-damage[value="6"] ~ .sheet-square:nth-of-type(1n+1) input + span + span {
	left   : -75%;
	opacity: 1;
}

/* REPEATING SECTIONS CUSTOMIZATIONS */

.sheet-repeating {
	margin-top   : 5%;
	margin-bottom: 5%;
	width        : 75%;
}

.sheet-repeating input[type="text"] {
	color       : #333;
	font-size   : 1.2em;
	font-weight : bolder;
	margin-right: 2%;
}

.sheet-repeating textarea {
	margin-top: 1%;
}

/* HIDE & SHOW TITAN OR PC SHEETS */
.sheet-pc,
.sheet-titan,
div.sheet-pc-hide,
div.sheet-titan-hide {
	display: none;
}

.sheet-layout[value="pc"] ~ .sheet-pc,
.sheet-layout[value="pc"] ~ .sheet-header-row div.sheet-pc-hide {
	display: inline-block;
}

.sheet-layout[value="titan"] ~ .sheet-titan,
.sheet-layout[value="titan"] ~ .sheet-header-row div.sheet-titan-hide {
	display: inline-block;
}

/**********************************************************************************************************/
/***************************                    TITAN                          ***************************/
/********************************************************************************************************/	
.sheet-titan  {
	width: 100%;
}

.sheet-titan-header {
	width: 70%;
}

.sheet-titan h1 {
	text-transform: capitalize;
	width         : 100%;
}

.sheet-titan-stats label {
	font-weight: bolder;
	width      : 10%;
}

.sheet-titan-stats div:nth-of-type(1) label {
	width: 20%;
}

.sheet-titan-stats input[type="text"] {
	text-align    : center;
	vertical-align: text-bottom;
}

/* TITAN BODY WHERE REPEATING FIELDS ARE */
.sheet-titan-body h3 {
	font-size    : 1.1em;
	margin-bottom: -1%;
}

.sheet-titan-body label {
	font-weight: bolder;
	padding    : 0px;
	width: 10%;
}

.sheet-titan-body input[type="number"] {
	margin-right: 15%;
}

.sheet-titan-body .sheet-repeating {
	margin-top: -1%;
}

.sheet-titan-body .sheet-repeating div {
	margin-top   : 1%;
}

.sheet-titan-body .sheet-repeating label.sheet-section-label {
	width: 20%;
}

.sheet-titan-body .sheet-repeating label.sheet-section-label + input[type="text"] {
	width: 32%;
}

.sheet-titan-body .sheet-repeating textarea {
	background-color: transparent;
	margin-bottom   : 0%;
}

.sheet-titan-body .sheet-repeating .sheet-action-row {
	border: 1px solid #333;
}

.sheet-titan-body .sheet-repeating .sheet-action-section {
	display       : inline-block;
	margin-top    : 0%;
	text-align    : center;
	vertical-align: top;
	width         : 24.5%;
}

.sheet-titan-body .sheet-repeating .sheet-action-section div:first-child {
	border-bottom: 1px soild #333;
}

.sheet-titan-body .sheet-repeating .sheet-action-section:nth-of-type(1n+2) {
	border-left: 1px solid #333;
}

.sheet-titan-body .sheet-repeating .sheet-action-section input[type="text"] {
	border       : none;
	height       : 50px;
	margin-left  : 2%;
	overflow-wrap: break-word;
	text-align   : center;
	width        : 100%;
}

.sheet-titan-body .sheet-repeating .sheet-action-section input[type="text"]:nth-of-type(4) {
	margin-left: 2%;
	width      : 104%;
}

.sheet-titan-body .sheet-repeating .sheet-action-section label {
	border-bottom: 1px solid #333;
	margin-left  : 2%;
	text-align   : center;
	width        : 100%;
}

/**********************************************************************************************************/
/***************************                  FOOTER                           ***************************/
/********************************************************************************************************/
	.sheet-footer {
		border     : none;
		font-size  : 0.55em;
		line-height: 15px;
		margin-top : 15px;
		text-align : left;
		width      : 700px;
	}

/**********************************************************************************************************/
/***************************             REPEATING SECTIONS                          *********************/
/********************************************************************************************************/
	.repcontrol {
		vertical-align: top;
	}

	/* This will make the Add & Modify words transparent so that only our symbols below show up */
	.repcontrol .btn {
	 	color: transparent !important;
	 }

	 /* This will put icons next to the buttons. A `+` for Add and a lock for edit */
	.repcontrol .repcontrol_edit:after,
	.repcontrol .repcontrol_add:after  {
	 	color           : #111518;
	 	font-family     : pictos;
	    font-size       : 2.5em;}

	.repcontrol .repcontrol_edit:after {
		content    : '(';
		margin-left: -50%;
	}

	.repcontrol .repcontrol_add:after {
		content    : '&';
		margin-left: -30%;
	}

	.editmode ~ .repcontrol .repcontrol_edit:after {
		content: ')';
	}

	/* These are the buttons that appear after the repcontrol_edit is clicked*/
	.itemcontrol {
		z-index: 10;
	}

	.itemcontrol .repcontrol_del,
	.itemcontrol .repcontrol_move {
	    font-size: 18px;
	    margin-top: 0px;
	    padding: 0px;
	    width: 15px;}

	.itemcontrol .repcontrol_del {
		background-color: darkred;
		font-family: pictos;}


	/*.repitem:nth-of-type(1n+2) {
		background-color: #81a9ca40;
	} */

/**********************************************************************************************************/
/***************************                 ROLL TEMPLATE                           *********************/
/********************************************************************************************************/
	.sheet-rolltemplate-rolls {

	}

	.sheet-rolltemplate-rolls .sheet-template-body {
		border    : 1px solid #000;
		text-align: center;
	}

	.sheet-rolltemplate-rolls .sheet-template-header {
		background-color: white;
		border          : 1px solid #000;
		border-bottom   : 2px solid #000;
		color           : black;
		font-size       : 20px;
		font-variant    : small-caps;
		letter-spacing  : 2px;
		padding         : 4px 0px 3px 0px;
		text-align      : center;
		text-transform  : capitalize;
	}

	.sheet-rolltemplate-rolls .sheet-template-row {
		background-color: #888;
	}

	/* Use this to alternate the background colors for each row */
	.sheet-rolltemplate-rolls .sheet-template-row:nth-child(2n+0) {
		background-color: #1c1c1c;
	}

	/* Remove some fo the built in styles around rolls */
	.sheet-rolltemplate-rolls .inlinerollresult {
		background-color: transparent;
		border          : none;
		color           : black;
		display         : inline-block;
		font-size       : 25px;
		padding         : 5px;
	}

	.sheet-rolltemplate-rolls .inlinerollresult.fullfail,
	.sheet-rolltemplate-rolls .inlinerollresult.fullcrit,
	.sheet-rolltemplate-rolls.inlinerollresult.importantroll {
		border: none;
	}

	/* Change the colors of Full Fails & Full Crits from their built in defaults */
	.sheet-rolltemplate-rolls .inlinerollresult.fullfail {
		color: white;
	}

	.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
		color: white;
	}


/**********************************************************************************************************/
/***************************                 FIREFOX                           ***************************/
/********************************************************************************************************/