/* ************************************************************************************************************************************************ */
/* Colours */
/* ************************************************************************************************************************************************ */
/*
#948a54 (mid brown) - table borders, headings of older parts of the sheet
#ddd9c3 (beige) - header cells, active tab button
#b6ad7c (darker beige) - inactive tab buttons
#f6f5ef (pale beige) - input control backgrounds
#e0e0e0 (light grey) - read-only cell background

#c4bc96 (slightly darker beige) - tab button borders
*/


/* ************************************************************************************************************************************************ */
/* Whole Sheet */
/* ************************************************************************************************************************************************ */

.charsheet {
	background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/Paper.jpg");
}

.sheet-demon-gate-charsheet {
	min-height: 750px;
}

.sheet-background-flex-layout {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.sheet-background-column-fixed-left,
.sheet-background-column-fixed-right {
	flex-grow: 0;
	margin-left: 10px;
	margin-right: 10px;
	width: 10px;
	min-width: 10px;
	max-width: 10px;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/border.png");
	background-repeat: repeat-y;
}

.sheet-background-column-fixed-left {
	margin-left: 5px;
	margin-right: 15px;
}

.sheet-background-column-fixed-right {
	margin-left: 15px;
	margin-right: 5px;
}

.sheet-background-column-grow {
	flex-grow: 1;
	margin: 0;
}


/* ************************************************************************************************************************************************ */
/* Tab buttons */
/* ************************************************************************************************************************************************ */

input.sheet-tab,
span.sheet-tab {
	margin-top: 10px;
}

.sheet-demon-gate-charsheet input.sheet-tab {
	width: 94px;
	height: 32px;
	cursor: pointer;
	position: relative;
	opacity: 0;
	z-index: 9999;
	margin-left: 10px;
}

span.sheet-tab {
	text-align: center;
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	color: maroon;
	border: 2px solid maroon;
	border-radius: 4px;
	background: #b6ad7c;
	width: 90px;
	height: 28px;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	margin-left: -99px;
}

div[class^="sheet-section"] {
	display: none;
}

input.sheet-tab1:checked~div.sheet-section-core,
input.sheet-tab2:checked~div.sheet-section-skills,
input.sheet-tab3:checked~div.sheet-section-combat,
input.sheet-tab4:checked~div.sheet-section-gear,
input.sheet-tab5:checked~div.sheet-section-mystic,
input.sheet-tab6:checked~div.sheet-section-abilities,
input.sheet-tab7:checked~div.sheet-section-reputation,
input.sheet-tab8:checked~div.sheet-section-notes {
	display: block;
}

input.sheet-tab:checked+span {
	background: #ddd9c3;
}


/* ************************************************************************************************************************************************ */
/* Headings */
/* ************************************************************************************************************************************************ */

h1,
h2,
h3 {
	width: 100%;
	text-align: center;
}

h1 {
	height: 40px;
	line-height: 40px;
	color: #ddd9c3;
	background-color: #590902;
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/runes-dark.png');
	background-position-y: center;
	background-repeat: repeat-x;
	border: 2px solid #590902;
	border-radius: 4px;
	font-size: 20px;
}

h2,
h3 {
	color: maroon;
	background-color: #ddd9c3;
	font-weight: normal;
	font-size: 16px;
	height: 28px;
	line-height: 28px;
}

h2 {
	padding-top: 2px;
	padding-bottom: 2px;
}

h3 {
	text-align: left;
}


/* ************************************************************************************************************************************************ */
/* Expand/collapse (custom checkbox plus hiding a section)*/
/* ************************************************************************************************************************************************ */

.sheet-collapse-wrapper {
	border: 2px solid #948a54;
	margin-top: 20px;
}

/* Hide the browser's default checkbox */
input.sheet-expand-collapse-checkbox {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	margin-left: 7px;
	margin-top: 4px;
	width: 16px;
}

/* Show the checkmark when checked */
input.sheet-expand-collapse-checkbox:checked~.sheet-expand-collapse-symbol:after {
	display: block;
	height: 24px;
	width: 20px;
	margin-left: 4px;
	content: " ";
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/expanded.png');
	background-position: center;
	background-repeat: no-repeat;
}

/* Style the checkmark/indicator */
input.sheet-expand-collapse-checkbox~.sheet-expand-collapse-symbol:after {
	display: block;
	height: 24px;
	width: 20px;
	margin-left: 4px;
	content: " ";
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/collapsed.png');
	background-position: center;
	background-repeat: no-repeat;
}

input[type="checkbox"].sheet-expand-collapse-checkbox~.sheet-collapsible {
	display: none;
}

input[type="checkbox"].sheet-expand-collapse-checkbox:checked~.sheet-collapsible {
	display: block;
}

/* Designed to spill over on to the expand/collapse element below */
.sheet-table-header-collapse {
	height: 5px;
	line-height: 30px;
	padding: 0;
}

.sheet-collapse-section {
	background-color: #ddd9c3;
}

.sheet-collapsible table,
table.sheet-embedded-table {
	border: 0;
}



/* ************************************************************************************************************************************************ */
/* Flexbox columns */
/* ************************************************************************************************************************************************ */

.sheet-flex-section,
.sheet-flex-section-centre,
.sheet-flex-section-no-margin {
	margin-left: -10px;
	margin-right: -10px;
	display: flex;
	flex-wrap: wrap;
}

.sheet-flex-section,
.sheet-flex-section-no-margin {
	justify-content: space-between;
}

.sheet-flex-section-centre {
	justify-content: space-around;
}

.sheet-flex-section {
	margin-top: 20px;
}

.sheet-column-fixed {
	flex-grow: 0;
	margin: 10px;
}

.sheet-column-grow {
	flex-grow: 1;
	margin: 10px;
}

.sheet-flex-form-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.sheet-flex-form-grow {
	flex-grow: 1;
}

.sheet-flex-form-fixed {
	flex-grow: 0;
	padding-left: 2px;
	padding-right: 2px;
}

.sheet-centred-section {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}


/* ************************************************************************************************************************************************ */
/* Tables */
/* ************************************************************************************************************************************************ */

table {
	width: 100%;
	border: 2px solid #948a54;
	background-color: #ddd9c3;
	table-layout: auto;
}

th,
td {
	border: 1px solid #c4bc96;
}

th {
	max-width: max-content;
	white-space: nowrap;
	font-size: 11px;
	font-weight: bold;
	color: dimgray;
	padding-left: 10px;
	padding-right: 10px;
}

th.sheet-small-table-header {
	font-size: 0.7em;
	font-weight: bold;
	text-align: center;
	height: 16px;
	line-height: normal;
}

td.sheet-small-text,
th.sheet-small-text {
	text-align: center;
	height: 28px;
}

td.sheet-small-text {
	font-size: 0.7em;
	background-color: #f6f5ef;
}

th.sheet-small-text {
	font-size: 0.8em;
	font-weight: bold;
}

td.sheet-cell-numeric,
td.sheet-cell-numeric-readonly {
	text-align: center;
	max-width: 50px;
}

td.sheet-cell-numeric {
	background-color: #f6f5ef;
}

.sheet-header-column {
	width: 15em;
}

.sheet-button-cell {
	text-align: center;
}


/* ************************************************************************************************************************************************ */
/* Entry controls */
/* ************************************************************************************************************************************************ */

input,
select,
textarea,
.sheet-input-like,
.sheet-input-like-no-padding {
	width: 100%;
	background-color: #f6f5ef;
}

.sheet-demon-gate-charsheet input[type=number],
.sheet-demon-gate-charsheet input[type=text],
.sheet-demon-gate-charsheet select {
	border: 0;
	border-radius: 0;
}

input[type="number"].sheet-totalfield,
input[type="text"].sheet-totalfield {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: dimgray;
	background-color: #e0e0e0;
	border: 0;
	border-radius: 0;
}

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

td input[type=number] {
	min-width: 2.2em;
	text-align: center;
}

.sheet-input-narrow {
	width: 5em;
	min-width: 5em;
	max-width: 5em;
}

.sheet-read-only-field,
td.sheet-cell-numeric-readonly,
td input:read-only {
	color: lightslategray;
	background-color: #e0e0e0;
}

.sheet-text-centred,
td input[type=text].sheet-text-centred {
	text-align: center;
}

.sheet-demon-gate-charsheet input[type=number].sheet-numeric-wide {
	text-align: center;
	width: 100%;
}

.sheet-tall-control,
input.sheet-tall-control {
	height: 36px;
	line-height: 36px;
	font-size: 16px;
}

td input[type=text].sheet-dice-field {
	min-width: 7em;
	text-align: center;
}

.sheet-input-like {
	padding-left: 4px;
}

button.sheet-button,
button.btn {
	border: 2px solid maroon;
	border-radius: 4px;
	color: maroon;
	text-shadow: none;
}

button.btn {
	background: #ddd9c3;
}

.sheet-demon-gate-charsheet button.sheet-display-text-button[type=roll]:before,
.sheet-demon-gate-charsheet button.sheet-display-text-button-small[type=roll]:before {
	content: "";
}

button.sheet-display-text-button-small {
	height: 20px;
}

.sheet-demon-gate-charsheet button.sheet-display-text-button-small[type=roll] {
	font-size: 0.8em;
}

.sheet-demon-gate-charsheet button.sheet-display-text-button[type=roll] {
	font-size: 1em;
}


/* ************************************************************************************************************************************************ */
/* Top section of first sheet */
/* ************************************************************************************************************************************************ */
.sheet-demon-gate-logo {
	height: 116px;
}

.sheet-demon-gate-charsheet table td input {
	height: 28px;
	line-height: 28px;
	margin: 0;
}

.sheet-demon-gate-charsheet table td select {
	height: 36px;
	line-height: 36px;
	margin: 0;
}

.sheet-input-wide {
	min-width: 12em;
}

.sheet-input-like-no-padding input.sheet-input-narrow {
	max-width: 7.5em;
}

.sheet-demon-gate-charsheet td input.sheet-prominent-label,
.sheet-demon-gate-charsheet td input.sheet-prominent-field {
	height: 72px;
}

td input.sheet-prominent-field {
	font-size: 30px;
	text-align: center;
}

.sheet-vertical-margin {
	margin-top: 10px;
	margin-bottom: 10px;
}

.sheet-vertical-margin-moderate {
	margin-top: 20px;
	margin-bottom: 20px;
}

input[type=number].sheet-input-split {
	max-width: 40%;
	min-width: 1.1em;
}

td .sheet-input-spacer {
	min-width: 1.1em;
	text-align: center;
}

.sheet-beauty-table-spacer-cell {
	min-width: 19.5em;
}


/* ************************************************************************************************************************************************ */
/* HP, Mana etc. */
/* ************************************************************************************************************************************************ */

.sheet-column-prominent-stat {
	flex-grow: 0;
	width: 120px;
	margin: 10px;
}

.sheet-demon-gate-charsheet td input.sheet-extra-prominent-field {
	font-size: 36px;
	height: 84px;
}


/* ************************************************************************************************************************************************ */
/** Physical and mental conditions, including gradient colours */
/* ************************************************************************************************************************************************ */

.sheet-physical-condition-0,
.sheet-physical-condition-1,
.sheet-physical-condition-2,
.sheet-physical-condition-3,
.sheet-physical-condition-4,
.sheet-physical-condition-5,
.sheet-physical-condition-6,
.sheet-mental-condition-0,
.sheet-mental-condition-1,
.sheet-mental-condition-2,
.sheet-mental-condition-3,
.sheet-mental-condition-4,
.sheet-mental-condition-5,
.sheet-mental-condition-6 {
	width: 14%;
}

tr td.sheet-physical-condition-0,
tr td.sheet-mental-condition-0 {
	background-color: white;
}

tr td.sheet-physical-condition-1 {
	background-color: #ffcccc;
}

tr td.sheet-physical-condition-2 {
	background-color: #ff9999;
}

tr td.sheet-physical-condition-3 {
	background-color: #ff6666;
}

tr td.sheet-physical-condition-4 {
	background-color: #ff3333;
}

tr td.sheet-physical-condition-5 {
	background-color: #cc0000;
}

tr td.sheet-physical-condition-6 {
	background-color: #800000;
}

tr td.sheet-mental-condition-1 {
	background-color: #cce0ff;
}

tr td.sheet-mental-condition-2 {
	background-color: #80b3ff;
}

tr td.sheet-mental-condition-3 {
	background-color: #4d94ff;
}

tr td.sheet-mental-condition-4 {
	background-color: #0066ff;
}

tr td.sheet-mental-condition-5 {
	background-color: #0047b3;
}

tr td.sheet-mental-condition-6 {
	background-color: #003380;
}


/* ************************************************************************************************************************************************ */
/* Skills tab
/* ************************************************************************************************************************************************ */

.sheet-top-margin {
	margin-top: 40px;
}

.charsheet select.sheet-skilldescshort {
	width: 4.2em;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.sheet-skillname,
.sheet-skillname-indented {
	padding-right: 10px;
	width: 9em;
}

.sheet-skillname {
	padding-left: 10px;
}

.sheet-skillname-indented {
	padding-left: 30px;
}

.sheet-skillname-input-cell {
	width: 10.5em;
}


/* ************************************************************************************************************************************************ */
/* Abilities and notes tabs
/* ************************************************************************************************************************************************ */
.sheet-subsection-header,
.sheet-subsection-header-wide {
	width: 100%;
	height: 36px;
	line-height: 36px;
	color: dimgray;
	background-color: #ddd9c3;
	text-align: center;
	font-size: 16px;
}

.sheet-subsection-header-wide {
	min-width: 15em;
	border: 2px solid #c4c1b2;
	margin-bottom: 5px;
}

textarea.sheet-text-area-full,
textarea.sheet-text-area-large,
textarea.sheet-standalone-textarea,
textarea.sheet-textarea-gems,
textarea.sheet-textarea-equipment {
	box-sizing: border-box;
	resize: none;
	width: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

textarea.sheet-text-area-full {
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	height: 150px;
}

textarea.sheet-text-area-large {
	margin-top: 0;
	border: 0;
	border-radius: 0;
	height: 300px;
}

.sheet-repeating-section {
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #ddd9c3;
	border: 2px solid #948a54;
}

/* This could probably be added to h2 (and maybe h1?) with a bit of reorg */
.sheet-spacer-top-margin {
	margin-top: 20px;
}

h1.sheet-spacer-top-margin {
	margin-top: 40px;
}

.sheet-standalone-textarea,
.sheet-textarea-gems,
.sheet-textarea-equipment {
	margin-top: 20px;
	border: 2px solid #948a54;
	border-radius: 0;
}

textarea.sheet-standalone-textarea {
	height: 150px;
}

textarea.sheet-textarea-gems {
	height: 530px;
}

textarea.sheet-textarea-equipment {
	height: 570px;
}


/* TODO: This is a hack - sorting out heading spacing properly and removing it from flex sections should allow this to be removed */
.sheet-remove-margin-bottom {
	margin-bottom: -10px;
}



/* ************************************************************************************************************************************************ */
/* Mysic tab
/* ************************************************************************************************************************************************ */

.sheet-religion-table {
	border: 2px solid #948a54;
}

.sheet-religion-table table {
	border: 0;
}

.sheet-religion-table table td {
	border-right: 0;
}

.sheet-spiritual-influence-header {
	border: 2px solid #948a54;
}

.sheet-spiritual-influence-image {
	background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/Circle.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 271px;
	width: 288px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.sheet-spiritual-influence-image input[type=number].sheet-spiritual-influence {
	width: 2.2em;
	font-size: 18px;
	text-align: center;
	border-radius: 20px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	border: 2px solid maroon;
}

textarea.sheet-spell-description,
textarea.sheet-chi-ability-description {
	box-sizing: border-box;
	resize: none;
	width: 100%;
	min-width: 30em;
	margin: 0;
}

textarea.sheet-spell-description {
	height: 120px;
}

textarea.sheet-chi-ability-description {
	height: 105px;
}

th.sheet-cell-moderate-width {
	width: 10em;
}

th.sheet-cell-narrow {
	width: 4em;
}

tr.sheet-spell-padding-row {
	height: 36px;
}

tr.sheet-spell-spacer-row {
	height: 4px;
}

tr.sheet-spell-spacer-row td {
	background-color: #948a54;
}



/* ************************************************************************************************************************************************ */
/* Roll Templates
/* ************************************************************************************************************************************************ */


.sheet-rolltemplate-text .sheet-template-container {
	width: 100%;
}

.sheet-rolltemplate-text .sheet-template-box,
.sheet-rolltemplate-class-ability-text .sheet-template-box,
.sheet-rolltemplate-percentile .sheet-template-box,
.sheet-rolltemplate-attack .sheet-template-box,
.sheet-rolltemplate-damage .sheet-template-box,
.sheet-rolltemplate-roll .sheet-template-box,
.sheet-rolltemplate-spell-description .sheet-template-box,
.sheet-rolltemplate-spell-cast .sheet-template-box,
.sheet-rolltemplate-spell-effect .sheet-template-box,
.sheet-rolltemplate-simple .sheet-template-box,
.sheet-rolltemplate-two-part .sheet-template-box {
	width: 100%;
	border: 2px solid #948a54;
	background-color: #f6f5ef;
}

.sheet-rolltemplate-text .sheet-template-title,
.sheet-rolltemplate-class-ability-text .sheet-template-title,
.sheet-rolltemplate-percentile .sheet-template-title,
.sheet-rolltemplate-attack .sheet-template-title,
.sheet-rolltemplate-damage .sheet-template-title,
.sheet-rolltemplate-roll .sheet-template-title,
.sheet-rolltemplate-spell-description .sheet-template-title,
.sheet-rolltemplate-spell-cast .sheet-template-title,
.sheet-rolltemplate-spell-effect .sheet-template-title,
.sheet-rolltemplate-simple .sheet-template-title,
.sheet-rolltemplate-two-part .sheet-template-title {
	width: 100%;
	text-align: center;
	color: maroon;
	background-color: #ddd9c3;
	font-weight: normal;
	font-size: 16px;
	padding: 8px 0;
}

.sheet-rolltemplate-text .sheet-template-subtitle,
.sheet-rolltemplate-class-ability-text .sheet-template-subtitle,
.sheet-rolltemplate-percentile .sheet-template-subtitle,
.sheet-rolltemplate-attack .sheet-template-subtitle,
.sheet-rolltemplate-damage .sheet-template-subtitle,
.sheet-rolltemplate-roll .sheet-template-subtitle,
.sheet-rolltemplate-spell-cast .sheet-template-subtitle,
.sheet-rolltemplate-spell-effect .sheet-template-subtitle,
.sheet-rolltemplate-simple .sheet-template-subtitle,
.sheet-rolltemplate-two-part .sheet-template-subtitle {
	width: 100%;
	text-align: center;
	color: maroon;
	background-color: #ddd9c3;
	font-weight: normal;
	font-size: 12px;
	padding-bottom: 2px;
}

.sheet-rolltemplate-class-ability-text .sheet-template-hr,
.sheet-rolltemplate-percentile .sheet-template-hr,
.sheet-rolltemplate-attack .sheet-template-hr,
.sheet-rolltemplate-spell-description .sheet-template-hr,
.sheet-rolltemplate-spell-cast .sheet-template-hr,
.sheet-rolltemplate-spell-effect .sheet-template-hr,
.sheet-rolltemplate-two-part .sheet-template-hr {
	width: 100%;
	height: 24px;
	background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/roll-divider.png');
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
	background-size: contain;
	padding: 0;
}

.sheet-rolltemplate-text .sheet-template-text,
.sheet-rolltemplate-class-ability-text .sheet-template-text,
.sheet-rolltemplate-percentile .sheet-template-text,
.sheet-rolltemplate-spell-description .sheet-template-text {
	font-size: 13px;
	padding: 4px;
}

.sheet-rolltemplate-class-ability-text th,
.sheet-rolltemplate-percentile th,
.sheet-rolltemplate-spell-description th,
.sheet-rolltemplate-spell-cast th,
.sheet-rolltemplate-spell-effect th {
	font-size: 13px;
	padding: 4px;
	font-weight: bold;
}

.sheet-rolltemplate-attack th,
.sheet-rolltemplate-damage th,
.sheet-rolltemplate-roll th {
	font-size: 16px;
	padding: 10px;
	font-weight: bold;
}

.sheet-rolltemplate-class-ability-text td,
.sheet-rolltemplate-percentile td,
.sheet-rolltemplate-spell-description td,
.sheet-rolltemplate-spell-cast td,
.sheet-rolltemplate-spell-effect td {
	font-size: 13px;
	text-align: center;
	min-width: 3em;
	padding: 4px;
}

.sheet-rolltemplate-attack td,
.sheet-rolltemplate-damage td,
.sheet-rolltemplate-roll td {
	font-size: 16px;
	text-align: center;
	min-width: 3em;
	padding: 10px;
}

.sheet-rolltemplate-percentile .sheet-template-success,
.sheet-rolltemplate-percentile .sheet-template-failure {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-top: 4px;
	text-align: center;
}

.sheet-rolltemplate-percentile .sheet-template-success {
	color: darkgreen;
	font-size: 20px;
}

.sheet-rolltemplate-percentile .sheet-template-failure {
	color: maroon;
	font-size: 20px;
}

.sheet-rolltemplate-simple .sheet-template-text-prominent,
.sheet-rolltemplate-two-part .sheet-template-text-prominent {
	font-size: 16px;
	padding: 10px;
	text-align: center;
}

.sheet-rolltemplate-two-part .sheet-template-text-supplementary {
	font-size: 13px;
	padding: 10px;
	text-align: center;
}

/* Dark mode support */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-box,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-box {
	border: 2px solid #222222;
	background-color: #555555;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-title,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-subtitle,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-subtitle {
	color: #ddd9c3;
	background-color: #590902;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult {
	background-color: #353535;
	border: 2px solid #222222;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult {
	background-color: #353535;
	border: 2px solid #222222;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult.fullfail {
	border-color: #b30000;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult.fullcrit {
	border-color: #028502;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-success {
	color: #05AD05;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-failure {
	color: #f80303;
}