roll20-character-sheets/Demon Gate/DemonGate.css

/* ************************************************************************************************************************************************ */
/* 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
*/

/* Theme variables: modify these to change the sheet appearance quickly */
:root {
    /* New semantic theme tokens (use these going forward) */
    --dg-border: #948a54; /* table outer borders, headings */
    --dg-table-cell-border: #c9c2a6; /* table cell borders */
    --dg-surface: #ddd9c3; /* header cells, active tab button */
    --dg-surface-variant: #b6ad7c; /* inactive tab buttons */
    --dg-control-bg: #f6f5ef; /* input control backgrounds */
    --dg-muted-bg: #e0e0e0; /* read-only cell background */
    --dg-primary: maroon; /* primary accent / text */
    --dg-primary-dark: #590902; /* deep accent used in headings */
    --dg-text-muted: dimgray; /* muted text color */

    /* Dark mode tokens (semantic names) */
    --dg-dark-border: #222222; /* border color in dark mode */
    --dg-dark-surface: #555555; /* dark-mode surface/background */
    --dg-dark-muted: #353535;
    --dg-success: #05ad05;
    --dg-failure: #f80303;
    --dg-success-border: #028502;
    --dg-failure-border: #b30000;

    /* Condition level colors (progressive severity scales) */
    --dg-condition-none: white; /* no condition (baseline) */

    --dg-physical-1: #ffcccc; /* lightest physical condition */
    --dg-physical-2: #ff9999;
    --dg-physical-3: #ff6666;
    --dg-physical-4: #ff3333;
    --dg-physical-5: #cc0000;
    --dg-physical-6: #800000; /* darkest physical condition */

    --dg-mental-1: #cce0ff; /* lightest mental condition */
    --dg-mental-2: #80b3ff;
    --dg-mental-3: #4d94ff;
    --dg-mental-4: #0066ff;
    --dg-mental-5: #0047b3;
    --dg-mental-6: #003380; /* darkest mental condition */
}

