sheet.css

/* Browser-Specific Logic */

@supports not (selector(:has(*))) { /* More basic settings for browsers that don't support the 'has' selector for dynamically displaying/hiding elements based on user selection (such as Firefox ~v119 and earlier) */

    div.characterviewer div.charactersheet div.attacks div#ammoplaceholder { /* Just fully hide the placeholders which can't be switched in & out */
        display: none;
    }
    div.characterviewer div.charactersheet div.techniques div#quantityplaceholder { /* Just fully hide the placeholders which can't be switched in & out */
        display: none;
    }
}

/* Fonts */

@font-face {
    font-family: 'Lion-and-Hare';
    font-style: normal;
    font-weight: bold;
    src: url('https://www.d20helix.com/font/lionandhare-bold.woff2') format('woff2'),
         url('https://www.d20helix.com/font/lionandhare-bold.woff') format('woff');
}


@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: lighter;
    src: url('https://www.d20helix.com/font/rubik-300.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: italic;
    font-weight: lighter;
    src: url('https://www.d20helix.com/font/rubik-300italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: normal;
    src: url('https://www.d20helix.com/font/rubik-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: italic;
    font-weight: normal;
    src: url('https://www.d20helix.com/font/rubik-italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: bold;
    src: url('https://www.d20helix.com/font/rubik-700.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: italic;
    font-weight: bold;
    src: url('https://www.d20helix.com/font/rubik-700italic.woff2') format('woff2');
}
/* @import url('https://fonts.googleapis.com/css?family=Rubik:300,300italic,400,400italic,700,700italic'); */

@import url('https://dl.dafont.com/dl/?f=around');

/* Style Variables */

:root {
    --nearblack: #555;
    --shadowgray: rgba(0, 0, 0, 0.5);
    --inactivetabs: dimgray;
    --background: white;
    --secondarybackground: #ddd;
    --lightfont: #ddd;
    --midfont: #888;
    --tooltipbackground: black;
    --fieldborder: #ccc;
    --fieldbackground: #f5f5f5;
    --buttontop: #f5f5f5;
    --buttonbottom: #ddd;
    --buttonactivetop: #ffdcb0;
    --buttonactivebottom: #f2bc7b;
    --buttondangertop: #e19191;
    --buttondangerbottom: #f34646;
    --buttondangeractivetop: red;
    --buttondangeractivebottom: darkred;
    --npcheader: #b8c7cf;
    --highlight: darkorange;
    --highlightText: #d77600;
    --secondaryHighlightText: #5e009d;
    --roll20red: #aa1b1b;
    --roll20green: #71bc7f;
    --roll20blue: #7190bc;
}

/* Toggle field visibility between PC & NPC sheets */

div.characterviewer div.charactersheet input[type=checkbox].npctoggle:checked ~ div .pconly {
    display: none;
}
div.characterviewer div.charactersheet input[type=checkbox].npctoggle:not(:checked) ~ div .npconly {
    display: none;
}
div.characterviewer div.charactersheet input[type=checkbox].npctoggle {
    margin: 4px;
}
div.characterviewer div.charactersheet span.npctoggle {
    margin-left: 4px;
    margin-top: 1px;
    color: var(--lightfont);
}
div.characterviewer div.charactersheet input[type=checkbox].npctoggle:checked ~ div div.header,
div.characterviewer div.charactersheet input[type=checkbox].npctoggle:checked ~ div div.footer {
    background-color: var(--npcheader);
}

/* Overall Styling & Overriding of Default Roll20 Sheet Formatting */

div#tab-content { /* Overall width limits for the entire sheet itself */
    max-width: 750pt;
    min-width: 650pt;
}

div.largedialog.characterviewer {
    padding: 0;
}

div.charactersheet .incomplete {
    border: 1px solid red !important; /* Marked as 'important' in order to always override any other border settings */
}

div.characterviewer div.charactersheet input[type="checkbox"],
div.characterviewer div.charactersheet input[type='radio'] {
    accent-color:var(--highlight);
}

div.characterviewer div.charactersheet p {
    margin: 0;
}
div.characterviewer div.charactersheet {
    all: initial;
    padding: 0;
    line-height: normal;
    background-color: black;
}
div.characterviewer div.charactersheet div.sheetbody {
    background-color: white;
}

div.characterviewer div.charactersheet > * {
    font-family: "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    font-size: small;
    color: var(--nearblack);
}

div.characterviewer div.charactersheet select {
    width: 100%;
}

div.charactersheet ul.infolist,
div.charactersheet ul.armor,
div.charactersheet ul.weapons {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
div.charactersheet ul.infolist li,
div.charactersheet ul.armor li,
div.charactersheet ul.weapons li,
div.charactersheet div.abilities details {
    background-color: var(--secondarybackground);
    padding: 4pt;
    margin-bottom: 6pt;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
div.charactersheet div.abilities details summary {
    display: list-item; /* Fixes a bug in Firefox where it won't show the disclosure indicator for <details> unless the <summary> elements have the list-item display mode */
}
div.charactersheet ul.infolist li {
    width: 140px;
    height: 60px;
}
div.charactersheet ul.infolist li input,
div.charactersheet ul.infolist li span.textblock {
    text-align: center;
    font-size: medium;
    font-weight: bold;
    margin-left: 4px;
    margin-right: 4px;
}

div.characterviewer div.charactersheet label {
    font-size: small;
    font-weight: normal;
    margin: 0;
    padding: 0;
    color: var(--nearblack);
    width: auto;
}
div.characterviewer div.charactersheet span.npctoggle,
div.charactersheet div.header label,
div.charactersheet div.footer ul li,
div.charactersheet div.tabbed-view label.tab-heading,
div.charactersheet div.skills table td.smalltext,
div.charactersheet ul.infolist li label,
div.charactersheet ul.armor li > label,
div.charactersheet ul.weapons li label,
div.charactersheet div.gridheadings label,
div.charactersheet div.abilities div.gridheadings label,
div.charactersheet div.techniques label,
div.charactersheet div.passives label,
div.charactersheet div.abilities details summary,
div.charactersheet div.abilities details th {
    font-size: x-small;
    font-weight: bold;
    text-transform: uppercase;
}

div.characterviewer div.charactersheet input {
    font-size: small;
    margin: 0;
    color: var(--nearblack);
    width: auto;
}

div.characterviewer div.charactersheet textarea {
    all: initial;
    font-family: "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    font-size: small;
    border: 2pt solid var(--midfont);
    padding: 4pt;
}

div.characterviewer div.charactersheet ul {
    list-style-type: none;
    padding: 0;
    margin: auto;
}

div.characterviewer div.charactersheet button,
div.characterviewer div.charactersheet button[type=roll],
div.characterviewer div.charactersheet button[type=action] {
    cursor: pointer;
    font-weight: normal;
    font-size: small;
    margin: 0;
    border: 1px solid var(--fieldborder);
    color: var(--nearblack);
    text-shadow: none;
    line-height: 1.4em;
    background-image: linear-gradient(var(--buttontop), var(--buttonbottom));
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 3px;
    min-height: 24px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.characterviewer div.charactersheet button.btn-danger,
div.characterviewer div.charactersheet button[type=roll].btn-danger,
div.characterviewer div.charactersheet button[type=action].btn-danger {
    background-image: linear-gradient(var(--buttondangertop), var(--buttondangerbottom));
    border: 1px solid var(--buttondangerbottom);
    color: black;
    min-width: 6em;
    z-index: 99;
}
div.characterviewer div.charactersheet button.repcontrol_add,
div.characterviewer div.charactersheet button.repcontrol_edit,
div.characterviewer div.charactersheet button.repcontrol_modify {
    min-width: 6em;
}
div.characterviewer div.charactersheet button:hover,
div.characterviewer div.charactersheet button[type=roll]:hover,
div.characterviewer div.charactersheet button[type=action]:hover,
div.characterviewer div.charactersheet button:focus,
div.characterviewer div.charactersheet button[type=roll]:focus,
div.characterviewer div.charactersheet button[type=action]:focus,
div.characterviewer div.charactersheet button.focus,
div.characterviewer div.charactersheet button[type=roll].focus,
div.characterviewer div.charactersheet button[type=action].focus {
    background-image: linear-gradient(var(--buttonactivetop), var(--buttonactivebottom));
    background-position: top;
    color: var(--highlightText);
    border: 1px solid var(--highlight);
    transition: none;
    outline: none;
    outline-offset: 0;
    text-decoration: inherit;
    box-shadow: none;
    -webkit-box-shadow: none;
}
div.characterviewer div.charactersheet button.btn-danger:hover,
div.characterviewer div.charactersheet button[type=roll].btn-danger:hover,
div.characterviewer div.charactersheet button[type=action].btn-danger:hover,
div.characterviewer div.charactersheet button.btn-danger:focus,
div.characterviewer div.charactersheet button[type=roll].btn-danger:focus,
div.characterviewer div.charactersheet button[type=action].btn-danger:focus,
div.characterviewer div.charactersheet button.btn-danger.focus,
div.characterviewer div.charactersheet button[type=roll].btn-danger.focus,
div.characterviewer div.charactersheet button[type=action].btn-danger.focus {
    background-image: linear-gradient(var(--buttondangeractivetop), var(--buttondangeractivebottom));
    background-position: top;
    color: white;
    border: 1px solid red;
}
div.characterviewer div.charactersheet button span,
div.characterviewer div.charactersheet button[type=roll] span,
div.characterviewer div.charactersheet button[type=action] span {
    display: flex;
    height: 100%;
    vertical-align: middle;
    line-height: 1em;
    margin-left: 6px; /* Make space before the text, for the icon */
}
div.characterviewer div.charactersheet button:before {
    content: "" !important; /* Remove the D20 icon (which is just the letter 't' in a specialist font) from specific buttons */
}
div.charactersheet div.stretchyholder {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
div.charactersheet div.stretchyholder > button,
div.charactersheet div.stretchyholder > textarea,
div.charactersheet div.stretchyholder > span {
    width: 100%;
    height: 100%;
}

div.charactersheet div.singlecolumn {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
div.charactersheet div.multicolumn,
div.charactersheet ul.multicolumn {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
div.charactersheet div.oneline {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
div.charactersheet div.oneline.verticalstretch {
    align-items: stretch;
}

div.charactersheet div.section {
    padding: 8pt;
    width: 100%;
    display: inline-block;
}
div.charactersheet div.section.bigcolumn {
    width: 55%;
}
div.charactersheet div.section.smallcolumn {
    width: 40%;
}
div.charactersheet div.subsection {
    padding: 0;
    width: 100%;
    margin: 0;
    margin-bottom: 18px;
}

div.charactersheet div.repeatingrow {
    width: 100%;
    padding-bottom: 6px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
div.charactersheet div.repeatingrow div.calculation {
    border: 1px solid var(--fieldborder);
    background: var(--fieldbackground);
    border-radius: 3px;
}
div.charactersheet div.repeatingrow div.calculation input[readonly] { /* The calculation acts as the field, so remove any styling on fields within it */
    border: none;
    background: none;
    padding-top: 4px;
    padding-bottom: 4px;
}
div.charactersheet div.gridheadings {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
div.charactersheet div.gridheadings label {
    text-align: center;
    margin-bottom: 6px;
}
div.charactersheet div.gridheadings label:first-child {
    text-align: left;
}
div.charactersheet div.gridheadings label:last-child {
    text-align: right;
}
div.charactersheet div.verticalgroup {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
}
div.charactersheet div.quantity,
div.charactersheet label.quantity {
    max-width: 160px;
}


div.charactersheet input[readonly][type=number]::-webkit-outer-spin-button,
div.charactersheet input[readonly][type=number]::-webkit-inner-spin-button { /* Hide the 'Spinner' Up/Down arrows for read-only number fields in Chrome, Safari, Edge, and Opera */
    -webkit-appearance: none;
    margin: 0;
}
div.charactersheet input[readonly][type=number] { /* Hide the 'Spinner' Up/Down arrows for read-only number fields in Firefox */
    -moz-appearance: textfield;
    appearance: textfield;
}
div.charactersheet input[type=number]::-webkit-inner-spin-button,
div.charactersheet input[type=number]::-webkit-outer-spin-button { /* Always show the 'Spinner' Up/Down arrows for other input fields (the more specific one to hide for read-only will override this where needed) */
    opacity: 1;
}

div.characterviewer div.charactersheet div select:has(> option[value="minoraction"]:checked) { /* Color-coding for selected action types */
    color: var(--highlightText);
}
div.characterviewer div.charactersheet div select:has(> option[value="reaction"]:checked) {
    color: var(--secondaryHighlightText);
}

div.charactersheet img.icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    opacity: 75%;
}
div.charactersheet button img.icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
}
div.characterviewer div.charactersheet div.placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--nearblack);
    border-radius: 3px;
    opacity: 25%;
}

div.charactersheet select {
    margin: 0;
}

div.charactersheet .tinyfield {
    width: 5em;
}
div.charactersheet .shortfield {
    width: 8em;
}
div.charactersheet .mediumfield {
    width: 10em;
}
div.charactersheet .longfield {
    width: 12em;
}

/* Advantage/Disadvantage Toggle */

/* Needs a separate div so that the other can use clip-path without cutting the shadow */
div.charactersheet div.shadowed {
    filter: drop-shadow(0 1px 3px var(--shadowgray));
    margin: 0;
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 99;
}

div.charactersheet div.rollstyle input[type="radio"] { /* Hide each radio button's 'bullet' */
    position: absolute;
    left: -999em;
    visibility: hidden;
    display: none;
}

div.charactersheet div.rollstyle {
    position: relative;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    background-color: var(--nearblack);
    color: var(--secondarybackground);
    clip-path: polygon( /* Clips the div's visible path down to a trapezoid, with indentations of 10% width */
        0 0,
        100% 0,
        98% 100%,
        2% 100%
    );
}

div.charactersheet div.rollstyle label {
    color: var(--secondarybackground);
    width: 11em;
    padding: 6px;
    text-align: center;
}
div.charactersheet div.rollstyle label:hover {
    background-color: var(--midfont);
}

div.charactersheet div.rollstyle input[type="radio"] + label img.icon {
    display: none;
    visibility: hidden;
}

/* Style the currently selected item */
div.charactersheet div.rollstyle input[type="radio"]:checked + label {
    background-color: var(--highlightText);
    color: black;
}
div.charactersheet div.rollstyle input[type="radio"]:checked + label img.icon {
    display: inline-block;
    visibility: visible;
}

/* Headings */

div.charactersheet h1 {
    font-family: "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    font-size: small;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--nearblack);
    margin-bottom: 8px;
    line-height: 1em;
}
div.charactersheet h2 {
    font-family: "Lion-and-Hare", "Around", "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    font-size: xx-large;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    color: black;
    border-bottom: 2px solid var(--nearblack);
    margin-bottom: 12px;
    padding-left: 1px;
    padding-right: 1px;
}
div.charactersheet h3 {
    font-family: "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    font-size: medium;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: black;
    border-bottom: 2px solid var(--fieldborder);
    margin-bottom: 6px;
    padding-left: 1px;
    padding-right: 1px;
}

/* Tooltips & Custom Sub-Windows */

div.characterviewer div.charactersheet label.hastooltip { /* Style the item which has a tooltip connected to it */
    width: auto;
    display: inline-block;
    text-align: center;
    position: relative; /* This allows the tooltip content (with 'absolute' positioning) to use this element as its acnhor */
}

div.characterviewer div.charactersheet div.tooltipcontent, /* Style the tooltip itself */
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent { /* Enlarge the options section when expanded (as it is just the icon) */
    transition: opacity 0.5s;
    position: absolute;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    text-align: center;
    background-color: var(--tooltipbackground);
    border-radius: 6px;
    padding: 6pt;
    top: 150%; /* Position below the parent */
    z-index: 99;
}
div.characterviewer div.charactersheet div.tooltipcontent > *, /* Style the tooltip itself */
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent > * {
    color: var(--lightfont);
}
div.characterviewer div.charactersheet div.tooltipcontent > div {
    flex-direction: column;
}
div.characterviewer div.charactersheet div.tooltipcontent p {
    padding: 2px;
}

div.characterviewer div.charactersheet label.hastooltip div.tooltipcontent label,
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent label {
    color: var(--lightfont);
}
div.characterviewer div.charactersheet div.tooltipcontent textarea {
    color: var(--lightfont);
    border: 2pt solid var(--nearblack);
    min-height: 100px;
}
div.characterviewer div.charactersheet div.tooltipcontent { /* Position the tooltip and start it off hidden */
    visibility: hidden;
    opacity: 0;
    justify-content: center;
    width: 200px;
    margin-left: -200px; /* Pull it to the left (equal to its width), so that it doesn't ever flow over the right-hand side of the sheet */
}
div.characterviewer div.charactersheet div.tooltipcontent.leanright { /* A more-specific version for when tooltips need to go the other way */
    margin-left: 0;
    margin-right: -200px; /* Pull it to the right (equal to its width), so that it doesn't ever flow over the left-hand side of the sheet */
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent { /* Position the full version of the options window */
    width: 550px;
    margin-right: -550px; /* Pull it to the left (equal to its width), so that it doesn't ever flow over the right-hand side of the sheet */
}
div.characterviewer div.charactersheet div.tooltipcontent::after,
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent::after { /* The tooltip box's connecting arrow */
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 10px;
}
div.characterviewer div.charactersheet div.tooltipcontent::after {
    bottom: 100%;  /* At the top of the tooltip */
    left: 100%; /* Towards the right-hand side (becayse the tooltips are shifted left) */
    right: auto;
    margin-left: -25px;
    margin-right: -25px;
    border-color: transparent var(--tooltipbackground) var(--tooltipbackground) transparent; /* Fills in 2 of the 4 border sides, to make a right-angled triangle */
}
div.characterviewer div.charactersheet div.tooltipcontent.leanright::after {
    left: auto;
    right: 100%; /* Towards the right-hand side (becayse the tooltips are shifted left) */
    border-color: transparent transparent var(--tooltipbackground) var(--tooltipbackground); /* Fills in 2 of the 4 border sides, to make a right-angled triangle */
}
div.characterviewer div.charactersheet div.tooltipcontent textarea {
    visibility: hidden;
    opacity: 0;
}

div.characterviewer div.charactersheet .hastooltip input[type=checkbox].tooltipcontrol { /* Ensure that the checkbox controlling tooltip on/off is never actually visible, and have it make the tooltip visible when checked */
    display:none;
}
div.characterviewer div.charactersheet .hastooltip input[type=checkbox].tooltipcontrol:checked+div {
    visibility: visible;
    opacity: 1;
}
div.characterviewer div.charactersheet .hastooltip input[type=checkbox].tooltipcontrol:checked+div textarea { /* For some reason, the text areas need special treatment, which other fields in the tooltip appear not to */
    visibility: visible;
    opacity: 1;
}

div.characterviewer div.charactersheet label.hasoptions {
    border: 1px solid var(--fieldborder);
    border-radius: 3px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 52px;
    padding-left: 2px;
    height: 26px;
    margin-right: 6px;
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol { /* Ensure that the checkbox controlling tooltip on/off is never actually visible, and have it make the tooltip visible when checked */
    display:none;
}
 
div.characterviewer div.charactersheet label.hasoptions img.icon {
    width: 24px;
    height: 24px;
}
 
div.characterviewer div.charactersheet div.optionscontent {
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
div.characterviewer div.charactersheet div.optionscontent div.singleoption {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
div.characterviewer div.charactersheet div.optionscontent div.singleoption label {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

div.characterviewer div.charactersheet label.hasoptions div.optionscontent input[type=radio], /* Always hide the radio buttons when not expanded */
div.characterviewer div.charactersheet label.hasoptions div.optionscontent input[type=radio]+label span, /* Hide the label text when not expanded - just show the selected icon */
div.characterviewer div.charactersheet label.hasoptions div.optionscontent input[type=radio]:not(:checked)+label { /* Hide the full label (including icon) for anything not selected */
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}
 
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent img.selectable { /* Style the icons to better suit the expanded section */
    margin: 4px;
    margin-top: 6px;
    filter: invert(100%); /* Switch over the blacks & whites */
}
div.characterviewer div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio] {
    margin-top: 3px;
}
div.characterviewer div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio]:checked+label {
    color: var(--highlight);
}
 
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio], /* Show all radio buttons when expanded */
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio]+label, /* Show all labels (including icon) when expanded */
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio]+label span { /* Explicitly show all label text when expanded */
    display: flex;
    visibility: visible;
    opacity: 1;
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ div.optionscontent input[type=radio]+label {
    min-width: 85px;
}

div.characterviewer div.charactersheet label.hasoptions img.optionplaceholder { /* Hide the placeholder (for during selection) when not expanded */
    display: none;
    visibility: hidden;
    opacity: 0;
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ img.optionplaceholder {
    display: inline-block;
    visibility: visible;
    opacity: 1;
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ img.optionplaceholder {
    opacity: 35%;
}
div.characterviewer div.charactersheet label.hasoptions img.icon.expander {
    display: inline-block;
    width: 8px;
    min-width: 8px;
    max-width: 8px;
    height: 8px;
    min-height: 8px;
    max-height: 8px;
    opacity: 50%;
    margin-right: 2px;
}
div.characterviewer div.charactersheet label.hasoptions input[type=checkbox].optioncontrol:checked ~ img.icon.expander {
    rotate: 90deg;
}

/* Sheet Header & Footer */

div.charactersheet div.header,
div.charactersheet div.footer {
    width: 100%;
    margin: 0;
    background-color: var(--secondarybackground);
    color: var(--nearblack);
    align-items: center;
}
div.charactersheet div.header {
    box-shadow: 0 2px 6px var(--shadowgray);
    padding-top: 6px;
    padding-bottom: 12px;
}
div.charactersheet div.footer {
    margin-bottom: 20px;
    box-shadow: 0 0 6px var(--shadowgray);
}

div.charactersheet div.header ul,
div.charactersheet div.footer ul {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
}
div.charactersheet div.header ul {
    justify-content: center;
}
div.charactersheet div.footer ul {
    justify-content: space-between;
}
div.charactersheet div.footer ul li {
    margin: 8px;
}

div.charactersheet div.header label {
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0;
    margin-bottom: 0;
}
div.charactersheet div.header select.dna,
div.charactersheet div.header select.creature {
    width: 12em;
}

div.charactersheet div.logo {
    width: 220px;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-left: 12px;
    padding-right: 12px;
}
div.charactersheet div.logo img {
    display: block;
    width: 100%;
    height: auto;
}

div.charactersheet div.header input#charname {
    width: 20em;
}
div.charactersheet div.header input#charclass {
    width: 15em;
}
div.charactersheet div.header select#challengerating {
    width: 6.5em;
}

div.charactersheet div.footer div.attributions {
    font-size: x-small;
    padding: 12px;
    padding-top: 6px;
    text-align: center;
}

/* Tabbed Panels */

div.charactersheet div.tabbed-view {
    margin: 0;
    margin-top: 8px;
    margin-bottom: 12px;
    background: var(--nearblack); /* Sets the background specifically for the tabs list (which actually continues throughout, because the tabs must be in the same hierarchy as the content they control */
    display: flex;
    flex-flow: row wrap;
    align-items: top;
    justify-content: center;
}
div.charactersheet div.tabbed-view div.tabbed-view-content {
    width: 100%; /* Ensure that the content section flows past the tabs themselves and wraps onto a new line */
    background: var(--background); /* Sets the background of the content area (masking the background set above for the tabs list */
    padding-top: 10px;
}
div.charactersheet div.tabbed-view > input[type="radio"] { /* Hide each radio button's 'bullet' */
    position: absolute;
    left: -999em;
    visibility: hidden;
    display: none;
}

div.charactersheet div.tabbed-view section.tab-panel { /* Hide all sections by default */
    display: none;
}

div.charactersheet div.tabbed-view input#tab1:checked ~ div.tabbed-view-content section#tab-panel1, /* Allows each tab input field to display the corresponding tab panel (linked via IDs) — To enable more than 5 tabs, expand this list */
div.charactersheet div.tabbed-view input#tab2:checked ~ div.tabbed-view-content section#tab-panel2,
div.charactersheet div.tabbed-view input#tab3:checked ~ div.tabbed-view-content section#tab-panel3,
div.charactersheet div.tabbed-view input#tab4:checked ~ div.tabbed-view-content section#tab-panel4,
div.charactersheet div.tabbed-view input#tab5:checked ~ div.tabbed-view-content section#tab-panel5 {
    display: block;
}

div.charactersheet div.tabbed-view label.tab-heading {
    display: inline-block;
    margin-top: 6px;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    min-width: 14em;
    text-align: center;
    background: var(--inactivetabs);
    color: var(--lightfont);
    clip-path: polygon( /* Clips the div's visible path down to a trapezoid, with indentations of 10% width */
        10% 0,
        90% 0,
        100% 100%,
        0% 100%
    );
    border-bottom: 2px solid var(--nearblack);
}

div.charactersheet div.tabbed-view input:checked + label.tab-heading { /* Style the currently selected tab */
    background: var(--background);
    border-bottom: 2px solid var(--background);
    border-top: 4px solid var(--highlight);
    color: black;
    margin-bottom: -1px; /* To cover the full bottom border of what's below */
}
div.charactersheet div.tabbed-view label.tab-heading:hover, /* Style tabs when the mouse hovers over them */
div.charactersheet div.tabbed-view input:focus + label.tab-heading {
    background: var(--secondarybackground);
    color: var(--nearblack);
}

/* Stats */

div.charactersheet ul.stats {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
div.charactersheet ul.stats li {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

div.charactersheet div.statheader {
    clip-path: polygon( /* Clips the div's visible path down to a trapezoid, broadest at the top, with indentations of 20% width */
        0 0,
        100% 0,
        80% 100%,
        20% 100%
    );
    padding: 4pt;
    color: var(--lightfont);
    background-color: var(--nearblack);
}
div.charactersheet div.statheader label {
    color: var(--lightfont);
}

div.charactersheet div.statbody {
    clip-path: polygon( /* Clips the div's visible path down to a basic shield */
        0 0,
        100% 0,
        100% 70%,
        50% 100%,
        0 70%
    );
    background-color: var(--secondarybackground);
    display: inline-block;
    text-align: center;
    margin: auto;
    padding: 4pt;
    width: 80pt;
}
div.charactersheet div.statbody button {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 80%;
}

div.charactersheet ul.stats label {
    font-weight: normal;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
}
div.charactersheet ul.stats input {
    margin: 0;
    padding: 0;
    width: 40%;
    text-align: center;
}
div.charactersheet ul.stats input.score {
    margin-top: 2pt;
}
div.charactersheet ul.stats input.mod {
    font-size: large;
    font-weight: bold;
    background: none;
    margin: 4pt;
    margin-bottom: 8pt;
}

/* Vitals & Core Info */

div.charactersheet div.vitals {
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    width: auto;
    margin: 10px;
    margin-bottom: 18px;
}
div.charactersheet div.vitals ul {
    width: 100%;
}
div.charactersheet div.vitals ul li {
    margin: 0;
}

div.charactersheet div.vitals h2 {
    text-align: center;
}

div.charactersheet div.vitals li {
    border: 4px solid var(--midfont); /* Just to keep these the same size as those with colored borders */
}
div.charactersheet div.vitals li#healthpoints {
    border-color: var(--roll20red);
}
div.charactersheet div.vitals li#abilitypoints {
    border-color: var(--roll20green);
}
div.charactersheet div.vitals li#stundamage {
    border-color: var(--roll20blue);
}
div.charactersheet div.vitals ul li label,
div.charactersheet div.core ul li label {
    text-align: center;
    flex-grow: 1;
}
div.charactersheet div.vitals ul li div,
div.charactersheet div.core ul li div,
div.charactersheet li.mortality table {
    flex-grow: 10; /* Expand to fit the rest of the space */
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
div.charactersheet div.vitals ul span.textblock,
div.charactersheet div.vitals ul input[readonly],
div.charactersheet div.core ul input[readonly] {
    background: none;
    border: none;
    width: 30pt;
}

div.charactersheet div.vitals input[readonly].defense,
div.charactersheet div.vitals input[readonly].determination,
div.charactersheet div.core input[readonly].profbonus,
div.charactersheet div.core input[readonly].passive {
    background: var(--nearblack);
    color: var(--lightfont);
    height: 100%;
    margin-bottom: 4px;
}
div.charactersheet div.vitals input[readonly].defense {
    clip-path: polygon( /* Clips the div's visible path down to a basic shield */
        0 0,
        100% 0,
        100% 70%,
        50% 100%,
        0 70%
    );
    padding-bottom: 10%;
}
div.charactersheet div.vitals input[readonly].determination {
    clip-path: polygon( /* Clips the div's visible path down to a 'stop-sign'-style octagon */
        25% 0%,
        75% 0%,
        100% 25%,
        100% 75%,
        75% 100%,
        25% 100%,
        0% 75%,
        0% 25%
    );
}
div.charactersheet div.vitals li#stundamage button {
    padding-left: 8px;
    padding-right: 8px;
    margin-left: 6px;
}
div.charactersheet div.vitals li#stundamage label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: start;
}
div.charactersheet div.core input[readonly].profbonus,
div.charactersheet div.core input[readonly].passive {
    clip-path: polygon( /* Clips the div's visible path down to a diamond/rhombus */
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );
}

div.charactersheet div.core li.basehp input[type=number] {
    width: 3em;
}
div.charactersheet div.core li.basehp div.calculation {
    height: 0.9em;
}
div.charactersheet div.core li.basehp div.result {
    height: 1em;
}
div.charactersheet div.core li.basehp div.calculation input[type=number][readonly] {
    width: 2.9em;
}
div.charactersheet div.core li.basehp div.result input[type=number][readonly] {
    width: 5em;
}
div.charactersheet div.core li.basehp div.calculation input,
div.charactersheet div.core li.basehp div.calculation span {
    font-size: small;
}
div.charactersheet div.core li.hitdice select {
    width: 4em;
}
div.charactersheet div.core li.hitdice button {
    width: 6em;
    padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
}
div.charactersheet div.core li.hitdice button span {
    margin-left: 2px;
}

div.charactersheet li.mortality table tr {
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
div.charactersheet li.mortality table td {
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Resistances & Vulnerabilities */

div.resistances div.repeatingrow select:first-child {
    margin-right: 6px;
}

/* Proficiencies */

div.proficiencies div.repeatingrow input {
    width: 65%;
    margin-right: 6px;
}
div.proficiencies div.repeatingrow select {
    width: 35%;
}

/* Skills */

div.charactersheet div.skills hr {
    padding: 0;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 0;
    margin-right: 0;
}
div.charactersheet div.skills table {
    width: 100%;
}
div.charactersheet div.skills table tr {
    color: var(--nearblack);
}
div.charactersheet div.skills table td {
    padding-bottom: 6px;
    text-align: center;
}
div.charactersheet div.skills table tr.final td { /* No padding on the final rows */
    padding-bottom: 0;
}
div.charactersheet div.skills table tr td:first-of-type {
    width: 1.2em;
}
div.charactersheet div.skills table tr td:nth-of-type(2) {
    width: 100%;
}
div.charactersheet div.skills table tr td:nth-of-type(3) {
    width: 8em;
    margin-left: 2px;
    margin-right: 8px;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
div.charactersheet div.skills table tr td:last-of-type {
    width: 4em;
}
div.charactersheet div.skills table td.first {
    text-align: left;
}
div.charactersheet div.skills table td.last {
    text-align: right;
}
div.charactersheet div.skills table td button[type=roll],
div.charactersheet div.skills table td button[type=action] {
    width: 92%;
}
div.charactersheet div.skills table input[readonly] {
    font-weight: bold;
    text-align: center;
}
div.charactersheet div.skills table td.smalltext {
    padding-left: 2px;
    padding-right: 2px;
}

/* Attacks */

div.charactersheet div.attacks div.repeatingrow {
    padding-bottom: 12px; /* More than usual, because these rows are double-height in content */
    border-bottom: 1px solid var(--secondarybackground);
    margin-bottom: 12px;
}

div.charactersheet div.attacks div.verticalgroup > div.oneline:first-of-type,
div.charactersheet div.attacks div.verticalgroup > div.stretchyholder:first-of-type {
    margin-bottom: 4px;
}

div.charactersheet div.attacks .hastooltip {
    padding: 4pt;
}
div.charactersheet div.attacks div.description .hastooltip {
    padding-right: 0;
}
div.charactersheet div.attacks div.description input[type=text] {
    width: 100%; /* Scale to fit the space available (which will typically be less than 100%) */
    margin: 0;
}
div.charactersheet div.attacks .ammo div.stretchyholder,
div.charactersheet div.abilities .roll div.stretchyholder,
div.charactersheet div.powers .roll div.stretchyholder {
    max-width: 45px;
}
div.charactersheet div.attacks label.hastooltip {
    padding-top: 0;
    padding-bottom: 0;
}
div.charactersheet div.attacks div.quantity span,
div.charactersheet div.abilities div.quantity span,
div.charactersheet div.techniques div.quantity span,
div.charactersheet div.inventory div.quantity span {
    margin-left: 6px;
    margin-right: 6px;
}
div.charactersheet div.attacks div.oneline label.hastooltip,
div.charactersheet div.abilities div.oneline label.hastooltip,
div.charactersheet div.techniques div.oneline label.hastooltip,
div.charactersheet div.inventory div.oneline label.hastooltip {
    width: auto;
    margin: 0;
}

div.charactersheet div.attacks div.attacksgrid {
    display: grid;
    grid-template-columns:
        26%  /* Attack Name */
        12.5% /* Range */
        21%  /* Ammo */
        10%  /* Attack */
        24%; /* Damage */
}

div.charactersheet div.attacks select:has(> option[value="melee"]:checked) ~ div#ammo-reloads {
    display: none;
}
div.charactersheet div.attacks select:not(:has(> option[value="melee"]:checked)) ~ div#ammoplaceholder {
    display: none;
}
div.charactersheet div.attacks .reloads input[type=checkbox]:checked ~ input#reloadcount { /* Hide the reload count if it's reloads aren't tracked */
    display: none;
}
div.charactersheet div.attacks .reloads input[type=checkbox]:not(:checked) ~ div#reloadplaceholder {
    display: none;
}

div.charactersheet div.attacks .ammo,
div.charactersheet div.attacks .attack,
div.charactersheet div.attacks .damage,
div.charactersheet div.attacks .type {
    justify-content: center;
}

div.charactersheet div.attacks div.ammo img.icon {
    width: 28px;
    height: 28px;
    margin-right: 4px;
}

div.charactersheet div.attacks div.reloads button {
    margin-right: 4px;
}
div.charactersheet div.attacks div.reloads #unlimitedreloads {
    background: var(--secondarybackground);
    justify-content: center;
    align-items: center;
    width: 5.5em;
    min-width: 5.5em;
    margin-left: 4px;
    margin-right: 4px;
    clip-path: polygon(  /* Clips the div's visible path down to a straight-edged 'pill' shape */
        15% 0,
        85% 0,
        100% 50%,
        85% 100%,
        15% 100%,
        0% 50%
    );
}
div.charactersheet div.attacks div.reloads img:not(.icon) {
    max-height: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}
div.charactersheet div.attacks div.reloads input[type=checkbox] {
    margin-left: 2px;
}
div.charactersheet div.attacks div.reloads input#reloadcount {
    margin-left: 6px;
    width: 3em;
    min-width: 3em;
}
div.charactersheet div.attacks div.reloads div#reloadplaceholder {
    margin-left: 6px;
    width: 3em;
    min-width: 3em;
    height: 26px;
}
div.charactersheet div.attacks div#ammoplaceholder img {
    max-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
}
div.charactersheet div.attacks div.reloads div#reloadplaceholder img {
    max-height: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
}

