roll20-character-sheets/Curseborne/Cursed.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,900&family=Courier&family=Fondamento&family=Special+Elite&display=swap');


h1, h2, h3, h4, h5 {
    font-family: 'Fondamento';
    letter-spacing: 2px;
}

h6 {
    font-family: 'Montserrat', sans-serif;
}

h2 {
    text-transform: uppercase;
    background: url('https://i.imgur.com/uhxr2JQ.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 5px;
}

h6 {
    text-transform: uppercase;
    font-size: 0.8rem;
}

input[type="checkbox"].readonly {
  pointer-events: none;
}


.characterviewer label {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: #333;
    font-weight: 700;
    margin-bottom: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 16px;
}

.characterviewer .custom-label {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background: transparent;
    color: #333;
    font-weight: 700;
    margin-left: 3px;
    margin-bottom: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 16px;
    box-sizing: content-box;
    max-width: 120px;
}

.characterviewer .feature-label {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background: transparent;
    color: #333;
    font-weight: 700;
    margin-left: 3px;
    margin-bottom: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 16px;
    box-sizing: content-box;
}

.charsheet button[type="roll"].label,
.charsheet button[type="roll"].label:focus,
.charsheet button[type="roll"].label:hover {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: #333;
    font-weight: 700;
    margin-bottom: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 16px;
    border-style: none;
    border-radius: 0px;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
    background-color: transparent;
}

.charsheet button[type="roll"].label::before {
    content: " ";
}


.charsheet button[type="roll"].dice-roll {
    border-style: none;
    border-radius: 10px;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
    background: transparent;
    padding: 0px;
    margin-right: 0px;
}

.charsheet button[type="roll"].details-roll::before {
    border-style: none;
    border-radius: 10px;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
    background: transparent;
	font-family: pictos;
    font-size: 2.0rem;
	color: #333;
    content: "i";
    padding: 0px;
    margin-right: 0px;
}

.charsheet button[type="roll"].details-roll {
    font-family: Pictos;
    font-size: 1.2em;
    content: "i";
    color: #aba9a4;
}

.charsheet button[type="roll"].query-roll::before {
    border-style: none;
    border-radius: 10px;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
    background: transparent;
    font-family: pictos;
    font-size: 2.0rem;
    color: #333;
    content: "?";
    padding: 0px;
    margin-right: 0px;
}

.charsheet button[type="roll"].query-roll {
    font-family: Pictos;
    font-size: 1.2em;
    content: "?";
    color: #aba9a4;
}

input.dot[value="0"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "J";
}

input.dot[value="1"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "A";
}

input.dot[value="2"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "B";
}

input.dot[value="3"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "C";
}

input.dot[value="4"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "D";
}

input.dot[value="5"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "E";
}

input.dot[value="6"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "F";
}

input.dot[value="7"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "G";
}

input.dot[value="8"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "H";
}

input.dot[value="9"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "I";
}

input.dot[value="10"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "J";
}

input.dot[value="11"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "J";
}

input.dot[value="12"] ~ button.dice-roll::before {
    font-family: dicefontd10;
    font-size: 2.6rem;
    content: "J";
}

input[type="text"],
.input-display {
    width: 100%;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #333;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 4px;
    border-radius: 3px;
}

input[type="number"] {
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #333;
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

select {
    margin-bottom: 0px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.6);
	border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #333;
    text-align: center;
}

textarea {
    margin-bottom: 0px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.6);
}

.ui-dialog .charsheet {
    background: url('https://i.imgur.com/uhxr2JQ.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 20px;
}

.wrapper {
    background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.9));
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-areas:
        "token logo logo logo"
		"details details details details"
        "skills skills skills skills"
        "attributes attributes attributes attributes"
        "entanglement entanglement entanglement entanglement"
        "spells spells spells spells"
        "damnation inheritance torments torments"
        "edges edges health health"
        "bonds contacts contacts contacts"
		"equipment equipment equipment equipment"
        "common-conditions common-conditions footer-general footer-general";


		row-gap: 10px;
    column-gap: 10px;
    align-items: start;
}

.version {
    color: #fff;
}

.token {
    grid-area: token;
    filter: drop-shadow(10px 10px 2px rgba(50,73,66,0.6));
    align-self: center;
    justify-self: left;
}

.logo {
    grid-area: logo;
    filter: drop-shadow(10px 10px 2px rgba(50,73,66,0.6));
    align-self: center;
    justify-self: left;
}

.char-details {
    grid-area: details;
}

