acks.css

.ui-dialog .charsheet * {
    color: saddlebrown;
    font-family: 'Papyrus', sans-serif;
    font-size: 95%; 
    font-size-adjust: 0.46;
}
.ui-dialog .charsheet {
    background-color: tan;
}
.ui-dialog .charsheet {
    
    background-image: url(https://files.d20.io/images/365081732/2hRPt1mnt7SE9nm72rf1fg/original.png?16984356135);
    
}
.ui-dialog .charsheet label.span-header {
    
    background-image: url(https://files.d20.io/images/365081732/2hRPt1mnt7SE9nm72rf1fg/original.png?16984356135);
    
}

/**************** Grid Layouts ****************/
.ui-dialog .charsheet .grid-2column {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns:  [first] repeat(2, 1fr) [last];
    justify-content: start;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-armor,
.ui-dialog .charsheet .grid-attacks {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(6, 1fr) [last];
    justify-items: center;
    width: 100%;
}
.ui-dialog .charsheet .grid-attacks input {
    justify-self: start;
}
.ui-dialog .charsheet .grid-attributes {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(5, 1fr) [last];
    justify-items: center;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-attributes label.attrname {
    justify-self: end;
}
.ui-dialog .charsheet .grid-classbonuses,
.ui-dialog .charsheet .grid-classprof {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(8, 1fr) [last];
    justify-items: start;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-classbonuses label {
    justify-self: end;
}
.ui-dialog .charsheet .grid-currency,
.ui-dialog .charsheet .grid-encounter-buttons,
.ui-dialog .charsheet .grid-hirelings,
.ui-dialog .charsheet .grid-journal {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(4, 1fr) [last];
    justify-items: center;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-encumbrance {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(8, 1fr) [last];
    justify-items: center;
    width: 100%;
}
.ui-dialog .charsheet .grid-overview {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns:  [first] repeat(2, 1fr) [last];
    justify-items: start;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-overview label {
    justify-self: end;
}
.ui-dialog .charsheet .grid-overview div.xplabel {
    justify-self: end;
}
.ui-dialog .charsheet .grid-savingthrows {    
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(4, 1fr) [last];
    justify-content: center;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-savingthrows input,
.ui-dialog .charsheet .grid-savingthrows label {
    justify-self: center;    
}
.ui-dialog .charsheet .grid-settings {
    align-items: center;
    display: grid;
    column-gap: 10px;
    justify-items: center;
    grid-template-columns: [first] 25% [second] 10% [third] auto [last];
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-settings label {
    justify-self: end;
}
.ui-dialog .charsheet .grid-settings span {
    justify-self: start;
}

.ui-dialog .charsheet .grid-spellslots {
    align-items: center;
    column-gap: 5px;
    display: grid;
    grid-template-columns: [first] repeat(11, 1fr) [last];
    justify-items: center;
    row-gap: 5px;
    width: 100%;
}

.ui-dialog .charsheet .grid-monster,
.ui-dialog .charsheet .grid-summary {
    align-items: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: [first] repeat(4, 1fr) [last];
    justify-items: start;
    row-gap: 5px;
    width: 100%;
}
.ui-dialog .charsheet .grid-monster label,
.ui-dialog .charsheet .grid-summary label {
    justify-self: end;
}

/**************** Element Styles ****************/
/* Roll20 type='roll' button styles */
.ui-dialog .charsheet button {
    background-image: linear-gradient(white, navajowhite);
    border-color: saddlebrown;
    color: saddlebrown;
    font-weight: bold;
}
.ui-dialog .charsheet button:hover {
    background-image: none;
    background-color: navajowhite;
}
.ui-dialog .charsheet button.reviewButton,
.ui-dialog .charsheet button.rollButton {
    font-size: 1.0em;
    margin-bottom: 9px;
}
.ui-dialog .charsheet button.reviewButton::before {
    content: "";
}
.ui-dialog .charsheet button.wideButton {
    font-size: 1.0em; 
    width: 90%;
}
/* Roll20 type='action' button styles */
.ui-dialog .charsheet button.actionButton,
.ui-dialog .charsheet button.HDButton,
.ui-dialog .charsheet button.missileButton {
    background-image: linear-gradient(white, navajowhite);
    border: 1px solid saddlebrown;
    border-radius: 4px;
    font-size: 1.0em;
    font-weight: bold;
    height: 21px;
    margin: 0px 3px 9px 3px;
    padding: 2px 3px;
}
.ui-dialog .charsheet button.HDButton {
    align-self: center;
}
.ui-dialog .charsheet button.missileButton {
}
.ui-dialog .charsheet button.actionButton:hover,
.ui-dialog .charsheet button.HDButton:hover,
.ui-dialog .charsheet button.missileButton:hover {
    background-image: none;
    background-color: navajowhite;
}
.ui-dialog .charsheet button.actionButton:active,
.ui-dialog .charsheet button.HDButton:active,
.ui-dialog .charsheet button.missileButton:active {
    background-image: linear-gradient(burlywood 10%, 30%, navajowhite 90%);
    background-color: transparent;
}
.ui-dialog .charsheet button.HDButton::before,
.ui-dialog .charsheet button.missileButton::before {
    font-family: 'dicefontd20';
    content: 't';
}

.ui-dialog .charsheet div {
    align-self: start;
    justify-self: start;
}
.ui-dialog .charsheet div.body {
    display: block;
}
.ui-dialog .charsheet div.encumbrance {
    justify-self: center;
}
.ui-dialog .charsheet div.hitdice {
    display: flex;
}
.ui-dialog .charsheet div.journalbox {
    width: 95%;
}
.ui-dialog .charsheet div.whispertoggle {
    display: inline-block;
    font-size: 0.9em;
    margin-left: 10px;
}

.ui-dialog .charsheet h1 {
    font-size: 2.0em;
}

.ui-dialog .charsheet div.page-title {
    margin-bottom: 10px;
}

.ui-dialog .charsheet hr {
    border-top: 1px solid saddlebrown;
    margin: 10px 0px 20px 0px;
}
.ui-dialog .charsheet hr.spangrid {
    grid-column: first / last;
    justify-self: start;
    margin: 5px 0px 15px 0px;
    width: 99%;
}

.ui-dialog .charsheet input {
    background-color: transparent;
    border-color: saddlebrown;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
    box-sizing: border-box;
    color: saddlebrown;
    display: inline-block;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 23px;
    margin-bottom: 9px;
    outline: none;
    padding: 2px 5px 0px 5px;
    text-decoration: none;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
}
.ui-dialog .charsheet  input:read-only {
    background-color: transparent;
    border: none;
}
.ui-dialog .charsheet input[type=number] {
    text-align: center;
    width: 60px;
}
.ui-dialog .charsheet input[type=number].currency {
    width: 80px;
}
.ui-dialog .charsheet input.attackname {
    width: 150px;
}
.ui-dialog .charsheet input.henchClass {
    width: 180px;
}
.ui-dialog .charsheet input.hirelingName,
.ui-dialog .charsheet input.specType {
    width: 240px;
}
.ui-dialog .charsheet input[type=number].itemValue::-webkit-outer-spin-button,
.ui-dialog .charsheet input[type=number].itemValue::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ui-dialog .charsheet input[type=number].itemValue {
  -moz-appearance: textfield;
}
.ui-dialog .charsheet input[type=number].itemWeight::-webkit-outer-spin-button,
.ui-dialog .charsheet input[type=number].itemWeight::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ui-dialog .charsheet input[type=number].itemWeight {
  -moz-appearance: textfield;
}
.ui-dialog .charsheet input.missilerange {
    width: 100px;
}
.ui-dialog .charsheet input.mercRace {
    width: 80px;
}
.ui-dialog .charsheet input.mercType {
    width: 180px;
}
.ui-dialog .charsheet input.skillScript,
.ui-dialog .charsheet input.spellDuration {
    width: 200px;
}
.ui-dialog .charsheet input.damageAttr,
.ui-dialog .charsheet input.spellRange,
.ui-dialog .charsheet input.spellLevel {
    width: 60px; 
}
.ui-dialog .charsheet input.smallWidth {
    text-align: center;
    width: 60px;
}
.ui-dialog .charsheet input.weaponProfs {
    width: 80%;
}
.ui-dialog .charsheet input.xp {
    text-align: right;
    width: 90px;
}
.ui-dialog .charsheet input.xpamount,
.ui-dialog .charsheet input.xpdate {
    width: 100px;
}
.ui-dialog .charsheet input[type=number].xpamount::-webkit-outer-spin-button,
.ui-dialog .charsheet input[type=number].xpamount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ui-dialog .charsheet input[type=number].xpamount {
  -moz-appearance: textfield;
}
.ui-dialog .charsheet input.xpdescription {
    width: 30%;
}

.ui-dialog .charsheet  label {
    align-self: start;
    display: inline-block;
    font-size: 1.1em;
    padding-top: 7px;
    white-space: nowrap;
    width: auto;
}
.ui-dialog .charsheet label.emphasis {
    font-size: 1.1em;
}
.ui-dialog .charsheet label.item_count {
    width: 152px;
}
.ui-dialog .charsheet label.item_lbs {
    width: 40px;
}
.ui-dialog .charsheet label.item_name {
    font-size: 0.9em;
    width: 214px;
}
.ui-dialog .charsheet label.light {
    font-weight: normal;
}
.ui-dialog .charsheet label.meleeattack {
    width: 206px;
}
.ui-dialog .charsheet label.meleemod {
    width: 30px;
}
.ui-dialog .charsheet label.missileattack {
    width: 206px;
}
.ui-dialog .charsheet label.missilemod {
    width: 30px;
}
.ui-dialog .charsheet label.missileeffects {
    width: 266px;
}
.ui-dialog .charsheet label.span-header {
    background-color: navajowhite;
    border-radius: 4px;
    font-size: 1.2em;
    grid-column: first / last;
    justify-self: start;
    padding: 5px 0px 2px 5px;
    width: 100%;
}
.ui-dialog .charsheet label.spelllevel {
    width: 40px; 
}
.ui-dialog .charsheet label.spellname {
    width: 200px; 
}
.ui-dialog .charsheet label.xp {
    padding-right: 0px;
}

.ui-dialog .charsheet select {
    background-color: navajowhite;
    border-color: saddlebrown;
    font-weight: bold;
    margin: 0px 9px 9px 0px;
}
.ui-dialog .charsheet select.settingsSelect {
    width: 60px;
}
.ui-dialog .charsheet select.sizeSelect {
    width: 100px;
}
.ui-dialog .charsheet select.shorter {
    width: 160px;
}

.ui-dialog .charsheet span.info {
    line-height: 1;
}
.ui-dialog .charsheet span.xpbonus {
    font-weight: bold;
}

.ui-dialog .charsheet textarea {
    background-color: transparent;
    border-color: saddlebrown;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    color: saddlebrown;
    display: inline-block;
    font-size: 1.03em;
    font-weight: bold;
    line-height: 23px;
    margin-bottom: 9px;
    outline: none;
    padding: 2px 5px 0px 5px;
    text-decoration: none;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    width: 98%;
}
.ui-dialog .charsheet textarea::placeholder {
    color: #8a795d;
}
.ui-dialog .charsheet textarea.background {
    width: 99%;
}
.ui-dialog .charsheet textarea.journalnotes {
    height: 120px;
    width: 100%;
}
.ui-dialog .charsheet textarea.property {
    height: 220px;
    width: 400px;
}

/**************** Panel Buttons ****************/
.ui-dialog .charsheet .button-panel {
    padding-bottom: 15px;
}
.ui-dialog .charsheet .overview,
.ui-dialog .charsheet .class,
.ui-dialog .charsheet .studious,
.ui-dialog .charsheet .prayerful,
.ui-dialog .charsheet .skills,
.ui-dialog .charsheet .combat,
.ui-dialog .charsheet .equipment,
.ui-dialog .charsheet .wealth,
.ui-dialog .charsheet .hirelings,
.ui-dialog .charsheet .journal,
.ui-dialog .charsheet .settings {
	display: none;
}
.ui-dialog .charsheet .tabstoggle[value='overview'] ~ section.overview,
.ui-dialog .charsheet .tabstoggle[value='class'] ~ section.class,
.ui-dialog .charsheet .tabstoggle[value='studious'] ~ section.studious,
.ui-dialog .charsheet .tabstoggle[value='prayerful'] ~ section.prayerful,
.ui-dialog .charsheet .tabstoggle[value='skills'] ~ section.skills,
.ui-dialog .charsheet .tabstoggle[value='combat'] ~ section.combat,
.ui-dialog .charsheet .tabstoggle[value='equipment'] ~ section.equipment,
.ui-dialog .charsheet .tabstoggle[value='wealth'] ~ section.wealth,
.ui-dialog .charsheet .tabstoggle[value='hirelings'] ~ section.hirelings,
.ui-dialog .charsheet .tabstoggle[value='settings'] ~ section.settings,
.ui-dialog .charsheet .tabstoggle[value='journal'] ~ section.journal {
	display: block;
}
.ui-dialog .charsheet .btnOverview,
.ui-dialog .charsheet .btnClass,
.ui-dialog .charsheet .btnStudious,
.ui-dialog .charsheet .btnPrayerful,
.ui-dialog .charsheet .btnSkills,
.ui-dialog .charsheet .btnCombat,
.ui-dialog .charsheet .btnEquipment,
.ui-dialog .charsheet .btnWealth,
.ui-dialog .charsheet .btnHirelings,
.ui-dialog .charsheet .btnJournal,
.ui-dialog .charsheet .btnSettings {
    align-self: center;
    background-color: navajowhite;
    background-image: none;
    border-color: saddlebrown;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
    box-sizing: border-box;
    color: saddlebrown;
    cursor: pointer;
    display: inline-block;
    line-height: 23px;
    outline: none;
    text-decoration: none;
    transition: all 235ms ease-in-out;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }  
  .ui-dialog .charsheet .btnOverview:hover,
  .ui-dialog .charsheet .btnClass:hover,
  .ui-dialog .charsheet .btnStudious:hover,
  .ui-dialog .charsheet .btnPrayerful:hover,
  .ui-dialog .charsheet .btnSkills:hover,
  .ui-dialog .charsheet .btnCombat:hover,
  .ui-dialog .charsheet .btnEquipment:hover,
  .ui-dialog .charsheet .btnWealth:hover,
  .ui-dialog .charsheet .btnHirelings:hover,
  .ui-dialog .charsheet .btnJournal:hover,
  .ui-dialog .charsheet .btnSettings:hover {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
    transform: translate3d(0, 2px, 0);
  }
  .ui-dialog .charsheet .btnOverview:focus,
  .ui-dialog .charsheet .btnClass:focus,
  .ui-dialog .charsheet .btnStudious:focus,
  .ui-dialog .charsheet .btnPrayerful:focus,
  .ui-dialog .charsheet .btnSkills:focus,
  .ui-dialog .charsheet .btnCombat:focus,
  .ui-dialog .charsheet .btnEquipment:focus,
  .ui-dialog .charsheet .btnWealth:focus,
  .ui-dialog .charsheet .btnHirelings:focus,
  .ui-dialog .charsheet .btnJournal:focus,
  .ui-dialog .charsheet .btnSettings:focus {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
  }
.ui-dialog .charsheet .buttonstoggle[value='overview'] ~ button.btnOverview,
.ui-dialog .charsheet .buttonstoggle[value='class'] ~ button.btnClass,
.ui-dialog .charsheet .buttonstoggle[value='studious'] ~ button.btnStudious,
.ui-dialog .charsheet .buttonstoggle[value='prayerful'] ~ button.btnPrayerful,
.ui-dialog .charsheet .buttonstoggle[value='skills'] ~ button.btnSkills,
.ui-dialog .charsheet .buttonstoggle[value='combat'] ~ button.btnCombat,
.ui-dialog .charsheet .buttonstoggle[value='equipment'] ~ button.btnEquipment,
.ui-dialog .charsheet .buttonstoggle[value='wealth'] ~ button.btnWealth,
.ui-dialog .charsheet .buttonstoggle[value='hirelings'] ~ button.btnHirelings,
.ui-dialog .charsheet .buttonstoggle[value='journal'] ~ button.btnJournal,
.ui-dialog .charsheet .buttonstoggle[value='settings'] ~ button.btnSettings {
    background-color: white;
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
    font-weight: bold;
    transform: translate3d(0, 2px, 0);
}
/* Hide Spells tab buttons on Settings toggles */
.ui-dialog .charsheet input.hideStudious[value='1'] ~ button.btnStudious {
    display: none;
}
.ui-dialog .charsheet input.hidePrayerful[value='1'] ~ button.btnPrayerful {
    display: none;
}
/* Hide Code of Behavior section on Settings toggle */
.ui-dialog .charsheet input.hideCode[value='1'] ~ div.code {
    display: none;
}

/**************** Alert Styles ****************/
.ui-dialog .charsheet span.orangeEnc,
.ui-dialog .charsheet span.redbedrest,
.ui-dialog .charsheet input.reddmg,
.ui-dialog .charsheet span.redfatigue,
.ui-dialog .charsheet input.redhd,
.ui-dialog .charsheet span.redhp,
.ui-dialog .charsheet span.redmove,
.ui-dialog .charsheet .limitExceeded {
    color: saddlebrown;
}
.ui-dialog .charsheet input.reddmg,
.ui-dialog .charsheet input.redhd {
    width: 60px;
}
.ui-dialog .charsheet input.bedrestcheck[value='1'] ~ .redbedrest,
.ui-dialog .charsheet input.dmgcheck[value='1'] ~ .reddmg,
.ui-dialog .charsheet input.fatiguecheck[value='1'] ~ .redfatigue,
.ui-dialog .charsheet input.hdcheck[value='1'] ~ .redhd,
.ui-dialog .charsheet input.hpcheck[value='1'] ~ .redhp,
.ui-dialog .charsheet input.movecheck[value='1'] ~ .redmove,
.ui-dialog .charsheet input.henchmenCheck[value='1'] ~ .limitExceeded {
    background-color: lightpink; 
    border-color: red;
    color: red;
    font-weight: bold;
}
.ui-dialog .charsheet input.encOverFive[value='1'] ~ .orangeEnc {
    background-color: orange; 
    font-weight: bold;
}

/**************** Details section toggle ****************
Note that each toggle must have a different name value */
.ui-dialog .charsheet 
input.toggle-show:not(:checked) ~ div.details {
    display: none;
}

/**************** Repeating Styles  ****************/
.repitem > button {
    vertical-align: top;
}
.repitem > input,
.repitem > div > input
{
    margin-right: 10px;
}
.repitem > input[type=number].itemCount {
    text-align: right;
    width: 45px;
}
.repitem > input[type=number].itemValue {
    text-align: right;
    width: 80px;
}
.repitem > input[type=number].itemWeight {
    text-align: right;
    width: 60px;
}
.repitem > input[type=text].itemSize {
    text-align: center;
    width: 45px;
}
.repitem > .charsheet label {
    font-size: 0.9em;
}

/**************** Roll Template Styles ****************/
/* Better default template */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
}
.sheet-rolltemplate-custom,
.sheet-rolltemplate-menu,
.sheet-rolltemplate-mortalwounds,
.sheet-rolltemplate-critchar,
.sheet-rolltemplate-critmon {
    margin-left: -37px;
  }
  .withoutavatars .sheet-rolltemplate-custom,
  .withoutavatars .sheet-rolltemplate-menu,
  .withoutavatars .sheet-rolltemplate-mortalwounds,
  .withoutavatars .sheet-rolltemplate-critchar,
  .withoutavatars .sheet-rolltemplate-critmon {
    margin-left: -7px;
  }
  
  .sheet-rolltemplate-custom .sheet-container,
  .sheet-rolltemplate-menu .sheet-container,
  .sheet-rolltemplate-mortalwounds .sheet-container,
  .sheet-rolltemplate-critchar .sheet-container,
  .sheet-rolltemplate-critmon .sheet-container {
    border: 1px solid;
    /* by default, the border is the same color as the header. You can change this here, e.g. to black */
    border-color: var(--header-bg-color);
  }
  
  /* Header formatting - title and subtitle */
  .sheet-rolltemplate-custom .sheet-header,
  .sheet-rolltemplate-menu .sheet-header,
  .sheet-rolltemplate-mortalwounds .sheet-header,
  .sheet-rolltemplate-critchar .sheet-header,
  .sheet-rolltemplate-critmon .sheet-header {
    background-image: var(--header-bg-image);
    background-color: var(--header-bg-color);
    /* change text-align to center to center the header text */
    text-align: left;
    color: var(--header-text-color);
    padding: 5px;
  }
  .sheet-rolltemplate-custom .sheet-title,
  .sheet-rolltemplate-menu .sheet-title,
  .sheet-rolltemplate-mortalwounds .sheet-title,
  .sheet-rolltemplate-critchar .sheet-title,
  .sheet-rolltemplate-critmon .sheet-title {
    font-size:1.1em;
    text-align: center;
  }
  .sheet-rolltemplate-custom .sheet-subtitle,
  .sheet-rolltemplate-menu .sheet-subtitle,
  .sheet-rolltemplate-mortalwounds .sheet-subtitle,
  .sheet-rolltemplate-critchar .sheet-subtitle,
  .sheet-rolltemplate-critmon .sheet-subtitle {
    font-size:.9em;
    text-align: center;
  }
  
  /* example colors */
  .sheet-rolltemplate-custom .sheet-container,
  .sheet-rolltemplate-menu .sheet-container {
    /* this is the default color */
    --header-bg-color:dimgray;
    --header-text-color: #FFF;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-black,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-black,
  .sheet-rolltemplate-mortalwounds .sheet-container.sheet-color-black {
    --header-bg-color: black;
    --header-text-color: #FFF;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-brown,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-brown {
    --header-bg-color: saddlebrown;
    --header-text-color: #FFF;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-blue,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-blue {
    --header-bg-color: darkslateblue;
    --header-text-color: #FFF;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-gold,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-gold {
    --header-bg-color: gold;
    --header-text-color: #000;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-green,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-green {
    --header-bg-color: darkolivegreen;
    --header-text-color: #FFF;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-orange,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-orange {
    --header-bg-color: darkorange;
    --header-text-color: #000;
  }
  .sheet-rolltemplate-custom .sheet-container.sheet-color-red,
  .sheet-rolltemplate-menu .sheet-container.sheet-color-red,
  .sheet-rolltemplate-critchar .sheet-container.sheet-color-red,
  .sheet-rolltemplate-critmon .sheet-container.sheet-color-red {
    --header-bg-color: maroon;
    --header-text-color: #FFF;
  }

/* Success/Failure colors*/
.sheet-rolltemplate-custom .sheet-success {
    color: green;
    font-weight: bold;
}
.sheet-rolltemplate-custom .sheet-failure {
    color: red;
    font-weight: bold;
}
  
  /* Allprops part */
  .sheet-rolltemplate-custom .sheet-content,
  .sheet-rolltemplate-menu .sheet-content,
  .sheet-rolltemplate-mortalwounds .sheet-content,
  .sheet-rolltemplate-critchar .sheet-content,
  .sheet-rolltemplate-critmon .sheet-content {
    display: grid;
    background: #FFF;
    /* Header formatting - modify the column layout below */
    grid-template-columns: auto auto;
    /* Line height to match default roll template */
    line-height:1.4em;
  }
  .sheet-rolltemplate-custom .sheet-content > div,
  .sheet-rolltemplate-menu .sheet-content > div,
  .sheet-rolltemplate-mortalwounds .sheet-content > div,
  .sheet-rolltemplate-critchar .sheet-content > div,
  .sheet-rolltemplate-critmon .sheet-content > div {
    padding: 5px;
  }
  
  /* Left column */
  .sheet-rolltemplate-custom .sheet-content .sheet-key,
  .sheet-rolltemplate-menu .sheet-content .sheet-key,
  .sheet-rolltemplate-mortalwounds .sheet-content .sheet-key,
  .sheet-rolltemplate-critchar .sheet-content .sheet-key,
  .sheet-rolltemplate-critmon .sheet-content .sheet-key {
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
  }
  
  /* Empty rule, use this if you want to change the right column 
  .sheet-rolltemplate-custom .sheet-value {
  }
  */
  
  /* Make even-numbered rows grey */
  .sheet-rolltemplate-custom .sheet-content div:nth-child(4n+3),
  .sheet-rolltemplate-custom .sheet-content div:nth-child(4n),
  .sheet-rolltemplate-mortalwounds .sheet-content div:nth-child(4n+3),
  .sheet-rolltemplate-mortalwounds .sheet-content div:nth-child(4n),
  .sheet-rolltemplate-critchar .sheet-content div:nth-child(4n+3),
  .sheet-rolltemplate-critchar .sheet-content div:nth-child(4n),
  .sheet-rolltemplate-critmon .sheet-content div:nth-child(4n+3),
  .sheet-rolltemplate-critmon .sheet-content div:nth-child(4n) {
    background:#EEE;
  }
  
  /* Description field */
  .sheet-rolltemplate-custom .sheet-desc,
  .sheet-rolltemplate-menu .sheet-desc {
    grid-column: span 2;
    padding: 5px;
    text-align: center;
  }

  /* Chat menu styles */
  .sheet-rolltemplate-custom a[href^='!'],.sheet-rolltemplate-custom a[href^='~'],
  .sheet-rolltemplate-menu a[href^='!'],.sheet-rolltemplate-menu a[href^='~'] {
    background-color:transparent;
    border:0;
    color:#3f8aa6;
    display:inline;
    font-style: italic;
    font-weight: bold;
    padding: 0
}

.sheet-rolltemplate-custom .sheet-desc {
    text-align: left;
}