div.charactersheet div.attacks div.calculation span {
    margin-left: 8px;
}
div.charactersheet div.attacks div.ammo select {
    margin-left: 6px;
    margin-right: 6px;
}
div.charactersheet div.attacks div.singlerow {
    justify-content: space-between;
}
div.charactersheet div.attacks input[readonly] {
    width: 2.5em;
}
div.charactersheet div.attacks div.damage input.damagedice {
    width: 6em;
    margin-left: 4px;
}
div.charactersheet div.attacks div.damage input.damagetype {
    width: 6em;
}

div.charactersheet div.attacks div.ammo div.oneline,
div.charactersheet div.attacks div.reloads div.oneline {
    justify-content: center;
}

div.charactersheet div.attacks div.tooltipcontent div.oneline {
    justify-content: center;
    margin-bottom: 6px;
}
div.charactersheet div.attacks div.tooltipcontent select {
    width: 5em;
    margin-left: 6px;
    margin-right: 6px;
}
div.charactersheet div.attacks div.tooltipcontent select#damagetype {
    width: 8em;
}
div.charactersheet div.attacks div.tooltipcontent input[type=number],
div.charactersheet div.attacks div.tooltipcontent input[type=checkbox] {
    margin-left: 6px;
}
div.charactersheet div.attacks div.damage div.tooltipcontent input[type=number] {
    margin-right: 6px;
}
div.charactersheet div.attacks div.damage div.tooltipcontent > select:last-of-type {
    width: 8em;
}