/* ************************************************************************************************************************************************ */
/* 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;
    width: 10px;
    min-width: 10px;
    color: var(--dg-primary);
    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: var(--dg-primary);
    border: 2px solid var(--dg-primary);
    border-radius: 4px;
    background: var(--dg-surface-variant);
    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: var(--dg-surface);
}

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

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

h1 {
    height: 40px;
    line-height: 40px;
    color: var(--dg-surface);
    background-color: var(--dg-primary-dark);
    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 var(--dg-primary-dark);
    border-radius: 4px;
    font-size: 20px;
}

h2,
h3 {
    color: var(--dg-primary);
    background-color: var(--dg-surface);
    font-weight: normal;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
}

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

h3 {
    text-align: left;
}

.sheet-info {
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}

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

.sheet-collapse-wrapper {
    border: 2px solid var(--dg-border);
    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: var(--dg-surface);
}

.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 var(--dg-border);
    background-color: var(--dg-surface);
    table-layout: auto;
}

th,
td {
    border: 1px solid var(--dg-table-cell-border);
}

th {
    max-width: max-content;
    white-space: nowrap;
    font-size: 11px;
    font-weight: bold;
    color: var(--dg-text-muted);
    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: var(--dg-control-bg);
}

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

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

td.sheet-cell-numeric {
    background-color: var(--dg-control-bg);
}

.sheet-cell-right {
    text-align: right;
    padding-right: 5px;
}

.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: var(--dg-control-bg);
}

.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: var(--dg-text-muted);
    background-color: var(--dg-muted-bg);
    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: var(--dg-muted-bg);
}

.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 var(--dg-primary);
    border-radius: 4px;
    color: var(--dg-primary);
    text-shadow: none;
}

button.btn {
    background: var(--dg-surface);
}

.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: var(--dg-condition-none);
}

tr td.sheet-physical-condition-1 {
    background-color: var(--dg-physical-1);
}

tr td.sheet-physical-condition-2 {
    background-color: var(--dg-physical-2);
}

tr td.sheet-physical-condition-3 {
    background-color: var(--dg-physical-3);
}

tr td.sheet-physical-condition-4 {
    background-color: var(--dg-physical-4);
}

tr td.sheet-physical-condition-5 {
    background-color: var(--dg-physical-5);
}

tr td.sheet-physical-condition-6 {
    background-color: var(--dg-physical-6);
}

tr td.sheet-mental-condition-1 {
    background-color: var(--dg-mental-1);
}

tr td.sheet-mental-condition-2 {
    background-color: var(--dg-mental-2);
}

tr td.sheet-mental-condition-3 {
    background-color: var(--dg-mental-3);
}

tr td.sheet-mental-condition-4 {
    background-color: var(--dg-mental-4);
}

tr td.sheet-mental-condition-5 {
    background-color: var(--dg-mental-5);
}

tr td.sheet-mental-condition-6 {
    background-color: var(--dg-mental-6);
}

/* ************************************************************************************************************************************************ */
/* 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: var(--dg-text-muted);
    background-color: var(--dg-surface);
    text-align: center;
    font-size: 16px;
}

.sheet-subsection-header-wide {
    min-width: 15em;
    border: 2px solid var(--dg-table-cell-border);
    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: var(--dg-surface);
    border: 2px solid var(--dg-border);
}

/* 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 var(--dg-border);
    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 var(--dg-border);
}

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

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

.sheet-spiritual-influence-header {
    border: 2px solid var(--dg-border);
}

.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 var(--dg-primary);
}

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: var(--dg-border);
}

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

/* Roll template CSS variables - Roll20 requires these to be defined separately */
.sheet-rolltemplate-text,
.sheet-rolltemplate-class-ability-text,
.sheet-rolltemplate-percentile,
.sheet-rolltemplate-attack,
.sheet-rolltemplate-damage,
.sheet-rolltemplate-roll,
.sheet-rolltemplate-spell-description,
.sheet-rolltemplate-spell-cast,
.sheet-rolltemplate-spell-effect,
.sheet-rolltemplate-simple,
.sheet-rolltemplate-two-part {
    --dg-roll-border: #948a54; /* Keep in sync with --dg-border */
    --dg-roll-surface: #ddd9c3; /* Keep in sync with --dg-surface */
    --dg-roll-control-bg: #f6f5ef; /* Keep in sync with --dg-control-bg */
    --dg-roll-primary: maroon; /* Keep in sync with --dg-primary */
    --dg-roll-primary-dark: #590902; /* Keep in sync with --dg-primary-dark */
    --dg-roll-dark-border: #222222; /* Keep in sync with --dg-dark-border */
    --dg-roll-dark-surface: #555555; /* Keep in sync with --dg-dark-surface */
    --dg-roll-dark-muted: #353535; /* Keep in sync with --dg-dark-muted */
    --dg-roll-success: #05ad05; /* Keep in sync with --dg-success */
    --dg-roll-failure: #f80303; /* Keep in sync with --dg-failure */
    --dg-roll-success-border: #028502; /* Keep in sync with --dg-success-border */
    --dg-roll-failure-border: #b30000; /* Keep in sync with --dg-failure-border */
}

.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 var(--dg-roll-border);
    background-color: var(--dg-roll-control-bg);
}

.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: var(--dg-roll-primary);
    background-color: var(--dg-roll-surface);
    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: var(--dg-roll-primary);
    background-color: var(--dg-roll-surface);
    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: var(--dg-roll-primary);
    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 var(--dg-roll-dark-border);
    background-color: var(--dg-roll-dark-surface);
}

.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: var(--dg-roll-surface);
    background-color: var(--dg-roll-primary-dark);
}
.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: var(--dg-roll-dark-muted);
    border: 2px solid var(--dg-roll-dark-border);
}

.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: var(--dg-roll-dark-muted);
    border: 2px solid var(--dg-roll-dark-border);
}

.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: var(--dg-roll-failure-border);
}

.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: var(--dg-roll-success-border);
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-success {
    color: var(--dg-roll-success);
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-failure {
    color: var(--dg-roll-failure);
}