CSS v1.82x BETA

@import url('https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Mono|Open+Sans|Lato&display=swap');

.charsheet summary {
    display: list-item;
    opacity: .35;
    font-size: 1.5rem;
}

.charsheet summary > * {
    display: inline;
}

.charsheet div.npc-statblock-row:hover + details summary {
    opacity: 1;
}

.charsheet summary::marker {
    font-family: 'Pictos';
    content: 'y';
}

.charsheet .section-config + div details summary::marker {
    font-family: revert;
    content: revert;
}

.charsheet details.table-cell,
.charsheet span.table-cell details {
  margin: 4px 0 0 4px;
  width: 90%;
}

.charsheet summary:hover,
.charsheet details:hover {
    color: #f00;
    cursor: pointer;
    opacity: 1;
}

.charsheet summary + .details-box {
    align-items: center;
    background-color: #ffffee;
    border-radius: 6px;
    border: 1px solid grey;
    color: initial;
    display: inline-flex;
    justify-content: space-around;
    margin-top: 4px;
    padding: 0 2px 0 2px;
}

.charsheet .details-box .small-label2 {
    height: auto;
    display: inline-grid;
}

.charsheet html,
.charsheet .pf-wrapper,
.sheet-rolltemplate-pf_generic,
.sheet-rolltemplate-pf_ability,
.sheet-rolltemplate-pf_defense,
.sheet-rolltemplate-pf_attack,
.sheet-rolltemplate-pf_spell,
.sheet-rolltemplate-pf_block {
    box-sizing: border-box;
}

.charsheet .section-roll_templates {
    display: none;
    opacity: 0;
    height: 1em;
    overflow: hidden;
}

.charsheet *,
.charsheet *::after,
.charsheet *::before {
    box-sizing: inherit;
}

.charsheet input,
.charsheet .pf-wrapper input {
    height: initial;
}

.charsheet b {
    font-weight: bold;
}

.charsheet label {
    display: inline-block;
    font-size: inherit;
    font-weight: bold;
    line-height: 1em;
    margin-bottom: initial;
    padding-right: initial;
    position: relative;
    text-align: center;
    width: initial;
}

.charsheet select {
    cursor: pointer;
    margin: initial;
    padding-top: 0;
    padding: initial;
    width: initial;
}

.charsheet textarea {
    height: initial;
    overflow-x: hidden;
    overflow-y: auto;
    resize: initial;
}

.charsheet button,
.charsheet button:hover,
.charsheet button:active {
    background-image: initial;
}

.charsheet button[type="roll"] {
    margin-left: initial;
    margin-right: initial;
    text-shadow: none;
}

.charsheet button[type="roll"]:before {
    vertical-align: middle;
    font-size: 1.2em;
}

.charsheet h1 {
    font-size: 1.5rem;
    line-height: 1em;
    clear: both;
    text-align: center;
    display: block;
    width: 100%;
    min-height: 1.1em;
    background-color: Black;
    color: White;
    padding: .25em 0 .125em 0;
    margin-bottom: .15em;
}

.charsheet h2,
.charsheet h3 {
    line-height: 1.4em;
    height: 1.4em;
    margin-top: .33em;
    font-size: 1.3rem;
}

.charsheet h4,
.charsheet h5,
.charsheet h6 {
    line-height: 1em;
    font-size: 1.3rem;
}

.charsheet .pf-wrapper {
    width: 100%;
    min-width: 822px;
    margin-top: -1rem;
}

/* standalone generic toggles */
.charsheet .wounds-show,
.charsheet .mythic-show,
.charsheet .psionic-show,
.charsheet .racial-traits-show,
.charsheet .traits-show,
.charsheet .featlist-show,
.charsheet .classfeatures-show,
.charsheet .oldslas-show,
.charsheet .nextitem-show,
.charsheet .use-size-show,
.charsheet .repeating-sect-show,
.charsheet .advanced-macro-show,
.charsheet .buff-exists,
.charsheet .condition-exists,
.charsheet .horror-show,
.charsheet .section-state,
.charsheet .bg-show,
.charsheet .unchained-show,
.charsheet .consolidated-show,
.charsheet .tabcopy,
.charsheet .error-show,
.charsheet .warn-show,
.charsheet .error-mshow,
.charsheet .warn-mshow {
    display: none;
}

.charsheet .clickheader {
    display: inline;
}

/* turn off spinners for disabled number fields in chrome */
.charsheet input[type="number"].calc:hover,
.charsheet input[type="number"].calc:focus,
.charsheet input[type="number"].calc,
.charsheet input[type="number"]:disabled {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* turn off spinners for all number field in firefox */
.charsheet input[type="number"] {
    -moz-appearance: textfield !important;
    -moz-padding-end: .5em;
    padding-inline-end: .5em;
}

.charsheet input[type="text"],
.charsheet input[type="number"] {
    border: 0 solid #666;
    border-bottom-width: 0.1rem;
    margin-top: 0.1rem;
}

.charsheet input[type="text"] {
    width: 100%;
    min-width: 3em;
}

.charsheet input[type="text"],
.charsheet input[type="number"],
.charsheet textarea {
    color: #222;
    background-color: white;
    font-style: normal;
}

.charsheet .calc.bigger-total,
.charsheet .skills input[type="number"].calc.bigger-total,
.charsheet .narrow-numbers .calc.bigger-total,
.charsheet div.save > span.table-cell > input[type="number"].calc.bigger-total,
.charsheet span.number > input[type="text"].calc.bigger-total,
.charsheet span.number > input[type="number"].calc.bigger-total,
.charsheet label.small-label2 > input[type="number"].calc.bigger-total {
    font-size: 1.65rem;
    font-weight: bold;
    text-align: center;
    padding: 0 0 2px 4px;
    margin: 0 .25rem 0 .25rem;
    height: 2.25rem;
    width: 3rem;
    min-width: 2.5rem;
    max-width: 3.5rem;
    box-sizing: content-box;
    border: 1px solid gray;
    border-radius: 6px;
}

.charsheet .not-selectable {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    display: inline-block;
    vertical-align: bottom;
    height: 1.75em;
}

.charsheet .selectable,
.charsheet input[type="text"],
.charsheet input[type="number"],
.charsheet textarea,
.charsheet input[readonly],
.charsheet input[disabled] {
    background-color: transparent;
    color: inherit;
    cursor: text;
    pointer-events: auto;
    user-select: text;
}

.charsheet .progress-icon {
    position: absolute;
    z-index: 5;
    top: 4em;
    color: red;
    background-color: white;
}

.charsheet .half,
.charsheet .desc,
.charsheet .macro-text,
.charsheet .notes {
    height: 6em;
    resize: vertical;
    width: 100%;
    margin: 0;
    display: block;
    clear: both;
}

.charsheet .inline-textarea,
.charsheet .macro-text-inline,
.charsheet .skill-macro-text {
    height: 2.15em;
    min-height: 2.15em;
    width: calc(100% - 4px);
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

/* macro-text field pop-up */

.charsheet .skills .table-row span.table-cell > textarea:focus,
.charsheet details[open] summary + textarea.skill-macro-text {
    background-color: #f0f8ff;
    color: revert;
    display: block;
    height: 10em;
    left: 1em;
    position: absolute;
    width: calc(100% - 2em);
    word-break: normal;
    z-index: 4;
}

.charsheet .skills .table-row span.table-cell > textarea:focus {
    height: 4em;
    left: auto;
    margin-top: -1em;
    right: 2em;
    width: 33%;
    z-index: 5;
}

.charsheet .skills .table-row input.macro-text-inline:focus {
    margin-top: -1em;
}

.charsheet .abilities label.small-label2.linked-tablecell:focus-within::before {
    height: 14px;
}

.charsheet .abilities .linked-tablecell:focus-within::before,
.charsheet .abilities .small-label2.entry-med:focus-within::before,
.charsheet .section-abilities div.small-label2.entry-med:focus-within::before,
.charsheet .attacks label.small-label2.entry-short.highlight:focus-within::before,
.charsheet .items label.small-label2.entry-med:focus-within::before,
.charsheet .section-spells label.small-label2.entry-med:focus-within::before {
    content: '...';
    display: inline-block;
    position: relative;
    width: 7em;
    height: 24px;
    visibility: hidden;
}

.charsheet .abilities input.macro-text-inline:focus,
.charsheet .section-abilities input.macro-text-inline:focus,
.charsheet .attack-grid input.macro-text-inline:focus,
.charsheet .attacks label > input.macro-text-inline:focus,
.charsheet .defense-grid input.macro-text-inline:focus,
.charsheet .items input.macro-text-inline:focus,
.charsheet .items textarea.macro-text-inline:focus,
.charsheet .saves input.macro-text-inline:focus,
.charsheet .sect-buff input.macro-text-inline:focus,
.charsheet .section-core input.macro-text-inline:focus,
.charsheet .section-npc input.macro-text-inline:focus,
.charsheet .section-spells .macro-text-inline:focus,
.charsheet .section-spells input.macro-text-inline:focus,
.charsheet .skills input.macro-text-inline:focus {
    background-color: #f0f8ff;
    color: revert;
    display: block;
    height: 2.85em;
    margin: 0;
    max-width: none;
    position: absolute;
    width: 26em;
    word-break: normal;
    z-index: 4;
}

.charsheet input.macro-text-inline.float-right:focus,
.charsheet .macro-text-inline.float-right:focus {
    left: auto;
    right: 1em;
}

.charsheet .both {
    resize: both;
}

.charsheet .half {
    height: 3em;
}

/* keeps textarea and readonly number attribute to right inline with each other in one .table cell */
.charsheet .small-label2.linked-tablecell,
.charsheet .table-cell.linked-tablecell {
    min-width: 8em;
    white-space: nowrap;
}

.charsheet .table-cell.linked-tablecell-short {
    width: 7.8em;
    min-width: 6.5em;
    white-space: nowrap;
}

.charsheet .linked-fields .macro-text-inline.linked-cellfield,
.charsheet .linked-tablecell select.linked-cellfield,
.charsheet .linked-tablecell .macro-text-inline.linked-cellfield {
    display: inline-block;
    max-width: none;
    min-width: auto;
    vertical-align: middle;
    width: 7em;
}

.charsheet .linked-tablecell-short select.linked-cellfield,
.charsheet .linked-tablecell-short .macro-text-inline.linked-cellfield {
    width: calc(100% - 2.9em);
    max-width: calc(100% - 2.9em);
}

.charsheet .linked-fields.small-label2 input[type="number"],
.charsheet .linked-fields.small-label2 select,
.charsheet .linked-fields.small-label2 textarea,
.charsheet .linked-fields.small-label2 .divider-db-lg,
.charsheet .linked-fields.small-label2 .divider-db,
.charsheet .linked-tablecell.small-label2 input[type="number"],
.charsheet .linked-tablecell.small-label2 select,
.charsheet .linked-tablecell.small-label2 textarea,
.charsheet .linked-tablecell.small-label2 .divider-db-lg,
.charsheet .linked-tablecell.small-label2 .divider-db {
    display: inline;
}

.charsheet .kinetic-sect .linked-fields {
    width: 10em;
}

.charsheet .kinetic-sect .linked-tablecell {
    margin-left: -.25em;
    margin-right: -.25em;
}

/* like br */
.charsheet .cheat {
    width: 100%;
    display: block;
    clear: both;
}

.charsheet .nowrap {
    white-space: nowrap;
}

/* no wrap but allow text to go beyond width */
.charsheet .nowrap-over {
    white-space: nowrap;
    overflow-x: visible;
}

.charsheet .experience {
    margin-top: .5em;
}

/* in all pages mode, put margin above h1 except first page*/
.charsheet .tab99:checked ~ .section:not(.section-core) h1 {
    margin-top: 1em;
}

.charsheet .upper {
    text-transform: uppercase;
}

.charsheet .header-row,
.charsheet .space-below,
.charsheet .iterative_attack_section {
    margin-bottom: .5em;
}

.charsheet .section-spellclass {
    padding-top: .33em;
}

.charsheet .iterative_attack_section {
    margin-left: 0.2rem;
}

.charsheet .currency .table {
    display: inline-block;
    vertical-align: top;
    border: 0.1rem solid DarkGray;
    width: 50%;
}

.charsheet button[type="roll"]:not(.command-button) {
    background-color: black;
    color: white;
    margin: 0 .25em 0 .25em;
    font-size: 1.5rem;
    min-height: 1.5em;
    min-width: 1.5em;
    padding: .25em .25em .3em .25em;
    cursor: pointer;
}

.charsheet button[type="roll"].no-decoration {
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: #33F;
}

.charsheet button[type="roll"].no-decoration::before {
    content: "";
}

.charsheet button[type="roll"].no-decoration:hover {
    color: red;
    text-decoration: underline;
}

.charsheet .pf-border {
    border: 0.1rem solid #d3d3d3;
    box-sizing: content-box;
    padding: .5em .5em 0 .5em;
    border-radius: 0.5rem;
}

.charsheet h1,
.charsheet h2,
.charsheet h3,
.charsheet h4,
.charsheet .pf-wrapper,
.sheet-rolltemplate-pf_generic,
.sheet-rolltemplate-pf_ability,
.sheet-rolltemplate-pf_defense,
.sheet-rolltemplate-pf_attack,
.sheet-rolltemplate-pf_spell,
.sheet-rolltemplate-pf_block,
.charsheet .table-name,
.charsheet .table-header,
.charsheet .text-button,
.charsheet .tab {
    font-family: Ubuntu, sans-serif;
}

.charsheet .panel-name {
    font-family: tahoma, arial black, sans-serif;
    font-stretch: ultra-expanded;
    font-weight: bold;
    color: DimGray;
    font-size: 1.6rem;
}

/* fonts */
.charsheet .pf-wrapper,
.sheet-rolltemplate-pf_generic,
.sheet-rolltemplate-pf_ability,
.sheet-rolltemplate-pf_defense,
.sheet-rolltemplate-pf_attack,
.sheet-rolltemplate-pf_spell,
.sheet-rolltemplate-pf_block {
    --sheet-pf-specfont: Ubuntu, sans-serif;
    --sheet-pf-header-specfont: Ubuntu, sans-serif;
}

.sheet-rolltemplate-pf_generic .font-11,
.sheet-rolltemplate-pf_ability .font-11,
.sheet-rolltemplate-pf_defense .font-11,
.sheet-rolltemplate-pf_attack .font-11,
.sheet-rolltemplate-pf_spell .font-11,
.sheet-rolltemplate-pf_block .font-11,
.sheet-rolltemplate-pf_generic .font-1roll-accessible,
.sheet-rolltemplate-pf_ability .font-1roll-accessible,
.sheet-rolltemplate-pf_defense .font-1roll-accessible,
.sheet-rolltemplate-pf_attack .font-1roll-accessible,
.sheet-rolltemplate-pf_spell .font-1roll-accessible,
.sheet-rolltemplate-pf_block .font-1roll-accessible,
.charsheet .accessible:checked ~ .pf-wrapper {
    --sheet-pf-specfont: 'Open Sans', sans-serif;
    --sheet-pf-header-specfont: 'Lato', sans-serif;
}

.sheet-rolltemplate-pf_generic .font-12,
.sheet-rolltemplate-pf_ability .font-12,
.sheet-rolltemplate-pf_defense .font-12,
.sheet-rolltemplate-pf_attack .font-12,
.sheet-rolltemplate-pf_spell .font-12,
.sheet-rolltemplate-pf_block .font-12,
.charsheet .comic:checked ~ .pf-wrapper {
    --sheet-pf-specfont: Comic Sans MS, Patrick Hand, Lucida Handwriting, cursive, sans-serif;
    --sheet-pf-header-specfont: Comic Sans MS, Patrick Hand, Lucida Handwriting, cursive, sans-serif;
}

.sheet-rolltemplate-pf_generic .font-13,
.sheet-rolltemplate-pf_ability .font-13,
.sheet-rolltemplate-pf_defense .font-13,
.sheet-rolltemplate-pf_attack .font-13,
.sheet-rolltemplate-pf_spell .font-13,
.sheet-rolltemplate-pf_block .font-13,
.charsheet .segoe:checked ~ .pf-wrapper {
    --sheet-pf-specfont: Segoe UI, Tahoma, Candara, Century Gothic, sans-serif;
    --sheet-pf-header-specfont: Segoe UI, Tahoma, Candara, Century Gothic, sans-serif;
}

.sheet-rolltemplate-pf_generic .font-14,
.sheet-rolltemplate-pf_ability .font-14,
.sheet-rolltemplate-pf_defense .font-14,
.sheet-rolltemplate-pf_attack .font-14,
.sheet-rolltemplate-pf_spell .font-14,
.sheet-rolltemplate-pf_block .font-14,
.charsheet .lucida:checked ~ .pf-wrapper {
    --sheet-pf-specfont: Lucida Sans Unicode Regular, Lucida Sans Unicode, Candara, Calibri, Arial Narrow, sans-serif;
    --sheet-pf-header-specfont: Lucida Sans, Lucida Sans Unicode Regular, Lucida Sans Unicode, Candara, Calibri, Arial Narrow, sans-serif;
}

.sheet-rolltemplate-pf_generic .font-15,
.sheet-rolltemplate-pf_ability .font-15,
.sheet-rolltemplate-pf_defense .font-15,
.sheet-rolltemplate-pf_attack .font-15,
.sheet-rolltemplate-pf_spell .font-15,
.sheet-rolltemplate-pf_block .font-15,
.charsheet .fantasy:checked ~ .pf-wrapper {
    --sheet-pf-header-specfont: Papyrus, Zapf Chancery, Matura MT Script Capitals, Lucida Calligraphy, Brush Script MT, Script MT Bold, Script Regular, serif;
    --sheet-pf-specfont: Goudy Old Style, Garamond, Georgia, Palatino, Cambria, Hoefler Text, Book Antiqua, serif;
}

.sheet-rolltemplate-pf_generic .font-17,
.sheet-rolltemplate-pf_ability .font-17,
.sheet-rolltemplate-pf_defense .font-17,
.sheet-rolltemplate-pf_attack .font-17,
.sheet-rolltemplate-pf_spell .font-17,
.sheet-rolltemplate-pf_block .font-17,
.charsheet .fantasy3:checked ~ .pf-wrapper {
    --sheet-pf-header-specfont: Lucida Calligraphy, Segoe UI Script, Segoe Script, Script MT Regular, Brush Script MT, Script MT Bold, Script Regular, serif;
    --sheet-pf-specfont: Hoefler Text, Baskerville, Georgia, Palatino, Cambria, Book Antiqua, serif;
}

.sheet-rolltemplate-pf_generic .font-16,
.sheet-rolltemplate-pf_ability .font-16,
.sheet-rolltemplate-pf_defense .font-16,
.sheet-rolltemplate-pf_attack .font-16,
.sheet-rolltemplate-pf_spell .font-16,
.sheet-rolltemplate-pf_block .font-16,
.charsheet .fantasy2:checked ~ .pf-wrapper {
    --sheet-pf-header-specfont: Copperplate Gothic Bold, Copperplate Gothic, Copperplate Gothic Light, Copperplate, serif;
    --sheet-pf-specfont: Copperplate Gothic Light, Copperplate, Big Caslon, Calisto MT, serif;
}

pf-wrapper,
.sheet-rolltemplate-pf_generic .roll-table,
.sheet-rolltemplate-pf_ability .roll-table,
.sheet-rolltemplate-pf_defense .roll-table,
.sheet-rolltemplate-pf_attack .roll-table,
.sheet-rolltemplate-pf_spell .roll-table,
.sheet-rolltemplate-pf_block .roll-table,
.sheet-rolltemplate-pf_generic .roll-accessible,
.sheet-rolltemplate-pf_ability .roll-accessible,
.sheet-rolltemplate-pf_defense .roll-accessible,
.sheet-rolltemplate-pf_attack .roll-accessible,
.sheet-rolltemplate-pf_spell .roll-accessible,
.sheet-rolltemplate-pf_block .roll-accessible,
.charsheet .pf-wrapper .small-label2 span,
.charsheet .pf-wrapper input,
.charsheet .pf-wrapper textarea,
.charsheet .pf-wrapper select {
    font-family: var(--sheet-pf-specfont);
}

.sheet-rolltemplate-pf_generic .roll-table .roll-header,
.sheet-rolltemplate-pf_ability .roll-table .roll-header,
.sheet-rolltemplate-pf_defense .roll-table .roll-header,
.sheet-rolltemplate-pf_attack .roll-table .roll-header,
.sheet-rolltemplate-pf_spell .roll-table .roll-header,
.sheet-rolltemplate-pf_block .roll-table .roll-header,
.sheet-rolltemplate-pf_generic h3,
.sheet-rolltemplate-pf_ability h3,
.sheet-rolltemplate-pf_defense h3,
.sheet-rolltemplate-pf_attack h3,
.sheet-rolltemplate-pf_spell h3,
.sheet-rolltemplate-pf_block h3,
.sheet-rolltemplate-pf_generic h4,
.sheet-rolltemplate-pf_ability h4,
.sheet-rolltemplate-pf_defense h4,
.sheet-rolltemplate-pf_attack h4,
.sheet-rolltemplate-pf_spell h4,
.sheet-rolltemplate-pf_block h4,
.charsheet .pf-wrapper input.entry-custom-header,
.charsheet .pf-wrapper button,
.charsheet .pf-wrapper .text-button,
.charsheet .pf-wrapper .tab,
.charsheet .pf-wrapper .panel-name,
.charsheet .pf-wrapper .table-name,
.charsheet .pf-wrapper .table-row-name,
.charsheet .pf-wrapper .table-config-row-name,
.charsheet .pf-wrapper .nontable-name,
.charsheet .pf-wrapper .secondary-table-name,
.charsheet .pf-wrapper .showsect,
.charsheet .pf-wrapper .table-header,
.charsheet .pf-wrapper h1,
.charsheet .pf-wrapper h2,
.charsheet .pf-wrapper h3,
.charsheet .pf-wrapper h4 {
    font-family: var(--sheet-pf-header-specfont);
}

.charsheet .pf-wrapper .repcontrol_del,
.charsheet .pf-wrapper .repcontrol_move,
.charsheet .pf-wrapper .repcontrol_add,
.charsheet .pf-wrapper .repcontrol_edit {
    font-family: pictos;
}

/* quick and dirty dark mode */

.sheet-darkmode .ui-dialog {
    background-color: #0f0f0f;
}

.sheet-darkmode .tab-content,
.sheet-darkmode .tab-content .charsheet .pf-wrapper {
    background-color: #18181a;
    color: #e1e1e1;
}

.sheet-darkmode .tab-content .charsheet .pf-wrapper h1 *,
.sheet-darkmode .tab-content .charsheet .pf-wrapper h2 *,
.sheet-darkmode .tab-content .charsheet .pf-wrapper h3 *,
.sheet-darkmode .tab-content .charsheet .pf-wrapper h4 *,
.sheet-darkmode .tab-content .charsheet .pf-wrapper h5 *,
.sheet-darkmode .tab-content .charsheet .pf-wrapper h6 *,
.sheet-darkmode .tab-content .charsheet .small-label2 span:not(.autoexpand) {
    background-color: revert;
    color: #e1e1e1;
    font-weight: normal;
}

.sheet-darkmode .tab-content .charsheet .mainnav ~ .tab,
.sheet-darkmode .tab-content .charsheet .equipmentnav ~ .tab,
.sheet-darkmode .tab-content .charsheet .abilitiesnav ~ .tab,
.sheet-darkmode .tab-content .charsheet .spellclassnav ~ .tab,
.sheet-darkmode .tab-content .charsheet .spellsnav ~ .tab,
.sheet-darkmode .tab-content .charsheet .skillsnav ~ .tab {
    background-color: #2b3542;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    padding-bottom: 1.4rem;
}

.sheet-darkmode .tab-content .charsheet .pf-wrapper label {
    background-color: transparent;
}

.sheet-darkmode .tab-content .charsheet .pf-wrapper .expand label.showsect {
    color: initial;
}

.sheet-darkmode .tab-content .charsheet .pf-wrapper .calc,
.sheet-darkmode .tab-content .charsheet .pf-wrapper input.calc,
.sheet-darkmode .tab-content .charsheet .pf-wrapper input:disabled {
    background-color: #3c3c40;
    color: #c9c9c9
}

/* Sheet Backgrounds */
/* graph-paper dark mode*/
.sheet-darkmode .tab-content .charsheet .graph-paper:checked ~ .pf-wrapper {
    background:
        linear-gradient(-90deg, rgba(247, 247, 247, 0.03) 0.1rem, transparent 0.1rem),
        linear-gradient(rgba(247, 247, 247, 0.03) 0.1rem, transparent 0.1rem),
        linear-gradient(-90deg, rgba(247, 247, 247, 0.03) 0.1rem, transparent 0.1rem),
        linear-gradient(rgba(247, 247, 247, 0.03) 0.1rem, transparent 0.1rem),
        linear-gradient(transparent 0.3rem, transparent 0.3rem, transparent 7.8rem, transparent 7.8rem),
        linear-gradient(-90deg, transparent 0.1rem, transparent 0.1rem),
        linear-gradient(-90deg, transparent 0.3rem, transparent 0.3rem, transparent 7.8rem, transparent 7.8rem),
        linear-gradient(transparent 0.1rem, transparent 0.1rem), transparent;
    background-size:
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px;
}

/* Graph Paper */
.charsheet .graph-paper:checked ~ .pf-wrapper {
    background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 0.1rem, transparent 0.1rem),
        linear-gradient(rgba(0, 0, 0, .03) 0.1rem, transparent 0.1rem),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 0.1rem, transparent 0.1rem),
        linear-gradient(rgba(0, 0, 0, .03) 0.1rem, transparent 0.1rem),
        linear-gradient(transparent 0.3rem, transparent 0.3rem, transparent 7.8rem, transparent 7.8rem),
        linear-gradient(-90deg, transparent 0.1rem, transparent 0.1rem),
        linear-gradient(-90deg, transparent 0.3rem, transparent 0.3rem, transparent 7.8rem, transparent 7.8rem),
        linear-gradient(transparent 0.1rem, transparent 0.1rem), transparent;
    background-size:
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px;
}