/* Abilities */

div.charactersheet div.abilities div.description input[type=text],
div.charactersheet div.techniques div.description input[type=text],
div.charactersheet div.mods div.description input[type=text],
div.charactersheet div.inventory div.description input[type=text] {
    width: 100%; /* Scale to fit the space available (which will typically be less than 100%) */
    margin-right: 6px;
}
div.charactersheet div.abilities div.description select,
div.charactersheet div.powers div.description select {
    margin-right: 6px;
}

div.charactersheet div.abilities details {
    padding: 12px;
}
div.charactersheet div.abilities details > p {
    margin-top: 6px;
    margin-bottom: 6px;
    font-style: italic;
}
div.charactersheet div.abilities details table {
    width: 100%;
    background: white;
    border: 2px solid var(--nearblack);
}
div.charactersheet div.abilities details table th {
    background: var(--nearblack);
    color: white;
}
div.charactersheet div.abilities details table th {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 3px;
}
div.charactersheet div.abilities details table td {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
}
div.charactersheet div.abilities details div.tooltipcontent {
    padding: 6px;
}

div.charactersheet div.abilities input[readonly][type=number],
div.charactersheet div.powers input[readonly][type=number] {
    text-align: center;
    font-weight: bold;
}
div.charactersheet div.abilities div.abilitiesgrid {
    display: grid;
    grid-template-columns:
        23%  /* Ability & Stat */
        6%  /* AP Cost */
        18.5%  /* Target & Range */
        28.5% /* Charge / Duration / Concentration */
        19.5%  /* Roll / Modifier / Use */
}

