@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  src: local('Play-Bold'), url(http://themes.googleusercontent.com/static/fonts/play/v4/ZzUearZLklGfoL18Ti0GaQ.woff) format('woff');
}

.charsheet {
    background-color: white;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.charsheet h3 {
    margin-bottom:0;
}
 
.charsheet .sheet-small, 
.charsheet .sheet-smallSkills {
    font-size: 10px;
    line-height:9px;
}
.charsheet .sheet-smallSkills{
    margin-left:15px;
}
 
.charsheet label {
    display: inline-block;
    text-align: right;
    font-size:14px;     
    width: auto;
}
 
.long {
    width: 100px;
}
 
.charsheet input,
.charsheet select  {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    display: inline-block; 
}

.charsheet input[disabled] {
	-webkit-appearance: none;
	-moz-appearance: textfield;
	border-top: 1px solid #999;
	border-left: 1px solid #222;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;
	text-align: center;
	background-color: #e7e7e7;
}
 
.charsheet input.header {   
    width: 100%;
}
 
.classHeader {
    width: calc(100% - 300px) !important; 
}
 
.charsheet div.sheet-record {
    font-size: 14px;
    font-weight: bold;
    text-align:center;    
    width:300px;
    float:right;
}
 
.EquipmentSection {
    /*width: calc(100% - 330px) !important; */
    width:60%;
    min-width:490px;
    max-width:680px;
}
.charsheet div.EquipmentSection2 {
    width:37%;
    font-size: 14px;
    font-weight: bold;
    text-align:center;    
    min-width:300px;
    float:right;
}
 
.charsheet input.skills {
    width:42px !important; 
}
     
.charsheet select {    
    display: inline-block;
}
 
.charsheet select.modtype {
    width: 72px;
}
 
.charsheet div.sheet-textHead, 
.charsheet div.sheet-textHead2Col {
    background-color: black;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-align:center;
    border-radius:  5px;
    width:100%;
    padding:1px 2px;
    border-spacing: 0px 4px;   
	margin-left: -2px;
}
.charsheet div.sheet-textHead2Col, 
.charsheet table.sheet-table2col {
	min-width: 395px;
}
 
.charsheet textarea {
    width: calc(100% - 10px);
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    margin-bottom: 1px;
}
.charsheet textarea.atkFormula, 
.charsheet input.skillFormula, 
.charsheet textarea.atkNotes {
    font-size: 12px;
    min-width:330px;
}
.skillFormula {
	width:100%;
}
.charsheet textarea.atkFormula {
    height: 80px; 
}
.charsheet textarea.atkNotes {
    height: 40px;
}
.charsheet textarea.ActionNotes {
    font-size: 12px;
    height:60px;
    min-width:385px;
}
.charsheet textarea.StatBlock {
    font-size: 12px;
    height:60px;
    display: inline-block;
}
 
.charsheet div.clear { clear:both; }
 
.charsheet button[type=roll] {
    padding: 5px 10px 5px !important;
    font-size: 20px;
    background-color: #a7a8aa;
    font-weight: bold;
    text-shadow: 1px 1px #D0D0D0;
    color: #000000;
    border-radius: 100px;
    border: 1px solid #D0D0D0;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.charsheet button[type=roll].blank-roll-button::before { content: "";}
 
.charsheet button[type=roll].blank-roll-button, 
.charsheet button[type=roll].small-roll-button {
    font-size: 12px !important;
    line-height:5px;
}

.charsheet button[type=action] {
	padding: 4px 6px;
	font-size: 13px;
	line-height: 18px;
	color: #333333;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: linear-gradient(top, #ffffff, #e6e6e6);
	border: 1px solid #ccc;
	border-bottom-color: #bbb;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.charsheet select{
    margin:0;
}
 
/* ******** Start code for hiding sections ******** */
.forceShow:not(:checked) ~ .forceBody,
.SRShow:not(:checked) ~ .SRBody,
.DRShow:not(:checked) ~ .DRBody,
.immuneShow:not(:checked) ~ .immuneBody,
.DefArmorLevelShow:not(:checked) ~ .DefArmorLevelBody,
.PerceptionShow:not(:checked) ~ .PerceptionBody,
.athleticsShow:not(:checked) ~ .athleticsBody,
.athleticsShow:checked ~ .noathleticsBody,
.sectAttack-show:checked ~ .sectAttack,
.sect-show:not(:checked) ~ .sect {
    display: none;
}
 
.sheet-hidden {
    display: none !important;       
}
 
.skillsHeader {
    opacity:0;  
    position: relative;
    height: 0px;    
}
 
.charsheet input[type="checkbox"] + span:not(.not-show)::before {
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
 
    content: "[show]";
    width: 14px;
    height: 14px;
    font-size: 12px;
}
.charsheet input.sectAttack-show + span:not(.not-show)::before {
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    content: "[hide]";
    width: 14px;
    height: 14px;
    font-size: 12px;
}
 
.charsheet span.not-show {
    margin-right: 4px;
    vertical-align: middle; 
    min-height: 32px;
}

.charsheet .displayInline-block { 
	display: inline-block;
}
 
.charsheet input[type="checkbox"]:checked + span:not(.not-show)::before {
    content: "[hide]";
}

.charsheet input.sectAttack-show:checked + span:not(.not-show)::before {
    content: "[show]";
}

.sheet-hideCheckbox {
    opacity: 0;
    position: relative;
    left: 6px;
    cursor: pointer;
    z-index: 1;
}
.sheet-skillsHideCheckbox {   
    opacity:0;
    position: relative;
    cursor: pointer;
    z-index: 1;
    height: 15px;
}
 
/* ******** Start code for tabs ******** */
.charsheet div.sheet-tab-content
{ display: none; }
 
.charsheet input.tab1:checked ~ div.tab1,
.charsheet input.tab2:checked ~ div.tab2,
.charsheet input.tab3:checked ~ div.tab3,
.charsheet input.tab4:checked ~ div.tab4
{
    display: block;
}
.charsheet input.tab
{
    width: 150px;
    height: 20px;
    position: relative;
    left: 6px; 
    margin: 0px -1.5px;
    cursor: pointer;
    z-index: 1;
	border:none;
	-moz-appearance:initial;
}

.charsheet input.tab::before
{
    content: attr(title);
    /* 
    border: solid 1px #c8c8c8;
    border-bottom-color: black; */
    text-align: center;
    display: inline-block;
     
    background: #fff;
    background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
     
    width: 150px;
    height: 20px;
    font-size: 18px;
}

.charsheet input.tab:checked::before
{
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    /* border-bottom-color: #fff; */
}
.charsheet input.tab:not(:first-child)::before
{
    border-left: none;
}
.charsheet div.sheet-tab-content
{
   /*  border: 1px solid #a8a8a8;
    border-top-color: #000;*/  
    margin: 2px 0 0 5px;
    padding: 5px;
}
 
/* ******** Tables ******** */
.charsheet table {
    text-align: center;
    width: 100%;
}
.charsheet table th {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.sheet-3colrow .sheet-col {
	width: calc(33% - 21px);
	margin-right: 30px;
}

.sheet-2colrow .sheet-col {
	width: calc(50% - 20px);
	margin-right: 30px;
}
/*
.charsheet .sheet-3colrow .sheet-col:last-child,
.charsheet .sheet-2colrow .sheet-col:last-child {
	margin-right: 0px;
}
*/
.sheet-col1, 
.sheet-skillsCol1, 
.sheet-skillsCrewCol1  {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
}
.sheet-col1 {
    background-color: #a7a8aa;
    border-radius: 5px;
}
.sheet-skillsCol1 {
    width: 35%;
    min-width: 122px;
}
.skillsHideCheckbox {   
    width: 100%;
    margin-left: calc(1px - (100% + 17px));
}
 
.charsheet input.skillsNotes {
    width: 100%;
    min-width:250px;
}
.sheet-skillsFeats {
    min-width: 25px;
    text-align: center; 
    cursor: pointer;
}
.sheet-spacing {    
    border-spacing: 1px 1px;
    border-collapse: separate;
    padding: 0px 1px;
}
 
.sheet-table {
    display: table;
    width: 100%;
}
 
.sheet-table-header {
    display: table-cell;
    vertical-align: bottom;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
 
.sheet-table-data {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 1px;
}
 
.sheet-table-row {
    display: table-row;
    vertical-align: bottom;
    width: 100%; 
}

/* ******** LOGOS ******** */

.charsheet div.sheet-record input + label img  {
	cursor: pointer;
}

body.sheet-darkmode .charsheet div.sheet-record label img {
	content: url("https://i.imgur.com/vee1jVn.png"); /* Replace this with a link on GitHub */
}

.charsheet div.sheet-record input[type="checkbox"]:checked + label img  {
	content: url("https://i.imgur.com/q56mRaE.png"); /* Replace this with a link on GitHub */
}

/* ******** DARK MODE FOR SHEET ******** */

body.sheet-darkmode .charsheet {
	background-color: var(--dark-surface1);
	color: var(--dark-primarytext);
}

body.sheet-darkmode .charsheet .sheet-col1 {
	background-color: #55555a;
}

body.sheet-darkmode .charsheet input,
body.sheet-darkmode .charsheet select,
body.sheet-darkmode .charsheet textarea {
    background-color: #3f3f50;
	color: #f5f5f5;
	border: 1px solid #707099;
	border-top: 1px solid #44445c;
}

body.sheet-darkmode .charsheet input[disabled] {
	background-color: #334;
	color: #ddd;
	border: 1px solid #444457;
	border-top: 1px solid #393949;
}

body.sheet-darkmode .charsheet div.sheet-textHead2Col,
body.sheet-darkmode .charsheet div.sheet-textHead {
	background-color: #338;
    /* background-color: #303582; */
}

body.sheet-darkmode .charsheet input.tab {
	border:none;
}

body.sheet-darkmode .charsheet input.tab::before {
	background: linear-gradient(to top, #444, #292929, #444);
}

body.sheet-darkmode .charsheet input.tab:checked::before {
    background: linear-gradient(to top, #333, #6e6e6e, #333);
}

/* ******** ROLL TEMPLATES ******** */

	/* All roll templates (or most of them, anyway) */
.sheet-rolltemplate-sagadefault table,
.sheet-rolltemplate-attack table,
.sheet-rolltemplate-skill table,
.sheet-rolltemplate-second-wind table,
.sheet-rolltemplate-statBlock table {
    width:100%;
    font-size: 1em;
	background-color: transparent;
	color: black;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    border-collapse:separate;
    border:solid black 1px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

.sheet-rolltemplate-sagadefault th,
.sheet-rolltemplate-attack th,
.sheet-rolltemplate-skill th,
.sheet-rolltemplate-second-wind th,
.sheet-rolltemplate-statBlock th {
    background-color: #000000;
    color: #ffffff;
	text-align: center;
    line-height: 1.6em;
    font-size: 1.2em;   
    border-top-left-radius: 2.5px;
	border-top-right-radius: 2.5px;
}

.sheet-rolltemplate-sagadefault .sheet-subheader,
.sheet-rolltemplate-attack .sheet-subheader {
    background-color: #333333;
    color: #ffffff;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}

.sheet-rolltemplate-sagadefault .sheet-tcat,
.sheet-rolltemplate-attack .sheet-tcat,
.sheet-rolltemplate-skill .sheet-tcat,
.sheet-rolltemplate-second-wind .sheet-tcat,
.sheet-rolltemplate-statBlock .sheet-tcat {
    font-weight: bold;
}

.sheet-rolltemplate-sagadefault td,
.sheet-rolltemplate-attack td,
.sheet-rolltemplate-skill td,
.sheet-rolltemplate-second-wind td {
    padding: 5px;
    border: 1px solid black;
    text-align: left;
}
.sheet-rolltemplate-sagadefault tr:nth-child(odd),
.sheet-rolltemplate-attack tr:nth-child(odd),
.sheet-rolltemplate-skill tr:nth-child(odd),
.sheet-rolltemplate-second-wind tr:nth-child(odd) {
    background-color: #ffffff;
}
 
.sheet-rolltemplate-sagadefault tr:nth-child(even),
.sheet-rolltemplate-attack tr:nth-child(even),
.sheet-rolltemplate-skill tr:nth-child(even),
.sheet-rolltemplate-second-wind tr:nth-child(even) {
    background-color: #ededed;
}

		/*inline roll formatting for most templates*/
.sheet-rolltemplate-sagadefault .inlinerollresult,
.sheet-rolltemplate-attack .inlinerollresult,
.sheet-rolltemplate-skill .inlinerollresult,
.sheet-rolltemplate-second-wind .inlinerollresult {
    display: inline-block;
    min-width: 1.5em;
    text-align: center; 
    border: 2px solid #a7a8aa; /*Cool Gray 6 C*/
	border-radius: 5px;
    background-color: #000000;
    color: whitesmoke;
}
 
.sheet-rolltemplate-sagadefault .inlinerollresult.fullcrit,
.sheet-rolltemplate-attack .inlinerollresult.fullcrit,
.sheet-rolltemplate-skill .inlinerollresult.fullcrit,
.sheet-rolltemplate-second-wind .inlinerollresult.fullcrit {
    background-color: #3fb315;
}

.sheet-rolltemplate-sagadefault .inlinerollresult.fullfail,
.sheet-rolltemplate-attack .inlinerollresult.fullfail,
.sheet-rolltemplate-skill .inlinerollresult.fullfail,
.sheet-rolltemplate-second-wind .inlinerollresult.fullfail {
    background-color: #B31515;
}

.sheet-rolltemplate-sagadefault .inlinerollresult.importantroll,
.sheet-rolltemplate-attack .inlinerollresult.importantroll,
.sheet-rolltemplate-skill .inlinerollresult.importantroll,
.sheet-rolltemplate-second-wind .inlinerollresult.importantroll {
    background-color: #4A57ED;
}

.sheet-rolltemplate-sagadefault div,
.sheet-rolltemplate-attack div,
.sheet-rolltemplate-skill div,
.sheet-rolltemplate-second-wind div { 
    width:100%; 
    max-width:400px; 
}

/* INDIVIDUAL ROLL TEMPLATES*/

	/* Sheet roll template for Saga Default */
		/* There are no special elements for Saga Default template.*/

	/* Sheet roll template for Attacks */
		/* There are no special elements for Attack template.*/

	/* Sheet roll template for Skills */
.sheet-rolltemplate-skill table {
    border-radius: 5px;
}

.sheet-rolltemplate-skill th {
    border-top-left-radius: 2.5px;
	border-top-right-radius: 0px;
	text-align: center;
}

.sheet-rolltemplate-skill tr:first-child td {
    text-align: center;
    border-left: none;
	border-top-right-radius: 2.5px;
    width: 75px;
}

.sheet-rolltemplate-skill tr:last-child td {
    border-bottom-left-radius: 2.5px;
	border-bottom-right-radius: 2.5px;
}

.sheet-rolltemplate-skill tr:only-child th{
	border-bottom-left-radius: 2.5px;
}

.sheet-rolltemplate-skill tr:only-child td{
	border-top-right-radius: 2.5px;
	border-bottom-right-radius: 2.5px;
	border-bottom-left-radius: 0px;
}

	/* Sheet roll template for Second Wind */
.sheet-rolltemplate-second-wind table {
    border-radius:5px;
}
.sheet-rolltemplate-second-wind .sheet-tcat {
    font-weight: bold;
}
.sheet-rolltemplate-second-wind th {
    text-align: center;
}

.sheet-rolltemplate-second-wind tr:first-child {
	background-color: transparent;
}

.sheet-rolltemplate-second-wind tr:first-child td {
    text-align: center;
    border-left: none;
    width: 75px;
}

.sheet-rolltemplate-second-wind tr:last-child {
    border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

	/* Sheet roll template for stat block */
.sheet-rolltemplate-statBlock td {
    text-align:left;
    background-color: #ffffff;
	padding: 2px;
}
 
.sheet-rolltemplate-statBlock .inlinerollresult  {
	/* This makes the roll appear as regular text, though the formula is still displayed if hovered. */
    display: inline;
    background-color: transparent;
    font-weight: normal;
	font-size: 1em;
	padding: 0px;
    border: 0px;
}

/* ******** DARK MODE FOR ROLL TEMPLATES ******** */

.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode,
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode,
.sheet-rolltemplate-statBlock.sheet-rolltemplate-darkmode
 {
    background-color: #353535; /* This prevents colored rectangles poking through in the rounded corners. */
}

.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode th,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode th,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode th,
.sheet-rolltemplate-statBlock.sheet-rolltemplate-darkmode th {
    color: #f5f5f5;
}

.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode .sheet-subheader,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .sheet-subheader {
    background-color: #06063c;
    color: #f5f5f5;
}

.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode tr:nth-child(odd),
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode tr:nth-child(odd),
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode tr:nth-child(odd) {
    background-color: #2e2e46;
}
 
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode tr:nth-child(even),
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode tr:nth-child(even),
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode tr:nth-child(even),
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode tr:nth-child(even) {
    background-color: #404062;
}

	/* dark mode inline roll results */
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode .inlinerollresult,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode .inlinerollresult {
    border: 2px solid #732d95;
    background-color: #4a206c;
    color: #f5f5f5;
}
 
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit {
    border: 2px solid #46c419;
	background-color: #247905;
}
 
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode .inlinerollresult.fullfail,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode .inlinerollresult.fullfail {
    border: 2px solid #c41919;
	background-color: #790505;
}
 
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode .inlinerollresult.importantroll,
.sheet-rolltemplate-second-wind.sheet-rolltemplate-darkmode .inlinerollresult.importantroll {
    border: 2px solid #4a57ed;
	background-color: #3944ca;
}

	/* DARK MODE for Saga Default Roll Template */
.sheet-rolltemplate-sagadefault.sheet-rolltemplate-darkmode td {
    color: #f0f0f0;
}

	/* DARK MODE for Attack Roll Template*/
.sheet-rolltemplate-attack.sheet-rolltemplate-darkmode td {
	color: #f0f0f0;
}

	/* DARK MODE for Skill Roll Template */
.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode table {
    background-color: black;
    color: #f0f0f0;
}

.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode th {
    background-color: black;
    color: #f5f5f5;
}

.sheet-rolltemplate-skill.sheet-rolltemplate-darkmode tr:first-child td{
    background-color: #404062;
}

	/* DARK MODE for Second Wind Roll Template */

	/* DARK MODE for statBlock Template*/
.sheet-rolltemplate-statBlock.sheet-rolltemplate-darkmode td {
    background-color: #404062;
	color: #f0f0f0;
}

.sheet-rolltemplate-statBlock.sheet-rolltemplate-darkmode .inlinerollresult {
    border: none;
	background-color: transparent;
    color: #f0f0f0; /* same as text color */
}