.char-details > div {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 3px;
    margin-bottom: 3px;
    align-items: center;
    grid-template-areas: 
    "name-label name-text lineage-label lineage-text short1-label short1-text"
    "player-label player-text family-label family-text short2-label short2-text"
    "concept-label concept-text role-label role-text longterm-label longterm-text";
    row-gap: 3px;
    column-gap: 3px;
}

.char-details .check {
    justify-self: center;
}

.char-details label {
    text-align: right;
}

.name-label {
    grid-area: name-label;
}

.name-text {
    grid-area: name-text;
}

.lineage-label {
    grid-area: lineage-label;
}

.lineage-text {
    grid-area: lineage-text;
}

.short1-label {
    grid-area: short1-label;
}

.short1-text {
    grid-area: short1-text;
}

.concept-label {
    grid-area: concept-label;
}

.concept-text {
    grid-area: concept-text;
}

.family-label {
    grid-area: family-label;
}

.family-text {
    grid-area: family-text;
}

.short2-label {
    grid-area: short2-label;
}

.short2-text {
    grid-area: short2-text;
}

.player-label {
    grid-area: player-label;
}

.player-text {
    grid-area: player-text;
}

.role-label {
    grid-area: role-label;
}

.role-text {
    grid-area: role-text;
}

.longterm-label {
    grid-area: longterm-label;
}

.longterm-text {
    grid-area: longterm-text;
}

.header-general {
    grid-area: header-general;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 150px 1fr;
    row-gap: 3px;
    column-gap: 3px;
    align-items: center;
}

.header-general label {
    text-align: right;
    color: #c21a1f;
}

.skills {
    grid-area: skills;
}

.skill-list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}

.skill-list .left > div,
.skill-list .right > div {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.skill-list .left .check,
.skill-list .right .check {
    min-width: 13px;
    min-height: 13px;
    margin: 0px;
}

.skill-list .left .label,
.skill-list .right .label {
    width: auto;
    margin: 0px 0px 0px 3px;
}

.skill-list .left .value,
.skill-list .right .value {
    flex-grow: 1;
    margin: 0px 0px 0px 3px;
}

.skill-list .left .dots,
.skill-list .right .dots {
    width: 120px;
    margin: 0px 0px 0px 3px;
}

.char-attributes {
    grid-area: attributes;
}

.char-attributes > div {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 3px;
    margin-bottom: 3px;
    align-items: center;
    grid-template-areas: 
    "intellect-label intellect-dots might-label might-dots presence-label presence-dots"
    "cunning-label cunning-dots dexterity-label dexterity-dots manipulation-label manipulation-dots"
    "resolve-label resolve-dots stamina-label stamina-dots composure-label composure-dots";
    row-gap: 3px;
    column-gap: 3px;
}


.char-attributes .check {
    justify-self: center;
}

.char-attributes label {
    text-align: right;
}

.intellect-label {
    grid-area: intellect-label;
}

.intellect-dots {
    grid-area: intellect-dots;
}

.might-label {
    grid-area: might-label;
}

.might-dots {
    grid-area: might-dots;
}

.presence-label {
    grid-area: presence-label;
}

.presence-dots {
    grid-area: presence-dots;
}

.cunning-label {
    grid-area: cunning-label;
}

.cunning-dots {
    grid-area: cunning-dots;
}

.dexterity-label {
    grid-area: dexterity-label;
}

.dexterity-dots {
    grid-area: dexterity-dots;
}

.manipulation-label {
    grid-area: manipulation-label;
}

.manipulation-dots {
    grid-area: manipulation-dots;
}

.resolve-label {
    grid-area: resolve-label;
}

.resolve-dots {
    grid-area: resolve-dots;
}

.stamina-label {
    grid-area: stamina-label;
}

.stamina-dots {
    grid-area: stamina-dots;
}

.composure-label {
    grid-area: composure-label;
}

.composure-dots {
    grid-area: composure-dots;
}

.char-entanglement {
    grid-area: entanglement;
}

.char-entanglement > div {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns:1fr 2fr 1fr 2fr;
    column-gap: 3px;
    margin-bottom: 3px;
    align-items: center;
    grid-template-areas: 
    "entanglement-label entanglement-dots curse-label curse-dots";
    row-gap: 3px;
    column-gap: 3px;
}

.entanglement-label {
    grid-area: entanglement-label;
}

.entanglement-dots {
    grid-area: entanglement-dots;
}

.curse-label {
    grid-area: curse-label;
}

.curse-dots {
    grid-area: curse-dots;
}

.bonds {
    grid-area: bonds;
}

.contacts {
    grid-area: contacts;
}

.contacts-dots {
    grid-area: contacts-dots;
}

.spells {
    grid-area: spells;
}

.edges {
    grid-area: edges;
}

.dreadpowers {
    grid-area: dreadpowers;
}

.damnation {
    grid-area: damnation;
}

.inheritence {
    grid-area: inheritance;
}

.char-torments {
    grid-area: torments;
}

.char-torments > div {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns:2fr 2fr;
    column-gap: 3px;
    margin-bottom: 3px;
    align-items: center;
    grid-template-areas: 
    "accursed-label personal-label"
    "accursed-button personal-button"
    row-gap: 3px;
    column-gap: 3px;
}

.accursed-label {
    grid-area: accursed-label;
}

.personal-label {
    grid-area: personal-label;
}

.accursed-button {
    grid-area: accursed-button;
}

.personal-button {
    grid-area: personalbutton;
}

.common-conditions {
    grid-area: common-conditions;
}


.health {
    grid-area: health;
}

.armor-dots {
    grid-area: armor-dots;
}

.bloodied-dots {
    grid-area: bloodied-dots;
}

.wounded-dots {
    grid-area: wounded-dots;
}

.maimed-dots {
    grid-area: maimed-dots;
}

.neardeath-dots {
    grid-area: neardeath-dots;
}

.equipment {
    grid-area: equipment;
}

.footer-general {
    grid-area: footer-general;
}

.adversarywrapper {
    background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.9));
    padding: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-areas:
        "token logo logo logo"
        "details details details details"
        "pools pools pools pools"
        "edges edges dreadpowers dreadpowers"
        "equipment equipment equipment equipment"
        "common-conditions common-conditions health health";

        row-gap: 10px;
    column-gap: 10px;
    align-items: start;
}

