roll20-character-sheets/The World Below/TWB_CSS.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/VdVW125.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"].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;
    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/VdVW125.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 1fr 1fr 2fr;
    grid-template-areas:
        "token logo logo logo"
		"details details details details"
        "skills skills skills skills"
        "attributes attributes attributes attributes"
        "theses theses syntheses syntheses"
        "sorceries sorceries sorceries kaos"
		"common-conditions common-conditions health health"
		"equipment equipment equipment equipment"
        "bonds contacts contacts contacts"
		"aspirations aspirations 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 ancestry-label ancestry-text guild-label guild-text"
    "concept-label concept-text community-label community-text dialectic-label dialectic-text"
    "player-label player-text dogma-label dogma-text calling-label calling-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.calling-text {
    grid-area: calling-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;
}

.bonds {
    grid-area: bonds;
}

.contacts {
    grid-area: contacts;
}

.sorceries {
    grid-area: sorceries;
}

.kaos {
    grid-area: kaos;
}

.aspirations {
    grid-area: aspirations;
}

.aspirations > div {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.aspirations > div .label {
    width: auto;
    margin: 0px 0px 0px 3px;
}

.aspirations > div .value {
    width: auto;
    flex-grow: 2;
    margin: 0px 0px 0px 3px;
}

.syntheses {
    grid-area: syntheses;
}

.theses {
    grid-area: theses;
}

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

.health {
    grid-area: health;
}

.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"
        "antithesis antithesis monstrousquality monstrousquality"
        "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;
}

.antithesis {
    grid-area: antithesis;
}

.monstrousquality {
    grid-area: monstrousquality;
}

/* Repeating and Expanding sections */

.repcontainer[data-groupname="repeating_bonds"] .repitem,
.repcontainer[data-groupname="repeating_syntheses"] .repitem,
.repcontainer[data-groupname="repeating_theses"] .repitem,
.repcontainer[data-groupname="repeating_sorceries"] .repitem,
.repcontainer[data-groupname="repeating_antithesis"] .repitem,
.repcontainer[data-groupname="repeating_monstrousquality"] .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_syntheses"] .repitem .expandable,
.repcontainer[data-groupname="repeating_theses"] .repitem .expandable,
.repcontainer[data-groupname="repeating_sorceries"] .repitem .expandable,
.repcontainer[data-groupname="repeating_antithesis"] .repitem .expandable,
.repcontainer[data-groupname="repeating_monstrousquality"] .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;
}


button.kaosdeckmajor,
button.kaosdeckmajor:focus,
button.kaosdeckmajor:hover {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: url('https://i.imgur.com/bUGmHAD.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 600;
    padding: 12px 12px;
    margin-bottom: 5px;
    font-size: 1.6rem !important;
    line-height: 20px;
    border-style: none;
    border-radius: 8px;
    text-shadow: #003 0 0 15px !important;
    box-shadow: none !important;
    width: 200px;
    height: 50px;
}

button.kaosdeckmajor::before {
    content: " " !important;
}

button.kaosdeckminor,
button.kaosdeckminor:focus,
button.kaosdeckminor:hover {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: url('https://i.imgur.com/D5SxY1y.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 600;
    padding: 12px 12px;
    margin-bottom: 5px;
	margin-left: 15px;
    font-size: 1.6rem !important;
    line-height: 20px;
    border-style: none;
    border-radius: 8px;
    text-shadow: #003 0 0 15px !important;
    box-shadow: none !important;
    width: 200px;
    height: 50px;
}

button.kaosdeckminor::before {
    content: " " !important;
}

button.kaosdeckmoderate,
button.kaosdeckmoderate:focus,
button.kaosdeckmoderate:hover {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: url('https://i.imgur.com/Sbgl8gK.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 600;
    padding: 12px 12px;
    margin-bottom: 5px;
    font-size: 1.6rem !important;
    line-height: 20px;
    border-style: none;
    border-radius: 8px;
    text-shadow: #003 0 0 15px !important;
    box-shadow: none !important;
    width: 200px;
    height: 50px;
}

button.kaosdeckmoderate::before {
    content: " " !important;
}

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

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

/* Roll template styling */
.sheet-rolltemplate-skillroll .sheet-outer,
.sheet-rolltemplate-path .sheet-outer,
.sheet-rolltemplate-TWD .sheet-outer,
.sheet-rolltemplate-custompath .sheet-outer,
.sheet-rolltemplate-kaosretaliation .sheet-outer,
.sheet-rolltemplate-kaosretaliation1 .sheet-outer,
.sheet-rolltemplate-kaosretaliation2 .sheet-outer {
    background: url('https://i.imgur.com/1wzwiGH.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,
.sheet-rolltemplate-kaosretaliation .sheet-inner,
.sheet-rolltemplate-kaosretaliation1 .sheet-inner,
.sheet-rolltemplate-kaosretaliation2 .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,
.sheet-rolltemplate-kaosretaliation .sheet-outer .sheet-header,
.sheet-rolltemplate-kaosretaliation1 .sheet-outer .sheet-header,
.sheet-rolltemplate-kaosretaliation2 .sheet-outer .sheet-header {
    background: url('https://i.imgur.com/Ef6JQj1.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,
.sheet-rolltemplate-kaosretaliation .sheet-outer .sheet-header h4,
.sheet-rolltemplate-kaosretaliation1 .sheet-outer .sheet-header h4,
.sheet-rolltemplate-kaosretaliation2 .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;
}


.sheet-rolltemplate-kaosretaliation .sheet-inner h3,
.sheet-rolltemplate-kaosretaliation .sheet-inner h4,
.sheet-rolltemplate-kaosretaliation .sheet-inner p {
    text-align: center;
}

.sheet-rolltemplate-kaosretaliation1 .sheet-inner h3,
.sheet-rolltemplate-kaosretaliation1 .sheet-inner h4,
.sheet-rolltemplate-kaosretaliation1 .sheet-inner p {
    text-align: center;
}

.sheet-rolltemplate-kaosretaliation2 .sheet-inner h3,
.sheet-rolltemplate-kaosretaliation2 .sheet-inner h4,
.sheet-rolltemplate-kaosretaliation2 .sheet-inner p {
    text-align: center;
}

.sheet-rolltemplate-kaosretaliation .sheet-inner hr {
    border-color: #333;
    margin: 5px 0px;
}

.sheet-rolltemplate-kaosretaliation1 .sheet-inner hr {
    border-color: #333;
    margin: 5px 0px;
}

.sheet-rolltemplate-kaosretaliation2 .sheet-inner hr {
    border-color: #333;
    margin: 5px 0px;
}

/* 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"
            "bonds bonds"
            "aspirations aspirations"
            "bonds bonds"
            "syntheses syntheses"
            "theses theses"
            "sorceries sorceries"
            "favored-stunts favored-stunts"
            "health health"
            "footer-general footer-general"
            "quip-cards kaos";
    }
    
    .logo img {
        max-width: 90%;
    }
    
    .skill-list {
        grid-template-columns: auto;
    }
    
    .char-attributes > div {
        grid-template-columns: 80px 1fr 1fr 1fr;
        grid-template-areas:
            "approach-header . . ."
            "force-check force-label intellect-label intellect-dots"
            ". . might-label might-dots"
            ". . presence-label presence-dots"
            "finesse-check finesse-label cunning-label cunning-dots"
            ". . dexterity-label dexterity-dots"
            ". . manipulation-label manipulation-dots"
            "resilience-check resilience-label resolve-label resolve-dots"
            ". . stamina-label stamina-dots"
            ". . composure-label composure-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;
}