div.charactersheet div.abilities .description select:last-of-type {
    width: 4.5em;
}

div.charactersheet div.abilities .range select:last-of-type,
div.charactersheet div.powers .range select:last-of-type {
    width: auto;
    max-width: 6em;
}

div.charactersheet div.abilities .duration div.backing,
div.charactersheet div.powers .duration div.backing {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: var(--midfont);
    height: 100%;
    padding: 7px;
    clip-path: polygon( /* Clips the div's visible path down to a diamond / rhombus */
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );
    margin-left: -2px;
}
div.charactersheet div.abilities .duration select:last-of-type,
div.charactersheet div.powers .duration select:last-of-type {
    width: auto;
    max-width: 7.5em;
}

div.charactersheet div.abilities .cost,
div.charactersheet div.abilities .stat,
div.charactersheet div.abilities .type,
div.charactersheet div.abilities .roll,
div.charactersheet div.powers .discipline
div.charactersheet div.powers .roll {
    justify-content: center;
}
div.charactersheet div.abilities .roll select,
div.charactersheet div.abilities .roll input[readonly],
div.charactersheet div.abilities .range select:first-of-type,
div.charactersheet div.powers .range select:first-of-type,
div.charactersheet div.abilities .duration select,
div.charactersheet div.powers .duration select,
div.charactersheet div.powers .roll select,
div.charactersheet div.powers .roll input[readonly] {
    margin-right: 6px;
}