.char-pools {
    grid-area: pools;
}

.char-pools > div {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns:1fr 1fr 1fr;
    column-gap: 3px;
    margin-bottom: 3px;
    align-items: center;
    grid-template-areas: 
    "primary-label primary-value primary-dots"
    "secondary-label secondary-value secondary-dots"
    "desperation-label desperation-value desperation-dots"
    "enhancement-label enhancement-value .";
    row-gap: 3px;
    column-gap: 3px;
}

.primary-label {
    grid-area: primary-label;
}

.primary-value {
    grid-area: primary-value;
}

.primary-dots {
    grid-area: primary-dots;
}

.secondary-label {
    grid-area: secondary-label;
}

.secondary-value {
    grid-area: secondary-value;
}

.secondary-dots {
    grid-area: secondary-dots;
}

.desperation-label {
    grid-area: desperation-label;
}

.desperation-value {
    grid-area: desperation-value;
}

.desperation-dots {
    grid-area: desperation-dots;
}

.enhancement-label {
    grid-area: enhancement-label;
}

.enhancement-value {
    grid-area: enhancement-value;
}

/* Repeating and Expanding sections */

.repcontainer[data-groupname="repeating_bonds"] .repitem,
.repcontainer[data-groupname="repeating_edges"] .repitem,
.repcontainer[data-groupname="repeating_dreadpowers"] .repitem,
.repcontainer[data-groupname="repeating_spells"] .repitem,
.repcontainer[data-groupname="repeating_advances"] .repitem,
.repcontainer[data-groupname="repeating_commonconditions"] .repitem,
.repcontainer[data-groupname="repeating_health"] .repitem,
.repcontainer[data-groupname="repeating_contacts"] .repitem,
.repcontainer[data-groupname="repeating_relationships"] .repitem,
.repcontainer[data-groupname="repeating_equipment"] .repitem,
.repcontainer[data-groupname="repeating_equipment-tags"] .repitem,
.repcontainer[data-groupname="repeating_notes"] .repitem {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 52px;
    grid-template-areas:
        ". ."
        "expandable expandable";
    row-gap: 5px;
    column-gap: 3px;
}