/* Parchment 1 */
.charsheet .parchment-1:checked ~ .pf-wrapper {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/pf_background_parch1.jpg");
    background-size: cover;
    background-position: center top;
    padding: .75em;
    color: initial;
}

.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper label,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .small-label2 span:not(.autoexpand),
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .calc,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper input.calc,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper input:disabled {
    color: initial;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .tab,
.charsheet .parchment-1:checked ~ .pf-wrapper .secondary-table-name,
.charsheet .parchment-1:checked ~ .pf-wrapper .table-name,
.charsheet .parchment-1:checked ~ .pf-wrapper .table-row-name,
.charsheet .parchment-1:checked ~ .pf-wrapper .emphasize-field,
.charsheet .parchment-1:checked ~ .pf-wrapper .boldlabel-check:checked + b:not(.offCase),
.charsheet .parchment-1:checked ~ .pf-wrapper .condition-exists:checked + label,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .tab,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .secondary-table-name,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .table-name,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .table-row-name,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .emphasize-field,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .boldlabel-check:checked + b:not(.offCase),
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .condition-exists:checked + label {
    background-color: #2f4f4f;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .table-header,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .table-header {
    background-color: darkkhaki;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .section-state:checked ~ .background-color1,

.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .section-state:checked ~ .background-color1 {
    background-color: palegoldenrod;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .calc,
.charsheet .parchment-1:checked ~ .pf-wrapper input.calc,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper .calc,
.sheet-darkmode .tab-content .charsheet .parchment-1:checked ~ .pf-wrapper input.calc {
    background-color: #c9c9c9;
}

/* Parchment 2 */
.charsheet .parchment-2:checked ~ .pf-wrapper {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/pf_background_parch2.jpg");
    background-size: cover;
    background-position: center top;
    padding: .75em;
    color: initial;
}

.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper label,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .small-label2 span:not(.autoexpand),
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .calc,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper input.calc,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper input:disabled {
    color: initial;
}

.charsheet .parchment-2:checked ~ .pf-wrapper .tab,
.charsheet .parchment-2:checked ~ .pf-wrapper .secondary-table-name,
.charsheet .parchment-2:checked ~ .pf-wrapper .table-name,
.charsheet .parchment-2:checked ~ .pf-wrapper .table-row-name,
.charsheet .parchment-2:checked ~ .pf-wrapper .emphasize-field,
.charsheet .parchment-2:checked ~ .pf-wrapper .boldlabel-check:checked + b:not(.offCase),
.charsheet .parchment-2:checked ~ .pf-wrapper .condition-exists:checked + label,

.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .tab,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .secondary-table-name,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .table-name,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .table-row-name,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .emphasize-field,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .boldlabel-check:checked + b:not(.offCase),
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .condition-exists:checked + label {
    background-color: #2f4f4f;
}

.charsheet .parchment-2:checked ~ .pf-wrapper .table-header,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .table-header {
    background-color: darkkhaki;
}

.charsheet .parchment-2:checked ~ .pf-wrapper .section-state:checked ~ .background-color1,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .section-state:checked ~ .background-color1 {
    background-color: palegoldenrod;
}

.charsheet .parchment-2:checked ~ .pf-wrapper .calc,
.charsheet .parchment-2:checked ~ .pf-wrapper input.calc,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper .calc,
.sheet-darkmode .tab-content .charsheet .parchment-2:checked ~ .pf-wrapper input.calc {
    background-color: #c9c9c9;
}

/* button sizing based on arial*/
.charsheet .pf-wrapper span::before,
.charsheet .pf-wrapper span::after {
    font-family: Arial, sans-serif;
}

.charsheet .pictos {
    font-family: "Pictos" !important;
}

.charsheet .icon {
    font-size: 4em;
    cursor: default;
    margin: 0 .125em 0 .125em;
}

/* set width for number input and surrounding labels */

.charsheet input[type="number"],
.charsheet input[type="text"].number,
.charsheet .number {
    min-width: 2.5em;
    max-width: 4.5em;
    width: auto;
    font-style: normal;
}

.charsheet input[type="number"],
.charsheet span.number:not(.table-cell),
.charsheet input.number {
    margin: auto;
    padding: 0.25em 0 0.25em 0;
    text-align: center;
}

.charsheet .wide-numbers input[type="number"] {
    max-width: calc(90% - 1em);
    width: calc(90% - 1em);
}

.charsheet .medium-numbers input[type="number"],
.charsheet .medium-numbers input[type="text"].number,
.charsheet .medium-numbers .number {
    max-width: 3.5em;
    width: calc(100% - 2px);
}

/* min width must come before narrow-numbers */
.charsheet .calc,
.charsheet input.calc,
.charsheet input:disabled {
    min-width: 2.85em;
}

.charsheet input[type="number"].narrow-numbers,
.charsheet .narrow-numbers input[type="number"],
.charsheet .narrow-numbers input[type="text"].number,
.charsheet .narrow-numbers .number {
    min-width: 2.5rem;
    max-width: 3.25rem;
    padding: 2px;
    margin: 2px 0 2px 0;
}

.charsheet .calc.narrow-numbers {
    padding-left: 0;
    margin-left: 0;
}

.charsheet .number,
.charsheet input[type="text"].number,
.charsheet .small-label2number,
.charsheet .sect-buff .linked-fields .number,
.charsheet .sect-buff .linked-fields input[type="number"] {
    width: 3.5em;
}

/* narrow only when in readonly/compact mode:  */
.charsheet .readonly-show:not(:checked) ~ .main input[type="number"].narrow-numbers-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .narrow-numbers-readonly input[type="number"],
.charsheet .readonly-show:not(:checked) ~ .main .narrow-numbers-readonly .number,
.charsheet .readonly-show:not(:checked) ~ .main .narrow-numbers-readonly input[type="text"].number {
    width: 2.5em;
}

/* reduce header text in readonly/compact mode */
.charsheet .readonly-show:not(:checked) ~ .main .table-header,
.charsheet .readonly-show:not(:checked) ~ .main .small-label2 span:not(.autoexpand),
.charsheet .readonly-show:not(:checked) ~ .main .npc-statblock-row .small-label2 span:not(.autoexpand),
.charsheet .readonly-show:not(:checked) ~ .main .table-cell.small-label span {
    font-size: 1rem;
    padding: 0;
}

.charsheet .buff-row {
    display: table-row;
    vertical-align: bottom;
}

/* we should go and change all sheet-table-cell to div */
.charsheet .compendium-note .vertical-middle,
.charsheet .condition-exists + label,
.charsheet .table-cell.small-label span,
.charsheet .table-header,
.charsheet .small-label2 span:not(.autoexpand) {
    cursor: help;
    font-size: 1.125rem;
}

.charsheet .h2-section {
    position: relative;
    display: inline-block;
    clear: both;
    height: auto;
    width: 100%;
    vertical-align: top;
}

.charsheet .inline,
.charsheet .h2-section.inline {
    display: inline;
    clear: none;
}

.charsheet .main {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

.charsheet .table {
    background-color: transparent;
    color: inherit;
    display: table;
    margin: 0;
    width: 100%;
}

.charsheet .three-columns,
.charsheet .readonly-show:not(:checked) ~ .main .h3-section .three-columns.h3-section.wide-readonly {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1em;
}

/* make error row more visible (colorblind users could not see slightly darker border )
also need 1 more level in selector or base css will override border */

.charsheet .pf-wrapper .repitem.repitembroken {
    border: 0.3rem dashed #FF0044 !important;
    margin: 0.2rem 0 0.4rem 0;
    border-radius: 0;
}

.charsheet .error {
    color: Red;
    font-size: 1.4rem;
    background-color: White;
    margin-left: .25em;
}

.charsheet .repitem:not(.repitembroken) .error {
    display: none;
}

.charsheet .small-label {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
}

.charsheet .secondary-table-name {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    color: White;
    background-color: #4a6486;
    width: 100%;
    padding-top: .25em;
}

/* used to signify imperial/metric toggle */
.charsheet .weight-used::after {
    content: '(lbs)';
    margin-left: 5px;
    font-weight: normal;
    font-style: normal;
    font-size: 1rem;
    font-family: 'Roboto Mono', monospace;
}

.charsheet .use-metrics:checked ~ div .weight-used::after {
    content: '(kgs)';
}

.charsheet .distance-used::after,
.charsheet input.distance-used ~ span::before {
    content: '(ft)';
    margin: 0 -5px 0 0;
    padding-left: 1px;
    position: relative;
    top: -3px;
    font-style: normal;
    font-size: .85rem;
    font-family: 'Roboto Mono', monospace;
}

.charsheet .use-metrics:checked ~ div .distance-used::after,
.charsheet .use-metrics:checked ~ div input.distance-used ~ span::before {
    content: '(m)';
}

/* npc/monster adjustment */
.charsheet input.distance-used ~ span::before {
    content: 'ft.';
    margin: 1rem -.75em 0 -.75rem;
    font-style: normal;
    font-size: 1rem;
    font-family: 'Roboto Mono', monospace;
}

.charsheet .use-metrics:checked ~ div input.distance-used ~ span::before {
    content: 'm.';
}

/* hide base-speed*/
.charsheet .use-metrics ~ div input.input-feet,
.charsheet .use-metrics ~ div span.small-label2 input.input-feet,
.charsheet .use-metrics ~ div input.input-meters,
.charsheet .use-metrics ~ div span.small-label2 input.input-meters {
    display: none;
}

/* show base-speed in feet at step="5" */
.charsheet input[type="checkbox"].use-metrics:not(:checked) ~ div input.input-feet,
.charsheet input[type="checkbox"].use-metrics:not(:checked) ~ div span input.input-feet {
    display: inline-block;
}

/* show base-speed in meters at step="1.5" */
.charsheet input[type="checkbox"].use-metrics:checked ~ div input.input-meters,
.charsheet input[type="checkbox"].use-metrics:checked ~ div span input.input-meters {
    display: inline-block;
}

.charsheet .nontable-name.secondary-table-name,
.charsheet .table-name.secondary-table-name {
    background-color: #4a6486;
}

.charsheet .section-spellclass .table-name,
.charsheet .section-spellclass .nontable-name {
    background-color: #4a6486;
}

.charsheet .roundborder {
    border: 0.1rem solid #808080;
    border-radius: 0.5rem;
}

.charsheet .linked-custom,
.charsheet .linked-custom-wideinputs {
    display: inline-block;
    width: calc(31.3% - 3px);
    margin: .125em 0 .125em 0;
    padding: .5em;
    text-align: left;
    border: 0.1rem solid #808080;
    border-radius: 0.5rem;
}

.charsheet .linked-custom-notes,
.charsheet .linked-custom-roll {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    display: block;
}

.charsheet .linked-custom-notes,
.charsheet .linked-custom-roll {
    margin-bottom: 1em;
}

.charsheet .linked-custom textarea,
.charsheet .linked-custom .macro-text-inline,
.charsheet .kinetic-sect .linked-tablecell .macro-text-inline,
.charsheet .kinetic-sect .linked-tablecell select.linked-cellfield {
    width: calc(94% - 7em);
    vertical-align: bottom;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section > .notes {
    padding: .125em .125em .125em .25em;
}

.charsheet .custom-roll-inner {
    display: flex;
    height: auto;
    flex-flow: row nowrap;
    align-items: stretch;
}

.charsheet .custom-buttons {
    /*	display:inline; */
    width: auto;
    margin-right: .5em;
}

.charsheet .custom-buttons .command-button {
    min-width: 5em;
    white-space: nowrap;
}

.charsheet .linked-custom-wideinputs .divider-db,
.charsheet .linked-custom-wideinputs .divider-db-lg,
.charsheet .linked-custom .divider-db,
.charsheet .linked-custom .divider-db-lg {
    margin-top: .5em;
    width: .4em;
}

.charsheet .linked-custom-notes > span,
.charsheet .linked-custom-roll > span,
.charsheet .linked-custom-wideinputs > span,
.charsheet .linked-custom > span,
.charsheet .linked-custom .linked-fields > span {
    display: block;
    clear: both;
    width: calc(100% - .5em);
    background-color: transparent;
}

.charsheet .burn-sect {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    align-content: flex-start;
    justify-content: space-between;
}

.charsheet .burn-sect .linked-custom > span,
.charsheet .burn-sect .linked-custom .linked-fields > span {
    font-weight: bold;
    font-style: italic;
    font-size: 1.2rem;
    color: black;
    white-space: normal;
}

.charsheet .burn-sect .linked-custom .linked-fields {
    width: calc(100% - 7.5em);
}

.charsheet .burn-sect .linked-custom {
    width: calc(20% - 4px);
    flex: 1 1 calc(20% - 4px);
}

.charsheet .burn-sect .linked-custom:nth-child(n+4) {
    width: calc(30% - 4px);
    flex: 3 3 calc(30% - 4px);
}

.charsheet .linked-custom-notes > span,
.charsheet .linked-custom-roll > span {
    margin-bottom: .25em;
}

.charsheet .table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 0 .125em 0;
}

.charsheet .table-row {
    display: table-row;
    vertical-align: bottom;
    overflow: hidden;
    border-collapse: collapse;
}

.charsheet .total-row {
    display: table-row;
    vertical-align: bottom;
    height: 3.2rem;
    overflow: hidden;
    border-collapse: collapse;
}

.charsheet .table-config-row-name,
.charsheet .table-row-name {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-color: #4a6486;
    min-width: 6.4rem;
    cursor: default;
}

.charsheet .table-config-row-name {
    padding: .125em;
    width: 18%;
    max-width: 18%;
}

.charsheet .corerules.table:not(.two-equalcolumn):not(.onecolumn) .table-row .table-cell:nth-child(2) {
    width: 30%;
    max-width: 30%;
}

.charsheet .corerules.table.twocolumn .table-row .table-cell:nth-child(2) {
    width: 40%;
    max-width: 40%;
}

.charsheet .table-config-row-name ~ span.table-cell > label {
    padding: 0.2rem 0 0.2rem 0.4rem;
    display: block;
}

.charsheet .sheetconfig .table .table-row:nth-child(odd),
.charsheet .rule-options .table .table-row:nth-child(odd) {
    background-color: transparent;
}

.charsheet .sheetconfig .table .table-row:nth-child(even),
.charsheet .rule-options .table .table-row:nth-child(even) {
    background-color: #a6a6a6;
}

.charsheet .sheetconfig .table .table-row:nth-child(odd) span b,
.charsheet .rule-options .table .table-row:nth-child(odd) span b {
    color: inherit;
}

.charsheet .sheetconfig .table .table-row:nth-child(even) span b,
.charsheet .rule-options .table .table-row:nth-child(even) span b {
    color: inherit;
}

.charsheet .header-images.table .macro-text-inline,
.charsheet .header-images.table .inline-textarea {
    resize: horizontal;
}

.charsheet .header-images .table-cell:last-child input[type="radio"] {
    margin-top: -16px;
}

.charsheet .select-small {
    font-size: 1.2rem;
    height: 2em;
    padding: 0;
    min-width: 4.5em;
    width: 100%;
}

.charsheet .select-class {
    width: 100%;
}

.charsheet .select-spelllvl {
    max-width: 7em;
    width: calc(100% - 8px);
}

.charsheet .table-cell > select:not(.select-small) {
    height: 1.9em;
}

.charsheet .small-label2 > select.select-small {
    height: 2em;
}

/* color for disabled/sheet-calc */

.charsheet .calc,
.charsheet input.calc,
.charsheet input:disabled {
    background-color: rgba(74, 100, 134, 0.28);
    border-width: 0;
    color: #222;
    padding-left: 0.4rem;
}

.charsheet input.calc {
    border-bottom-color: transparent;
    border-bottom-width: 0;
}

/* CHROME: hide spinner area at right when readonly or when not hovering over a number */

.charsheet input[readonly]::-webkit-inner-spin-button,
.charsheet input.calc::-webkit-inner-spin-button,
.charsheet input.disabled::-webkit-inner-spin-button,
.charsheet input[type="number"]:not(:hover)::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin-right: 0;
    padding-right: .25em;
}

.charsheet .table-cell.right-border,
.charsheet .table-header.right-border {
    border-right: 0.1rem solid DimGray;
}

.charsheet .table-cell.left-border,
.charsheet .table-header.left-border {
    border-left: 0.1rem solid DimGray;
}

.charsheet .table-header.header-expand {
    white-space: nowrap;
    overflow: visible;
}
 /* macro-text column header */
.charsheet .table-header.super {
    padding: 0 1.2rem 0 0;
}

.charsheet input[type="text"].entry-custom-header {
    font-style: inherit;
    font-size: inherit;
    border-bottom: inherit;
    font-weight: inherit;
    color: inherit;
    height: 2.125em;
    border: 1px solid #d3d3d3;
}

/* CANNOT PUT THESE ALL IN ONE IDK why but it breaks, so separate them */
.charsheet input[type="text"].entry-custom-header::-webkit-input-placeholder {
    font-weight: normal;
    font-size: .825em;
}

.charsheet input[type="text"].entry-custom-header::-moz-placeholder {
    font-weight: normal;
    font-size: .825em;
}

.charsheet input[type="text"].entry-custom-header:-ms-input-placeholder {
    font-weight: normal;
    font-size: .825em;
}

.charsheet input[type="text"].entry-custom-header::placeholder {
    font-weight: normal;
    font-size: .825em;
}

.charsheet span.entry-custom-header {
    padding: .2em .25em .5em .25em;
}

.charsheet .pf-wrapper span.super::after,
.charsheet .pf-wrapper .h2.super::after {
    font-weight: normal;
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    letter-spacing: -.08em;
    position: absolute;
    margin: -1px 0 0 1px;
}

.charsheet .pf-wrapper .small-label2 span.super::after {
    position: inherit;
    margin: -5px -5px 0 0;
}

.charsheet .pf-wrapper span.spell-class-0::after {
    content: '0';
}

.charsheet .pf-wrapper span.spell-class-1::after {
    content: '1';
}

.charsheet .pf-wrapper span.spell-class-2::after {
    content: '2';
}

.charsheet .pf-wrapper span.spell-class-0::after,
.charsheet .pf-wrapper span.spell-class-1::after,
.charsheet .pf-wrapper span.spell-class-2::after {
    margin: 0 -5px 0 2px;
    padding-left: 1px;
    position: relative;
    top: -3px;
    font-style: normal;
    font-size: .85rem;
    font-family: 'Roboto Mono', monospace;
}

.charsheet .pf-wrapper span.note-a::after,
.charsheet .pf-wrapper .h2.note-a::after {
    content: '(a)';
}

.charsheet .pf-wrapper span.note-b::after,
.charsheet .pf-wrapper .h2.note-b::after {
    content: '(b)';
}

.charsheet .pf-wrapper span.note-c::after,
.charsheet .pf-wrapper .h2.note-c::after {
    content: '(c)';
}

.charsheet .pf-wrapper span.note-d::after,
.charsheet .pf-wrapper .h2.note-d::after {
    content: '(d)';
}

.charsheet .text-tight {
    font-size: .75em;
    font-family: 'Roboto Mono', monospace;
    position: absolute;
    background-color: #9f9f9f;
    display: inline-block;
    padding: 0 2px 0 2px;
    line-height: 12px;
    margin: -5px 0 0 -5px;
    border-radius: 2px;
    z-index: 3;
}

/******************************* API COMMAND BUTTONS *************************************/

.charsheet button[type="roll"].command-button {
    background-color: #fff;
    color: #333;
    padding: 0 0.4rem 0 0.4rem;
    margin: 0.2rem;
    font-weight: normal;
    display: inline-block;
    border: 0.1rem solid #789;
    border-radius: 0.4rem;
    font-size: 1.4rem;
}

.charsheet button[type="roll"].command-button:hover,
.charsheet button[type="roll"].command-button:focus {
    color: #f00;
    box-shadow: 0.1rem 0.1rem 0.2rem #333;
}

.charsheet button[type="roll"].text-button,
.charsheet button[type="roll"].spellcaster-button {
    border-radius: 0.4rem;
}

.charsheet .skills .table-row .table-cell:first-child {
    font-size: 1.6rem;
    padding-left: 0;
}

/* emphasize ranks column */
.charsheet .skills div span.table-cell:nth-child(4) {
    background-color: #556677;
    min-width: 3.5em;
    padding: 0 2px 2px 2px;
}

.charsheet .skills div span.table-cell:nth-child(4) input {
    background-color: revert;
    color: #222;
}

.sheet-darkmode .tab-content .charsheet .skills div span.table-cell:nth-child(4) input {
    background-color: #222;
    color: #fff;
}

.charsheet .skills .table-row.adventure,
.charsheet .skills .table-row.bg,
.charsheet .skills .table-row.adventure textarea,
.charsheet .skills .table-row.bg textarea,
.charsheet .table-row.adventure input,
.charsheet .skills .table-row.bg input,
.charsheet .table-row.adventure select,
.charsheet .skills .table-row.bg select {
    font-size: 1.2rem;
    margin: 1px 2px 0 2px;
}

.charsheet .skills .table-row:hover {
    color: initial;
    background-color: #f0f8ff;
    outline: 1px solid #617c9f;
}

.charsheet .skills button[type="roll"] {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
}

.charsheet button[type="roll"].custom-button::before,
.charsheet button[type="roll"].command-button::before {
    content: "" !important;
}

/************************************* BUFFS ******************************************/

.charsheet .linked-fields {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
    width: auto;
}

.charsheet .sect-buff .linked-fields {
    margin-top: 0;
}

.charsheet .linked-fields .small-label2:first-child {
    margin-right: 0;
}

.charsheet .linked-fields .small-label2:last-child {
    margin-left: 0;
}

.charsheet .section0.section-abilities span ~ input[type="checkbox"],
.charsheet .section1.section-skills span ~ input[type="checkbox"],
.charsheet .section2.section-attack span ~ input[type="checkbox"],
.charsheet .section3.section-defense span ~ input[type="checkbox"],
.charsheet .section4.section-other span ~ input[type="checkbox"] {
    margin-right: 1em;
}

/********************************************* TABS ****************************************************/
/* can delete these soon just make margin above and clear both */

.charsheet .tabs {
    display: block;
    clear: both;
}

.charsheet .tab {
    text-align: center;
    display: inline-block;
    background: #4a6486;
    color: White;
    font-weight: bold;
    font-size: 1.2rem;
    padding: .4em .2em .1em .2em;
    vertical-align: bottom;
    margin-left: -0.4rem;
    margin-right: 0;
    white-space: nowrap;
    border-radius: 0.7rem 0.7rem 0 0;
    height: 1.5em;
}

.charsheet .tabinput {
    opacity: 0;
    position: relative !important;
    cursor: pointer;
    z-index: 3;
    margin-left: 0;
    display: inline-block;
    line-height: 1.5em;
}

.charsheet input.tabinput {
    height: 1.5em;
}

.charsheet .tab.tab99 {
    width: 4.75% !important;
}

.charsheet .tabinput.tab99 {
    width: 4.75% !important;
    margin-right: -4.75% !important;
}

.charsheet .mainnav ~ .tab,
.charsheet .mainnav ~ .tabinput {
    font-size: 1.6rem;
    height: 1.5em;
}

.charsheet .mainnav ~ .tab {
    width: 8%;
}

.charsheet .mainnav ~ .tabinput {
    width: 8%;
    margin-right: -8%;
}

.charsheet .mainnav ~ .tab.narrow-tab {
    width: 7%;
}

.charsheet .mainnav ~ .tabinput.narrow-tab {
    width: 7%;
    margin-right: -7%;
}

.charsheet .mainnav ~ .tab.wider-tab {
    width: 10%;
}

.charsheet .mainnav ~ .tabinput.wider-tab {
    width: 11%;
    margin-right: -11%;
}

.charsheet .buffnav2 ~ .tab {
    width: 6%;
}

.charsheet .buffnav2 ~ .tabinput {
    width: 7%;
    margin-right: -7%;
}

.charsheet .buffnav2 ~ .tab.wider-tab {
    width: 10%;
}

.charsheet .buffnav2 ~ .tabinput.wider-tab {
    width: 10%;
    margin-right: -10%;
}

.charsheet .buffnav2 ~ .tab.narrow-tab {
    width: 4%;
}

.charsheet .buffnav2 ~ .tabinput.narrow-tab {
    width: 4%;
    margin-right: -4%;
}

.charsheet .buffsnav ~ .tab {
    width: 10%;
}

.charsheet .buffsnav ~ .tabinput {
    width: 10%;
    margin-right: -10%;
}

/* added keep tabs getting too compressed when using split-column */
.charsheet .split-column-show:checked ~ .repeating-fields .sect .main .buffsnav ~ .tabinput {
    width: 16%;
    margin-right: -16%;
}

.charsheet .split-column-show:checked ~ .repeating-fields .sect .main .buffsnav ~ .tab {
    width: 16%;
}

.charsheet .spellclassnav ~ .tab {
    width: 20%;
}

.charsheet .spellclassnav ~ .tabinput {
    width: 20%;
    margin-right: -20%;
}

.charsheet .spellsnav ~ .tab {
    width: 7%;
}

.charsheet .spellsnav ~ .tabinput {
    width: 7%;
    margin-right: -7%;
}

.charsheet .spellsnav ~ .tab.tab0 {
    width: 10%;
}

.charsheet .spellsnav ~ .tabinput.tab0 {
    width: 10%;
    margin-right: -10%;
}

.charsheet .abilitiesnav ~ .tab {
    width: 8%;
}

.charsheet .abilitiesnav ~ .tabinput {
    width: 8%;
    margin-right: -8%;
}

.charsheet .abilitiesnav ~ .tab.med-tab {
    width: 6%;
}

.charsheet .abilitiesnav ~ .tabinput.med-tab {
    width: 6%;
    margin-right: -6%;
}

.charsheet .abilitiesnav ~ .tab.wider-tab {
    width: 11%;
}

.charsheet .abilitiesnav ~ .tabinput.wider-tab {
    width: 12%;
    margin-right: -12%;
}

.charsheet .abilitiesnav ~ .tab.narrow-tab {
    width: 4%;
}

.charsheet .abilitiesnav ~ .tabinput.narrow-tab {
    width: 4%;
    margin-right: -4%;
}

.charsheet .skillsnav ~ .tab {
    width: 14% !important;
}

.charsheet .skillsnav ~ .tabinput {
    width: 14% !important;
    margin-right: -14% !important;
}

.charsheet .equipmentnav ~ .tab {
    width: 7.125%;
}

.charsheet .equipmentnav ~ .divider-db-lg {
    width: .4em;
    margin-left: -0.3rem;
}

.charsheet .equipmentnav ~ .tabinput {
    width: 8%;
    margin-right: -8%;
}

.charsheet .equipmentnav ~ .tab.wider-tab {
    width: 10%;
}

.charsheet .equipmentnav ~ .tabinput.wider-tab {
    width: 11%;
    margin-right: -11%;
}

.charsheet .equipmentnav ~ .tab.narrow-tab {
    width: 5.75%;
}

.charsheet .equipmentnav ~ .tabinput.narrow-tab {
    width: 5.75%;
    margin-right: -5.75%;
}

/* make checked tab different color*/

.charsheet .tabinput.tab0:checked + .tab.tab0,
.charsheet .tabinput.tab1:checked + .tab.tab1,
.charsheet .tabinput.tab2:checked + .tab.tab2,
.charsheet .tabinput.tab3:checked + .tab.tab3,
.charsheet .tabinput.tab4:checked + .tab.tab4,
.charsheet .tabinput.tab5:checked + .tab.tab5,
.charsheet .tabinput.tab6:checked + .tab.tab6,
.charsheet .tabinput.tab7:checked + .tab.tab7,
.charsheet .tabinput.tab8:checked + .tab.tab8,
.charsheet .tabinput.tab9:checked + .tab.tab9,
.charsheet .tabinput.tab10:checked + .tab.tab10,
.charsheet .tabinput.tab11:checked + .tab.tab11,
.charsheet .tabinput.tab99:checked ~ .tab.tab99 {
    background: Black;
    color: White;
}

/************** TAB AREAS ***********************/

.charsheet .tabinput.tab0:not(:checked) ~ .section0.section-abilities,
.charsheet .tabinput.tab1:not(:checked) ~ .section1.section-skills,
.charsheet .tabinput.tab2:not(:checked) ~ .section2.section-attack,
.charsheet .tabinput.tab3:not(:checked) ~ .section3.section-defense,
.charsheet .tabinput.tab4:not(:checked) ~ .section4.section-other {
    display: none;
}

.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab0:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section0,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab1:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section1,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab2:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section2,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab3:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section3,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab4:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section4,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab5:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section5,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab6:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section6,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab7:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section7,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab8:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section8,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab9:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section9,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab10:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section10,
.charsheet .tabs:not(.custbordernav) ~ .tabinput.tab11:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section11,
.charsheet .tabs.custbordernav ~ .tabinput.tab0:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-0:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab1:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-1:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab2:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-2:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab3:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-3:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab4:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-4:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab5:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-5:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab6:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-6:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab7:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-7:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab8:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-8:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab9:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-9:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab10:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-10:not(:checked) ~ .custrepeating-border,
.charsheet .tabs.custbordernav ~ .tabinput.tab11:checked ~ .repeating-fields .custnavsection-new:not(:checked) ~ .custnavsection-11:not(:checked) ~ .custrepeating-border {
    display: none;
}

/* abilities tabs */
.charsheet .abilities .selected-tabtitle.tab0,
.charsheet .abilities .selected-tabtitle.tab1,
.charsheet .abilities .selected-tabtitle.tab2,
.charsheet .abilities .selected-tabtitle.tab3,
.charsheet .abilities .selected-tabtitle.tab4,
.charsheet .abilities .selected-tabtitle.tab5,
.charsheet .abilities .selected-tabtitle.tab6,
.charsheet .abilities .selected-tabtitle.tab7,
.charsheet .abilities .selected-tabtitle.tab8,
.charsheet .abilities .selected-tabtitle.tab9,
.charsheet .abilities .selected-tabtitle.tab10,
.charsheet .abilities .selected-tabtitle.tab11,
.charsheet .abilities .selected-tabtitle.tab99 {
    display: none;
}

.charsheet .abilities .tabinput.tab0:checked ~ .selected-tabtitle.tab0,
.charsheet .abilities .tabinput.tab1:checked ~ .selected-tabtitle.tab1,
.charsheet .abilities .tabinput.tab2:checked ~ .selected-tabtitle.tab2,
.charsheet .abilities .tabinput.tab3:checked ~ .selected-tabtitle.tab3,
.charsheet .abilities .tabinput.tab4:checked ~ .selected-tabtitle.tab4,
.charsheet .abilities .tabinput.tab5:checked ~ .selected-tabtitle.tab5,
.charsheet .abilities .tabinput.tab6:checked ~ .selected-tabtitle.tab6,
.charsheet .abilities .tabinput.tab7:checked ~ .selected-tabtitle.tab7,
.charsheet .abilities .tabinput.tab8:checked ~ .selected-tabtitle.tab8,
.charsheet .abilities .tabinput.tab9:checked ~ .selected-tabtitle.tab9,
.charsheet .abilities .tabinput.tab10:checked ~ .selected-tabtitle.tab10,
.charsheet .abilities .tabinput.tab11:checked ~ .selected-tabtitle.tab11,
.charsheet .abilities .tabinput.tab99:checked ~ .selected-tabtitle.tab99 {
    display: inline-block;
}

/* if all pressed show all */
.charsheet .tabs.custbordernav ~ .tabinput.tab99:checked ~ .repeating-fields .custrepeating-border {
    display: block !important;
}

/* extra abilities tab: hide old .sections */
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab0:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section0,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab1:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section1,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab2:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section2,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab3:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section3,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab4:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section4,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab5:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section5,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab6:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section6,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab7:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section7,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab8:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section8,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab9:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section9,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab10:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section10,
.charsheet .tabs.custbordernav.abilitiesnav ~ .tabinput.tab11:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section11 {
    display: none;
}

/* hover */
.charsheet .tabinput.tab0:not(:checked):hover + .tab.tab0,
.charsheet .tabinput.tab1:not(:checked):hover + .tab.tab1,
.charsheet .tabinput.tab2:not(:checked):hover + .tab.tab2,
.charsheet .tabinput.tab3:not(:checked):hover + .tab.tab3,
.charsheet .tabinput.tab4:not(:checked):hover + .tab.tab4,
.charsheet .tabinput.tab5:not(:checked):hover + .tab.tab5,
.charsheet .tabinput.tab6:not(:checked):hover + .tab.tab6,
.charsheet .tabinput.tab7:not(:checked):hover + .tab.tab7,
.charsheet .tabinput.tab8:not(:checked):hover + .tab.tab8,
.charsheet .tabinput.tab9:not(:checked):hover + .tab.tab9,
.charsheet .tabinput.tab10:not(:checked):hover + .tab.tab10,
.charsheet .tabinput.tab11:not(:checked):hover + .tab.tab11,
.charsheet .tabinput.tab99:not(:checked):hover ~ .tab.tab99 {
    color: #e0e0e0;
}

/* custom tab overrides */
.charsheet .firsttab-inverse-show:not(:checked) ~ div .tabs ~ .tabinput.tab0:not(:checked) ~ .tabinput.tab99:not(:checked) ~ .section0 {
    display: block;
}

/******************************************************* spells **************************************************/
/* turn off default border */

.charsheet .hiderepborder .repcontainer .repitem {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}

.charsheet .hiderepborder .repcontainer .repitem .custrepeating-border {
    padding: 0.2rem;
    margin: 0.1rem 0 0 0;
    border: 0.2rem solid #CCCCCC;
    border-radius: 0.7rem;
}

.charsheet .h2-section.current-loads,
.charsheet .h2-section.loads-and-lift,
.charsheet .h2-section.currency {
    display: flex;
    align-items: stretch;
}

.charsheet .spellcasting-options .table-row:nth-child(2) {
    border-top: 1pt solid black;
}

.charsheet .spells-per-day .table.table-header {
    white-space: normal;
    word-break: break-word;
}

.charsheet .spells-per-day .table .divider,
.charsheet .spells-per-day .table .divider-lg {
    width: 2em;
}

.charsheet .spells-per-day .table .table-row .table-header,
.charsheet .spells-per-day .table .table-row .table-cell {
    padding-left: .5em;
    padding-right: .5em;
}

/* add space */
.charsheet .section-equipment .col.col1 .table {
    margin-right: .125em;
}

.charsheet .section-equipment .col.col1 .table:last-child {
    margin-right: 0;
}

/***************** collapse/expand rows arrow added after text found preceding span ******************************/
/* ARROWS */
.charsheet input.csstextbutton,
.charsheet .csstextbutton,
.charsheet .small-label2 > input[type="checkbox"].cssbutton,
.charsheet .small-label2 > input[type="radio"].cssbutton,
.charsheet input.cssbutton,
.charsheet .cssbutton {
    display: inline;
}

/* the label underneath button*/
.charsheet .small-label2 > .csstextbutton + span + span,
.charsheet .small-label2 > .cssbutton + span + span {
    display: block;
}

.charsheet .csstextbutton,
.charsheet .cssbutton,
.charsheet .showarrow,
.charsheet .ack-button,
.charsheet .split-column-show,
.charsheet .lock-show,
.charsheet .counted {
    opacity: 0;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 5;
}

.charsheet input.csstextbutton,
.charsheet input.cssbutton,
.charsheet input.showarrow,
.charsheet input.ack-button,
.charsheet input.split-column-show,
.charsheet input.lock-show,
.charsheet input.counted {
    height: 1.6em;
}

.charsheet .hasexpandrows {
    position: relative !important;
}

.charsheet .hasexpandrows .table-row .table-cell:first-child {
    padding-left: 1em;
}

.charsheet .ack-button + .showsect::before,
.charsheet .showarrow + .showsect::before {
    margin-right: .25em;
}

.charsheet .counted + span::before,
.charsheet .ack-button + .showsect::before,
.charsheet .showarrow + .showsect::before {
    display: inline-block;
    content: '►';
    width: 1em;
    height: 1em;
    font-size: 1em;
    color: DarkGray;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .counted + span::before,
.charsheet .parchment-1:checked ~ .pf-wrapper .ack-button + .showsect::before,
.charsheet .parchment-1:checked ~ .pf-wrapper .showarrow + .showsect::before,
.charsheet .parchment-2:checked ~ .pf-wrapper .counted + span::before,
.charsheet .parchment-2:checked ~ .pf-wrapper .ack-button + .showsect::before,
.charsheet .parchment-2:checked ~ .pf-wrapper .showarrow + .showsect::before {
    color: darkslategray;
}


.charsheet .showarrow.npc-details-show + .showsect::before {
    color: White;
    padding-left: .5em;
}

.charsheet .counted:checked + span::before,
.charsheet .ack-button:not(:checked) + .showsect::before,
.charsheet .showarrow:checked + .showsect::before {
    content: '▼';
}

.charsheet .showarrow.ack-button:checked + .showsect::before {
    font-family: "Pictos" !important;
    content: '2';
}

.charsheet .showsect,
.charsheet label.tab,
.charsheet .clickheader {
    position: relative;
}

.charsheet .showsect,
.charsheet .h3.clickheader,
.charsheet .h2.clickheader {
    display: inline-block;
    margin-left: -.25em;
}

.charsheet .showarrow.ack-button {
    width: 12em;
    margin-right: -12em;
}

.charsheet .showarrow.h2arrow,
.charsheet .showarrow.h3arrow,
.charsheet .showarrow.conditions-show,
.charsheet .showarrow.buffs-show {
    width: 20em;
    margin-right: -20em;
}

.charsheet .skills .showsect,
.charsheet .skill-minishow {
    width: 7em;
    margin: 0 0 0 3.5rem;
    color: #333;
    text-align: left;
}

.charsheet .skills .showarrow {
    width: 7em;
    margin-right: -9em;
    margin-left: -1.2em;
}

.charsheet .showarrow.npc-details-show {
    width: 2em;
    height: 2em;
    margin-right: -2em;
    display: inline-block;
    position: relative;
    top: 2em;
}

.charsheet .showarrow.npc-details-show + .showsect.npc-header .table-cell:first-child {
    padding-left: 1em;
    width: 90%;
    text-align: left;
    vertical-align: revert;
}

.charsheet .showarrow.npc-details-show + .showsect.npc-header .table-cell:last-child {
    padding-right: 1em;
    width: 6em;
    min-width: 6em;
}

/* NPC/Monster */

.charsheet .section-npc.npc-only {
    border-radius: 10px;
    border: 2px solid black;
    display: grid;
    grid-template-rows: 1em;
}

.charsheet .table.npc-header {
    align-items: center;
    background-color: black;
    color: White;
    display: inline-flex;
    flex-direction: row;
    line-height: 1em;
    margin: 0;
}

/* padding npc section */
.charsheet .npc-details,
.charsheet .npc-defense,
.charsheet .npc-offense,
.charsheet .npc-tactics,
.charsheet .npc-abilities,
.charsheet .npc-racial-abilities,
.charsheet .npc-statistics,
.charsheet .npc-ecology {
    padding: 0 1em 0 1em;
}

.charsheet .table.npc-header .table-cell input {
    background-color: black !important;
    color: White !important;
    font-weight: bold;
    line-height: 1em;
    white-space: nowrap;
}

.charsheet .monster-statblock-import {
    border: .2rem solid black;
    padding: 0.75em;
    margin: 2em;
    width: auto;
}

.charsheet .npchead-top ~ .showarrow + .showsect {
    margin: -1.5em 0 -2em 0;
}

.charsheet .npc-statblock-row {
    align-items: start;
    display: inline-flex;
    flex-wrap: wrap;
    height: 2.75em;
    width: inherit;
}

.charsheet .npc-statblock-row .small-label2 > .calc,
.charsheet .npc-statblock-row .small-label2 > input[type="number"] {
    display: inline-block;
    line-height: 2em;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 2em;
}

.charsheet .npc-statblock-row .small-label2 > input:not(.cssbutton)::placeholder {
    color: darkgray;
    font-size: 1rem;
}

/*npc buttons*/
.charsheet .npc-statblock-row button[type="roll"].command-button {
    background-color: #eee;
    border-bottom-width: .2rem;
    border-right-width: .2rem;
    height: 2.5rem;
}

.charsheet .npc-statblock-row button[type="roll"].command-button > span {
    color: #000;
}

.charsheet .npc-statblock-row button[type="roll"].command-button:hover {
    background-color: #fff;
}

.charsheet .npc-statblock-row button[type="roll"].command-button:hover > span {
    color: #f00;
    cursor: pointer;
}

.charsheet .npc-statblock-row span.small-label2,
.charsheet .npc-statblock-row span.small-label2 span {
    align-items: center;
    display: inline-flex;
    font-size: 1em;
    font-style: normal;
}

.charsheet .npc-statblock-row span.small-label2 span + input {
    display: inline-block;
}

.charsheet .npc-statblock-row .small-label2 span:not(.autoexpand) {
    cursor: default;
    font-size: 1.3rem;
    font-style: normal;
    margin: 0 2px 0 2px;
}

.charsheet .sect.expand .attack-damage,
.charsheet .sect.expand .options-showlabel,
.charsheet .sect.expand .desc-showlabel,
.charsheet .sect.expand .macro-text-showlabel,
.charsheet .sect.expand .attack-damage-showlabel,
.charsheet .sect.expand .advmacro-text-showlabel,
.charsheet .sect.expand .init-notes-showlabel,
.charsheet .sect.expand .save-notes-showlabel,
.charsheet .sect.expand .ability-notes-showlabel,
.charsheet .sect.expand .extra-damage-showlabel {
    width: 9em;
}

.charsheet .sect.expand .attack-damage,
.charsheet .sect.expand .options-show,
.charsheet .sect.expand .desc-show,
.charsheet .sect.expand .macro-text-show,
.charsheet .sect.expand .attack-damage-show,
.charsheet .sect.expand .advmacro-text-show,
.charsheet .sect.expand .init-notes-show,
.charsheet .sect.expand .save-notes-show,
.charsheet .sect.expand .ability-notes-show,
.charsheet .sect.expand .extra-damage-show {
    width: 9em;
    margin-right: -9em;
}

.charsheet .sect.expand .level-showlabel,
.charsheet .sect.expand .iterations-showlabel,
.charsheet .sect.expand .advmacro-text-showlabel,
.charsheet .sect.expand .armor-attributes-showlabel,
.charsheet .sect.expand .all-saves-macro-showlabel {
    width: 11em;
}

.charsheet .sect.expand .level-show,
.charsheet .sect.expand .iterations-show,
.charsheet .sect.expand .advmacro-text-show,
.charsheet .sect.expand .armor-attributes-show,
.charsheet .sect.expand .all-saves-macro-show {
    width: 11em;
    margin-right: -11em;
}

.charsheet .sect.expand .weapon-attributes-showlabel {
    width: 11em;
}

.charsheet .sect.expand .weapon-attributes-show {
    width: 11em;
    margin-right: -11em;
}

.charsheet .sect.expand .misc-showlabel,
.charsheet .sect.expand .range-showlabel,
.charsheet .sect.expand .id-showlabel {
    width: 5em;
}

.charsheet .sect.expand .misc-show,
.charsheet .sect.expand .range-show,
.charsheet .sect.expand .id-show {
    width: 5em;
    margin-right: -5em;
}

.charsheet .split-column-show:not(:checked) ~ .repeating-fields .sect.expand .showarrow:first-child {
    margin-left: .125em;
}

.charsheet .sect.expand .showsect {
    margin-right: 1em;
}

.charsheet .repitem .sect.expand {
    display: block;
    clear: both;
    width: 100%;
    margin-top: .5em;
}

.charsheet .innerlabel,
.charsheet .innerlabel.showarrow {
    position: absolute !important;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    margin: 0;
    padding: 0;
}

/* generic css buttons borders and colors only */

.charsheet .cssbutton {
    width: 2.2rem !important;
}

.charsheet .cssbutton,
.charsheet .refreshbutton,
.charsheet .addarmorbutton,
.charsheet .configbutton,
.charsheet .addshieldbutton,
.charsheet .createmacrobutton,
.charsheet .createattackbutton {
    margin-right: -2.4rem;
}

.charsheet .minimize-show {
    margin: 0 -2.2rem 0.2rem 0.5rem;
}

.charsheet .lock-show,
.charsheet .split-column-show,
.charsheet .readonly-show,
.charsheet .createattackbutton {
    margin: 0 -2.2rem 0.2rem 0;
}

.charsheet .deletebutton {
    margin: 0 -2.2rem 0.2rem 3.2rem;
}

.charsheet .csstextbutton {
    width: 5em;
    margin-right: -5em;
}

.charsheet .cssbutton + span::before {
    display: inline-block;
    font-size: 1.5rem;
    margin: 0.3rem 0.2rem 0.2rem 0.2rem;
    padding: 0;
    font-weight: bold;
    border-radius: 0.5rem;
    border: 0.1rem solid #808080;
    background-color: #FFFFFF;
    color: Black;
    text-align: center;
    font-style: normal !important;
    width: 2.2rem;
    height: 2.2rem;
}

.charsheet .csstextbutton + span {
    display: inline-block;
    font-size: 1.4rem;
    margin: 0.3rem 0.2rem 0.2rem 0.2rem;
    padding: 0.1rem 0.2rem 0 0.2rem;
    font-weight: bold;
    border-radius: 0.5rem;
    border: 0.1rem solid #808080;
    background-color: #FFFFFF;
    color: Black;
    text-align: center;
    font-style: normal !important;
    width: 4em;
    height: 2.2rem;
}

.charsheet .showarrow:hover + .showsect:not(.showsect-nocolor),
.charsheet .showarrow:hover + .showsect::before,
.charsheet .counted:hover + span,
.charsheet .counted:hover + span::before {
    color: Red;
}

.charsheet .csstextbutton:hover,
.charsheet .csstextbutton:hover + span,
.charsheet .cssbutton:hover,
.charsheet .cssbutton:hover + span::before {
    color: Red;
    box-shadow: 0.1rem 0.1rem 0.2rem #333;
}

.charsheet .minimize-show:checked ~ .lock-show + span::before,
.charsheet .csstextbutton:checked + span,
.charsheet .cssbutton:checked + span::before {
    background-color: #4a6486;
    color: #DDDDDD;
}

.charsheet .minimize-show:checked + span::before {
    font-family: "Pictos" !important;
    content: '|';
    /* '▢'; */
    padding-top: 0.2rem;
    vertical-align: top;
}

.charsheet .minimize-show:checked:hover + span::before {
    background-color: white !important;
    color: red;
}

.charsheet .minimize-show + span::before {
    content: '▂';
    padding-top: 0;
    vertical-align: top;
}

.charsheet .lock-show + span::before {
    font-family: "Pictos" !important;
    content: ')';
    padding-left: 0.4rem;
    padding-top: 0;
    vertical-align: top;
}

.charsheet .minimize-show:checked ~ .lock-show + span::before,
.charsheet .lock-show:checked + span::before {
    font-family: "Pictos" !important;
    content: '(';
    padding-top: 0.1rem;
    padding-left: 0.2rem;
    vertical-align: top;
}

.charsheet .split-column-show + span::before {
    content: '❚❚';
    /* '▮';*/
    padding-top: 0.1rem;
    vertical-align: top;
}

.charsheet .split-column-show:checked + span::before {
    content: '❚❚';
    padding-left: 0.2rem;
    padding-top: 0.1rem;
    vertical-align: top;
}

.charsheet .split-column-show:checked:hover + span::before {
    background-color: white !important;
    color: red;
}

.charsheet .deletebutton + span::before {
    font-family: "Pictos" !important;
    content: '#';
    padding-left: 0.2rem;
    padding-top: 0;
    vertical-align: top;
}

.charsheet .refreshbutton + span::before {
    font-family: "Pictos" !important;
    content: '1';
    vertical-align: top;
    margin-top: .5em;
    height: 2.3rem;
}

.charsheet .small-label2 .refreshbutton + span::before {
    margin-top: 0.2rem;
}

.charsheet .attack-damage > .small-label2 .refreshbutton + span::before {
    padding: .35rem 0 0 0;
}

.charsheet .table-cell.small-label.cssbutton-cell {
    padding-top: 1em;
}

.charsheet .createmacrobutton + span::before {
    font-family: "Pictos Three" !important;
    content: 'g';
    vertical-align: top;
    padding: 0.4rem 0 0 0 !important;
}

.charsheet .createattackbutton + span::before {
    content: '⚔';
    vertical-align: top;
    padding: 0.3rem 0.1rem 0 0;
}

.charsheet input[name="attr_create_twoweapon_attack"].createattackbutton + span::before {
    padding-top: 0;
}

.charsheet .addarmorbutton + span::before {
    font-family: "Pictos Three" !important;
    content: 'b';
    vertical-align: top;
    padding: 0.4rem 0 0 0 !important;
}

.charsheet .addshieldbutton + span::before {
    font-family: "Pictos Custom" !important;
    content: 'e';
    vertical-align: top;
    padding: 0.4rem 0 0 0 !important;
}

.charsheet .maxhealbutton + span::before,
.charsheet .newbuff-button + span::before,
.charsheet .newtemplate-button + span::before {
    content: '✚';
    /*'⛨☤';*/
    vertical-align: top;
    padding: 0.1rem 0.2rem 0.1rem 0.1rem;
    width: 1.6em;
    height: 1.6em;
}

.charsheet .newbuff-button + span::before {
    padding: 0.5rem 0.2rem 0.1rem 0.1rem;
}

.charsheet .cssbutton-label {
    font-weight: bold;
    font-size: 1rem;
    font-style: italic;
    vertical-align: bottom;
    cursor: help;
    line-height: 1em;
}

.charsheet input.configbutton,
.charsheet input.readonly-show,
.charsheet input.refreshbutton {
    vertical-align: top;
    margin-top: .5em;
    padding-top: 0;
    margin-left: .75em;
}

.charsheet .configbutton + span::before {
    content: '⛭';
    margin-top: .5em;
    vertical-align: top;
    padding: 0.1rem 0 0 0 !important;
    height: 2.3rem;
}

.charsheet .configbutton:checked:hover + span::before {
    background-color: white !important;
    color: red;
}

.charsheet .readonly-show + span::before {
    background-color: white !important;
    background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/edit_mode.png");
    background-position: 0.2rem 0.2rem;
    background-size: 1.6rem;
    content: ' ';
    color: transparent;
    background-repeat: no-repeat !important;
    vertical-align: top;
    margin-top: .5em;
    height: 2.3rem;
}

.charsheet .readonly-show:hover + span::before {
    background-color: white !important;
    background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/edit_mode_red.png");
    background-position: 0.2rem 0.2rem;
    background-size: 1.6rem;
    color: transparent;
}

.charsheet .readonly-show:checked + span::before {
    background-color: #4a6486 !important;
    background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/compact_mode.png");
    background-position: 0.2rem 0.2rem;
    background-size: 1.6rem;
    color: transparent;
}

.charsheet .readonly-show:checked:hover + span::before {
    background-color: white !important;
    background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Community/Images/compact_mode_red.png");
    background-position: 0.2rem 0.2rem;
    background-size: 1.6rem;
    color: transparent;
}

.charsheet .allrows-note span {
    vertical-align: middle;
}

.charsheet .allrows-note {
    margin-left: 1em;
}

.charsheet .small-label2 .createattackbutton + span::before {
    margin-top: 0.2rem;
}

.charsheet .small-label2 input[type="checkbox"].csstextbutton,
.charsheet .small-label2 input[type="checkbox"].cssbutton {
    -webkit-margin-before: 0;
    display: inline-block;
}

/***********************repeating item counter ************************************/

.charsheet .repeating-fields {
    counter-reset: sheet-rep-items -1;
    position: relative;
}

/* do not allow user to click when minimized */

.charsheet .minimize-show:checked ~ .lock-show,
.charsheet .minimize-show:checked ~ .repeating-fields .counted,
.charsheet .lock-show:checked ~ .repeating-fields .counted,
.charsheet .lock-show:checked ~ .repeating-fields .showsect {
    pointer-events: none;
}

.charsheet .minimize-show:checked ~ .repeating-fields .counted:checked + span::before,
.charsheet .minimize-show:checked ~ .repeating-fields .counted + span::before,
.charsheet .counted + span::before {
    counter-increment: sheet-rep-items;
    content: counter(sheet-rep-items) '. ►';
    width: auto;
    color: inherit;
}

.charsheet .counted:checked + span::before {
    counter-increment: sheet-rep-items;
    content: counter(sheet-rep-items) '. ▼' !important;
    width: auto !important;
    min-width: 2.5em;
}

/* inside .table */

.charsheet .counted,
.charsheet .counted.sect-show {
    left: .25em;
    top: 0;
    width: 2em;
    padding: 0;
    position: absolute;
}

.charsheet .hiderepborder .table-repeating .counted {
    top: 1.5em;
}

.charsheet .counted + span {
    margin-left: -2.25em;
    font-size: .85em;
}

.charsheet .counted + span.table-cell {
    vertical-align: top;
    padding-top: .25em;
    text-align: left;
    width: 2.5em;
}

.charsheet .nontable-repeating .counted,
.charsheet .nontable-repeating .counted.sect-show,
.charsheet .nontable-repeating .counted + span {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.charsheet .repeating-rollbutton {
    width: 2em;
}

.charsheet .nontable-repeating .repeating-rollbutton button {
    position: relative;
    margin-left: 0;
    min-width: 2em;
}

/*highlight text */
.charsheet .boldlabel-check + b:not(.offCase),
.charsheet .boldlabel-check + label b:not(.offCase),
.charsheet .condition-exists + label,
.charsheet .status-panel label b,
.charsheet input.narrow-numbers + b:not(.offCase) {
    display: inline;
    font-size: 1.2rem;
    line-height: 1.75em;
    font-weight: normal;
    padding: .12em .5em .2em .5em;
    white-space: nowrap;
}

.charsheet .boldlabel-check:checked + b:not(.offCase),
.charsheet .boldlabel-check:checked + label b:not(.offCase),
.charsheet .condition-exists.sect-either-show-n:checked ~ label,
.charsheet .condition-exists:checked + label {
    background-color: #4a6486;
    color: White;
    border-radius: 0.5rem;
    display: inline;
    font-weight: normal;
    padding: .1rem .5rem .25rem .25rem;
}

.charsheet .boldlabel-check + b,
.charsheet .boldlabel-check + label {
    cursor: pointer;
}

/*selected text */
.charsheet .selectedlabel-check + b:not(.offCase) {
    font-size: 1.2rem;
    line-height: 1.5em;
    padding: 0.1rem .65rem 0.1rem .25rem;
    cursor: help;
}

.charsheet .corerules .table-row .table-cell {
    padding-left: .5em;
    color: inherit;
}

.charsheet .selectedlabel-check:hover + b:not(.offCase),
.charsheet .selectedlabel-check:focus + b:not(.offCase),
.charsheet .selectedlabel-check:checked:hover + b:not(.offCase),
.charsheet .selectedlabel-check:checked:focus + b:not(.offCase) {
    color: red;
}

.charsheet .selectedlabel-check:checked + b:not(.offCase) {
    color: #888;
}

.charsheet .conditions {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: .25em;
    padding-right: .25em;

}

.charsheet .conditions .nontable-name {
    margin: -.25em -.25em 0 -.25em;
    width: calc(100% + .5em);
}

.charsheet .conditions .option-condition {
    white-space: nowrap;
    font-size: 1.2rem;
}

.charsheet .no-pad-right {
    padding-right: 0 !important;
}

.charsheet hr {
    border-color: Black;
    margin: 0.5rem 0;
}

.charsheet .hr.skinny {
    border-color: DarkGray;
    height: 0.1rem;
    margin: 0;
}

.charsheet .npc-hr {
    padding: 0;
    margin: 0;
}

/* used to highlight background of sub-nav row on repeating .sections */
.charsheet .subnav-hr {
    width: 100%;
    border: 1.2rem solid transparent;
    background-color: #DAE4F2;
    margin-top: -2.3rem;
}

.charsheet .parchment-1:checked ~ .pf-wrapper .subnav-hr,
.charsheet .parchment-2:checked ~ .pf-wrapper .subnav-hr {
    border-color: darkkhaki;
    background-color: darkkhaki;
}

.charsheet .npchead-bottom {
    margin-bottom: 0.5rem;
}

.charsheet .npchead-top {
    margin-top: 0.5rem;
}

.charsheet .spellrange-header {
    width: 15%;
}

.charsheet .iterative_attack_section .table-row .table-cell {
    vertical-align: top;
}

.charsheet .iterative_attack_section .table-row .table-cell:first-child {
    text-align: left;
    padding-top: .5em;
    white-space: nowrap;
}

.charsheet .footer {
    text-align: center;
    font-size: 1.2rem;
    border: 0.1rem #000 solid;
    border-radius: 0.3rem;
    clear: both;
}

.charsheet .footnotes {
    width: 98%;
    font-size: 1rem;
    font-family: 'Roboto Mono', monospace;
    list-style: none;
    padding-left: 1em;
    white-space: pre-line;
    line-height: 1.2em;
}

.charsheet .compendium-note {
    float: right;
    text-align: right;
    margin-top: .25em;
}

.charsheet .vertical-middle {
    vertical-align: middle;
}

.charsheet .drag-icon {
    font-weight: bold;
    font-size: 2.4rem;
    vertical-align: sub;
}

.charsheet .compendium-icon {
    font-weight: bold;
    font-family: Pictos;
    font-size: 1.8rem;
    vertical-align: middle;
}

.charsheet .repcontainer .repitem,
.charsheet .repeating-sect .repitem {
    padding: 0.2rem 0.4rem 0.1rem 0;
    margin: 0.2rem 0 0.4rem 0;
    border: 0.2rem solid #CCCCCC;
    border-radius: 0.7rem;
    overflow: hidden;
    display: block;
    width: 100%;
}

/* we must have fixed whatever was moving stuff around cause this has no effect anymore
.repcontainer.editmode + .repcontrol {
    margin-bottom: 3em;
}
*/
.charsheet .repcontainer.editmode + .repcontrol .repcontrol_edit {
    text-align: right;
    /* margin-left: calc(95% - 4em);*/
    width: 10%;
    margin-left: 89%;
    float: none;
}

.charsheet .repcontainer.editmode .repitem .itemcontrol {
    z-index: 3;
    background-color: rgba(220, 220, 220, 0.40);
}

.charsheet .repeating-sect {
    position: relative;
}

.charsheet .table-rollbuttoncell,
.charsheet .table.cell .table-rollbuttoncell,
.charsheet .small-label2-table-rollbuttoncell {
    vertical-align: top;
}

/*Expand to cross both columns */

.charsheet .repeating-sect .repcontrol {
    width: 95%;
    text-align: center;
    margin: 0.2rem 0 0 0;
    padding: 0;
    clear: both;
}

.charsheet .split-column-show:not(:checked) ~ .repeating-fields .repitem {
    clear: both;
}

.charsheet .split-column-show:checked ~ .repeating-fields .repitem {
    width: 50%;
    /*    display: inline-block; */
    float: left;
}

.charsheet .split-column-show:checked ~ .repeating-fields .repitem:nth-child(odd),
.charsheet .split-column-show:checked ~ .repeating-fields .repitem:first-child(odd) {
    float: left;
}

.charsheet .split-column-show:checked ~ .repeating-fields .repitem:nth-child(even) {
    float: right;
}

.charsheet .repcontrol_add::before {
    content: '&';
    visibility: visible;
    font-family: pictos;
    background-color: #fff;
    border: 0.1rem solid #000;
    border-radius: 0.2rem;
    font-size: 1.6rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    color: #000;
}

.charsheet .repcontrol .repcontrol_edit:after {
    /*	content: 'W'; hamburger menu*/
    font-weight: bold;
    content: '☰';
    visibility: visible;
    font-family: pictos;
    background-color: #fff;
    border: 0.1rem solid #000;
    border-radius: 0.2rem;
    font-size: 1.6rem;
    padding: 0.3rem 0.3rem 0.2rem 0.3rem;
    color: #000;
}

.charsheet .editmode ~ .repcontrol .repcontrol_edit:after {
    font-family: Pictos;
    content: '3';
    width: 1.6rem;
}

.charsheet .repcontrol_edit:hover:before,
.charsheet .repcontrol_edit:hover:after,
.charsheet .repcontrol_add:hover:before {
    /*    background-color: #EFEFEF; */
    color: red !important;
    box-shadow: 0.1rem 0.1rem 0.2rem #333;
}

.charsheet .repcontrol .btn {
    border: none;
    color: white !important;
    font-size: 0;
    padding: 0.3rem 0 0 0;
    margin-left: 5%;
    background: none;
    box-shadow: none;
}

.charsheet .repcontrol .btn:focus {
    outline: 0;
}

.charsheet .repcontrol_add,
.charsheet .repcontrol_edit {
    display: block;
    background: none;
    color: transparent !important;
    border: none;
    box-shadow: none;
}

.charsheet .repcontrol_del,
.charsheet .repcontrol_move {
    display: block;
    background: black;
    color: White !important;
    border: none;
    box-shadow: none;
    width: 2em;
}

.charsheet .repcontrol_move {
    float: right;
    margin-right: 0.5rem;
}

.charsheet .repcontainer.editmode .itemcontrol .btn {
    margin-top: .25em;
}

.charsheet .repcontainer.editmode .itemcontrol .repcontrol_del {
    margin-right: .25em;
}

.charsheet button[type="roll"].blank-roll-button::before {
    content: ' ';
}

.charsheet .options {
    padding: 0.2rem 0 0.2rem 0.5rem;
    border: 0.1rem solid #808080;
    border-radius: 0.5rem;
    color: inherit;
}

.charsheet .table.options span {
    margin: 0 0 0 1em;
}

.charsheet .readonly-show:not(:checked) ~ .main .options-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .options-readonly .table-cell {
    background-color: WhiteSmoke;
}

.charsheet .options-table-named,
.charsheet .conditionstable {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.charsheet .options-table-named .table-name,
.charsheet .table-named .table-name,
.charsheet .conditions .table-name {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.charsheet .nontable-repeating .options .table-row > span {
    margin-right: 1em;
    display: inline-block;
}

.charsheet .nontable-repeating .options span input[type="checkbox"] {
    margin-left: .5em;
    margin-bottom: .25em;
}

.charsheet .section-condbuffedit {
    margin-bottom: 0.4rem;
}

.charsheet .section-status {
    margin-top: .25em;
    display: flex;
    flex-flow: row nowrap;
}

.charsheet .section-status .status-panel:first-child {
    margin-right: .125em;
}

.charsheet .status-panel {
    display: inline-block;
    position: relative;
    flex-basis: 50%;
    line-height: 1.2em;
}

.charsheet .status-panel .options {
    padding: .5rem;
    display: block;
    width: auto;
    margin-bottom: 0;
    height: 100%;
    min-height: 100%;
}

.charsheet .status-panel .options div {
    display: inline;
}

.charsheet .status-panel label b {
    padding: 0 0 0 .25em;
}

/* use an outline for invalid input/calculation or to bring attention to the field */
.charsheet .warn-show:checked + textarea.highlight,
.charsheet .warn-show:checked + input.highlight,
.charsheet .warn-mshow:checked ~ input.highlight,
.charsheet .warn-mshow:checked ~ textarea.highlight,
.charsheet .warn-show:checked + .highlight input,
.charsheet .warn-show:checked + .highlight textarea,
.charsheet .warn-mshow:checked ~ .highlight input,
.charsheet .warn-mshow:checked ~ .highlight textarea {
    outline: 0.2rem #B8860B dashed !important;
}

.charsheet .error-show:checked + input.highlight,
.charsheet .error-show:checked + textarea.highlight,
.charsheet .error-mshow:checked ~ input.highlight,
.charsheet .error-mshow:checked ~ textarea.highlight,
.charsheet .error-show:checked + .highlight input,
.charsheet .error-show:checked + .highlight textarea,
.charsheet .error-mshow:checked ~ .highlight input,
.charsheet .error-mshow:checked ~ .highlight textarea {
    outline: 0.2rem #FF0044 dotted !important;
}

.charsheet .offscreen {
    top: 0;
    left: 0;
    position: absolute !important;
    clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem);
    overflow: hidden !important;
}

.charsheet .table-group {
    display: table-row-group;
    overflow: hidden;
    border-collapse: collapse;
}

.charsheet .table-group-head {
    display: table-header-group;
    overflow: hidden;
    border-collapse: collapse;
}

.charsheet .table-group-head .table-divider,
.charsheet .table-group-head .table-divider-lg {
    vertical-align: bottom;
}

.charsheet .header-row {
    background-color: Black;
    color: White;
    padding-left: 1rem;
    min-height: 1em;
}

.charsheet .table-header {
    color: #333;
    display: table-cell;
    padding: 0 2px 0 2px;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    vertical-align: middle;
    background-color: LightGray;
    min-height: 1.25em;
    overflow: hidden;
}

.charsheet .class-grid .table-header {
    vertical-align: bottom;
}

.charsheet .class-grid .table-header[data-i18n="fortitude-abbrv"],
.charsheet .class-grid .table-header[data-i18n="reflex-abbrv"],
.charsheet .class-grid .table-header[data-i18n="willpower-abbrv"] {
    text-transform: uppercase;
}

.charsheet .ability-scores .table {
    height: 100%;
    min-height: 15em;
}

.charsheet .small-label2 {
    display: inline-block;
    margin: .1em .124em .1em .125em;
    height: 3em;
    vertical-align: top;
    text-align: center;
    position: relative;
    width: initial;
}

.charsheet .core-details .small-label2 {
    margin: 0 0.2rem 0 0.2rem;
    padding: 0 0.4rem 0.2rem 0.4rem;
}

.charsheet .nontable-repeating .linked-fields {
    vertical-align: top;
}

.charsheet .linked-fieldsuse-size {
    max-height: 3.6em;
}

.charsheet .small-label2 span:not(.autoexpand) {
    padding: 0 .07em 0 .07em;
    text-align: center;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: bold;
    position: relative;
    bottom: 0;
    overflow-x: visible;
    white-space: nowrap;
}

.charsheet .text-button,
.charsheet .buttontext-button {
    border: 0;
    width: 90%;
    padding: .125em .125em .125em .25em;
}

.charsheet span.text-button {
    padding-left: 1.8em;
}

.charsheet .small-label2 .text-button span,
.charsheet .text-button,
.charsheet .buttontext-button,
.charsheet .text-button span {
    text-align: left;
    font-size: 1.6rem;
    background-color: Black;
    font-weight: normal;
    font-style: normal;
    color: White;
}

.charsheet .small-label2.autoexpand span:not(.autoexpand) {
    white-space: nowrap;
}

.charsheet .repeating-id .small-label2 span.selectable,
.charsheet span[name="attr_row_id"].selectable,
.charsheet input.selectable.calc,
.charsheet input[name="attr_mainhand_id"].entry-long,
.charsheet input[name="attr_offhand_id"].entry-long,
.charsheet input[type="text"][name="attr_source-main"],
.charsheet input[type="text"][name="attr_source-off"],
.charsheet input[type="text"][name="attr_source-item"],
.charsheet input[type="text"][name="attr_source-spell"],
.charsheet input[type="text"][name="attr_source-ability"] {
    display: inline-block;
    height: 1.5rem;
    background-color: #fbf5d0;
    color: #5f5207;
    margin: 0;
    padding: .125rem;
    white-space: nowrap;
    width: auto;
    border-radius: 4px;
    border: 1px solid lightgrey;
    text-align: center;
    box-sizing: content-box;
}

.charsheet .repeating-id {
    display: inline-block;
    height: auto;
    padding: .25em;
    margin: .25em;
}

.charsheet .repeating-id .small-label2 span.selectable,
.charsheet .repeating-id .small-label2 span,
.charsheet .repeating-id .small-label2 {
    font-weight: normal;
    font-style: normal;
    color: initial;
    white-space: nowrap;
    height: auto;
    display: inline-block;
}

.charsheet .small-label2 > input:not(.cssbutton),
.charsheet .small-label2 > select,
.charsheet .small-label2 > .calc {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    margin: auto;
    line-height: 2rem;
    max-height: 2.5rem;
}

.charsheet .small-label2 > select {
    padding-top: 0;
}

/* added for ability level basis inline formulas */
.charsheet .small-label2 > input.error-mshow {
    display: none;
}

.charsheet .small-label2 input::-moz-focus-inner {
    padding: 0;
}

/* webkit (chrome) needs different css firefox centers perfectly, not chrome.must make it equal to 1.825 */
.charsheet .small-label2 > input[type="checkbox"]:not(.cssbutton),
.charsheet .small-label2 > input[type="radio"]:not(.cssbutton) {
    margin: auto;
    width: 3rem;
    height: 1.5rem;
    border: none;
    box-shadow: none;
}

.charsheet .hit-points {
    width: calc(30% - 4px);
    display: inline-block;
    min-height: 4em;
    min-width: 15em;
    background-color: LightGray;
    margin-right: .125em;
    color: initial;
}

.charsheet .wound-threshold,
.charsheet .h2-section.wound-threshold {
    display: inline-block;
    height: auto;
    /*width:16%;*/
    margin-right: .125em;
    background-color: WhiteSmoke;
    min-height: 11.8em;
    min-width: 11.5em;
    width: auto;
}

.charsheet .readonly-show:checked ~ .main .section-core .wounds-show:checked ~ .wound-threshold {
    width: 20%;
}

.charsheet .hit-point-calcs {
    width: calc(70% - 4px);
    display: inline-block;
    height: auto;
    min-width: 20em;
}

.charsheet .wounds-show:checked ~ .hit-point-calcs {
    width: auto;
    max-width: calc(49% - 4px);
}

.charsheet .readonly-show:not(:checked) ~ .main .h2-section.initiative {
    min-width: 9em;
}

.charsheet .readonly-show:not(:checked) ~ .main .initiative {
    /*	width: 32%;*/
    display: inline-block;
}

.charsheet .readonly-show:not(:checked) ~ .main .speeds {
    /*	width: 48.5%;*/
    display: inline-block;
    min-width: 26em;
}

.charsheet .hit-points .table-header:last-child,
.charsheet .hit-points .table-cell:last-child,
.charsheet .initiative .table-header:last-child,
.charsheet .initiative .table-cell:last-child {
    padding-right: .5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .h2-section.armor-shield {
    width: calc(100% - 4px);
    display: inline-block;
    margin-top: 0;
}

.charsheet .h2-section.armor-shield {
    width: calc(70% - 4px);
    display: inline-block;
    margin-top: 0;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .h2-section.armor-penalties {
    width: calc(100% - 4px);
    display: inline-block;
}

.charsheet .h2-section.armor-penalties {
    width: calc(30% - 4px);
    display: inline-block;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.ability-buttons {
    width: calc(50% - 6px);
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.section-mythic {
    width: calc(100% - 4px);
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section .col .h2-section.ability-buttons,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section .col .h2-section.section-mythic {
    width: calc(50% - 6px);
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section .col .h2-section.section-mythic {
    width: calc(100% - 4px);
    float: left;
}

.charsheet div.feats .table-row span {
    text-align: center;
}

.charsheet div.feats .table-row span:last-child {
    width: auto;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.feats,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section .col .h2-section.feats {
    width: calc(100% - 4px);
    display: inline-table;
}

/* if first row is not header */

.charsheet .table-name + .table-group .small-label2 {
    margin-top: 1.25em;
}

.charsheet .notes-cell,
.charsheet .table-cellnotes-cell {
    vertical-align: top;
}

.charsheet .readonly-show:not(:checked) ~ .main .section:not(.section-npc) > .h2-section:not(.wide-readonly).notes {
    width: calc(100% - 4px);
}

.charsheet .config-table {
    margin-bottom: 1em;
    background-color: inherit;
}

.charsheet .config-table .table-cell {
    vertical-align: top;
    padding-left: 0;
    padding-right: .5em;
}

.charsheet .config-table {
    display: inline-table;
}

.charsheet .roll-config {
    width: 39%;
}

.charsheet .roll-appear {
    width: 59%;
    float: right;
}

.charsheet .table-cellrepeating-rollbutton {
    vertical-align: top;
}

.charsheet .divider-subtext {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: bold;
    margin-top: -1.7em;
}

.charsheet .divider,
.charsheet .divider-lg,
.charsheet .divider-db,
.charsheet .divider-db-lg {
    text-align: center;
    vertical-align: middle;
    border: none;
}

.charsheet .divider,
.charsheet .divider-db {
    width: .5em;
    font-size: .85em;
    font-weight: normal;
}

.charsheet .divider-lg,
.charsheet .divider-db-lg {
    width: 1.5rem;
    white-space: nowrap;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 1rem;
}

.charsheet .divider,
.charsheet .divider-lg {
    display: table-cell;
}

.charsheet .divider-db,
.charsheet .divider-db-lg {
    display: inline-block;
    margin-left: -.125em;
    margin-top: .65em;
}

.charsheet .table-name,
.charsheet .nontable-name {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    color: White;
    background-color: Black;
    padding-top: .25em;
}

.charsheet .nontable-name {
    caption-side: top;
    width: 100%;
    display: block;
}

.charsheet .spellclassnav ~ .nontable-name {
    margin-top: 0;
    line-height: normal;
}

.charsheet .spellclassnav ~ .tab99:checked ~ .nontable-name:not(.section0) {
    margin-top: .33em;
}

/* important so overrides more specific */
.charsheet .center {
    text-align: center !important;
}

.charsheet .left {
    text-align: left !important;
}

.charsheet .right {
    text-align: right !important;
}

.charsheet .spellrange-data {
    width: 100% !important;
    text-align: center !important;
}

.charsheet .spellcaster-button,
.charsheet .table-cellspellcaster-button {
    text-align: left;
}

/*
.readonly-show:checked  ~ main spellcaster-button,
.readonly-show:checked  ~ main table-cellspellcaster-button {
    width: 14.5rem;
}
.readonly-show:not(:checked)  ~ main spellcaster-button,
.readonly-show:not(:checked)  ~ main table-cellspellcaster-button {
    max-width: 14.5rem;
	width:auto;
}
spellclass-concentration spellcaster-button {
	max-width:14.4rem !important;
	width:14.4rem !important;
}
*/
.charsheet button[type="roll"].spellcaster-button {
    font-size: 1.4rem;
    white-space: nowrap;
    width: auto;
    text-align: left;
    margin: 0;
}

.charsheet .table-group-headhidden-head {
    position: absolute;
    left: -2000px;
}

.charsheet .hidden-head .table-header {
    height: 0.1rem;
    min-height: 0.1rem;
    line-height: 0.1rem;
    max-height: 0.1rem;
    font-size: .25em;
}

/* tiny padding in skills */

.charsheet .skills .table-cell {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
}

.charsheet .nontable-repeating {
    border-collapse: collapse;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.charsheet .nontable {
    width: 100%;
    text-align: justify;
    border-collapse: collapse;
    display: inline-block;
}

.charsheet .buffs,
.charsheet .conditions {
    border-style: solid;
    border-width: 0.2rem;
    border-radius: 0.5rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.charsheet .entry-wide,
.charsheet span.entry-wide input,
.charsheet span.entry-wide input[type="text"],
.charsheet span.entry-wide textarea {
    width: 100%;
    max-width: 100%;
}

.charsheet .nontable .divider-db-lg {
    vertical-align: top;
}

.charsheet .nontable-repeating .divider-db-lg {
    vertical-align: middle;
    line-height: 1em;
}

.charsheet .entry-vlong {
    width: 13em;
}

.charsheet .entry-long {
    width: 10em;
}

.charsheet .entry-med {
    width: 8em;
}

.charsheet .entry-short {
    width: 5.5em;
}

.charsheet .entry-vshort {
    width: 4em;
}

.charsheet input[type="number"].entry-wide {
    width: 98%;
    max-width: 98%;
}

/****** repeating items ****/

.charsheet .minimize-show:checked ~ .repeating-fields .divider-db-lg,
.charsheet .minimize-show:checked ~ .repeating-fields .divider-db,
.charsheet .split-column-show:checked ~ .repeating-fields .divider-db-lg,
.charsheet .split-column-show:checked ~ .repeating-fields .divider-db,
.charsheet .counted:not(:checked) ~ .divider-db-lg,
.charsheet .counted:not(:checked) ~ .divider-db {
    width: .5em;
    margin-left: -.4em;
}

.charsheet .minimize-show:checked ~ .repeating-fields .small-label2,
.charsheet .split-column-show:checked ~ .repeating-fields .small-label2,
.charsheet .counted:not(:checked) ~ .small-label2 {
    margin: 0;
    min-width: 3em;
}

.charsheet label.small-label2.narrow-numbers.space-right-collapse input {
    margin: 0 0 0 3px;
    text-align: center;
    height: 2.125em;
}

.charsheet .split-column-show:checked ~ .repeating-fields .nontable-repeating .counted {
    margin-left: -.25em;
}

.charsheet .split-column-show:checked ~ .repeating-fields .nontable-repeating .counted + span {
    margin-left: -2.25em;
    width: 2.5em;
}

/*
.charsheet .split-column-show:checked~.repeating-fields .small-label2 {
    height: auto;
}
*/

.charsheet .split-column-show:checked ~ .repeating-fields .small-label2 span:not(.autoexpand) {
    margin: 0 -.2em 0 -.2em;
    padding: 0;
}

/*** when collapsed (sheet-counted unchecked) shrink width
  * if split, then widen width (so it is more than 1/2 wide)
  * split should override collapse/minimize
  * without -shrink should .expand on split but not collapse
  */
.charsheet .entry-60p,
.charsheet .entry-60p-shrink {
    width: 59%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-60p-shrink .counted:not(:checked) ~ .entry-60p-shrink {
    width: 40%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-60p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-60p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-60p-shrink {
    width: 80%;
}

.charsheet .entry-30p,
.charsheet .entry-30p-shrink {
    width: 30%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-30p-shrink,
.charsheet .counted:not(:checked) ~ .entry-30p-shrink {
    width: 20%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-30p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-30p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-30p-shrink {
    width: 40%;
}

.charsheet .entry-25p,
.charsheet .entry-25p-shrink {
    width: 25%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-25p-shrink,
.charsheet .counted:not(:checked) ~ .entry-25p-shrink {
    width: 20%;
}

.charsheet .split-column-show:checked ~ .repeating-fields .entry-25p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-25p-shrink {
    width: 35%;
}

.charsheet .entry-20p,
.charsheet .entry-20p-shrink,
.charsheet .readonly-show:not(:checked) ~ .main .entry-20p-shrink,
.charsheet .minimize-show:checked ~ .repeating-fields .entry-20p-shrink,
.charsheet .counted:not(:checked) ~ .entry-20p-shrink {
    width: calc(23% - 6rem);
    min-width: 6rem;
}

.charsheet .split-column-show:checked ~ .repeating-fields .entry-20p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-20p-shrink {
    width: 25%;
}

.charsheet .entry-15p,
.charsheet .entry-15p-shrink {
    width: 15%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-15p-shrink,
.charsheet .counted:not(:checked) ~ .entry-15p-shrink {
    width: 10%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-15p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-15p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-15p-shrink {
    width: auto;
}

.charsheet .entry-12p,
.charsheet .entry-12p-shrink {
    width: 12%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-12p-shrink,
.charsheet .counted:not(:checked) ~ .entry-12p-shrink {
    width: 9%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-12p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-12p-shrink {
    width: auto;
}

.charsheet .entry-10p-shrink {
    width: 10%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-10p-shrink,
.charsheet .counted:not(:checked) ~ .entry-10p-shrink {
    width: 8%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-10p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-10p-shrink {
    width: 12%;
}

.charsheet .entry-8p,
.charsheet .entry-8p-shrink {
    width: 8%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-8p-shrink,
.charsheet .counted:not(:checked) ~ .entry-8p-shrink {
    width: 6%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-8p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-8p-shrink {
    width: 10%;
}

.charsheet .entry-5p,
.charsheet .entry-5p-shrink {
    width: 5%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-5p-shrink,
.charsheet .counted:not(:checked) ~ .entry-5p-shrink {
    width: 4%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-5p-shrink,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-5p,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-5p-shrink {
    width: 8%;
}

.charsheet .entry-rowname {
    width: 35%;
}

.charsheet .readonly-show:not(:checked) ~ .main .entry-rowname {
    width: 65%;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-vlong,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-vlong,
.charsheet .counted:not(:checked) ~ .small-label2entry-vlong {
    width: 11em;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-long,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-long,
.charsheet .counted:not(:checked) ~ .small-label2entry-long {
    width: 9em;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-short,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-short,
.charsheet .counted:not(:checked) ~ .small-label2entry-short {
    width: 4.5em;
}

.charsheet .minimize-show:checked ~ .repeating-fields .entry-vshort,
.charsheet .split-column-show:checked ~ .repeating-fields .entry-vshort,
.charsheet .counted:not(:checked) ~ .small-label2entry-vshort {
    width: 3.5em;
}

.charsheet .minimize-show:checked ~ .repeating-fields .small-label2space-right-collapse,
.charsheet .minimize-show:checked ~ .repeating-fields .linked-fieldsspace-right-collapse,
.charsheet .counted:not(:checked) ~ .small-label2space-right-collapse,
.charsheet .counted:not(:checked) ~ .linked-fieldsspace-right-collapse {
    margin-right: .125em;
}

/* old buffs */
.charsheet .sect-buffoldbuff .linked-fields {
    width: 13.5em;
}

.charsheet .minimize-show:checked ~ .sect-buffoldbuff .linked-fields,
.charsheet .sect-buffoldbuff .counted:not(:checked) ~ .linked-fields {
    width: 4em;
}

/* new buffs*/
.charsheet .sect-buffnewbuff .linked-fields {
    max-width: 32em;
}

.charsheet .minimize-show:checked ~ .sect-buffnewbuff .linked-fields,
.charsheet .sect-buffnewbuff .counted:not(:checked) ~ .linked-fields {
    width: 13.5em;
}

.charsheet .sect-buffnewbuff .linked-fields {
    border: 0.1rem solid #808080;
    border-radius: 0.5rem;
    margin: .125em 0 .125em 0;
}

/******* end of generic repeating items ********/

.charsheet .extra-damage,
.charsheet .extra-damage *,
.charsheet .sect.expand div.macro-text {
    background-color: transparent;
    color: inherit;
    height: auto;
}

.charsheet div.macro-text .small-label2,
.charsheet .extra-damage .small-label2 {
    text-align: left;
    width: auto;
    height: auto;
}

.charsheet .readonly-show:checked .main .defense-table .table-header {
    width: 6%;
}

.charsheet .spell-options .table-cell,
.charsheet .command-buttons .table-cell {
    text-align: left;
}

.charsheet .status-panel .options .small-label2 {
    height: 3em;
    margin-bottom: -.25em;
}

.charsheet .status-panel .options .small-label2 input {
    position: inherit;
}

.charsheet .section-state:checked ~ .background-color1,
.charsheet .section-state:checked ~ .background-color1.custrepeating-border {
    background-color: #f0f8ff;
    border-color: #617c9f;
}

.sheet-darkmode .tab-content .charsheet .section-state:checked ~ .background-color1,
.sheet-darkmode .tab-content .charsheet .section-state:checked ~ .background-color1.custrepeating-border {
    background-color: #151f28;
    border-color: #617c9f;
    color: #9f9f9f;
}

.charsheet .monster-indicator {
    display: flex;
    justify-content: center;
    margin-top: -2em;
    text-align: center;
}

.charsheet .section-header {
    display: inline-table;
    vertical-align: bottom;
}

.charsheet .section-header .small-label2 {
    display: table-cell;
    padding: 0 .25em 0 .25em;
    vertical-align: bottom;
}

.charsheet .announcements {
    width: 100%;
    display: block;
    clear: both;
}

.charsheet textarea-gray:not(:checked) ~ .small-label2 textarea {
    background-color: silver;
    color: DimGray;
    pointer-events: none;
}

.charsheet textarea-gray:not(:checked) ~ .small-label2 {
    pointer-events: none;
}

.charsheet .insertmacrocell {
    display: table-cell;
}

.charsheet .insertmacrocell .small-label2 {
    display: inline;
}

.charsheet .ability-column select,
.charsheet .ability-column select.select-small,
.charsheet .ability-column {
    max-width: 5em;
    min-width: 3.75em;
    width: 4.5em;
}

.charsheet .exspsu-dropdown select {
    width: 3.5em;
    min-width: 3em;
    max-width: 4em;
}

/* Hides Type select when Feats or Traits are selected */
.charsheet .custnavsection-1:checked ~ div > .exspsu-dropdown select,
.charsheet .custnavsection-1:checked ~ div > .exspsu-dropdown select + span,
.charsheet .custnavsection-1:checked ~ div > .exspsu-dropdown select + span ~ .show-traits,
.charsheet .custnavsection-2:checked ~ div > .exspsu-dropdown select,
.charsheet .custnavsection-2:checked ~ div > .exspsu-dropdown select + span,
.charsheet .custnavsection-2:checked ~ div > .exspsu-dropdown select + span ~ .show-feats {
    display: none;
}

.charsheet .custnavsection-1:checked ~ div > .exspsu-dropdown select + span ~ *,
.charsheet .custnavsection-2:checked ~ div > .exspsu-dropdown select + span ~ * {
    display: block;
    position: revert;
}

.charsheet .tabcopy:not(:checked) ~ div > .exspsu-dropdown input,
.charsheet .tabcopy:not(:checked) ~ div > .exspsu-dropdown input ~ * {
    display: none;
}

.charsheet .tabcopy:not(:checked) ~ div > .exspsu-dropdown {
    width: min-content;
    padding: revert;
}

.charsheet .section-ability-list .small-label2 span:not(.autoexpand) {
    font-size: 1rem;
}

.charsheet span.table-cell.linked-tablecellextra-sect {
    text-align: right;
}

.charsheet .kinetic-sect .linked-tablecell,
.charsheet .kinetic-sect .linked-fields {
    height: auto;
}

.charsheet .defense-table .table-group-head span.table-header {
    min-width: 3.25em;
    width: 4em;
    padding: 0 0.2rem 0 0.2rem;
}

/************************************    TOGGLES **************************************/
/* edit view h2 and h3 arrows*/
.charsheet .h2arrow:not(:checked) + .showsect + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .h2-section + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .npc-hr + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .npc-hr + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .cheat + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .cheat + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .cheat + .h2-section + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .nontable-name,
.charsheet .h2arrow:not(:checked) + .showsect + .nontable-name + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .nontable-name + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .nontable-name + .h2-section + .h2-section + .h2-section,
.charsheet .h2arrow:not(:checked) + .showsect + .nontable-name + .h2-section + .h2-section + .h2-section + .h2-section,
.charsheet .h3arrow:not(:checked) + .showsect + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .h3-section + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .h3-section + .h3-section + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .h3-section + .h3-section + .h3-section + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .npc-hr + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .cheat + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .cheat + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .cheat + .h3-section + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .cheat + .h3-section + .h3-section + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .nontable-name,
.charsheet .h3arrow:not(:checked) + .showsect + .nontable-name + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .nontable-name + .h3-section + .h3-section,
.charsheet .h3arrow:not(:checked) + .showsect + .nontable-name + .h3-section + .h3-section + .h3-section,
/* header */
.charsheet .ack-button:checked ~ .announcements,
/* top of repeating .section */
.charsheet .minimize-show:checked ~ .repeating-fields .expand,
.charsheet .minimize-show:checked ~ .repeating-fields .sect,
.charsheet .minimize-show:checked ~ .expand,
.charsheet .minimize-show:checked ~ .repeating-fields .linked-fields .macro-text-inline,
/* repeating rows */
.charsheet .counted:not(:checked) ~ .linked-fields .macro-text-inline,
.charsheet .counted:not(:checked) ~ .linked-fields .sect,
.charsheet .oldbuff .counted:not(:checked) ~ .linked-fields .entry-med,
.charsheet .minimize-show:checked ~ .oldbuff .linked-fields .entry-med,
.charsheet .repeating-sect-show:not(:checked) ~ .repeating-fields .repeating-hidesect,
.charsheet .desc-show:not(:checked) ~ .desc,
.charsheet .macro-text-show:not(:checked) ~ .macro-text,
.charsheet .options-show:not(:checked) ~ .options,
.charsheet .advmacro-text-show:not(:checked) ~ .advanced-macros,
.charsheet .misc-show:not(:checked) ~ .misc,
.charsheet .level-show:not(:checked) ~ .level,
.charsheet .id-show:not(:checked) ~ .repeating-id,
.charsheet .range-show:not(:checked) ~ .range,
.charsheet .sp-show:not(:checked) ~ .sect-sp,
.charsheet .sp-show:checked ~ .sect-sp-inverse,
.charsheet .nolevel-show-inverse:checked ~ .sect.expand .nolevel-sect,
/* pc vs npc */
.charsheet .npc-show:checked ~ .pc-only,
.charsheet .npc-show:checked ~ span .pc-only,
.charsheet .npc-show:checked ~ div .pc-only,
.charsheet .npc-show:checked ~ .pfsheet .pc-only,
.charsheet .npc-show:not(:checked) ~ .npc-only,
.charsheet .npc-show:not(:checked) ~ div .npc-only,
.charsheet .npc-show:not(:checked) ~ span .npc-only,
.charsheet .npc-show:not(:checked) ~ .pfsheet .npc-only,
/* generic .sections */
.charsheet .sect-show:not(:checked) ~ .sect,
.charsheet .sect2-show:not(:checked) ~ .sect2,
.charsheet .sect3-show:not(:checked) ~ .sect3,
.charsheet .sect-show-inverse:checked ~ .sect-inverse,
.charsheet .sect2-show-inverse:checked ~ .sect2-inverse,
.charsheet .subsect-show-inverse:checked ~ div .sect-inverse,
.charsheet .subsect-show:not(:checked) ~ div .sect,
.charsheet .subsect2-show:not(:checked) ~ div .sect2,
.charsheet .subsect3-show:not(:checked) ~ div .sect3,

.charsheet .repeating-fields .nontable-repeating .toggle-casting-type:checked ~ .spontaneous,
.charsheet .repeating-fields .nontable-repeating .toggle-casting-type:checked ~ label .spontaneous,
.charsheet .repeating-fields .nontable-repeating .toggle-casting-type:not(:checked) ~ .prepared,
.charsheet .repeating-fields .nontable-repeating .toggle-casting-type:not(:checked) ~ label .prepared,

.charsheet .deletesect-show:not(:checked) + span + .deletesect,
.charsheet .extra-show:not(:checked) ~ .extra-sect,
.charsheet .extra-show:not(:checked) ~ div .extra-sect,
.charsheet .extra-show:checked ~ .extra-sect-inverse,
.charsheet .extra-show:checked ~ div .extra-sect-inverse,
/* buttons */
.charsheet .progress-show:not(:checked) ~ .progress-icon,
.charsheet .use-size-show:not(:checked) ~ .use-size,
.charsheet .use-size-show:checked ~ .dont-use-size,
.charsheet .use-size-show:not(:checked) ~ .repeating-fields .use-size,
.charsheet .use-size-show:not(:checked) ~ .repeating-fields .use-size-only,
.charsheet .use-size-show:checked ~ .repeating-fields .size-affects-show:checked ~ .dont-use-size,
.charsheet .use-size-show:checked ~ .repeating-fields .size-affects-show:not(:checked) ~ .use-size,
.charsheet .nextitem-show:not(:checked) + .nextitem,
.charsheet .nextitem2-hide:checked + .nextitem2,
/* logic .section */
.charsheet .xor-A-show:not(:checked) ~ .xor-B-show:not(:checked) ~ .xor-sect,
.charsheet .xor-A-show:checked ~ .xor-B-show:checked ~ .xor-sect,
.charsheet .nexor-A-show:checked ~ .nexor-B-show:not(:checked) ~ .nexor-sect,
.charsheet .nexor-A-show:not(:checked) ~ .nexor-B-show:checked ~ .nexor-sect,
.charsheet .or3-show:not(:checked) ~ .or3-show:not(:checked) ~ .or3-show:not(:checked) ~ .or3-sect,
.charsheet .or4-show:not(:checked) ~ .or4-show:not(:checked) ~ .or4-show:not(:checked) ~ .or4-show:not(:checked) ~ .or4-sect,
.charsheet .or-A-show:not(:checked) ~ .or-B-show:not(:checked) ~ .either-or-sect,
.charsheet .or-A-show:not(:checked) ~ .or-B-show:not(:checked) ~ div.class-table .either-or-sect,
.charsheet .spells-per-day .or-A-show:not(:checked) ~ .or-B-show:not(:checked) ~ div.table .either-or-sect,
.charsheet .or-A-show:not(:checked) ~ .or-B-show:not(:checked) ~ .or-C-show:not(:checked) ~ .or-D-show:not(:checked) ~ .or-E-show:not(:checked) ~ .or5-sect,
.charsheet .or-A-show:checked ~ .nor-sect,
.charsheet .or-B-show:checked ~ .nor-sect,
.charsheet .or-C-show:checked ~ .nor-sect,
.charsheet .or-D-show:checked ~ .nor-sect,
.charsheet .or-E-show:checked ~ .nor-sect,
.charsheet .not-A-show:checked ~ .or-B-show:not(:checked) ~ .not-A-or-B-sect,
.charsheet .not-A-show:checked ~ .or-B-show:not(:checked) ~ div .not-A-or-B-sect,
.charsheet .not-C-show:checked ~ .or-D-show:not(:checked) ~ .not-C-or-D-sect,
.charsheet .not-C-show:checked ~ .or-D-show:not(:checked) ~ div .not-C-or-D-sect,
.charsheet .sect-either-show-n:not(:checked) ~ .sect,
/* conditions and buffs  */
.charsheet .condition-exists:not(:checked) + label,
.charsheet .condition-exists:checked ~ .panel-name,
.charsheet .conditions-show:not(:checked) ~ .conditions,
.charsheet .buff-exists:not(:checked) + label,
.charsheet .buff-exists:checked ~ .panel-name,
.charsheet .buffs-show:not(:checked) ~ .buffs,
/* spells per day .section */
.charsheet .spellclass0-show:not(:checked) ~ .sect-spellclass0,
.charsheet .spellclass1-show:not(:checked) ~ .sect-spellclass1,
.charsheet .spellclass2-show:not(:checked) ~ .sect-spellclass2,
/* other .sections */
.charsheet .extra-damage-show:not(:checked) ~ .extra-damage,
.charsheet .show-spell-cell:not(:checked) ~ div .spell-cell,
.charsheet .init-notes-show:not(:checked) ~ .init-notes,
.charsheet .save-notes-show:not(:checked) ~ .save-notes,
.charsheet .ability-notes-show:not(:checked) ~ .ability-notes,
.charsheet .iterations-show:not(:checked) ~ .iterative_attack_section,
.charsheet .armor-attributes-show:not(:checked) ~ .armor-attributes,
.charsheet .weapon-attributes-show:not(:checked) ~ .weapon-attributes,
.charsheet .attack-damage-show:not(:checked) ~ .attack-damage,
/* skills */
.charsheet .custom-skill-2-show:not(:checked) ~ .custom-skill-3-show:not(:checked) ~ .custom-skill-6-show:not(:checked) ~ .custom-skill-10-show:not(:checked) ~ .custom-skill-2,
.charsheet .custom-skill-3-show:not(:checked) ~ .custom-skill-6-show:not(:checked) ~ .custom-skill-10-show:not(:checked) ~ .custom-skill-3,
.charsheet .custom-skill-6-show:not(:checked) ~ .custom-skill-10-show:not(:checked) ~ .custom-skill-6,
.charsheet .custom-skill-10-show:not(:checked) ~ .custom-skill-10,
.charsheet .misc-skill-2-show:not(:checked) ~ .misc-skill-3-show:not(:checked) ~ .misc-skill-6-show:not(:checked) ~ .misc-skill-10-show:not(:checked) ~ .misc-skill-2,
.charsheet .misc-skill-3-show:not(:checked) ~ .misc-skill-6-show:not(:checked) ~ .misc-skill-10-show:not(:checked) ~ .misc-skill-3,
.charsheet .misc-skill-6-show:not(:checked) ~ .misc-skill-10-show:not(:checked) ~ .misc-skill-6,
.charsheet .misc-skill-10-show:not(:checked) ~ .misc-skill-10,
/* skills fill-in .sections */
.charsheet .custom-skill-1-show:not(:checked) ~ .artistry-show:not(:checked) ~ .artistry,
.charsheet .custom-skill-1-show:not(:checked) ~ .craft-show:not(:checked) ~ .craft,
.charsheet .custom-skill-1-show:not(:checked) ~ .misc-show:not(:checked) ~ .misc,
.charsheet .knowledge-show:not(:checked) ~ .knowledge,
.charsheet .custom-skill-1-show:not(:checked) ~ .lore-show:not(:checked) ~ .lore,
.charsheet .custom-skill-1-show:not(:checked) ~ .perform-show:not(:checked) ~ .perform,
.charsheet .custom-skill-1-show:not(:checked) ~ .profession-show:not(:checked) ~ .profession,
/* skill total top row */
.charsheet .skill-totals .unchained-show:not(:checked) ~ * .bg,
.charsheet .skill-totals .bg-show:not(:checked) ~ * .bg,
/* unchained off turn off consolidated and bg only tabs and skills */
.charsheet .unchained-show:not(:checked) ~ .consolidated,
.charsheet .unchained-show:not(:checked) ~ .bg-only,
.charsheet .unchained-show:not(:checked) ~ .skills .consolidated,
.charsheet .unchained-show:not(:checked) ~ .skills .bg-only,
/* unchained turn off core tab */
.charsheet .unchained-show:checked ~ .core-only,
/* unchained plus consolidated turn off core tab and skills (adventure, bg, and bg only) */
.charsheet .unchained-show:checked ~ .consolidated-show:checked ~ .bg-only,
.charsheet .unchained-show:checked ~ .consolidated-show:checked ~ .skills .adventure,
.charsheet .unchained-show:checked ~ .consolidated-show:checked ~ .skills .bg,
.charsheet .unchained-show:checked ~ .consolidated-show:checked ~ .skills .bg-only,
/* unchained plus background turn off consolidated tab and skills*/
.charsheet .unchained-show:checked ~ .bg-show:checked ~ .consolidated,
.charsheet .unchained-show:checked ~ .bg-show:checked ~ .skills .consolidated,
/* bg adventure tab turn off bg and bg only skills */
.charsheet .unchained-show:checked ~ .bg-show:checked ~ .tab1:checked ~ .skills .bg:not(.adventure),
.charsheet .unchained-show:checked ~ .bg-show:checked ~ .tab1:checked ~ .skills .bg-only,
/* bg background tab turn off adventure skills */
.charsheet .unchained-show:checked ~ .bg-show:checked ~ .tab2:checked ~ .skills .adventure:not(.bg),
/* hide show more option*/
.charsheet .readonly-show:not(:checked) ~ .main .selectedlabel-check:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .selectedlabel-check + b:not(.show-readonly) {
    display: none;
}

.charsheet .condition-exists.sect-either-show-n:checked ~ label {
    display: inline !important;
}

/* inventory subsections */
.charsheet .equipment-onetime-show:not(:checked) ~ .repeating-fields .nontable-repeating .items-toggle {
    display: none;
}

/*
equipmentnav ~ tabinputtab99:not(:checked) ~ tabinputtab9:not(:checked) ~ tabinputtab10:not(:checked) ~ tabinputtab11:not(:checked) ~ equipment-onetime-show:not(:checked) ~ .repeating-fields .nontable-repeating items-toggle-except-on-all
*/
.charsheet .equipmentnav ~ .tab99:not(:checked) ~ .tab9:not(:checked) ~ .tab10:not(:checked) ~ .tab11:not(:checked) ~ .equipment-onetime-show:not(:checked) ~ .repeating-fields .nontable-repeating .items-toggle-except-on-all {
    display: none;
}

/* skill columns */
.charsheet .skill-conds-header {
    width: 5em;
    font-stretch: extra-condensed;
}

.charsheet input[type="text"].skill-conds {
    width: 4.5em;
    text-align: center;
}

.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-header:nth-child(8),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-header:nth-child(9),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-header:nth-child(10),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row + .table-cell + .table-cell,
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-cell:nth-of-type(8),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-cell:nth-of-type(9),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .table-cell:nth-of-type(10),
.charsheet .skilllist .skill-onetime-show:not(:checked) ~ .skills .table-row .extra-sect {
    display: none;
}


/********************************************** Roll Templates ***************************************************************************/
.sheet-rolltemplate-pf_generic,
.sheet-rolltemplate-pf_ability,
.sheet-rolltemplate-pf_defense,
.sheet-rolltemplate-pf_attack,
.sheet-rolltemplate-pf_spell,
.sheet-rolltemplate-pf_block {
    box-sizing: border-box;
}

/* Dark Mode */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_block .sheet-roll-table {
    color: #fff;
    background-color: #000;
}

.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-pf_block .sheet-roll-table {
    width: 100%;
    display: table;
    border-width: 0.1rem;
    border-spacing: 0;
    -moz-box-shadow: 0.2rem 0.2rem 0.5rem Black;
    -webkit-box-shadow: 0.2rem 0.2rem 0.5rem Black;
    box-shadow: 0.2rem 0.2rem 0.5rem Black;
    overflow: hidden;
    border-radius: 6px;
    color: initial;
}

.sheet-rolltemplate-pf_generic .sheet-roll-header,
.sheet-rolltemplate-pf_ability .sheet-roll-header,
.sheet-rolltemplate-pf_defense .sheet-roll-header,
.sheet-rolltemplate-pf_attack .sheet-roll-header,
.sheet-rolltemplate-pf_spell .sheet-roll-header,
.sheet-rolltemplate-pf_block .sheet-roll-header {
    border-width: 0.1rem;
    border-style: solid;
    display: table;
    caption-side: top;
    width: 100%;
    font-size: 1.3rem;
    line-height: 1.75rem;
    overflow: hidden;
    vertical-align: bottom;
    font-weight: bold;
}

.sheet-rolltemplate-pf_generic .sheet-roll-header a,
.sheet-rolltemplate-pf_ability .sheet-roll-header a,
.sheet-rolltemplate-pf_defense .sheet-roll-header a,
.sheet-rolltemplate-pf_attack .sheet-roll-header a,
.sheet-rolltemplate-pf_spell .sheet-roll-header a,
.sheet-rolltemplate-pf_block .sheet-roll-header a {
    text-decoration: underline;
    line-height: normal;
}

.sheet-rolltemplate-pf_generic .sheet-roll-header span.sheet-left,
.sheet-rolltemplate-pf_ability .sheet-roll-header span.sheet-left,
.sheet-rolltemplate-pf_defense .sheet-roll-header span.sheet-left,
.sheet-rolltemplate-pf_attack .sheet-roll-header span.sheet-left,
.sheet-rolltemplate-pf_spell .sheet-roll-header span.sheet-left,
.sheet-rolltemplate-pf_block .sheet-roll-header span.sheet-left {
    padding: 2px;
    vertical-align: baseline;
}

.sheet-rolltemplate-pf_generic div.sheet-roll-accessible,
.sheet-rolltemplate-pf_ability div.sheet-roll-accessible,
.sheet-rolltemplate-pf_defense div.sheet-roll-accessible,
.sheet-rolltemplate-pf_attack div.sheet-roll-accessible,
.sheet-rolltemplate-pf_spell div.sheet-roll-accessible,
.sheet-rolltemplate-pf_block div.sheet-roll-accessible {
    width: 100%;
    overflow: hidden;
}

.sheet-rolltemplate-pf_generic .sheet-rounded,
.sheet-rolltemplate-pf_ability .sheet-rounded,
.sheet-rolltemplate-pf_defense .sheet-rounded,
.sheet-rolltemplate-pf_attack .sheet-rounded,
.sheet-rolltemplate-pf_spell .sheet-rounded,
.sheet-rolltemplate-pf_block .sheet-rounded {
    border-radius: 0.5rem;
}

.sheet-rolltemplate-pf_generic .sheet-subtitle,
.sheet-rolltemplate-pf_ability .sheet-subtitle,
.sheet-rolltemplate-pf_defense .sheet-subtitle,
.sheet-rolltemplate-pf_attack .sheet-subtitle,
.sheet-rolltemplate-pf_spell .sheet-subtitle,
.sheet-rolltemplate-pf_block .sheet-subtitle {
    font-size: 1.3rem;
    font-weight: normal !important;
    text-align: left;
    font-variant: small-caps;
    display: block;
    width: 100%;
    padding: 0.2rem 0 0 0.2rem;
    word-break: break-word;
}

.sheet-rolltemplate-pf_generic .sheet-header-image,
.sheet-rolltemplate-pf_ability .sheet-header-image,
.sheet-rolltemplate-pf_defense .sheet-header-image,
.sheet-rolltemplate-pf_attack .sheet-header-image,
.sheet-rolltemplate-pf_spell .sheet-header-image,
.sheet-rolltemplate-pf_block .sheet-header-image {
    float: right;
    padding: 2px;
    vertical-align: baseline;
    min-width: 3rem;
}

.sheet-rolltemplate-pf_generic .sheet-img,
.sheet-rolltemplate-pf_ability .sheet-img,
.sheet-rolltemplate-pf_defense .sheet-img,
.sheet-rolltemplate-pf_attack .sheet-img,
.sheet-rolltemplate-pf_spell .sheet-img,
.sheet-rolltemplate-pf_block .sheet-img {
    vertical-align: middle;
}

.sheet-rolltemplate-pf_generic .sheet-roll-table-inner,
.sheet-rolltemplate-pf_ability .sheet-roll-table-inner,
.sheet-rolltemplate-pf_defense .sheet-roll-table-inner,
.sheet-rolltemplate-pf_attack .sheet-roll-table-inner,
.sheet-rolltemplate-pf_spell .sheet-roll-table-inner,
.sheet-rolltemplate-pf_block .sheet-roll-table-inner {
    display: table;
    width: 100%;
    min-width: 100%;
}

.sheet-rolltemplate-pf_generic .sheet-roll-group,
.sheet-rolltemplate-pf_ability .sheet-roll-group,
.sheet-rolltemplate-pf_defense .sheet-roll-group,
.sheet-rolltemplate-pf_attack .sheet-roll-group,
.sheet-rolltemplate-pf_spell .sheet-roll-group,
.sheet-rolltemplate-pf_block .sheet-roll-group,
.sheet-rolltemplate-pf_generic .sheet-roll-group2,
.sheet-rolltemplate-pf_ability .sheet-roll-group2,
.sheet-rolltemplate-pf_defense .sheet-roll-group2,
.sheet-rolltemplate-pf_attack .sheet-roll-group2,
.sheet-rolltemplate-pf_spell .sheet-roll-group2,
.sheet-rolltemplate-pf_block .sheet-roll-group2,
.sheet-rolltemplate-pf_attack .sheet-roll-groupi,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc {
    display: table-row-group;
    width: 100%;
    overflow: hidden;
}

.sheet-rolltemplate-pf_generic .sheet-roll-row,
.sheet-rolltemplate-pf_ability .sheet-roll-row,
.sheet-rolltemplate-pf_defense .sheet-roll-row,
.sheet-rolltemplate-pf_attack .sheet-roll-row,
.sheet-rolltemplate-pf_spell .sheet-roll-row,
.sheet-rolltemplate-pf_block .sheet-roll-row {
    display: table-row;
    width: 100%;
    overflow: hidden;
}

.sheet-rolltemplate-pf_generic .sheet-roll-cell,
.sheet-rolltemplate-pf_ability .sheet-roll-cell,
.sheet-rolltemplate-pf_defense .sheet-roll-cell,
.sheet-rolltemplate-pf_attack .sheet-roll-cell,
.sheet-rolltemplate-pf_spell .sheet-roll-cell,
.sheet-rolltemplate-pf_block .sheet-roll-cell {
    line-height: 1.1em;
    font-size: 1.3rem;
    overflow: hidden;
    display: inline-block;
}

.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row:nth-child(2) {
    height: 1em;
    line-height: 1em;
}

/* damage type */
.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row div:first-child > span {
    margin-left: .25em;
    /*  white-space: nowrap; */
    position: inherit;
}

/*
.sheet-rolltemplate-pf_attack .sheet-roll-groupi>.sheet-roll-row div:first-child {
    position: absolute;
    width: 65%;
}
*/
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-dmg > span:first-child,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-dmg > :not(span:last-child) {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-dmg > span:first-child {
    margin-right: 3px;
}

.sheet-rolltemplate-pf_generic .sheet-roll-cell:first-child,
.sheet-rolltemplate-pf_ability .sheet-roll-cell:first-child,
.sheet-rolltemplate-pf_defense .sheet-roll-cell:first-child,
.sheet-rolltemplate-pf_attack .sheet-roll-cell:first-child,
.sheet-rolltemplate-pf_spell .sheet-roll-cell:first-child,
.sheet-rolltemplate-pf_block .sheet-roll-cell:first-child {
    white-space: normal;
    min-width: 6.5em;
}

.sheet-rolltemplate-pf_spell .sheet-pfctracking,
.sheet-rolltemplate-pf_ability .sheet-pfctracking,
.sheet-rolltemplate-pf_attack .sheet-pfctracking,
.sheet-rolltemplate-pf_block .sheet-pfctracking {
    text-align: right;
}

.sheet-rolltemplate-pf_spell .sheet-pfctracking a,
.sheet-rolltemplate-pf_ability .sheet-pfctracking a,
.sheet-rolltemplate-pf_attack .sheet-pfctracking a,
.sheet-rolltemplate-pf_block .sheet-pfctracking a {
    background-color: var(--sheet-pf-bg);
}

.sheet-rolltemplate-pf_spell .sheet-pfctracking span.sheet-pictos a,
.sheet-rolltemplate-pf_ability .sheet-pfctracking span.sheet-pictos a,
.sheet-rolltemplate-pf_attack .sheet-pfctracking span.sheet-pictos a,
.sheet-rolltemplate-pf_block .sheet-pfctracking span.sheet-pictos a {
    font-family: Pictos !important;
    box-shadow: none;
    line-height: .5em;
}

.sheet-rolltemplate-pf_spell .sheet-pfctracking span.sheet-pictos a .sheet-strong:hover,
.sheet-rolltemplate-pf_ability .sheet-pfctracking span.sheet-pictos a .sheet-strong:hover,
.sheet-rolltemplate-pf_attack .sheet-pfctracking span.sheet-pictos a .sheet-strong:hover,
.sheet-rolltemplate-pf_block .sheet-pfctracking span.sheet-pictos a .sheet-strong:hover {
    color: red;
}

.sheet-rolltemplate-pf_spell .sheet-pfctracking span.sheet-pictos a .sheet-strong,
.sheet-rolltemplate-pf_ability .sheet-pfctracking span.sheet-pictos a .sheet-strong,
.sheet-rolltemplate-pf_attack .sheet-pfctracking span.sheet-pictos a .sheet-strong,
.sheet-rolltemplate-pf_block .sheet-pfctracking span.sheet-pictos a .sheet-strong {
    font-size: .85em;
    vertical-align: bottom;
    font-weight: normal;
}

.sheet-rolltemplate-pf_generic .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_ability .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_defense .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_attack .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_spell .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_block .sheet-roll-group2 .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_attack .sheet-roll-groupi .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc .sheet-roll-row:first-child > *,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc .sheet-roll-row:first-child > * {
    margin: 2px 0 2px 2px;
}

.sheet-rolltemplate-pf_generic .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_ability .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_defense .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_attack .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_spell .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_block .sheet-roll-group2 .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_attack .sheet-roll-groupi .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc .sheet-roll-row .sheet-roll-cell:last-child,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc .sheet-roll-row .sheet-roll-cell:last-child {
    text-align: right;
    padding-right: 0.25rem;
    position: relative;
    z-index: 1;
    float: right;
}

.sheet-rolltemplate-pf_generic .sheet-right,
.sheet-rolltemplate-pf_ability .sheet-right,
.sheet-rolltemplate-pf_defense .sheet-right,
.sheet-rolltemplate-pf_attack .sheet-right,
.sheet-rolltemplate-pf_spell .sheet-right,
.sheet-rolltemplate-pf_block .sheet-right {
    text-align: right !important;
}

.sheet-rolltemplate-pf_generic .sheet-offscreen,
.sheet-rolltemplate-pf_ability .sheet-offscreen,
.sheet-rolltemplate-pf_defense .sheet-offscreen,
.sheet-rolltemplate-pf_attack .sheet-offscreen,
.sheet-rolltemplate-pf_spell .sheet-offscreen,
.sheet-rolltemplate-pf_block .sheet-offscreen {
    position: absolute !important;
    left: -9999px !important;
    width: 0.1rem !important;
    height: 0.1rem !important;
    overflow: hidden !important;
}

/************************************ command buttons *********************************/

.sheet-rolltemplate-pf_generic a[href^="~"],
.sheet-rolltemplate-pf_generic .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_generic label span [href^="~"],
.sheet-rolltemplate-pf_ability a[href^="~"],
.sheet-rolltemplate-pf_ability .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_ability label span [href^="~"],
.sheet-rolltemplate-pf_defense a[href^="~"],
.sheet-rolltemplate-pf_defense .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_defense label span [href^="~"],
.sheet-rolltemplate-pf_attack a[href^="~"],
.sheet-rolltemplate-pf_attack .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_attack label span [href^="~"],
.sheet-rolltemplate-pf_spell a[href^="~"],
.sheet-rolltemplate-pf_spell .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_spell label span [href^="~"],
.sheet-rolltemplate-pf_block a[href^="~"],
.sheet-rolltemplate-pf_block .sheet-roll-cell a[href^="~"],
.sheet-rolltemplate-pf_block label span [href^="~"] {
    background-color: var(--sheet-pf-bg);
    color: var(--sheet-pf-text);
    padding: 0.2rem 0.3rem 0.1rem 0.3rem;
    margin: 0.2rem -0.1rem 0.1rem 0;
    font-weight: normal;
    display: inline-block;
    border: 0.1rem solid #789;
    border-radius: 0.2rem;
    font-size: 1.2rem;
}

.sheet-rolltemplate-pf_generic a[href^="~"]:hover,
.sheet-rolltemplate-pf_generic .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_generic label span [href^="~"]:hover,
.sheet-rolltemplate-pf_ability a[href^="~"]:hover,
.sheet-rolltemplate-pf_ability .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_ability label span [href^="~"]:hover,
.sheet-rolltemplate-pf_defense a[href^="~"]:hover,
.sheet-rolltemplate-pf_defense .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_defense label span [href^="~"]:hover,
.sheet-rolltemplate-pf_attack a[href^="~"]:hover,
.sheet-rolltemplate-pf_attack .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_attack label span [href^="~"]:hover,
.sheet-rolltemplate-pf_spell a[href^="~"]:hover,
.sheet-rolltemplate-pf_spell .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_spell label span [href^="~"]:hover,
.sheet-rolltemplate-pf_block a[href^="~"]:hover,
.sheet-rolltemplate-pf_block .sheet-roll-cell a[href^="~"]:hover,
.sheet-rolltemplate-pf_block label span [href^="~"]:hover {
    text-decoration: none;
    cursor: pointer;
    color: #f00;
    box-shadow: 0.1rem 0.1rem 0.2rem #333;
}

/********************************* accessible templates ******************************/

.sheet-rolltemplate-pf_generic .sheet-roll-accessible .sheet-roll-header,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible .sheet-roll-header,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible .sheet-roll-header,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible .sheet-roll-header,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible .sheet-roll-header,
.sheet-rolltemplate-pf_block .sheet-roll-accessible .sheet-roll-header {
    margin: 0 0 0.2rem 0;
    font-size: 1.3rem;
    line-height: 1.75rem;
    display: block;
    border: none;
    padding: 0 0 0.2rem 0.2rem;
}

.sheet-rolltemplate-pf_generic .sheet-roll-accessible .sheet-subtitle,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible .sheet-subtitle,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible .sheet-subtitle,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible .sheet-subtitle,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible .sheet-subtitle,
.sheet-rolltemplate-pf_block .sheet-roll-accessible .sheet-subtitle {
    font-size: 1.2em;
    padding: 0 0 0 0.2rem;
    /*border-bottom:1pt #CCCCCC solid;*/
}

.sheet-rolltemplate-pf_generic .sheet-roll-accessible > label,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible > label,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible > label,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label,
.sheet-rolltemplate-pf_block .sheet-roll-accessible > label {
    line-height: 1.4em;
    margin: 0 .2em 0 .2em;
}

.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-dmg-x span:first-child {
    display: inline-grid;
    padding-top: 0;
    margin: -1px 0 0 0;
}

.sheet-rolltemplate-pf_attack .sheet-roll-accessible label.sheet-dmg-x span:last-child {
    line-height: 1em;
}

.sheet-rolltemplate-pf_generic .sheet-roll-accessible > label span,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible > label span,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible > label span,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label span,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label span,
.sheet-rolltemplate-pf_block .sheet-roll-accessible > label span {
    line-height: 1em;
    font-size: 1.3rem;
    display: inline-block;
}

.sheet-rolltemplate-pf_generic .sheet-roll-accessible .sheet-right,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible .sheet-right,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible .sheet-right,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible .sheet-right,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible .sheet-right,
.sheet-rolltemplate-pf_block .sheet-roll-accessible .sheet-right {
    float: right;
}

.sheet-rolltemplate-pf_attack .sheet-roll-iter-space,
.sheet-rolltemplate-pf_spell .sheet-roll-iter-space {
    height: .25rem;
}

.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-atk-i,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label.sheet-atk-i {
    margin-top: .25rem;
}

.sheet-rolltemplate-pf_attack .sheet-roll-groupi,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-atk-i,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label.sheet-atk-i {
    border-top-width: 0.2rem;
    border-top-style: solid;
}

.sheet-rolltemplate-pf_attack .sheet-roll-groupc,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-atk-c,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label.sheet-atk-c {
    border-top-width: 0.1rem;
    border-top-style: solid;
}

.sheet-rolltemplate-pf_spell .sheet-dmg,
.sheet-rolltemplate-pf_spell .sheet-dmg-x,
.sheet-rolltemplate-pf_spell .sheet-crit-dmg,
.sheet-rolltemplate-pf_spell .sheet-crit-dmg-x,
.sheet-rolltemplate-pf_attack .sheet-dmg,
.sheet-rolltemplate-pf_attack .sheet-dmg-x,
.sheet-rolltemplate-pf_attack .sheet-crit-dmg,
.sheet-rolltemplate-pf_attack .sheet-crit-dmg-x {
    /*    text-indent: 0.5em !important; */
    padding-left: 1em;
    /* this can create a faux indent even for textarea content ie extra damage type  */
    line-height: 1.3em;
    /* helps align damage type text to extra damage roll */
}

.sheet-rolltemplate-pf_attack .sheet-roll-groupi .sheet-roll-row .sheet-roll-cell.sheet-dmg,
.sheet-rolltemplate-pf_attack .sheet-roll-groupi .sheet-roll-row .sheet-roll-cell.sheet-dmg + .sheet-roll-cell {
    padding-bottom: 0;
}

/************************************ COLORS ****************************************/
.sheet-rolltemplate-pf_generic .sheet-roll-accessible,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible,
.sheet-rolltemplate-pf_generic .sheet-roll-accessible,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible,
.sheet-rolltemplate-pf_block .sheet-roll-accessible,
.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-pf_block .sheet-roll-table {
    background-color: White;
}

/* Dark Mode*/
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_defense .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_block .sheet-roll-accessible,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_block .sheet-roll-table {
    background-color: #000;
}

/* changeable */

.sheet-rolltemplate-pf_generic .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_ability .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_defense .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_attack .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_spell .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_block .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_generic .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_ability .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_defense .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label:not(.atksbkg):nth-child(odd),
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_block .sheet-roll-accessible > label:nth-child(odd) {
    background-color: WhiteSmoke;
}

/* Dark Mode*/
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_defense .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_block .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_generic .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_ability .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_defense .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label:not(.atksbkg):nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_block .sheet-roll-accessible > label:nth-child(odd) {
    background-color: #222;
}

.sheet-rolltemplate-pf_generic a,
.sheet-rolltemplate-pf_ability a,
.sheet-rolltemplate-pf_defense a,
.sheet-rolltemplate-pf_attack a,
.sheet-rolltemplate-pf_spell a,
.sheet-rolltemplate-pf_block a {
    background-color: DimGray;
    color: White;
}

.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-pf_block .sheet-roll-table {
    border-color: Black;
}

.sheet-rolltemplate-pf_generic .sheet-roll-header,
.sheet-rolltemplate-pf_ability .sheet-roll-header,
.sheet-rolltemplate-pf_defense .sheet-roll-header,
.sheet-rolltemplate-pf_attack .sheet-roll-header,
.sheet-rolltemplate-pf_spell .sheet-roll-header,
.sheet-rolltemplate-pf_block .sheet-roll-header {
    border-color: Black;
    background-color: Black;
    color: White;
}

/* define vars */

.sheet-rolltemplate-pf_generic,
.sheet-rolltemplate-pf_ability,
.sheet-rolltemplate-pf_defense,
.sheet-rolltemplate-pf_attack,
.sheet-rolltemplate-pf_spell,
.sheet-rolltemplate-pf_block {
    --sheet-pf-bg: Black;
    --sheet-pf-text: White;
    --sheet-pf-oddbg: WhiteSmoke;
    --sheet-pf-sec: SteelBlue;
    --sheet-pf-ter: LightGray;
}

.sheet-rolltemplate-pf_generic .sheet-color-white,
.sheet-rolltemplate-pf_ability .sheet-color-white,
.sheet-rolltemplate-pf_defense .sheet-color-white,
.sheet-rolltemplate-pf_attack .sheet-color-white,
.sheet-rolltemplate-pf_spell .sheet-color-white,
.sheet-rolltemplate-pf_block .sheet-color-white {
    --sheet-pf-bg: White;
    --sheet-pf-text: #101010;
    --sheet-pf-oddbg: #F0F0F0;
}

.sheet-rolltemplate-pf_generic .sheet-color-grey,
.sheet-rolltemplate-pf_ability .sheet-color-grey,
.sheet-rolltemplate-pf_defense .sheet-color-grey,
.sheet-rolltemplate-pf_attack .sheet-color-grey,
.sheet-rolltemplate-pf_spell .sheet-color-grey,
.sheet-rolltemplate-pf_block .sheet-color-grey {
    --sheet-pf-bg: Silver;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkgrey,
.sheet-rolltemplate-pf_ability .sheet-color-darkgrey,
.sheet-rolltemplate-pf_defense .sheet-color-darkgrey,
.sheet-rolltemplate-pf_attack .sheet-color-darkgrey,
.sheet-rolltemplate-pf_spell .sheet-color-darkgrey,
.sheet-rolltemplate-pf_block .sheet-color-darkgrey {
    --sheet-pf-bg: DimGray;
}

.sheet-rolltemplate-pf_generic .sheet-color-red,
.sheet-rolltemplate-pf_ability .sheet-color-red,
.sheet-rolltemplate-pf_defense .sheet-color-red,
.sheet-rolltemplate-pf_attack .sheet-color-red,
.sheet-rolltemplate-pf_spell .sheet-color-red,
.sheet-rolltemplate-pf_block .sheet-color-red {
    --sheet-pf-bg: Crimson;
    --sheet-pf-oddbg: MistyRose;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkred,
.sheet-rolltemplate-pf_ability .sheet-color-darkred,
.sheet-rolltemplate-pf_defense .sheet-color-darkred,
.sheet-rolltemplate-pf_attack .sheet-color-darkred,
.sheet-rolltemplate-pf_spell .sheet-color-darkred,
.sheet-rolltemplate-pf_block .sheet-color-darkred {
    --sheet-pf-bg: DarkRed;
    --sheet-pf-oddbg: MistyRose;
}

.sheet-rolltemplate-pf_generic .sheet-color-orange,
.sheet-rolltemplate-pf_ability .sheet-color-orange,
.sheet-rolltemplate-pf_defense .sheet-color-orange,
.sheet-rolltemplate-pf_attack .sheet-color-orange,
.sheet-rolltemplate-pf_spell .sheet-color-orange,
.sheet-rolltemplate-pf_block .sheet-color-orange {
    --sheet-pf-bg: DarkOrange;
    --sheet-pf-text: Black;
    --sheet-pf-oddbg: antiquewhite;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkorange,
.sheet-rolltemplate-pf_ability .sheet-color-darkorange,
.sheet-rolltemplate-pf_defense .sheet-color-darkorange,
.sheet-rolltemplate-pf_attack .sheet-color-darkorange,
.sheet-rolltemplate-pf_spell .sheet-color-darkorange,
.sheet-rolltemplate-pf_block .sheet-color-darkorange {
    --sheet-pf-bg: OrangeRed;
    --sheet-pf-oddbg: mistyrose;
}

.sheet-rolltemplate-pf_generic .sheet-color-yellow,
.sheet-rolltemplate-pf_ability .sheet-color-yellow,
.sheet-rolltemplate-pf_defense .sheet-color-yellow,
.sheet-rolltemplate-pf_attack .sheet-color-yellow,
.sheet-rolltemplate-pf_spell .sheet-color-yellow,
.sheet-rolltemplate-pf_block .sheet-color-yellow {
    --sheet-pf-bg: khaki;
    --sheet-pf-oddbg: papayawhip;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkyellow,
.sheet-rolltemplate-pf_ability .sheet-color-darkyellow,
.sheet-rolltemplate-pf_defense .sheet-color-darkyellow,
.sheet-rolltemplate-pf_attack .sheet-color-darkyellow,
.sheet-rolltemplate-pf_spell .sheet-color-darkyellow,
.sheet-rolltemplate-pf_block .sheet-color-darkyellow {
    --sheet-pf-bg: darkgoldenrod;
    --sheet-pf-oddbg: papayawhip;
}

.sheet-rolltemplate-pf_generic .sheet-color-gold,
.sheet-rolltemplate-pf_ability .sheet-color-gold,
.sheet-rolltemplate-pf_defense .sheet-color-gold,
.sheet-rolltemplate-pf_attack .sheet-color-gold,
.sheet-rolltemplate-pf_spell .sheet-color-gold,
.sheet-rolltemplate-pf_block .sheet-color-gold {
    --sheet-pf-bg: Gold;
    --sheet-pf-oddbg: papayawhip;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-green,
.sheet-rolltemplate-pf_ability .sheet-color-green,
.sheet-rolltemplate-pf_defense .sheet-color-green,
.sheet-rolltemplate-pf_attack .sheet-color-green,
.sheet-rolltemplate-pf_spell .sheet-color-green,
.sheet-rolltemplate-pf_block .sheet-color-green {
    --sheet-pf-bg: MediumSeaGreen;
    --sheet-pf-oddbg: LightCyan;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkgreen,
.sheet-rolltemplate-pf_ability .sheet-color-darkgreen,
.sheet-rolltemplate-pf_defense .sheet-color-darkgreen,
.sheet-rolltemplate-pf_attack .sheet-color-darkgreen,
.sheet-rolltemplate-pf_spell .sheet-color-darkgreen,
.sheet-rolltemplate-pf_block .sheet-color-darkgreen {
    --sheet-pf-bg: DarkGreen;
    --sheet-pf-oddbg: LightCyan;
}

.sheet-rolltemplate-pf_generic .sheet-color-azure,
.sheet-rolltemplate-pf_ability .sheet-color-azure,
.sheet-rolltemplate-pf_defense .sheet-color-azure,
.sheet-rolltemplate-pf_attack .sheet-color-azure,
.sheet-rolltemplate-pf_spell .sheet-color-azure,
.sheet-rolltemplate-pf_block .sheet-color-azure {
    --sheet-pf-bg: LightSkyBlue;
    --sheet-pf-oddbg: LightCyan;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkazure,
.sheet-rolltemplate-pf_ability .sheet-color-darkazure,
.sheet-rolltemplate-pf_defense .sheet-color-darkazure,
.sheet-rolltemplate-pf_attack .sheet-color-darkazure,
.sheet-rolltemplate-pf_spell .sheet-color-darkazure,
.sheet-rolltemplate-pf_block .sheet-color-darkazure {
    --sheet-pf-bg: DeepSkyBlue;
    --sheet-pf-oddbg: LightCyan;
}

.sheet-rolltemplate-pf_generic .sheet-color-blue,
.sheet-rolltemplate-pf_ability .sheet-color-blue,
.sheet-rolltemplate-pf_defense .sheet-color-blue,
.sheet-rolltemplate-pf_attack .sheet-color-blue,
.sheet-rolltemplate-pf_spell .sheet-color-blue,
.sheet-rolltemplate-pf_block .sheet-color-blue {
    --sheet-pf-bg: Blue;
    --sheet-pf-oddbg: PowderBlue;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkblue,
.sheet-rolltemplate-pf_ability .sheet-color-darkblue,
.sheet-rolltemplate-pf_defense .sheet-color-darkblue,
.sheet-rolltemplate-pf_attack .sheet-color-darkblue,
.sheet-rolltemplate-pf_spell .sheet-color-darkblue,
.sheet-rolltemplate-pf_block .sheet-color-darkblue {
    --sheet-pf-bg: Navy;
    --sheet-pf-oddbg: LightBlue;
    --sheet-pf-sec: LightSteelBlue;
}

.sheet-rolltemplate-pf_generic .sheet-color-pink,
.sheet-rolltemplate-pf_ability .sheet-color-pink,
.sheet-rolltemplate-pf_defense .sheet-color-pink,
.sheet-rolltemplate-pf_attack .sheet-color-pink,
.sheet-rolltemplate-pf_spell .sheet-color-pink,
.sheet-rolltemplate-pf_block .sheet-color-pink {
    --sheet-pf-bg: LightPink;
    --sheet-pf-oddbg: Lavender;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkpink,
.sheet-rolltemplate-pf_ability .sheet-color-darkpink,
.sheet-rolltemplate-pf_defense .sheet-color-darkpink,
.sheet-rolltemplate-pf_attack .sheet-color-darkpink,
.sheet-rolltemplate-pf_spell .sheet-color-darkpink,
.sheet-rolltemplate-pf_block .sheet-color-darkpink {
    --sheet-pf-bg: DeepPink;
    --sheet-pf-oddbg: Lavender;
}

.sheet-rolltemplate-pf_generic .sheet-color-teal,
.sheet-rolltemplate-pf_ability .sheet-color-teal,
.sheet-rolltemplate-pf_defense .sheet-color-teal,
.sheet-rolltemplate-pf_attack .sheet-color-teal,
.sheet-rolltemplate-pf_spell .sheet-color-teal,
.sheet-rolltemplate-pf_block .sheet-color-teal {
    --sheet-pf-bg: LightSeaGreen;
    --sheet-pf-oddbg: PaleTurquoise;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkteal,
.sheet-rolltemplate-pf_ability .sheet-color-darkteal,
.sheet-rolltemplate-pf_defense .sheet-color-darkteal,
.sheet-rolltemplate-pf_attack .sheet-color-darkteal,
.sheet-rolltemplate-pf_spell .sheet-color-darkteal,
.sheet-rolltemplate-pf_block .sheet-color-darkteal {
    --sheet-pf-bg: Teal;
    --sheet-pf-oddbg: PaleTurquoise;
}

.sheet-rolltemplate-pf_generic .sheet-color-cyan,
.sheet-rolltemplate-pf_ability .sheet-color-cyan,
.sheet-rolltemplate-pf_defense .sheet-color-cyan,
.sheet-rolltemplate-pf_attack .sheet-color-cyan,
.sheet-rolltemplate-pf_spell .sheet-color-cyan,
.sheet-rolltemplate-pf_block .sheet-color-cyan {
    --sheet-pf-bg: Turquoise;
    --sheet-pf-oddbg: LightCyan;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkcyan,
.sheet-rolltemplate-pf_ability .sheet-color-darkcyan,
.sheet-rolltemplate-pf_defense .sheet-color-darkcyan,
.sheet-rolltemplate-pf_attack .sheet-color-darkcyan,
.sheet-rolltemplate-pf_spell .sheet-color-darkcyan,
.sheet-rolltemplate-pf_block .sheet-color-darkcyan {
    --sheet-pf-bg: DarkCyan;
    --sheet-pf-oddbg: LightCyan;
}

.sheet-rolltemplate-pf_generic .sheet-color-purple,
.sheet-rolltemplate-pf_ability .sheet-color-purple,
.sheet-rolltemplate-pf_defense .sheet-color-purple,
.sheet-rolltemplate-pf_attack .sheet-color-purple,
.sheet-rolltemplate-pf_spell .sheet-color-purple,
.sheet-rolltemplate-pf_block .sheet-color-purple {
    --sheet-pf-bg: MediumOrchid;
    --sheet-pf-oddbg: lavender;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkpurple,
.sheet-rolltemplate-pf_ability .sheet-color-darkpurple,
.sheet-rolltemplate-pf_defense .sheet-color-darkpurple,
.sheet-rolltemplate-pf_attack .sheet-color-darkpurple,
.sheet-rolltemplate-pf_spell .sheet-color-darkpurple,
.sheet-rolltemplate-pf_block .sheet-color-darkpurple {
    --sheet-pf-bg: RebeccaPurple;
    --sheet-pf-oddbg: LightSteelBlue;
}

.sheet-rolltemplate-pf_generic .sheet-color-violet,
.sheet-rolltemplate-pf_ability .sheet-color-violet,
.sheet-rolltemplate-pf_defense .sheet-color-violet,
.sheet-rolltemplate-pf_attack .sheet-color-violet,
.sheet-rolltemplate-pf_spell .sheet-color-violet,
.sheet-rolltemplate-pf_block .sheet-color-violet {
    --sheet-pf-bg: Violet;
    --sheet-pf-oddbg: lavender;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkviolet,
.sheet-rolltemplate-pf_ability .sheet-color-darkviolet,
.sheet-rolltemplate-pf_defense .sheet-color-darkviolet,
.sheet-rolltemplate-pf_attack .sheet-color-darkviolet,
.sheet-rolltemplate-pf_spell .sheet-color-darkviolet,
.sheet-rolltemplate-pf_block .sheet-color-darkviolet {
    --sheet-pf-bg: DarkViolet;
    --sheet-pf-oddbg: Thistle;
}

.sheet-rolltemplate-pf_generic .sheet-color-chocolate,
.sheet-rolltemplate-pf_ability .sheet-color-chocolate,
.sheet-rolltemplate-pf_defense .sheet-color-chocolate,
.sheet-rolltemplate-pf_attack .sheet-color-chocolate,
.sheet-rolltemplate-pf_spell .sheet-color-chocolate,
.sheet-rolltemplate-pf_block .sheet-color-chocolate {
    --sheet-pf-bg: Chocolate;
    --sheet-pf-oddbg: BlanchedAlmond;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-peru,
.sheet-rolltemplate-pf_ability .sheet-color-peru,
.sheet-rolltemplate-pf_defense .sheet-color-peru,
.sheet-rolltemplate-pf_attack .sheet-color-peru,
.sheet-rolltemplate-pf_spell .sheet-color-peru,
.sheet-rolltemplate-pf_block .sheet-color-peru {
    --sheet-pf-bg: Peru;
    --sheet-pf-oddbg: BlanchedAlmond;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-saddlebrown,
.sheet-rolltemplate-pf_ability .sheet-color-saddlebrown,
.sheet-rolltemplate-pf_defense .sheet-color-saddlebrown,
.sheet-rolltemplate-pf_attack .sheet-color-saddlebrown,
.sheet-rolltemplate-pf_spell .sheet-color-saddlebrown,
.sheet-rolltemplate-pf_block .sheet-color-saddlebrown {
    --sheet-pf-bg: saddlebrown;
    --sheet-pf-oddbg: Wheat;
}

.sheet-rolltemplate-pf_generic .sheet-color-tan,
.sheet-rolltemplate-pf_ability .sheet-color-tan,
.sheet-rolltemplate-pf_defense .sheet-color-tan,
.sheet-rolltemplate-pf_attack .sheet-color-tan,
.sheet-rolltemplate-pf_spell .sheet-color-tan,
.sheet-rolltemplate-pf_block .sheet-color-tan {
    --sheet-pf-bg: tan;
    --sheet-pf-oddbg: BlanchedAlmond;
    --sheet-pf-text: Black;
}

.sheet-rolltemplate-pf_generic .sheet-color-olive,
.sheet-rolltemplate-pf_ability .sheet-color-olive,
.sheet-rolltemplate-pf_defense .sheet-color-olive,
.sheet-rolltemplate-pf_attack .sheet-color-olive,
.sheet-rolltemplate-pf_spell .sheet-color-olive,
.sheet-rolltemplate-pf_block .sheet-color-olive {
    --sheet-pf-bg: olive;
    --sheet-pf-oddbg: BlanchedAlmond;
}

.sheet-rolltemplate-pf_generic .sheet-color-darkolivegreen,
.sheet-rolltemplate-pf_ability .sheet-color-darkolivegreen,
.sheet-rolltemplate-pf_defense .sheet-color-darkolivegreen,
.sheet-rolltemplate-pf_attack .sheet-color-darkolivegreen,
.sheet-rolltemplate-pf_spell .sheet-color-darkolivegreen,
.sheet-rolltemplate-pf_block .sheet-color-darkolivegreen {
    --sheet-pf-bg: darkolivegreen;
    --sheet-pf-oddbg: BlanchedAlmond;
}

.sheet-rolltemplate-pf_generic .sheet-color-sandybrown,
.sheet-rolltemplate-pf_ability .sheet-color-sandybrown,
.sheet-rolltemplate-pf_defense .sheet-color-sandybrown,
.sheet-rolltemplate-pf_attack .sheet-color-sandybrown,
.sheet-rolltemplate-pf_spell .sheet-color-sandybrown,
.sheet-rolltemplate-pf_block .sheet-color-sandybrown {
    --sheet-pf-bg: sandybrown;
    --sheet-pf-oddbg: MistyRose;
    --sheet-pf-text: Black;
}

/************ set color *********/

.sheet-rolltemplate-pf_generic .sheet-roll-table,
.sheet-rolltemplate-pf_ability .sheet-roll-table,
.sheet-rolltemplate-pf_defense .sheet-roll-table,
.sheet-rolltemplate-pf_attack .sheet-roll-table,
.sheet-rolltemplate-pf_spell .sheet-roll-table,
.sheet-rolltemplate-pf_block .sheet-roll-table,
.sheet-rolltemplate-pf_generic .sheet-roll-table *,
.sheet-rolltemplate-pf_ability .sheet-roll-table *,
.sheet-rolltemplate-pf_defense .sheet-roll-table *,
.sheet-rolltemplate-pf_attack .sheet-roll-table *,
.sheet-rolltemplate-pf_spell .sheet-roll-table *,
.sheet-rolltemplate-pf_block .sheet-roll-table *,
.sheet-rolltemplate-pf_generic .sheet-roll-accessible,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible,
.sheet-rolltemplate-pf_block .sheet-roll-accessible,
.sheet-rolltemplate-pf_generic .sheet-roll-accessible *,
.sheet-rolltemplate-pf_ability .sheet-roll-accessible *,
.sheet-rolltemplate-pf_defense .sheet-roll-accessible *,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible *,
.sheet-rolltemplate-pf_spell .sheet-roll-accessible *,
.sheet-rolltemplate-pf_block .sheet-roll-accessible * {
    border-color: var(--sheet-pf-bg);
}

.sheet-rolltemplate-pf_generic .sheet-roll-header,
.sheet-rolltemplate-pf_ability .sheet-roll-header,
.sheet-rolltemplate-pf_defense .sheet-roll-header,
.sheet-rolltemplate-pf_attack .sheet-roll-header,
.sheet-rolltemplate-pf_spell .sheet-roll-header,
.sheet-rolltemplate-pf_block .sheet-roll-header,
.sheet-rolltemplate-pf_generic .sheet-roll-header span,
.sheet-rolltemplate-pf_ability .sheet-roll-header span,
.sheet-rolltemplate-pf_defense .sheet-roll-header span,
.sheet-rolltemplate-pf_attack .sheet-roll-header span,
.sheet-rolltemplate-pf_spell .sheet-roll-header span,
.sheet-rolltemplate-pf_block .sheet-roll-header span,
.sheet-rolltemplate-pf_generic a,
.sheet-rolltemplate-pf_ability a,
.sheet-rolltemplate-pf_defense a,
.sheet-rolltemplate-pf_attack a,
.sheet-rolltemplate-pf_spell a,
.sheet-rolltemplate-pf_block a {
    background-color: var(--sheet-pf-bg);
    color: var(--sheet-pf-text);
}

.sheet-rolltemplate-pf_generic .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_ability .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_defense .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_attack .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_spell .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_block .sheet-roll-row:nth-child(odd),
.sheet-rolltemplate-pf_generic .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_ability .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_defense .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label:not(.sheet-atksbkg):nth-child(odd),
.sheet-rolltemplate-pf_spell .sheet-roll-accessible > label:nth-child(odd),
.sheet-rolltemplate-pf_block .sheet-roll-accessible > label:nth-child(odd) {
    background-color: var(--sheet-pf-oddbg);
}

.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi > .sheet-roll-row,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc > .sheet-roll-row,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc > .sheet-roll-row {
    background-color: white;
}

/* Dark Mode */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-groupi > .sheet-roll-row,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-groupc > .sheet-roll-row,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-groupc > .sheet-roll-row {
    background-color: #222;
}

/*doubled up the class to increase specificity*/
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-atk.sheet-atk,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-confirm,
.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row:first-child,
.sheet-rolltemplate-pf_spell .sheet-roll-groupi > .sheet-roll-row:first-child,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc > .sheet-roll-row:first-child,
.sheet-rolltemplate-pf_spell .sheet-roll-groupc > .sheet-roll-row:first-child {
    background-color: var(--sheet-pf-oddbg);
}

/* dark Mode */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-atk.sheet-atk,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label.sheet-confirm,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-groupi > .sheet-roll-row:first-child,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-groupi > .sheet-roll-row:first-child,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_attack .sheet-roll-groupc > .sheet-roll-row:first-child,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-pf_spell .sheet-roll-groupc > .sheet-roll-row:first-child {
    background-color: #000;
}

/* make the vs so and so transparent
   inline rolls are after this so they override.
*/

.sheet-rolltemplate-pf_attack .sheet-roll-accessible .sheet-confirm .sheet-vs,
.sheet-rolltemplate-pf_attack .sheet-roll-groupc .sheet-vs {
    color: transparent;
}

.sheet-rolltemplate-pf_attack span.sheet-vs,
.sheet-rolltemplate-pf_attack .sheet-roll-accessible > label span.sheet-vs {
    font-size: 1.1rem;
    font-weight: bold;
}

/*************  inline roll *******/
/* first line not used so put dummy class here, something really odd going on*/

.inlinerollresult,
.sheet-rolltemplate-pf_generic .inlinerollresult,
.sheet-rolltemplate-pf_ability .inlinerollresult,
.sheet-rolltemplate-pf_defense .inlinerollresult,
.sheet-rolltemplate-pf_attack .inlinerollresult,
.sheet-rolltemplate-pf_spell .inlinerollresult,
.sheet-rolltemplate-pf_block .inlinerollresult {
    color: White;
    background-color: Black;
    border-color: Black;
    min-width: 2rem;
    text-align: center;
    display: inline-block;
    padding: 0;
}

/*remove the inlineroll style of spell check modifiers and dual-wield attack mods*/
.sheet-rolltemplate-pf_spell :not(.sheet-roll-description) > .sheet-roll-cell:first-child .inlinerollresult,
.sheet-rolltemplate-pf_attack :not(.sheet-roll-row) > .sheet-roll-cell:first-child .inlinerollresult,
.sheet-rolltemplate-pf_attack .sheet-roll-cell.sheet-atk:first-child .inlinerollresult,
.sheet-rolltemplate-pf_attack > div.sheet-roll-accessible > label.sheet-atk span.sheet-atk:first-child > .inlinerollresult,
.sheet-rolltemplate-pf_spell > div.sheet-roll-accessible > label > span.inlinerollresult {
    color: black;
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0;
}

/*green*/

.sheet-rolltemplate-pf_generic .inlinerollresult.fullcrit,
.sheet-rolltemplate-pf_ability .inlinerollresult.fullcrit,
.sheet-rolltemplate-pf_defense .inlinerollresult.fullcrit,
.sheet-rolltemplate-pf_attack .inlinerollresult.fullcrit,
.sheet-rolltemplate-pf_spell .inlinerollresult.fullcrit,
.sheet-rolltemplate-pf_block .inlinerollresult.fullcrit {
    border-color: #3FB315;
    color: White;
    background-color: #3FB315;
}

/* red*/

.sheet-rolltemplate-pf_generic .inlinerollresult.fullfail,
.sheet-rolltemplate-pf_ability .inlinerollresult.fullfail,
.sheet-rolltemplate-pf_defense .inlinerollresult.fullfail,
.sheet-rolltemplate-pf_attack .inlinerollresult.fullfail,
.sheet-rolltemplate-pf_spell .inlinerollresult.fullfail,
.sheet-rolltemplate-pf_block .inlinerollresult.fullfail {
    border-color: #B31515;
    color: White;
    background-color: #B31515;
}

/* purple when 1 high 1 low */

.sheet-rolltemplate-pf_generic .inlinerollresult.importantroll,
.sheet-rolltemplate-pf_ability .inlinerollresult.importantroll,
.sheet-rolltemplate-pf_defense .inlinerollresult.importantroll,
.sheet-rolltemplate-pf_attack .inlinerollresult.importantroll,
.sheet-rolltemplate-pf_spell .inlinerollresult.importantroll,
.sheet-rolltemplate-pf_block .inlinerollresult.importantroll {
    border-color: #4A57ED;
    color: White;
    background-color: #4A57ED;
}

/* prevents background-color from interfering with inserted images*/
.sheet-rolltemplate-pf_generic .sheet-roll-row.sheet-roll-description a[href$=".png"],
.sheet-rolltemplate-pf_ability .sheet-roll-row.sheet-roll-description a[href$=".png"],
.sheet-rolltemplate-pf_defense .sheet-roll-row.sheet-roll-description a[href$=".png"],
.sheet-rolltemplate-pf_attack .sheet-roll-row.sheet-roll-description a[href$=".png"],
.sheet-rolltemplate-pf_spell .sheet-roll-row.sheet-roll-description a[href$=".png"],
.sheet-rolltemplate-pf_block .sheet-roll-row.sheet-roll-description a[href$=".png"] {
    background-color: transparent;
    color: transparent;
}

/* prevents background-color from interfering with hyperlinks*/
.sheet-rolltemplate-pf_generic .sheet-roll-row.sheet-roll-description a,
.sheet-rolltemplate-pf_ability .sheet-roll-row.sheet-roll-description a,
.sheet-rolltemplate-pf_defense .sheet-roll-row.sheet-roll-description a,
.sheet-rolltemplate-pf_attack .sheet-roll-row.sheet-roll-description a,
.sheet-rolltemplate-pf_spell .sheet-roll-row.sheet-roll-description a,
.sheet-rolltemplate-pf_block .sheet-roll-row.sheet-roll-description a {
    background-color: transparent;
    color: blue;
    text-decoration: underline;
}

/* allow ability command buttons to have consistant formatting */
.sheet-rolltemplate-pf_generic .sheet-roll-row.sheet-roll-description a[href^="~"],
.sheet-rolltemplate-pf_ability .sheet-roll-row.sheet-roll-description a[href^="~"],
.sheet-rolltemplate-pf_defense .sheet-roll-row.sheet-roll-description a[href^="~"],
.sheet-rolltemplate-pf_attack .sheet-roll-row.sheet-roll-description a[href^="~"],
.sheet-rolltemplate-pf_spell .sheet-roll-row.sheet-roll-description a[href^="~"],
.sheet-rolltemplate-pf_block .sheet-roll-row.sheet-roll-description a[href^="~"] {
    background-color: var(--sheet-pf-bg);
    color: var(--sheet-pf-text);
}

/* adds vertical scrolling for long descriptions */
.sheet-rolltemplate-pf_generic .sheet-roll-description.sheet-scroll-desc,
.sheet-rolltemplate-pf_ability .sheet-roll-description.sheet-scroll-desc,
.sheet-rolltemplate-pf_defense .sheet-roll-description.sheet-scroll-desc,
.sheet-rolltemplate-pf_attack .sheet-roll-description.sheet-scroll-desc,
.sheet-rolltemplate-pf_spell .sheet-roll-description.sheet-scroll-desc,
.sheet-rolltemplate-pf_block .sheet-roll-description.sheet-scroll-desc {
    display: inline-block;
    max-height: 12.5rem;
    overflow-y: auto;
}

.sheet-rolltemplate-pf_generic .sheet-roll-description,
.sheet-rolltemplate-pf_ability .sheet-roll-description,
.sheet-rolltemplate-pf_defense .sheet-roll-description,
.sheet-rolltemplate-pf_attack .sheet-roll-description,
.sheet-rolltemplate-pf_spell .sheet-roll-description,
.sheet-rolltemplate-pf_block .sheet-roll-description {
    max-height: 100%;
}

/*************************************************************************************/

.charsheet feats .table-header {
    white-space: nowrap;
}

.charsheet .extra-damage-section .table-cell {
    padding-right: .5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section:not(.section-npc) > .h2-section:not(.wide-readonly).extra-damage-section {
    width: 100%;
}

/* 3way */
/* readonly / edit mode button is reverse unchecked looks like checked */
/* button */
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skill-options .config-table.options {
    border: none;
}

/* draw border have to put + here just to override specificity of arrow toggles above. don't want to use important here or all display below will have to use important. */
.charsheet .readonly-show:not(:checked) ~ .main .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section + .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section + .h2-section + .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .h3-section,
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section,
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section + .h3-section,
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section + .h3-section + .h3-section {
    max-width: calc(100% - .25em);
    /*    display: inline-block; */
    display: block;
    margin: .125em;
    clear: none;
    float: left;
    height: auto;
    overflow: hidden;
}

.charsheet .readonly-show:not(:checked) ~ .main .section > .h2-section .h3-section:not(.wide-readonly).section-oldslas {
    width: calc(100% - .25em);
    display: block;
    margin: .125em;
    clear: none;
    float: left;
    height: auto;
}

.charsheet .readonly-show:not(:checked) ~ .main .h2-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section:not(.noborder-readonly) + .h2-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h2arrow:not(:checked) ~ .h2-section:not(.noborder-readonly) + .h2-section:not(.noborder-readonly) + .h2-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h3-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section:not(.noborder-readonly) + .h3-section:not(.noborder-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .h3arrow:not(:checked) ~ .h3-section:not(.noborder-readonly) + .h3-section:not(.noborder-readonly) + .h3-section:not(.noborder-readonly) {
    border: 0.1rem solid black;
    border-radius: 0.5rem;
}

/* default turn off .sections */

.charsheet .readonly-show:not(:checked) ~ .main .notes {
    min-height: 1.5em !important;
    height: auto;
}

/* readonly/compact mode toggles */
.charsheet .readonly-show:checked ~ .main .show-readonly.inverse-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .hide-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .cheat:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .showarrow.h2arrow:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .showarrow.h3arrow:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .clickheader.showsect:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .table-name:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .nontable-name:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .secondary-table-name:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .divider:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .divider-lg:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .desc:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .desc-show:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .desc-showlabel:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .macro-text-show:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .macro-text-showlabel:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .id-show:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .id-showlabel:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .macro-text:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .repeating-id:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .armor-attributes:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .armor-attributes-showlabel:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .weapon-attributes:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .repeating-fields .weapon-attributes-showlabel:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .hide-readonly ~ .npc-header.showsect::before,
.charsheet .readonly-show:not(:checked) ~ .main .hide-readonly ~ .npc-header.showsect::after {
    display: none !important;
}

.charsheet .hide-unused-section-readonly:checked + .showarrow.h2arrow + .showsect + .h2-section,
.charsheet .hide-unused-section-readonly:checked + .showarrow.h3arrow + .showsect + .h3-section,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section h1 {
    display: none;
}

/*widths */

.charsheet .col {
    width: 100%;
    display: block;
}

.charsheet .row {
    width: 100%;
    display: block;
    height: auto;
    margin: 0;
}

.charsheet .expand-arrow {
    position: absolute;
}

.charsheet .expand-arrow + span {
    position: absolute;
    left: .25em;
}

.charsheet .hasexpandrows .expand1,
.charsheet .hasexpandrows .expand1 + span {
    top: 3.25em;
}

.charsheet .hasexpandrows .expand2,
.charsheet .hasexpandrows .expand2 + span {
    top: 5.25em;
}

.charsheet .hasexpandrows .expand3,
.charsheet .hasexpandrows .expand3 + span {
    top: 7.25em;
}

/*
.charsheet .class-table.hasexpandrows .expand1,
.charsheet .class-table.hasexpandrows .expand1+span {
    top: 5em;
}

.charsheet .class-table.hasexpandrows .expand2,
.charsheet .class-table.hasexpandrows .expand2+span {
    top: 7em;
}

.charsheet .class-table.hasexpandrows .expand3,
.charsheet .class-table.hasexpandrows .expand3+span {
    top: 9em;
}

.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand1,
.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand1+span {
    top: 5.25em;
}

.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand2,
.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand2+span {
    top: 7.25em;
}

.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand3,
.charsheet .readonly-show:not(:checked)~.main .class-table.hasexpandrows .expand3+span {
    top: 9.25em;
}
*/
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1 + span {
    top: 4.5em;
}

.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2 + span {
    top: 6.75em;
}

.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2 + span {
    top: 9em;
}

.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:not(:checked) ~ .expand3,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:not(:checked) ~ .expand3 + span {
    top: 9em;
}

.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:checked ~ .expand3,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:checked ~ .expand3 + span,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:not(:checked) ~ .expand3,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:not(:checked) ~ .expand3 + span {
    top: 11.25em;
}

.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:checked ~ .expand3,
.charsheet .readonly-show:checked ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:checked ~ .expand3 + span {
    top: 13.5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1 + span {
    top: 1.25em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2 + span {
    top: 3.5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2 + span {
    top: 5.75em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:not(:checked) ~ .expand3,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:not(:checked) ~ .expand3 + span {
    top: 5.75em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:checked ~ .expand3,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:not(:checked) ~ .expand2:checked ~ .expand3 + span,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:not(:checked) ~ .expand3,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:not(:checked) ~ .expand3 + span {
    top: 8em;
}

.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:checked ~ .expand3,
.charsheet .readonly-show:not(:checked) ~ .main .attack-grid.hasexpandrows .expand1:checked ~ .expand2:checked ~ .expand3 + span {
    top: 10.25em;
}

/* repeating .sections take up half on "all" view
also if multiple repeating sects inside h2 they are 100% wide and only h2 is narrow.
*/
.charsheet .readonly-show:not(:checked) ~ .main .section .half-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .section .tab99:checked ~ .section > .col,
.charsheet .readonly-show:not(:checked) ~ .main .section:not(.section-npc) > .h2-section:not(.wide-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .section > .h2-section .h3-section:not(.wide-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section:not(.section-npc) > .h2-section.repeating-sect:not(.wide-readonly) {
    margin: 0.2rem;
    width: calc(50% - 6px);
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-npc > .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-npc > .h2-section .repeating-sect,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section > .h2-section.wide-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section > .h2-section.repeating-sect,
.charsheet .readonly-show:not(:checked) ~ .main .section .col .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section > .h2-section.wide-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .h3-section.wide-readonly {
    margin: 0.2rem;
    width: calc(100% - 4px);
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .col {
    /*	display:inline-block; */
    display: block;
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .col.equipment {
    display: flex;
    float: none;
    width: 100% !important;
}

.charsheet .readonly-show:not(:checked) ~ .main .flex-row {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: stretch !important;
}

.charsheet .readonly-show:not(:checked) ~ .main .flex-col {
    display: flex !important;
    flex-flow: column nowrap;
    align-items: stretch !important;
}

.charsheet .h2-section.core-details {
    width: calc(100% - 4px);
    height: auto;
    display: block;
    clear: both;
    margin: 0.4rem 0.2rem 0.2rem 0.2rem;
}

.charsheet .readonly-show:not(:checked) ~ .main .section .col .h2-section.ability-scores,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.ability-scores {
    margin: 0.2rem;
    width: calc(50% - 6px);
    float: left;
    min-height: 16.7em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section .col .h2-section.half-readonly,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.half-readonly {
    margin: 0.2rem;
    width: calc(50% - 6px);
}

.charsheet .readonly-show:not(:checked) ~ .main .section .col .h2-section.class-grid,
.charsheet .readonly-show:not(:checked) ~ .main .section .col .h2-section.experience,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.class-grid,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .col .h2-section.experience {
    margin: 0.2rem;
    width: calc(50% - 6px);
}

.charsheet .readonly-show:not(:checked) ~ .main .h2-section.ability-scores {
    /*    width: 44%;*/
    min-width: 15em;
}

.charsheet .readonly-show:not(:checked) ~ .main .h2-section.class-grid {
    /*    width: 55%;*/
    min-width: 15em;
}

.charsheet .creature-race-header {
    height: 4.2em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .creature-race-header {
    height: 1.25em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-core .h2-section.experience {
    min-width: 19em;
    margin: 0.2rem;
    /*	width: calc(50% - 6px);*/
    display: inline-block;
    min-height: 6.45em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-core .h2-section.speeds {
    min-width: 25em;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-core .row.row2 {
    width: 100%;
    display: block;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-core .row.row2 {
    width: 70%;
    /*	display:inline-block; */
    display: block;
    float: left;
    margin-right: .125em;
}

.charsheet .readonly-show:not(:checked) ~ .main ~ .section-core .h2-section.hit-points,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-core .h2-section.hit-points {
    max-width: calc(50% - 6px);
    width: auto;
    flex-grow: 2;
}

/*
.charsheet .readonly-show:not(:checked)~main tab99:checked~.section-core .h2-section.hit-points {
	max-width:calc(40% - 4px);
	width:auto;
}
*/
.charsheet .readonly-show:not(:checked) ~ .main .section-core .wounds-show:not(:checked) ~ .h2-section.hit-points {
    margin: 0.2rem;
}

.charsheet .wound-threshold .table-row {
    float: right;
    clear: right;
    white-space: nowrap;
}

.charsheet .wound-threshold .table-cell {
    text-align: left;
    padding-left: .5em;
}

.charsheet .wound-threshold .table-cell label {
    margin-right: .5em;
}

.charsheet .readonly-show:checked ~ .main .section-core .h2-section.wound-threshold {
    width: auto;
    flex-grow: 1;
}

/*
.charsheet h2-sectionwound-threshold {
	min-width:11.5em;
	width:auto;
	display:inline-block;
}
.charsheet .readonly-show:checked~main .section-core .h2-section.wound-threshold {
	width:17%;
}
.charsheet .readonly-show:not(:checked)~main tab99:not(:checked)~.section-core .h2-section.wound-threshold {
	width: 24%;
	display:inline-block;
	min-width:12em;
}
*/
.charsheet .readonly-show:not(:checked) ~ .main .section-core .h2-section.initiative,
.charsheet .readonly-show:not(:checked) ~ .main .section-core .wounds-show:checked ~ .h2-section.initiative,
.charsheet .readonly-show:not(:checked) ~ .main .section-core .wounds-show:not(:checked) ~ .h2-section.initiative {
    max-width: calc(50% - 6px);
    margin: 0.2rem;
    width: auto;
    flex-grow: 2;
    min-width: 14em;
}

/*added this because the contents were pushing out of the parent element in non-edit view */
.charsheet .readonly-show:not(:checked) ~ .main .section-core .initiative .table span.table-cell {
    display: inline-block;
    vertical-align: bottom;
    padding: 0.4rem;
    max-height: 4rem;
}

.charsheet .h2-section.speeds {
    min-width: 30em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-core .h2-section.speeds {
    margin: 0.2rem;
    width: calc(100% - 4px);
    display: block;
}

.charsheet .speeds .narrow-numbers-readonly input[type="number"] {
    width: auto;
}

.charsheet .readonly-show:not(:checked) ~ .main .speeds .narrow-numbers-readonly input[type="number"] {
    width: auto;
}

/* defense page */

.charsheet .readonly-show:not(:checked) ~ .main .section > .h2-section.saves,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .h2-section.saves,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-defenses .h2-section.saves {
    min-width: 18em;
    /*  display: inline-block; */
    display: block;
    margin: 0.2rem 0.2rem 0 0;
    float: right;
    width: calc(30% - 6px);
    min-height: 17em;
}

.charsheet .readonly-show:checked ~ .main .saves-notes-table .table-cell:first-child {
    width: 25%;
    text-align: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .saves-notes-table .table-cell {
    display: block;
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .section .saves-notes-table .table-cell textarea {
    min-height: 4em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .h2-section.defense-grid {
    min-width: 30em;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .h2-section.defense-grid {
    width: 69%;
    min-height: 17em;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-defenses .h2-section.defense-grid {
    margin: 0.2rem;
    width: calc(50% - 6px);
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .h2-section.attack-grid {
    /*margin: 0.2rem;
	width: calc(50% - 6px);*/
    min-width: 24em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .linked-tablecell-short {
    width: 4em;
    max-width: 4em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .linked-tablecell-short select.linked-cellfield {
    width: 100%;
    max-width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section > .h2-section.spellcasting-classes.wide-readonly {
    margin: 0.2rem 0 0.2rem 0.4rem;
    width: 100%;
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section .h3-section.domains.wide-readonly {
    padding-bottom: 0.5em;
    margin: 0;
    min-width: calc(100% - 1px);
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .h2-section.advanced-macros {
    /*margin: 0.2rem;
	width: calc(100% - 4px);*/
    border: none;
}

.charsheet .section-attacks .misc {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .col.col1 .table {
    margin-right: 0;
}

.charsheet .readonly-show:checked ~ .main .section-equipment .h2-section.current-loads {
    flex-flow: row nowrap;
    justify-content: space-between;
}

/* block not .table because of wrap */
.charsheet .readonly-show:checked ~ .main .section-equipment .h2-section.current-loads .table,
.charsheet .readonly-show:checked ~ .main .section-equipment .h2-section.loads-and-lift .table,
.charsheet .readonly-show:checked ~ .main .section-equipment .h2-section.currency .table {
    display: inline-block;
}

.charsheet .readonly-show:checked ~ .main .section-equipment .h2-section.current-loads .load .table-cell {
    line-height: 3em;
}

.charsheet .carried-totals,
.charsheet .load,
.charsheet .currency,
.charsheet .lift-modifiers,
.charsheet .lift {
    min-width: 16em;
}

.charsheet .carried-totals,
.charsheet .load {
    width: 50%;
}

.charsheet .lift-modifiers,
.charsheet .lift {
    width: 33.3%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .h2-section.other-items {
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .h2-section.other-items {
    width: 100%;
}

/* inventory page switch from rows to columns */
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .h2-section.currency,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .h2-section.current-loads,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .h2-section.loads-and-lift {
    display: flex;
    flex-flow: column;
}

/* inventory page only */
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .col.col1 .h2-section.currency,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .col.col1 .h2-section.current-loads {
    width: calc(50% - 6px);
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .loads-and-lift {
    width: calc(50% - 6px);
    float: right;
}

/* inventory all page  */
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col1 .h2-section.currency,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col1 .h2-section.current-loads,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col1 .h2-section.loads-and-lift {
    width: 100%;
}

/* .col 2 worn items
.charsheet .worn-items {
    max-width: 100%;
}
*/

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .worn-items {
    flex-flow: column;
    align-items: stretch;
}

.charsheet .worn-items .table {
    display: inline-block;
    width: 49%;
    flex-basis: 50%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-equipment .col.col2 {
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col1 {
    margin: 0.2rem 0.2rem 0.2rem -0.2rem;
    width: 40%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col2 {
    margin: 0.2rem 0 0.2rem 0;
    width: calc(60% - 8px);
    float: right;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col2 .worn-items .table {
    width: 100%;
    display: table;
    flex-basis: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col2.worn-items {
    display: block;
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .col.col2.worn-items .table {
    display: inline-block;
    width: calc(50% - 2px);
}

/* in case flex not supported: */
.charsheet .h2-section.worn-items .table:first-child {
    margin-right: .125em;
}

.charsheet .h2-section.worn-items .table:last-child {
    float: right;
}

/* read only any page */
.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .h2-section.current-loads .table,
.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .h2-section.loads-and-lift .table,
.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .h2-section.currency .table {
    width: 100%;
}

/* display xp at bottom of page in all pages mode */

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-equipment .experience {
    display: none;
}

/******** spells ********/

.charsheet .spellclass-spellnotes .table-header {
    white-space: nowrap;
}

.charsheet .spellpoints .table-header {
    white-space: normal;
}

.charsheet .spellclass-spellnotes .notes-cell {
    width: 33%;
}

.charsheet .h3-section.spellclass-level,
.charsheet .h3-section.spellclass-concentration {
    width: 69.5%;
    float: left;
}

.charsheet .h3-section.spellclass-ranges {
    display: inline-table;
}

.charsheet .readonly-show:checked ~ .main .section-spells .h3-section.spellclass-ranges {
    max-width: 29.75%;
    vertical-align: top;
    float: right;
}

.charsheet .readonly-show:checked ~ .main .section-spells .h3-section.spellclass-roll-adj {
    max-width: 29.75%;
    float: right;
}

.charsheet .readonly-show:checked ~ .main .section-spells .spellclass-ranges .table-header {
    height: 3.05rem;
    /* exactly matches 2 rows from sheet-spellclass-level table.*/
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1 .table .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1 .table .divider-lg {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-header:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-cell:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .divider:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-header:nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-cell:nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .divider:nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-header:nth-child(10),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .table-cell:nth-child(10),
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .spells-per-day .table-row .divider:nth-child(10) {
    display: none;
}

.charsheet .readonly-show:checked ~ .main .section-spells .col.col1,
.charsheet .readonly-show:checked ~ .main .section-spells .col.col2 {
    width: 100%;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1 {
    margin: 0.2rem 0.2rem 0.2rem -0.2rem;
    width: 50%;
    float: left;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1:last-child {
    margin: 0;
    width: calc(50% - .4rem);
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col2 {
    margin: 0.2rem;
    width: calc(50% - 6px);
    float: right;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1 .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col2 .h2-section,
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col1 .h3-section,
.charsheet .readonly-show:not(:checked) ~ .main .section-spells .col.col2 .h3-section {
    width: 100%;
    display: block;
    overflow-x: auto;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-skills skilllist {
    width: 100%;
}

/*
.charsheet .readonly-show:not(:checked)~main tab99:checked~.section-skills skilllist {
    margin: 0.2rem;
	width: calc(50% - 6px);
}*/

/**************** tabs .expand */

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-skills .skillsnav ~ .tab {
    width: 28%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-skills .skillsnav ~ .tabinput {
    width: 28%;
    margin-right: -28%;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-skills .h2-section.skill-totals,
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .h2-section.skill-notes,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-skills .h2-section.skill-totals,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-skills .h2-section.skill-notes {
    float: left;
    width: calc(40% - 4px);
}

.charsheet .readonly-show:not(:checked) ~ .main .section-skills .h2-section.skill-options,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-skills .h2-section.skill-options {
    float: right;
    width: calc(60% - 8px);
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-spells .spellclassnav ~ .tab:not(.tab99) {
    width: 25%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ .section-spells .spellclassnav ~ .tabinput:not(.tab99) {
    width: 25%;
    margin-right: -25%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ div .tab.tab99 {
    width: 10%;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:checked ~ div .tabinput.tab99 {
    width: 10%;
    margin-right: -10%;
}

/* hide .table columns */

.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-header:nth-child(4),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-cell:nth-child(4),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-header:nth-child(5),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-cell:nth-child(5),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-header:nth-child(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-cell:nth-child(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-header:nth-child(7),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-cell:nth-child(7),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-header:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .table-cell:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-core .ability-scores .divider-lg {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-header:nth-child(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-cell:nth-child(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-header:nth-child(11),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-cell:nth-child(11),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-header:nth-child(12),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-cell:nth-child(12),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-header:nth-child(13),
.charsheet .readonly-show:not(:checked) ~ .main .section-core .class-grid .table-cell:nth-child(13) {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-header:nth-child(3),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-cell:nth-of-type(3),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-header:nth-child(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-cell:nth-of-type(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-header:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-cell:nth-of-type(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-header:nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-cell:nth-of-type(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-header:nth-child(n+13),
.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-grid .defense-table .table-cell:nth-of-type(n+13) {
    display: none;
}

.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-group-head :nth-child(8),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-group-head :nth-child(9),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-group-head :nth-child(12),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-group-head :nth-child(13),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-row :nth-child(8),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-row :nth-child(9),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-row :nth-child(12),
.charsheet .extra-saves-show:not(:checked) ~ .saves-table .table-row :nth-child(13) {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-group-head :nth-child(4),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-group-head :nth-child(7),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-group-head :nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-group-head :nth-child(n+12),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-row :nth-child(4),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-row :nth-child(7),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-row :nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .table-row :nth-child(n+12) {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .divider,
.charsheet .readonly-show:not(:checked) ~ .main .tab99:not(:checked) ~ .section-defenses .saves .saves-table .divider-lg {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-defenses .defense-notes .notes {
    height: 5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-child(n+3),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-child(n+3),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .linked-tablecell-short input {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-of-type(4),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-of-type(4),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-of-type(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-of-type(6),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-of-type(11),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-of-type(11),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-of-type(16),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-of-type(16),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-group-head .table-header:nth-of-type(17),
.charsheet .readonly-show:not(:checked) ~ .main .section-attacks .attack-grid .table-row .table-cell:nth-of-type(17) {
    display: table-cell;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(10),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(12),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(13),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-header:nth-child(n+15),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(8),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(9),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(10),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(12),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(13),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skilllist .skills .table-row .table-cell:nth-of-type(n+15),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skills-key {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skill-totals .table-header:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skill-totals .table-cell:not(.show-readonly),
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skill-totals .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-skills .skill-totals .divider-lg {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .carried-totals .divider,
.charsheet .readonly-show:not(:checked) ~ .main .section-equipment .carried-totals .divider-lg {
    display: none;
}

.charsheet .readonly-show:not(:checked) ~ .main .section > .nontable-nameshow-readonly {
    width: 49%;
    float: left;
    display: block;
}

/* npc / spells overrides all above,no config in readonly if not checked */
.charsheet .show-spell-tab:not(:checked) ~ .main .spelltab,
.charsheet .show-spell-tab:not(:checked) ~ .main .section-spells {
    display: none;
}

.charsheet .table-rightcell {
    width: 90%;
    max-width: 90%;
}

.charsheet .readonly-show:not(:checked) ~ .main .nowrap-readonly {
    white-space: nowrap !important;
}

.charsheet .small-label2.autoexpand {
    padding-top: 2em;
    width: auto;
    min-width: 3.5em;
    max-width: 99%;
}

.charsheet .small-label2.autoexpand input {
    position: absolute;
    overflow: hidden;
    height: 1.75em;
    top: .3em;
    text-align: center;
}

/* fix height of autoexpand fields in npc section */
.charsheet .npc-details .small-label2.autoexpand input,
.charsheet .npc-defense .small-label2.autoexpand input,
.charsheet .npc-offense .small-label2.autoexpand input,
.charsheet .npc-tactics .small-label2.autoexpand input,
.charsheet .npc-statistics .small-label2.autoexpand input,
.charsheet .npc-ecology .small-label2.autoexpand input,
.charsheet .npc-desc .small-label2.autoexpand input {
    height: auto;
}

.charsheet .small-label2.autoexpand span.autoexpand {
    visibility: hidden;
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    min-height: 1.3rem;
    padding: 0 1.25rem 0 1.25rem;
    height: auto;
}

.charsheet .small-label2.wide-textareaparent {
    display: block;
    clear: both;
    height: auto;
}

.charsheet .emphasize-field,
.charsheet .table-header.emphasize-field {
    background-color: #556677;
    color: white;
}

.charsheet .emphasize-field input,
.charsheet .table-header.emphasize-field input {
    background-color: revert;
    color: #222;
}

.sheet-darkmode .tab-content .charsheet .emphasize-field input,
.sheet-darkmode .tab-content .charsheet .table-header.emphasize-field input {
    background-color: #222;
    color: #fff;
}

.charsheet .inspecial {
    display: inline-block;
    text-indent: 1.25em;
}

.charsheet .noshow {
    display: none !important;
}

/* attacks */
.charsheet .dualwield-hide:checked ~ .nondual-sect,
.charsheet .dualwield-hide:checked ~ .sect.expand .nondual-sect,
.charsheet .dualwield-hide:not(:checked) ~ .dual-sect,
.charsheet .dualwield-hide:not(:checked) ~ .sect.expand .dual-sect {
    display: none;
}

.charsheet .h2-section.dual-wield-sect.wide-readonly {
    padding: 0.4rem;
    border: 0.2rem solid #CCCCCC;
    border-radius: 0.7rem;
}

.charsheet .option-header {
    border-top: 0.1rem solid black !important;
    background-color: lightgrey;
}

.charsheet .skills .table-row .table-cell:nth-of-type(7) {
    cursor: help;
}

.charsheet .skills .table-row .table-header:nth-of-type(7),
.charsheet .skills .table-row .table-cell:nth-of-type(7) {
    width: 2em;
    max-width: 1em;
}

.charsheet .readonly-show:not(:checked) ~ .main .skills .table-row .table-header:nth-of-type(7),
.charsheet .readonly-show:not(:checked) ~ .main .skills .table-row .table-cell:nth-of-type(7) {
    width: .5em;
    max-width: .5em;
}

.charsheet .readonly-show:not(:checked) ~ .main .skills .table-row .table-cell:nth-of-type(7) {
    transform: rotate(90deg);
}

.charsheet input.macro-text-inline,
.charsheet textarea.macro-text-inline,
.charsheet .macro-text-inline input,
.charsheet textarea.macro-text,
.charsheet textarea.skill-macro-text,
.charsheet input.skill-macro-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    line-height: 2rem;
    padding: 2px;
    box-sizing: border-box;
    vertical-align: inherit;
    word-break: break-all;
    min-width: 8em;
    width: 100%;
}

.charsheet .accessible:checked ~ .pf-wrapper input.macro-text-inline,
.charsheet .accessible:checked ~ .pf-wrapper textarea.macro-text-inline,
.charsheet .accessible:checked ~ .pf-wrapper .macro-text-inline input,
.charsheet .accessible:checked ~ .pf-wrapper textarea.macro-text,
.charsheet .accessible:checked ~ .pf-wrapper .inline-textarea,
.charsheet .accessible:checked ~ .pf-wrapper textarea.skill-macro-text,
.charsheet .accessible:checked ~ .pf-wrapper input.skill-macro-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
    line-height: 1.2rem;
}

/*skill too crowded*/
.charsheet .skills .divider,
/* turn config page on /off */
.charsheet .config-show:checked ~ .pfsheet,
.charsheet .config-show:checked ~ .footnotes,
.charsheet .config-show:not(:checked) ~ .section-config,
/* config page toggles override all others: */
.charsheet .kineticist-show:not(:checked) ~ .kineticist,
.charsheet .horror-show:not(:checked) ~ .horror-sect,
.charsheet .dual-wield-show:not(:checked) ~ .dual-wield-sect,
.charsheet .spellpoints-show:not(:checked) ~ .section-spellclass .spellpoints-sect,
.charsheet .advanced-spell-option-show:not(:checked) ~ .spellcasting-classes .section-spellclass .manual-column-show:not(:checked) ~ div .spell-userdef-column,
.charsheet .advanced-spell-option-show:not(:checked) ~ .spellcasting-classes .section-spellclass .advanced-spell-option,
.charsheet .advanced-spell-option-show:not(:checked) ~ .spells .advanced-spell-option,
.charsheet .advanced-spell-option-show:not(:checked) ~ .npc-spells .advanced-spell-option,
.charsheet .spell-multiclassed-show:not(:checked) ~ .spellcasting-classes .spell-multiclassed,
.charsheet .spell-multiclassed-show:not(:checked) ~ .repeating-sect .spell-multiclassed,
.charsheet .all-macro-text-show:not(:checked) ~ div .macro-text,
.charsheet .all-macro-text-show:not(:checked) ~ div .showsect.macro-text-showlabel,
.charsheet .all-macro-text-show:not(:checked) ~ div .showsect.all-saves-macro-showlabel,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-skills .skills .table-row .table-header:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-skills .skills .table-row .table-cell:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-defenses .saves .saves-table .table-group-head .table-header:nth-last-child(2),
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-defenses .saves .saves-table .table-group .table-row .table-cell:nth-last-child(2),
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-defenses .saves .saves-table .table-group-head .table-header:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-defenses .saves .saves-table .table-group .table-row .table-cell:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .ability-scores .table .table-group-head .table-header:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .ability-scores .table .table-group .table-cell:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-attacks .table .table-group-head .table-headersuper:last-child,
.charsheet .all-macro-text-show:not(:checked) ~ .main .section-attacks .table .table-group .table-cell:last-child,
.charsheet .bonustype-show:not(:checked) ~ .newbuff,
.charsheet .bonustype-show:checked ~ .oldbuff,
.charsheet .wounds-show:not(:checked) ~ .wound-threshold,
.charsheet .advanced-macro-show:not(:checked) ~ .main .advanced-macros,
.charsheet .advanced-macro-show:not(:checked) ~ .main .advmacro-text-showlabel,
.charsheet .racial-traits-show:not(:checked) ~ .section-racial-traits,
.charsheet .racial-traits-show:not(:checked) ~ div .section-racial-traits,
.charsheet .traits-show:not(:checked) ~ .section-traits,
.charsheet .traits-show:not(:checked) ~ div .section-traits,
.charsheet .featlist-show:not(:checked) ~ .section-featlist,
.charsheet .featlist-show:not(:checked) ~ div .section-featlist,
.charsheet .classfeatures-show:not(:checked) ~ .section-classfeatureslist,
.charsheet .classfeatures-show:not(:checked) ~ div .section-classfeatureslist,
.charsheet .oldslas-show:not(:checked) ~ .section-oldslas,
.charsheet .oldslas-show:not(:checked) ~ div .section-oldslas,
.charsheet .mythic-show:not(:checked) ~ .section-mythic,
.charsheet .mythic-show:not(:checked) ~ .repeating-fields .section-mythic,
.charsheet .mythic-show:not(:checked) ~ .repeating-sect .repeating-fields .section-mythic,
.charsheet .mythic-show:not(:checked) ~ div .section-mythic,
.charsheet .mythic-show:checked ~ .section-mythic-hidden,
.charsheet .mythic-show:not(:checked) ~ label .section-mythic,
.charsheet .mythic-show:checked ~ label .section-mythic-hidden,
.charsheet .psionic-show:not(:checked) ~ .section-psionic,
.charsheet .psionic-show:not(:checked) ~ div .section-psionic {
    display: none !important;
}

.charsheet .readonly-show:not(:checked) ~ .main .section-spellclass .col button[type="roll"] {
    font-size: .95em;
}

/*styles sheet mode note*/
.charsheet div.mode {
    display: flex;
    flex-direction: row-reverse;
    font-style: italic;
    font-weight: bold;
    grid-area: 1/2/1/2;
}

.charsheet div.mode:hover {
    color: red;
}

.charsheet div.mode input.readonly-show {
    display: inline-block;
    opacity: 0;
    width: 7em;
    height: 1.5em;
    position: absolute;
    margin: -.125em 0 0 -.5em;
    z-index: 1;
}

/*hides edit-mode note*/
.charsheet .readonly-show:not(:checked) + span.mode {
    display: none;
}

/*hides compact-mode note*/
.charsheet .readonly-show:checked + span.mode + span.mode {
    display: none;
}