/* Techniques */

div.charactersheet div.techniques input[type=number],
div.charactersheet div.inventory input[type=number] {
    width: 5em;
}

div.charactersheet div.techniques div.techniquesgrid {
    display: grid;
    grid-template-columns:
        27%  /* Technique / Bonus */
        20%  /* Action Type */
        20%  /* Recharge Rate */
        19% /* Current Amount */
        8%; /* Describe */
}
div.charactersheet div.passives div.passivesgrid {
    display: grid;
    grid-template-columns:
        45%  /* Passive Bonus */
        40%  /* Source */
        8%; /* Describe */
}
div.charactersheet div.passives input[type=text] {
    width: 100%;
    margin-right: 6px;
}

div.charactersheet div.techniques div.oneline.describe,
div.charactersheet div.inventory div.oneline.describe {
    justify-content: stretch;
    align-items: stretch;
}

div.charactersheet div.techniques select#techniquetype:has(> option[value="unlimited"]:checked) ~ div.quantity {
    display: none;
}
div.charactersheet div.techniques select#techniquetype:not(:has(> option[value="unlimited"]:checked)) ~ div#quantityplaceholder {
    display: none;
}
div.charactersheet div.techniques div#quantityplaceholder img {
    max-height: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Psi-Powers */

div.charactersheet div.powers h2,
div.charactersheet div.powers h3 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