.repcontainer[data-groupname="repeating_bonds"] .repitem .expandable,
.repcontainer[data-groupname="repeating_edges"] .repitem .expandable,
.repcontainer[data-groupname="repeating_dreadpowers"] .repitem .expandable,
.repcontainer[data-groupname="repeating_spells"] .repitem .expandable,
.repcontainer[data-groupname="repeating_advances"] .repitem .expandable,
.repcontainer[data-groupname="repeating_commonconditions"] .repitem .expandable,
.repcontainer[data-groupname="repeating_health"] .repitem .expandable,
.repcontainer[data-groupname="repeating_contacts"] .repitem .expandable,
.repcontainer[data-groupname="repeating_relationships"] .repitem .expandable,
.repcontainer[data-groupname="repeating_equipment"] .repitem .expandable,
.repcontainer[data-groupname="repeating_equipment-tags"] .repitem .expandable,
.repcontainer[data-groupname="repeating_notes"] .repitem .expandable {
    grid-area: expandable;
}

/* Style the dots */
.dots {
    display: flex;
    align-items: center;
}

/* Configure the button styling to make it look like a radio button. */
button.dot {
  padding: 0;
  border: solid 1px #a8a8a8;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

button.dot > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: buttontext;
}

button.zero-dot > span {
    width: auto;
    height: auto;
    background: none;
}

/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.dot[value="0"] ~ button.gt-0 > span.checked {
  display: none;
}
input.dot[value="1"] ~ button.gt-1 > span.checked {
  display: none;
}
input.dot[value="2"] ~ button.gt-2 > span.checked {
  display: none;
}
input.dot[value="3"] ~ button.gt-3 > span.checked {
  display: none;
}
input.dot[value="4"] ~ button.gt-4 > span.checked {
  display: none;
}
input.dot[value="5"] ~ button.gt-5 > span.checked {
  display: none;
}
input.dot[value="6"] ~ button.gt-6 > span.checked {
  display: none;
}
input.dot[value="7"] ~ button.gt-7 > span.checked {
  display: none;
}
input.dot[value="8"] ~ button.gt-8 > span.checked {
  display: none;
}
input.dot[value="9"] ~ button.gt-9 > span.checked {
  display: none;
}
input.dot[value="10"] ~ button.gt-10 > span.checked {
  display: none;
}
input.dot[value="11"] ~ button.gt-11 > span.checked {
  display: none;
}
input.dot[value="12"] ~ button.gt-12 > span.checked {
  display: none;
}

/* Collapsible sections */

input.toggle-more + button {
    font-family: 'Courier', cursive;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    border-style: none;
    border-radius: 6px;
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
    background-color: #333;
}

input.toggle-more[value="0"] + button + div.expandable {
    display: none;
}

input.toggle-more[value="1"] + button > span.more,
input.toggle-more[value="0"] + button > span.less {
    display: none;
}


/* Roll template styling */
.sheet-rolltemplate-skillroll .sheet-outer,
.sheet-rolltemplate-path .sheet-outer,
.sheet-rolltemplate-TWD .sheet-outer,
.sheet-rolltemplate-custompath .sheet-outer {
    background: url('https://i.imgur.com/9uGYpZI.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 10px;
}

.sheet-rolltemplate-skillroll .sheet-inner,
.sheet-rolltemplate-path .sheet-inner,
.sheet-rolltemplate-TWD .sheet-inner,
.sheet-rolltemplate-custompath .sheet-inner {
    background-color: rgba(255,255,255,0.7);
    padding: 10px 5px;
}

.sheet-rolltemplate-skillroll .sheet-results,
.sheet-rolltemplate-path .sheet-results,
.sheet-rolltemplate-custompath .sheet-results {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.sheet-rolltemplate-skillroll .sheet-inner p:last-child,
.sheet-rolltemplate-path .sheet-inner p:last-child,
.sheet-rolltemplate-custompath .sheet-inner p:last-child {
    margin-bottom: 0px;
}

.sheet-rolltemplate-skillroll .sheet-outer .sheet-header,
.sheet-rolltemplate-path .sheet-outer .sheet-header,
.sheet-rolltemplate-TWD .sheet-outer .sheet-header,
.sheet-rolltemplate-custompath .sheet-outer .sheet-header {
    background: url('https://i.imgur.com/UDESMmU.png?raw=true');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 220px;
    padding: 3px 25px;
    margin-bottom: 10px;
    display: grid;
    grid-template-rows: 9fr 10fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "."
        "header";
    align-items: center;
}  

.sheet-rolltemplate-skillroll .sheet-outer .sheet-header h4,
.sheet-rolltemplate-path .sheet-outer .sheet-header h4,
.sheet-rolltemplate-TWD .sheet-outer .sheet-header h4,
.sheet-rolltemplate-custompath .sheet-outer .sheet-header h4 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 2.4rem;
    grid-area: header;
}

.sheet-rolltemplate-TWD .sheet-inner h3,
.sheet-rolltemplate-TWD .sheet-inner h4 {
    text-align: center;
    font-weight: 400;
}

.sheet-rolltemplate-TWD .sheet-inner h3 {
    margin: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    line-height: 2.6rem;
}

.sheet-rolltemplate-TWD .sheet-inner h4 {
    margin: 20px;
    color: #c21a1f;
    font-family: 'Special Elite', cursive;
    font-size: 1.8rem;
}

/* Responsive CSS */
@media only screen and (max-width: 480px) {
    .wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo logo"
            "header-general header-general"
            "skills skills"
            "attributes attributes"
            "entanglement entanglement"
            "aspirations aspirations"
            "edges edges"
            "spells spells"
            "spells spells"
            "damnation inheritance"
            "torments torments"
            "health health"
            "bonds bonds"
            "contacts contacts"
            "equipment equipment"
            "footer-general footer-general";
    }
    
    .logo img {
        max-width: 90%;
    }
    
    .skill-list {
        grid-template-columns: auto;
    }
    
    .char-attributes > div {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:

            "intellect-label intellect-dots"
            "might-label might-dots"
            "presence-label presence-dots"
            "cunning-label cunning-dots"
            "dexterity-label dexterity-dots"
            "manipulation-label manipulation-dots"
            "resolve-label resolve-dots"
            "stamina-label stamina-dots"
            "composure-label composure-dots";
    }


    .char-entanglement > div {
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "entanglement-label entanglement-dots"
            "curse-label curse-dots";
    }
    
    .footer-general {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "general-button notes-button"
        "general-tab general-tab"
        "notes-tab notes-tab";
    }
    
    .tabstoggle[value="general"] ~ div.tab-general {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr;
    }
    
    .tab-general .left {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        column-gap: 0px;
        row-gap: 5px;
    }
}

