/**********************************************************************************************************/
/***************************              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"],
	button[type="action"] {
		font-size: 1em;
		margin: 0px;
		padding: 0px;}

	button[type="action"]:hover {
		color: #fff;
		text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px #e31715;}

	div {
		background-color: transparent;}

	fieldset {
		background: transparent;}

	h1, h2, h3, h4 {
		margin: 0px;
		padding: 0px;
		width: fit-content;}

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

	input[type="text"]:hover,
	input[type="number"]:hover,
	input[type="text"]:focus,
	input[type="number"]:focus {
		color: white;
		background: #929082;
		padding-bottom: 1px;
		outline: #39201e;}

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

	 label {
		display: inline-block;
		margin : 0px;
		padding: 0px; }

	span {
		word-break: break-word;}

	textarea {
		border-bottom : 1px dotted #FCD116;
		font-size     : 12px;
		font-weight   : normal;
		height        : 100px;
		line-height   : 18px;
		min-height    : 50px;
		overflow      : hidden;
		overflow-wrap : break-word;
		padding       : 2px;
		resize        : vertical;
		text-align    : left;
		vertical-align: top;
		white-space   : pre-line;
		width         : 95%;}

	.charsheet {
		width: 850px;}

	.sheet-container {
		margin-left: -2%;
		width      : 100%;}

	.sheet-container div {
		box-sizing    : border-box;
		vertical-align: top;}

	.sheet-pc {
		border : 2px solid black;
		padding: 1%;
		width  : 100%;}

/**********************************************************************************************************/
/***************************                     TAB                           ***************************/
/********************************************************************************************************/
	div.sheet-tabs {
		display        : inline-block;
		width          : 100%;}

	div.sheet-tabs button {
		margin: 0px 2%;
		padding: 5%;
		width  : fit-content;}

	div.sheet-tabs div {
		display: inline-block;}

	div.sheet-tabs div:nth-of-type(1) {
		margin-right: 1%;
		width: 18%;}

	div.sheet-tabs div:nth-of-type(2) {
		margin-right: 2%;
		width: 22%;}

	div.sheet-tabs div:nth-of-type(3) {
		margin-right: 1%;
		width: 45%;}

	div.sheet-tabs div:nth-of-type(4) {
		width: 9%;}

	div.sheet-tabs h1 {
		color: #39201e;
		text-shadow:
	       3px 3px 0 #ba2c2c,
	     -1px -1px 0 #ba2c2c,  
	      1px -1px 0 #ba2c2c,
	      -1px 1px 0 #ba2c2c,
	       1px 1px 0 #ba2c2c;}

	div.sheet-tabs h2 {
		font-size: 0.8em;}

	input.sheet-whisper-toggle + button {
		font-family: "pictos";}

	div.sheet-diceroller {
		display: inline;}

	div.sheet-diceroller button {
		border: 1px solid black;
		box-shadow: inset 0 0 8px 3px #ccc;
		text-transform: uppercase;}

	div.sheet-diceroller label {
		width: fit-content;}

	div.sheet-diceroller input[type="number"] {
		maring-left : 2%;
		maring-right: 2%;
		text-align  : center;}

	div.sheet-diceroller input[type="text"] {
		margin-right: 1%;
		width: 60%;}

/**********************************************************************************************************/
/***************************                     PC                            ***************************/
/********************************************************************************************************/
	div.sheet-info-row {
		display   : inline-block;
		width          : 100%;}

	div.sheet-flexcol {
		display: inline-block;
		width: 49%;}

	div.sheet-info-row div.sheet-flexcol div {
		padding: 1% 0px;}

	/* INPUTS WITH ALL THE PLAYER AND CHARACTER DETAILS */
		/* DATE */
	div.sheet-details div:nth-of-type(1) input:nth-of-type(2) {
		width: 30%;}

		/* SEX, HAIR, EYES.... */
	div.sheet-details div:nth-of-type(2) input {
		width: 20%;}

		/* DOB/OCCUPATION/NATIONALITY */
	div.sheet-details div:nth-of-type(3) input {
		width: 75%;}

	div.sheet-details div:nth-of-type(3) input:nth-of-type(1n+2) {
		width: 78%;}

		/* AUTHORIZED */
	div.sheet-details div:nth-of-type(5) input {
		width: 95%;}

		/* ID NO */
	div.sheet-details div:nth-of-type(6) input {
		width: 85%;}

	div.sheet-details input[type="text"]:nth-of-type(1n+9) {
		margin-bottom: 2%;
		width        : 100%;}

	div.sheet-details label {
		font-size     : 0.8em;
		text-transform: uppercase;
		font-weight   : normal;
		margin-right  : 3%;
		width         : fit-content;}

	/* INPUTS FOR TRACKING DAMAGE? */
	div.sheet-wounds button[type="action"] {
		font-family   : fantasy;
		font-weight   : bold;
		text-align    : left;
		text-transform: capitalize;
		width         : 25%;}

	div.sheet-wounds input[type="hidden"] + button {
		display      : inline-block;
		height       : 20px;
		border       : solid 1px #a8a8a8;
		border-radius: 50%;
		margin-right : 1%;
		width        : 20px;}

	div.sheet-wounds input[type="hidden"][value="0"] + button {
		background: #33333305;
		box-shadow: inset 0 0 8px 3px #ccc;}

	div.sheet-wounds input[type="hidden"][value="1"] + button {
		background: #3333336e;}

	div.sheet-wounds input[type="hidden"][value="2"] + button {
		background: #333;}

		/* STAST section */
	div.sheet-stats {
		vertical-align: middle;
		text-align: center;}

	div.sheet-stats label {
		font-size: 0.85em;
		font-weight: normal;
		width: fit-content;}

	div.sheet-stats input[type="number"] {
		background   : radial-gradient(#f6f6f6, #dfdfdf);
		border       : 1px solid #ba2c2c;
		border-radius: 50%;
		display      : inline-block;
		height       : 25px;
		text-align   : center;
		width        : 25px;}

	div.sheet-stats input[type="number"]:hover,
	div.sheet-stats input[type="number"]:focus {
		background: #929082;}

		/* Fake radio */
	div.sheet-meters input[type="radio"] + span::before {
		background    : #333;
		border        : solid 1px #a8a8a8;
		border-radius : 50%;
		box-shadow    : 0 0 2px #ccc;
		content       : "";
		display       : inline-block;
		height        : 18px;
		margin-right  : 1%;
		width         : 18px;}

	div.sheet-meters input[type="radio"] + span::before {
		border-radius: 2%;
		box-shadow   : 0 0 2px #658160;
		height       : 10px;
		margin-right : 0px;
		width        : 10px;}

	div.sheet-meters input[type="radio"].sheet-failed + span::before {
		background  : #ba2c2c;
		border-color: #ba2c2c;}

	div.sheet-meters input[type="radio"].sheet-hardened + span::before {
		background  : #658160;
		border-color: #658160;}

	/* Remove dot from all radios _after_ selected one */
	div.sheet-meters input[type="radio"]:checked ~ input[type="radio"] + span::before,
	div.sheet-meters input[type="hidden"][value="0"] ~ span::before {  
	    background: #f6f6f6;
	    background: radial-gradient(#f6f6f6, #dfdfdf);}

	/* meters SECTION */
	div.sheet-meters button[type="action"] {
		font-size: 1em;
		width: 100%;}

	div.sheet-meters div.sheet-statcol {
		display: inline-block;
		width  : 38%;}

	div.sheet-meters div.sheet-statcol:nth-of-type(2) {
		width: 20%;}

	div.sheet-meters button[type="action"]:hover {
		color: #fff;
		text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px #658160;}	

	div.sheet-meters label,
	div.sheet-meters button[type="action"] {
		color         : #658160; 
		text-align    : center;
		text-transform: capitalize;}

	div.sheet-meters div.sheet-statcol label {
		margin: auto 2%;
		width: 100%;}

	div.sheet-meters input[type="number"] {
		border    : 1px solid #ba2c2c;
		box-shadow: 0 0 10px #658160 inset;
		height    : 22px;
		margin    : 2% 20%;
		text-align: center;}

	/* Fake radio squares for STASTS */
	div.sheet-meters input[type="radio"] {
		cursor : pointer;
		height : 12px;
		left   : 6px;
		margin : 0px -6px;
		opacity: 0;
		top    : -3px;
		width  : 12px;
		z-index: 1;}

	/* EVERY LABEL AFTER PIPS */
	div.sheet-details label:nth-of-type(1n+9) {
		width: fit-content;}

	div.sheet-notes-col {
		margin-right: 1%;}

	/* WEAPONS */
	div.sheet-weapons h2 {
		display: inline-block;
		font-size: 1.8em;
		width: 25%;}

	div.sheet-weapons label {
		font-size : 0.8em;
		text-align: center;
		width     : 11%;}

	div.sheet-weapons label:nth-of-type(1) {
		width: 29%;}

	div.sheet-weapons label:nth-of-type(4),
	div.sheet-weapons label:nth-of-type(5) {
		width: 9%;}

	div.sheet-weapons input[type="text"] {
		width: 8%;}

	div.sheet-weapons input[type="text"]:nth-of-type(1) {
		width: 25%;}

	div.sheet-weapons input[type="text"]:nth-of-type(3),
	div.sheet-weapons input[type="text"]:nth-of-type(5),
	div.sheet-weapons input[type="text"]:nth-of-type(6) {
		width: 12%;}

	/* SKILLS */
	div.sheet-skills-col {
		display: inline-block;
		width: 48%;}

	div.sheet-skills-col:nth-of-type(1) {
		margin-right: 3%;}

	div.sheet-skills-col h3 {
		margin-bottom: 5px;}

	div.sheet-skills-col h4 {
		border-right    : 1px solid #333;
		color           : #7b1915;
		display         : inline-block;
		margin-bottom   : 2%;
		text-orientation: mixed;
		width           : 5%;
		writing-mode    : vertical-rl;}

		/* BODY HEADER */
	div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(1) {
		height: 250px;}

		/* COORDINATION HEADER */
	div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(2) {
		height: 360px;}

		/* SENSE HEADER */
	div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(3) {
		height: 150px;}

		/* MIND HEADER */
	div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(1) {
		height: 500px;}

		/* COMMAND & EMPATHY HEADER */
	div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(2),
	div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(3) {
		height: 150px;}

	div.sheet-skills-col label {
		width: 83%;
		margin-right: 2%;
		font-size: 0.9em;
		text-transform: capitalize;}

	div.sheet-skill-col {
		display: inline-block;
		margin-bottom: 5%;
		width: 90%;}

	div.sheet-skill-col div {
		padding: 1% 0px;}

	div.sheet-skill-col input[type="number"] {
		height: 20px;
		text-align: center;
		width: 2em;}

	div.sheet-skill-col input[type="text"] {
		height: 20px;
		width: 3em;}

	/* CUSTOMIZE LABELS FOR SKILLS WITH TEXT INPTUS */
	div.sheet-skill-mar label {
		width: 40%;}

	div.sheet-skill-mar input[type="text"] {
		width: 38.9%;}

	div.sheet-skill-mel label {
		width: 47%;}

	div.sheet-skill-mel input[type="text"] {
		width: 31.9%;}

	div.sheet-skill-dri label {
		width: 25%;}

	div.sheet-skill-dri input[type="text"] {
		width: 53.9%;}

	div.sheet-skill-fire label {
		width: 30%;}

	div.sheet-skill-fire input[type="text"] {
		width: 48.9%;}

	div.sheet-skill-pil label {
		width: 20%;}

	div.sheet-skill-pil input[type="text"]{
		width: 58.9%;}

	div.sheet-skill-sail label {
		width: 15%;}

	div.sheet-skill-sail input[type="text"] {
		width: 63.9%}

	div.sheet-skill-cust input[type="text"] {
		width: 82.9%;}

	div.sheet-skill-lan label {
		width: 35%;}

	div.sheet-skill-lan input[type="text"] {
		width: 43.9%;}

	div.sheet-skill-mech label {
		width: 33%;}

	div.sheet-skill-mech input[type="text"] {
		width: 45.9%;}

	div.sheet-skill-perf label {
		width: 42%;}

	div.sheet-skill-perf input[type="text"] {
		width: 36.9%;}

/**********************************************************************************************************/
/***************************                    NPC                            ***************************/
/********************************************************************************************************/
	div.sheet-npc {
		border : 1px solid black;
		padding: 1%;
		width  : 65%;}

	div.sheet-npc div {
		padding: 1% 0px;}

	div.sheet-npc input[type="text"][name*="character"] {
		font-size    : 2em;
		margin-bottom: 2%;
		text-align   : left;
		width        : 100%;}

	div.sheet-npc label {
		margin-right  : 5%;
		text-transform: capitalize;
		width         : 50%;}

	div.sheet-npc input[type="text"] {
		text-align: center;
		width: 8em;}

	div.sheet-npc-stat-block {
		width: 80%;}

	div.sheet-npc-body-details div {
		margin-left: 5%;}

	div.sheet-npc-body-details label {
		margin-right: 5%;
		width       : 65%;}

	div.sheet-npc-extras input[type="text"] {
		font-weight: bolder;
		text-align: left;
		width     : 100%;}

/**********************************************************************************************************/
/***************************             HIDE & SHOW THINGS                    ***************************/
/********************************************************************************************************/
	div.sheet-pc,
	div.sheet-npc {
		display: none;}

	input.sheet-type[value="pc"] ~ .sheet-pc,
	input.sheet-type[value="npc"] ~ .sheet-npc {
		display   : block;}


/**********************************************************************************************************/
/***************************              HIGHLIGHT BUTTONS                    ***************************/
/********************************************************************************************************/
	input.sheet-whisper-toggle[value*="gm"] + button[name*="whisper"],
	input.sheet-type[value="pc"] ~ div.sheet-tabs button[name*="pc"],
	input.sheet-type[value="npc"] ~ div.sheet-tabs button[name*="npc"] {
		color           : #fff;
		background-color: #7b1915;
		box-shadow      : inset 0px 0px 3px 1px #e31715;}

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

/**********************************************************************************************************/
/***************************             REPEATING SECTIONS                          *********************/
/********************************************************************************************************/
	.repcontainer {}

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

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

	.repcontrol .repcontrol_add:after {
		content: '&';}

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

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

	/* 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           : white;
		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,
	.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
		color: white;}

/**********************************************************************************************************/
/***************************                 FIREFOX                           ***************************/
/********************************************************************************************************/
	input[type=number]::-webkit-outer-spin-button,
	input[type=number]::-webkit-inner-spin-button {
	    -webkit-appearance: none;
	    margin: 0;}

	input[type=number] {
	    -moz-appearance:textfield;}