div.charactersheet ul.powerstats.infolist {
    margin-bottom: 12px;
}
div.charactersheet ul.powerstats.infolist li,
div.charactersheet ul.money.infolist li {
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
div.charactersheet ul.powerstats.infolist li {
    width: 47%;
}
div.charactersheet ul.powerstats.infolist li input[readonly] {
    margin-left: 6px;
    border: none;
    background: none;
}

div.charactersheet div.powers div.powersgrid {
    display: grid;
    grid-template-columns:
        32%  /* Psi-Power & Discipline */
        18.5% /* Target & Range */
        28.5% /* Charge / Duration / Concentration */
        15%  /* Roll Type / Use */
}
div.charactersheet div.powers div.gridheadings label {
    margin-bottom: 0;
}

div.charactersheet div.powers div.description input[type=text] {
    width: 100%; /* Scale to fit the space available (which will typically be less than 100%) */
    margin-right: 4px;
}
div.charactersheet div.powers .description select:last-of-type {
    max-width: 4em;
}

div.charactersheet .hasoptions input[type=checkbox].optioncontrol { /* Ensure that the checkbox controlling tooltip on/off is never actually visible, and have it make the tooltip visible when checked */
    display:none;
}

div.charactersheet div.optionscontent {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
div.charactersheet div.optionscontent input[type=radio]:not(:checked),
div.charactersheet div.optionscontent input[type=radio]:not(:checked)+label {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}
div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked+div.optionscontent input[type=radio]:checked,
div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked+div.optionscontent input[type=radio]:checked+label {
    visibility: visible;
    opacity: 1;
}
div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked+div.optionscontent input[type=radio],
div.charactersheet .hasoptions input[type=checkbox].optioncontrol:checked+div.optionscontent label {
    visibility: visible;
    opacity: 1;
}

/* Inventory */

div.charactersheet ul.armor li,
div.charactersheet ul.weapons li {
    padding-left: 8px;
    padding-right: 8px;
}
div.charactersheet ul.armor li,
div.charactersheet ul.weapons li {
    align-items: center;
}
div.charactersheet ul.armor li,
div.charactersheet ul.weapons li {
    height: 90px;
}
div.charactersheet ul.weapons li {
    width: 45%;
}
div.charactersheet ul.armor li {
    width: 100%;
}
div.charactersheet ul.armor li > div,
div.charactersheet ul.weapons li > div {
    width: 100%;
}
div.charactersheet ul.armor li div div,
div.charactersheet ul.weapons li div div {
    margin-bottom: 5px;
}
div.charactersheet ul.weapons li div div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
div.charactersheet ul.weapons li input {
    width: 100%;
    margin-right: 6px;
}

div.charactersheet div.armor div.armorgrid {
    display: grid;
    grid-template-columns:
        37%
        57%;
    justify-content: space-between;
}
div.charactersheet div.armor div.armorgrid:not(:last-of-type) {
    margin-bottom: 6px;
}
div.charactersheet div.armor input,
div.charactersheet div.armor select {
    margin-left: 10px;
}

div.charactersheet div.armor div.armorgrid label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 28px;
}
div.charactersheet div.armor div.armorgrid input[type=text],
div.charactersheet div.armor div.armorgrid select {
    width: 100%;
}
div.charactersheet div.armor div.armorgrid select#armorcap {
    width: 3.5em;
}