/* Hide actual dot/checkbox */
input.sheet-defaultRadioBox,
input.sheet-defaultCheckBox
{
    position: absolute;
    opacity: 0;
    width:15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 6px;
}

/* Styles common to fake dot and checkbox */
input.sheet-defaultRadioBox + span::before,
input.sheet-defaultCheckBox + span::before
{
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: middle;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #e4d2bd
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Styles unique to fake dot (checked or left of checked) */
input.sheet-defaultRadioBox + span::before
{
    content: "•";
    width: 12px;
    height: 12px;
    font-size: 36px;
    
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/* Styles unique to fake checkbox (unchecked) */
input.sheet-defaultCheckBox + span::before
{
    position:relative;
    content: "";
    opacity: .25;
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* Styles unique to fake checkbox (checked) */
input.sheet-defaultCheckBox:checked + span::before
{
    content: "✖";
    color: #a00;
    
    -moz-box-shadow: 0 0 2px transparent;
    -webkit-box-shadow: 0 0 2px transparent;
    box-shadow: 0 0 2px transparent;
}

/* Remove dot from all radios _after_ selected one */
input.sheet-defaultRadioBox:checked ~ input.sheet-defaultRadioBox + span::before
{    
    content: "";
}

input.sheet-zeroo:checked + span::before
{
    opacity: 0;
}

input.sheet-zeroo:hover + span::before
{
    opacity: 1;
}

input.sheet-zeroo+ span::before
{
    font-size: 12px;
    content: "✖";
    opacity: 0.25;
}

/* Horizontal Rule */
hr{
  border: 1px solid black;
}

input.armor-toggle[value="0"] + div.armor-hide {
    display: none;
}

input.bloodied-toggle[value="0"] + div.bloodied-hide {
    display: none;
}

input.wounded-toggle[value="0"] + div.wounded-hide {
    display: none;
}

input.maimed-toggle[value="0"] + div.maimed-hide {
    display: none;
}

input.neardeath-toggle[value="0"] + div.neardeath-hide {
    display: none;
}

/* configure the tab buttons */
.charsheet .sheet-character,
.charsheet .sheet-journal,
.charsheet .sheet-configuration {
    display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="journal"] ~ div .sheet-button1 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}
.charsheet .sheet-tabstoggle[value="configuration"] ~ div .sheet-button2 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; background: transparent; color: #333; font-weight: 700; margin-left: 3px; margin-bottom: 0px; padding: 0px; font-size: 14px; line-height: 16px; box-sizing: content-box; outline: 2px solid red;}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-configuration {
    display: block;
}