div.charactersheet ul.money.infolist li {
    width: 100%;
}
div.charactersheet div.money label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
div.charactersheet div.money label span {
    width: 10em;
}
div.charactersheet div.money input[type=number] {
    width: 10em;
}
div.charactersheet div.money select {
    width: 8em;
}

div.charactersheet div.mods div.modsgrid {
    display: grid;
    grid-template-columns:
        35%  /* Mod */
        19%  /* Type */
        25%  /* Attached To */
        12%; /* Describe */
}

div.charactersheet div.inventory div.inventorygrid {
    display: grid;
    grid-template-columns:
        50%  /* Item */
        30%  /* Current Amount */
        12%; /* Describe */
}

/* Character Notes */

div.charactersheet div.backstory textarea {
    min-height: 300px;
}
div.charactersheet div.developments textarea,
div.charactersheet div.objectives textarea {
    min-height: 200px;
}

/*
Roll Templates
*/

.sheet-rolltemplate-check,
.sheet-rolltemplate-attack,
.sheet-rolltemplate-damage,
.sheet-rolltemplate-ability,
.sheet-rolltemplate-hitdie,
.sheet-rolltemplate-description,
.sheet-rolltemplate-warning {
    margin: 0;
    line-height: normal;
    font-family: "Rubik", "Trebuchet MS", "Tahoma", sans-serif;
    color: var(--nearblack);
}

.sheet-rolltemplate-check div.sheet-prefix,
.sheet-rolltemplate-attack div.sheet-prefix,
.sheet-rolltemplate-damage div.sheet-prefix,
.sheet-rolltemplate-ability div.sheet-prefix,
.sheet-rolltemplate-hitdie div.sheet-prefix,
.sheet-rolltemplate-description div.sheet-prefix,
.sheet-rolltemplate-warning div.sheet-prefix {
    padding-top: 6px;
    padding-bottom: 4px;
    font-size: small;
    font-style: italic;
    font-weight: lighter;
    opacity: 75%;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-check div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ability div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-hitdie div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-description div.sheet-prefix,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-warning div.sheet-prefix { /* Manually account for Dark Mode to adjust the font color on Firefox & Safari */
    color: #ddd;
}

.sheet-rolltemplate-check div.sheet-header,
.sheet-rolltemplate-attack div.sheet-header,
.sheet-rolltemplate-damage div.sheet-header,
.sheet-rolltemplate-ability div.sheet-header,
.sheet-rolltemplate-ability div.sheet-concentration,
.sheet-rolltemplate-hitdie div.sheet-header,
.sheet-rolltemplate-description div.sheet-header,
.sheet-rolltemplate-warning div.sheet-header {
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: x-small;
    text-transform: uppercase;
    padding: 2px;
}
.sheet-rolltemplate-check div.sheet-header {
    background-color: #555;
}
.sheet-rolltemplate-attack div.sheet-header {
    background-color: darkred;
}
.sheet-rolltemplate-damage div.sheet-header {
    background-color: #d85600;
}
.sheet-rolltemplate-ability div.sheet-header {
    background-color: purple;
}
.sheet-rolltemplate-hitdie div.sheet-header {
    background-color: darkcyan;
}
.sheet-rolltemplate-description div.sheet-header {
    background-color: #5a3c22;
}
.sheet-rolltemplate-warning div.sheet-header {
    background-color: #8f7002;
}
.sheet-rolltemplate-check div.sheet-container,
.sheet-rolltemplate-attack div.sheet-container,
.sheet-rolltemplate-damage div.sheet-container,
.sheet-rolltemplate-ability div.sheet-container,
.sheet-rolltemplate-hitdie div.sheet-container,
.sheet-rolltemplate-description div.sheet-container,
.sheet-rolltemplate-warning div.sheet-container {
    text-align: center;
    border: 1px solid #555;
    background-color: #ddd;
    color: #555;
}
.sheet-rolltemplate-ability div.sheet-concentration {
    margin-top: 4px;
    color: darkred;
}
.sheet-rolltemplate-check div.sheet-content,
.sheet-rolltemplate-attack div.sheet-content,
.sheet-rolltemplate-damage div.sheet-content,
.sheet-rolltemplate-ability div.sheet-content,
.sheet-rolltemplate-hitdie div.sheet-content,
.sheet-rolltemplate-description div.sheet-content,
.sheet-rolltemplate-warning div.sheet-content {
    padding: 8px;
}

.sheet-rolltemplate-check div.sheet-checkname,
.sheet-rolltemplate-attack div.sheet-attackname,
.sheet-rolltemplate-damage div.sheet-damagetype,
.sheet-rolltemplate-ability div.sheet-abilityname,
.sheet-rolltemplate-hitdie div.sheet-dietype,
.sheet-rolltemplate-description div.sheet-subjectname,
.sheet-rolltemplate-warning div.sheet-subjectname {
    font-weight: bold;
    font-size: medium;
    text-transform: uppercase;
}
.sheet-rolltemplate-check div.sheet-checkmod,
.sheet-rolltemplate-attack div.sheet-attackmod,
.sheet-rolltemplate-damage div.sheet-calculation,
.sheet-rolltemplate-ability div.sheet-abilitymod,
.sheet-rolltemplate-hitdie div.sheet-endmod,
.sheet-rolltemplate-description div.sheet-subtype {
    font-weight: normal;
    font-size: small;
    font-style: italic;
}
.sheet-rolltemplate-ability div.sheet-abilitystat,
.sheet-rolltemplate-description div.sheet-subtype,
.sheet-rolltemplate-description div.sheet-amount {
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
}

.sheet-rolltemplate-attack div.sheet-desc,
.sheet-rolltemplate-ability div.sheet-desc,
.sheet-rolltemplate-description div.sheet-desc,
.sheet-rolltemplate-warning div.sheet-desc {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
}

.sheet-rolltemplate-check div.sheet-result,
.sheet-rolltemplate-attack div.sheet-result,
.sheet-rolltemplate-damage div.sheet-result,
.sheet-rolltemplate-ability div.sheet-result,
.sheet-rolltemplate-hitdie div.sheet-result {
    margin-top: 4px;
}
.sheet-rolltemplate-check span.inlinerollresult,
.sheet-rolltemplate-attack span.inlinerollresult,
.sheet-rolltemplate-damage span.inlinerollresult,
.sheet-rolltemplate-ability span.inlinerollresult,
.sheet-rolltemplate-ability div.sheet-result span,
.sheet-rolltemplate-hitdie span.inlinerollresult {
    color: #555;
    background: none;
    font-size: x-large;
    font-weight: bold;
    border: none;
}
.sheet-rolltemplate-check span.sheet-muted span.inlinerollresult,
.sheet-rolltemplate-attack span.sheet-muted span.inlinerollresult,
.sheet-rolltemplate-damage span.sheet-muted span.inlinerollresult,
.sheet-rolltemplate-ability span.sheet-muted span.inlinerollresult,
.sheet-rolltemplate-hitdie span.sheet-muted span.inlinerollresult {
    /*Semi-Transparent version of regular mid-font color*/
    color: #88888888;
}
.sheet-rolltemplate-check span.inlinerollresult.fullcrit,
.sheet-rolltemplate-attack span.inlinerollresult.fullcrit,
.sheet-rolltemplate-damage span.inlinerollresult.fullcrit,
.sheet-rolltemplate-ability span.inlinerollresult.fullcrit,
.sheet-rolltemplate-hitdie span.inlinerollresult.fullcrit {
    color: green;
    border: none;
}
.sheet-rolltemplate-check span.inlinerollresult.fullfail,
.sheet-rolltemplate-attack span.inlinerollresult.fullfail,
.sheet-rolltemplate-damage span.inlinerollresult.fullfail,
.sheet-rolltemplate-ability span.inlinerollresult.fullfail,
.sheet-rolltemplate-hitdie span.inlinerollresult.fullfail {
    color: darkred;
    border: none;
}
.sheet-rolltemplate-check span.inlinerollresult.importantroll,
.sheet-rolltemplate-attack span.inlinerollresult.importantroll,
.sheet-rolltemplate-damage span.inlinerollresult.importantroll,
.sheet-rolltemplate-ability span.inlinerollresult.importantroll,
.sheet-rolltemplate-hitdie span.inlinerollresult.importantroll {
    color: blue;
    border: none;
}