roll20-character-sheets/Forbidden_Lands/Forbidden_Lands.css

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Inknut+Antiqua:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined&display=swap');

.charsheet details {
  cursor: pointer;
}

.charsheet summary > * {
  display: inline;
}

.charsheet summary {
  display: list-item;
}

/* replaces default marker to allow more styling */
.charsheet summary.nav-before::marker,
.charsheet summary.nav-after::marker {
  content: none;
}

.charsheet summary.nav-before::before {
  color: #c3996b;
  content: "y";
  cursor: pointer;
  font-family: pictos;
  font-size: 14px;
  opacity: .25;
  position: absolute;
  top: -8px;
  left: -8px;
}

.charsheet details:hover summary.nav-before::before,
.charsheet details[open] summary.nav-before::before {
  opacity: 1;
  color: #c3996b;
}

.charsheet summary.nav-after::after {
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-color: transparent;
  border: 0.4em solid transparent;
  border-left-color: #c3996b;
  border-width: 0.4em 0.6em;
  content: "";
  cursor: pointer;
  display: inline-block;
  left: 5px;
  opacity: 0.5;
  position: relative;
  transform-origin: 15% 55%;
  transition: all 0.2s ease;
}

.charsheet .wrapper details:hover summary.nav-after::after,
.charsheet .wrapper details[open] summary.nav-after::after {
  opacity: 1;
  border-left-color: #a60100;
  transition: none;
}

.charsheet div::-webkit-scrollbar {
  width: 1.2em;
  /* Total width including `border-width` of scrollbar thumb */
  height: 0;
}

.charsheet div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  background-color: transparent;
}

.charsheet div::-webkit-scrollbar-thumb {
  height: 1em;
  border: 0.25em solid rgba(0, 0, 0, 0);
  /* Transparent border together with `background-clip: padding-box` does the trick */
  background-clip: padding-box;
  -webkit-border-radius: 1em;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}

.charsheet div::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

.charsheet .rotate-45 {
  background-color: #000;
  margin: -21px -10px 10px 15px;
  transform: rotate(-45deg);
}

/* fake selector ie a list of checkboxes */

/* click anywhere to close */
.charsheet details:has(.fake-selector)[open] summary::before {
  content: "";
  cursor: auto;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100vw;
}

.charsheet details:has(.fake-selector) {
  justify-items: center;
  align-content: center;
  opacity: .5;
}

.charsheet details[open]:has(.fake-selector),
.charsheet details:has(.fake-selector input:checked) {
  opacity: 1;
}

.ui-dialog .charsheet .wrapper details .fake-selector {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: -10px 0 0 -5px;
  outline: 1px solid #777;
  overflow: hidden;
  position: absolute;
  row-gap: 2px;
  z-index: 5;
}

.charsheet details .fake-selector label {
  justify-content: left;
  margin: auto;
  width: 100%;
  padding: 5px;
}

.ui-dialog .charsheet .wrapper details .fake-selector label span {
  color: #000;
}

.ui-dialog .charsheet .wrapper details .fake-selector label:hover {
  background-color: dodgerblue;
  color: #fff;
}

.ui-dialog .charsheet .wrapper details .fake-selector label:hover span {
  color: #fff;
}

.charsheet .wrapper .span-two,
.charsheet .wrapper .span-three,
.charsheet .wrapper .span-four,
.charsheet .wrapper .span-five,
.charsheet .wrapper .span-six {
  display: inline-flex;
  justify-content: space-evenly;
  width: 100%;
}

.charsheet .span-two {
  grid-column: span 2;
}

.charsheet .span-three {
  grid-column: span 3;
}

.charsheet .span-four {
  grid-column: span 4;
}

.charsheet .span-five {
  grid-column: span 5;
}

.charsheet .span-six {
  grid-column: span 6;
}

/* announcements */
.charsheet input.announcements-show.toggle-monster-only {
  height: 1.5em;
  position: absolute;
  right: 0;
  width: 3.5em;
  top: 3.25em;
  z-index: 2;
}

.charsheet div.announcements input.announcements-show.toggle-monster-only {
  height: 1.75em;
  margin: 10px 0 0 -10px;
  position: absolute;
  right: 7px;
  width: 3em;
}

.charsheet div.announcements.toggle-monster-only input.announcements-show {
  height: 25px;
  opacity: 0;
  position: absolute;
  right: 7px;
  top: 3.5em;
  width: 25px;
  z-index: 3;
}

.charsheet div.announcements.toggle-monster-only .announcements-older-show + input.announcements-show {
  height: 1.5em;
  width: 3em;
  margin: .5em 0 0 -2em;
  z-index: 3;
  position: relative;
  right: -100%;
  top: 0;
}

.charsheet span.announcements-show {
  background-color: #ffffea;
  border: 2px solid black;
  border-radius: 5px;
  float: right;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.75em;
  margin: -3.25em 0 0 -5em;
  padding: 0 4px 0 4px;
  position: relative;
  top: 3.5em;
}

/* dark mode */

.sheet-darkmode .ui-dialog .largedialog {
  background-color: #1f1f1f;
}

.sheet-darkmode .tab-content .tab-pane {
  background-color: #1f1f1f;
}

.sheet-darkmode .tab-content .charsheet .wrapper div.character.tab-contents,
.sheet-darkmode .tab-content .charsheet .wrapper div.stronghold.tab-contents,
.sheet-darkmode .tab-content .charsheet .wrapper div.settings.tab-contents {
  background-color: #1f1f1f;
}

.sheet-darkmode .tab-content .charsheet .wrapper * {
  background-color: transparent;
  color: #e1e1e1;
  font-weight: normal;
}

.sheet-darkmode .tab-content .charsheet .box-indicator button {
  outline: 1px solid #a60100;
}

.sheet-darkmode .tab-content .charsheet .wrapper input[type="checkbox"].input {
  background-color: #999;
  outline: 1px solid #fff;
}

.sheet-darkmode .tab-content .charsheet .wrapper input[type="checkbox"].input::after {
  color: #fff;
  text-shadow: 1px 3px 1px #000;
}

.sheet-darkmode .tab-content .charsheet .wrapper .header-top {
  outline: 1px solid #777;
}

.sheet-darkmode .tab-content .charsheet .wrapper .header-top,
.sheet-darkmode .tab-content .charsheet .wrapper .header-top ~ .column-header-bottom {
  background-color: #0d0d0d;
  color: #d9d9d9;
}

.sheet-darkmode .tab-content .charsheet .wrapper .header-top ~ .column-header-bottom span,
.sheet-darkmode .tab-content .charsheet .wrapper .header-top h1,
.sheet-darkmode .tab-content .charsheet .wrapper .heading-grid,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-box1,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-grid,
.sheet-darkmode .tab-content .charsheet .wrapper .conditions-box1 img,
.sheet-darkmode .tab-content .charsheet .wrapper .heading-box7 img {
  background-color: transparent;
  outline: none;
}

.sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_add:hover,
.sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_edit:hover,
.sheet-darkmode .tab-content .charsheet .wrapper .repcontrol_del:hover {
  background-color: revert;
}

.sheet-darkmode .tab-content .charsheet .wrapper button {
  color: initial;
}

.sheet-darkmode .tab-content .charsheet .wrapper .box-indicator button {
  background: #a60100;
  color: #fff;
  font-weight: normal;
}

.sheet-darkmode .tab-content .charsheet .wrapper .font-color-initial,
.sheet-darkmode .tab-content .charsheet .wrapper .font-color-initial * {
  color: initial;
}

.sheet-darkmode .tab-content .charsheet .wrapper input.dice-selection:hover + span + .font-color-initial {
  color: #fff;
}

.sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative span,
.sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative,
.sheet-darkmode .tab-content .charsheet .wrapper button.rollme-relative::before,
.sheet-darkmode .tab-content .charsheet .wrapper button.rollme span,
.sheet-darkmode .tab-content .charsheet .wrapper button.rollme,
.sheet-darkmode .tab-content .charsheet .wrapper button.rollme::before,
.sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme span,
.sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme,
.sheet-darkmode .tab-content .charsheet .wrapper .skills-row button[type="roll"].rollme::before {
  color: #fff;
  background-color: #a60100;
  background-image: none;
  opacity: 1;
}

.sheet-mode .tab-content .charsheet .wrapper button.roll-button-textonly:hover span {
  color: #fff;
}

.charsheet span.announcements-show::before {
  content: "v";
}

.charsheet span.announcements-show::after {
  content: "l";
  font-family: pictos;
  padding-left: 4px;
}

.charsheet input.announcements-show {
  height: 1.75em;
  margin: -3.25em 0 0 -5em;
  opacity: 0;
  width: 4.75em;
  z-index: 1;
}

.announcements-exit {
  float: right;
  font-family: pictos;
  font-size: 1em;
  margin: 0.5em 0 0 0;
  position: relative;
}

.charsheet input.announcements-show:hover + span,
.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show:hover {
  color: #a60100;
  opacity: 1;
}

.charsheet .announcements-older-text {
  float: right;
  position: absolute;
  right: 3.65em;
  margin: -1.35em 0 0 0;
}

.charsheet input[type="checkbox"].announcements-older-show,
.charsheet input[type="checkbox"].armor-show-more {
  float: right;
  height: 1em;
  margin: -1.1em 0 0 0;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.charsheet .armor-box10-3:hover {
  box-shadow: -.35em -0.6em 0 4px rgb(153 153 153 / 25%);
}

.charsheet .wrapper input[type="checkbox"]:hover.announcements-older-show + span,
.charsheet .wrapper input[type="checkbox"]:hover.armor-show-more + span,
.charsheet .wrapper input[type="checkbox"]:checked.announcements-older-show + span,
.charsheet .wrapper input[type="checkbox"]:checked.armor-show-more + span {
  border-left-color: #a60100;
  color: #a60100;
  opacity: 1;
  transition: none;
}

.charsheet .wrapper input[type="checkbox"].announcements-older-show + span,
.charsheet .wrapper input[type="checkbox"].armor-show-more + span {
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  border: 0.4em solid transparent;
  border-left-color: #c3996b;
  border-width: 0.4em 0.6em;
  content: "";
  float: right;
  height: 0;
  margin: -1em 0 0 0;
  opacity: .75;
  position: relative;
  text-align: center;
  transform-origin: 15% 55%;
  transition: all 0.2s ease;
  width: 0;
  background-color: transparent;
}

.charsheet input.announcements-older-show:checked + span,
.charsheet input.armor-show-more:checked + span,
.charsheet details[open] summary.nav-after::after {
  transform: rotate(90deg);
}


.charsheet .wrapper div.tab-contents.character .announcements-show:not(:checked) + span + div.announcements.toggle-monster-only,
.charsheet .announcements-older-show:not(:checked) ~ .announcements-older-show,
.charsheet input.armor-show-more:not(:checked) ~ .armor-show-more {
  display: none;
}

.charsheet .announcements-older-show:checked + span ~ .announcements-older-show,
.charsheet input.armor-show-more:checked + span ~ .armor-show-more {
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  color: #333;
  display: block;
  margin: 2em;
  padding: 1em;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .attributes-grid .input-number {
  min-width: 3em;
}

/* Hide actual checkbox */
.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show {
  cursor: pointer;
  margin: 1em 0 0 -18em;
  opacity: 0.25;
  position: absolute;
  z-index: 1;
}

.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show:checked {
  display: flex;
  margin: -1.5em 0 0 -18em;
  padding: 2px 0 0 0;
}

.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show,
.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show + span,
.charsheet input.monster_only:checked ~ .wrapper div.character input[type="checkbox"].extra-damage-show:not(:checked) ~ .attributes-box4 > .extra-damage-show + span::before {
  display: none;
}

.charsheet .announcements,
.charsheet .settings-options {
  background-color: #ffffea;
  border: 2px solid #000;
  border-radius: 5px;
  font-family: 'proxima-nova';
  margin: 0 0.5em 4em 0.5em;
  padding: 0 2em 2em 2em;
}

.sheet-darkmode .tab-content .charsheet .announcements,
.sheet-darkmode .tab-content .charsheet .settings-options {
  background-color: #444;
}

.charsheet .wrapper div.tab-contents.character div.announcements.toggle-monster-only {
  margin: auto;
  max-height: 460px;
  min-height: 180px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 5px 10px 5px 10px;
  position: absolute;
  right: 2.75em;
  top: 1.25em;
  width: 70%;
  z-index: 2;
}

.charsheet .announcements h4::first-letter {
  border: 2px solid;
  border-radius: 8px;
  float: left;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 3rem;
  line-height: 1;
  margin: 0 .25rem 0 0;
  padding: 0 .5rem;
}

.charsheet .settings-options {
  padding: 2em 2em 2em 2em;
  top: 1.5em;
}

/* Text */
.charsheet body {
  font-family: "IM Fell English", "Times New Roman", Times, serif;
}

.charsheet h1 {
  color: #fff;
  cursor: default;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 1.1em;
  font-weight: normal;
  letter-spacing: 0.0625em;
  z-index: 0;
}

.charsheet .header-h1 {
  color: #000;
  cursor: default;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: 0.0625em;
  z-index: 0;
}

.charsheet hr.horizontal-rule {
  border-color: #000;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px 0 0 0;
  height: 10px;
  margin-bottom: 0;
  margin-top: 10px;
  overflow: visible;
  width: 90%;
}

.charsheet hr.horizontal-rule::before {
  border-color: #000;
  border-radius: 5px;
  border-style: solid;
  border-width: 0 0 1px 0;
  content: "";
  display: block;
  height: 10px;
  margin-top: -11px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span a[href^="!"],
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span a[href^="~"] {
  background: none;
  background-color: #111;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 2px #666;
  color: #fff;
  font-weight: normal;
  padding: 0 3px 0 3px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-mishap-roll {
  float: right;
  margin: 0 2px 0 2px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-mishap-roll a:after {
  content: '';
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/bane_skull_white.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.25em;
  width: 1.25em;
  margin: 0 -3px -2px 3px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span:hover a[href^="!"],
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span:hover a[href^="~"] {
  background-color: #a60100;
}

.charsheet div.header-top {
  align-items: baseline;
  background-color: #000;
  color: #fff;
  display: grid;
  font-weight: bold;
  grid-column: 1/-1;
  grid-template: inherit;
  margin: 0 0 0 -10px;
  min-height: 3.25em;
  text-align: center;
  width: calc(106% + 2px);
}

.charsheet .attributes-box1 div.header-top {
  width: calc(100% + 2em);
}

.charsheet .attributes-box1 .header-top h1,
.charsheet .conditions-box1.header-top h1 {
  margin: auto;
}


.charsheet .header-top .label {
  color: inherit;
  font-weight: normal;
}

.charsheet .header-top h1 {
  margin: 0;
  line-height: normal;
  grid-column: 1/-1;
}

.charsheet .column-header-bottom {
  align-items: end;
  align-self: end;
  background-color: #000;
  color: #fff;
  cursor: default;
  display: flex;
  font-size: 0.95em;
  font-variant-caps: small-caps;
  font-weight: normal;
  justify-content: center;
  justify-self: center;
  line-height: .85em;
  padding: 0 0 2px 0;
  text-align: center;
}

.charsheet .header-top ~ .column-header-bottom span[data-i18n-title] {
  cursor: help;
}

.charsheet .footer {
  display: block;
  font-size: 0.95em;
  margin: -15px 0 0 -10px;
  text-align: right;
}

.charsheet .inline-label {
  margin: 0 5px 0 0;
  display: inline-flex;
  align-items: center;
}

.charsheet .label,
.charsheet label {
  color: #333;
  cursor: default;
  display: flex;
  font-family: "Inknut Antiqua";
  font-size: 1.1rem;
  font-weight: bold;
  justify-content: center;
  padding: 0 2px 0 2px;
}

.charsheet .header-top .label {
  color: white;
  font-weight: normal;
}

.charsheet .small-caps {
  font-variant-caps: small-caps;
}

.charsheet .equal {
  margin: 4px 1px 0 1px;
  text-align: center;
}

.charsheet .left,
.charsheet .grid-item.left {
  text-align: left;
}

.charsheet .right,
.charsheet .grid-item.right {
  justify-self: right;
  text-align: right;
}

.charsheet .center,
.charsheet .grid-item.center {
  align-self: center;
  text-align: center;
}

.charsheet span.readonly,
.charsheet input.monster_only:checked ~ .wrapper div.character .monster + span.monster.readonly,
.charsheet .wrapper button[type="action"] span.readonly {
  align-items: center;
  align-self: baseline;
  color: #555;
  cursor: help;
  display: inline-flex;
  font-size: 1.75em;
  justify-content: center;
  line-height: inherit;
  margin: -2px 0 0 0;
  width: 100%;
}

/* Hide actual radio */
.charsheet input.skull[type="radio"] {
  flex: auto;
  height: 20px;
  left: 11px;
  margin: 0 5px 0 -10px;
  opacity: 0;
  position: relative;
  top: -1px;
  width: 14px;
  z-index: 1;
}

.charsheet input.skull + span {
  border-radius: 0;
  flex: auto;
  height: 15px;
  margin: 0 0 0 -10px;
  position: relative;
  top: -3px;
  width: 15px;
  z-index: 0;
}

/* Fake radio using skull */
.charsheet input.skull[type="radio"] + span::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_empty.png');
  content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_checked.png');
  display: inline-block;
  font-size: 24px;
  height: 15px;
  line-height: 14px;
  margin: 0 3px 0 3px;
  text-align: center;
  vertical-align: middle;
  width: 15px;
}

/* Removes skull from all radios _after_ selected one */
.charsheet input[type="radio"]:checked ~ input.skull[type="radio"] + span::before,
.charsheet input.skull[type="radio"]:checked ~ input.skull[type="radio"] + span::before {
  content: "";
}

.charsheet input[type="radio"]:checked ~ input.skull[type="radio"]:hover + span::before,
.charsheet input.skull[type="radio"]:checked ~ input.skull[type="radio"]:hover + span::before {
  content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_checked.png');
  opacity: 0.50;
}

/* Only show skulls up to the attributes max value */
.charsheet input[name="attr_strength"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_strength"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_strength"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_strength"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_strength"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_strength"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_strength"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before,
.charsheet input[name="attr_strength"][value="7"] ~ input.skull:nth-of-type(1n+10) + span::before,
.charsheet input[name="attr_strength"][value="8"] ~ input.skull:nth-of-type(1n+11) + span::before,
.charsheet input[name="attr_strength"][value="9"] ~ input.skull:nth-of-type(1n+12) + span::before,
.charsheet input[name="attr_strength"][value="10"] ~ input.skull:nth-of-type(1n+13) + span::before,
.charsheet input[name="attr_strength"][value="11"] ~ input.skull:nth-of-type(1n+14) + span::before,
.charsheet input[name="attr_strength"][value="12"] ~ input.skull:nth-of-type(1n+15) + span::before,
.charsheet input[name="attr_strength"][value="13"] ~ input.skull:nth-of-type(1n+16) + span::before,
.charsheet input[name="attr_strength"][value="14"] ~ input.skull:nth-of-type(1n+17) + span::before,
.charsheet input[name="attr_strength"][value="15"] ~ input.skull:nth-of-type(1n+18) + span::before,
.charsheet input[name="attr_strength"][value="16"] ~ input.skull:nth-of-type(1n+19) + span::before,
.charsheet input[name="attr_strength"][value="17"] ~ input.skull:nth-of-type(1n+20) + span::before,
.charsheet input[name="attr_strength"][value="18"] ~ input.skull:nth-of-type(1n+21) + span::before,
.charsheet input[name="attr_strength"][value="19"] ~ input.skull:nth-of-type(1n+22) + span::before,
.charsheet input[name="attr_strength"][value="20"] ~ input.skull:nth-of-type(1n+23) + span::before,
.charsheet input[name="attr_strength"][value="21"] ~ input.skull:nth-of-type(1n+24) + span::before,
.charsheet input[name="attr_strength"][value="22"] ~ input.skull:nth-of-type(1n+25) + span::before,
.charsheet input[name="attr_strength"][value="23"] ~ input.skull:nth-of-type(1n+26) + span::before,
.charsheet input[name="attr_strength"][value="24"] ~ input.skull:nth-of-type(1n+27) + span::before,
.charsheet input[name="attr_strength"][value="25"] ~ input.skull:nth-of-type(1n+28) + span::before,
.charsheet input[name="attr_strength"][value="26"] ~ input.skull:nth-of-type(1n+29) + span::before,
.charsheet input[name="attr_strength"][value="27"] ~ input.skull:nth-of-type(1n+30) + span::before,
.charsheet input[name="attr_strength"][value="28"] ~ input.skull:nth-of-type(1n+31) + span::before,
.charsheet input[name="attr_strength"][value="29"] ~ input.skull:nth-of-type(1n+32) + span::before,
.charsheet input[name="attr_strength"][value="30"] ~ input.skull:nth-of-type(1n+33) + span::before,
.charsheet input[name="attr_strength"][value="31"] ~ input.skull:nth-of-type(1n+34) + span::before,
.charsheet input[name="attr_strength"][value="32"] ~ input.skull:nth-of-type(1n+35) + span::before,
.charsheet input[name="attr_strength"][value="33"] ~ input.skull:nth-of-type(1n+36) + span::before,
.charsheet input[name="attr_strength"][value="34"] ~ input.skull:nth-of-type(1n+37) + span::before,
.charsheet input[name="attr_strength"][value="35"] ~ input.skull:nth-of-type(1n+38) + span::before,
.charsheet input[name="attr_strength"][value="36"] ~ input.skull:nth-of-type(1n+39) + span::before,
.charsheet input[name="attr_strength"][value="37"] ~ input.skull:nth-of-type(1n+40) + span::before,
.charsheet input[name="attr_strength"][value="38"] ~ input.skull:nth-of-type(1n+41) + span::before,
.charsheet input[name="attr_strength"][value="39"] ~ input.skull:nth-of-type(1n+42) + span::before,
.charsheet input[name="attr_strength"][value="40"] ~ input.skull:nth-of-type(1n+43) + span::before,
.charsheet input[name="attr_strength"][value="41"] ~ input.skull:nth-of-type(1n+44) + span::before,
.charsheet input[name="attr_strength"][value="42"] ~ input.skull:nth-of-type(1n+45) + span::before,
.charsheet input[name="attr_strength"][value="43"] ~ input.skull:nth-of-type(1n+46) + span::before,
.charsheet input[name="attr_strength"][value="44"] ~ input.skull:nth-of-type(1n+47) + span::before,
.charsheet input[name="attr_strength"][value="45"] ~ input.skull:nth-of-type(1n+48) + span::before,
.charsheet input[name="attr_strength"][value="46"] ~ input.skull:nth-of-type(1n+49) + span::before,
.charsheet input[name="attr_strength"][value="47"] ~ input.skull:nth-of-type(1n+50) + span::before,
.charsheet input[name="attr_strength"][value="48"] ~ input.skull:nth-of-type(1n+51) + span::before {
  opacity: 0;
}

.charsheet input[name="attr_agility"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_agility"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_agility"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_agility"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_agility"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_agility"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_agility"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before {
  opacity: 0;
}

.charsheet input[name="attr_wits"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_wits"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_wits"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_wits"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_wits"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_wits"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_wits"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before {
  opacity: 0;
}

.charsheet input[name="attr_empathy"][value="0"] ~ input.skull:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_empathy"][value="1"] ~ input.skull:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_empathy"][value="2"] ~ input.skull:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_empathy"][value="3"] ~ input.skull:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_empathy"][value="4"] ~ input.skull:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_empathy"][value="5"] ~ input.skull:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_empathy"][value="6"] ~ input.skull:nth-of-type(1n+9) + span::before {
  opacity: 0;
}

/* Hide hover style on hidden elements */
.charsheet input[name="attr_strength"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_strength"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_strength"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_strength"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_strength"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_strength"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_strength"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before,
.charsheet input[name="attr_strength"][value="7"] ~ input.skull:hover:nth-of-type(1n+10) + span::before,
.charsheet input[name="attr_strength"][value="8"] ~ input.skull:hover:nth-of-type(1n+11) + span::before,
.charsheet input[name="attr_strength"][value="9"] ~ input.skull:hover:nth-of-type(1n+12) + span::before,
.charsheet input[name="attr_strength"][value="10"] ~ input.skull:hover:nth-of-type(1n+13) + span::before,
.charsheet input[name="attr_strength"][value="11"] ~ input.skull:hover:nth-of-type(1n+14) + span::before,
.charsheet input[name="attr_strength"][value="12"] ~ input.skull:hover:nth-of-type(1n+15) + span::before,
.charsheet input[name="attr_strength"][value="13"] ~ input.skull:hover:nth-of-type(1n+16) + span::before,
.charsheet input[name="attr_strength"][value="14"] ~ input.skull:hover:nth-of-type(1n+17) + span::before,
.charsheet input[name="attr_strength"][value="15"] ~ input.skull:hover:nth-of-type(1n+18) + span::before,
.charsheet input[name="attr_strength"][value="16"] ~ input.skull:hover:nth-of-type(1n+19) + span::before,
.charsheet input[name="attr_strength"][value="17"] ~ input.skull:hover:nth-of-type(1n+20) + span::before,
.charsheet input[name="attr_strength"][value="18"] ~ input.skull:hover:nth-of-type(1n+21) + span::before,
.charsheet input[name="attr_strength"][value="19"] ~ input.skull:hover:nth-of-type(1n+22) + span::before,
.charsheet input[name="attr_strength"][value="20"] ~ input.skull:hover:nth-of-type(1n+23) + span::before,
.charsheet input[name="attr_strength"][value="21"] ~ input.skull:hover:nth-of-type(1n+24) + span::before,
.charsheet input[name="attr_strength"][value="22"] ~ input.skull:hover:nth-of-type(1n+25) + span::before,
.charsheet input[name="attr_strength"][value="23"] ~ input.skull:hover:nth-of-type(1n+26) + span::before,
.charsheet input[name="attr_strength"][value="24"] ~ input.skull:hover:nth-of-type(1n+27) + span::before,
.charsheet input[name="attr_strength"][value="25"] ~ input.skull:hover:nth-of-type(1n+28) + span::before,
.charsheet input[name="attr_strength"][value="26"] ~ input.skull:hover:nth-of-type(1n+29) + span::before,
.charsheet input[name="attr_strength"][value="27"] ~ input.skull:hover:nth-of-type(1n+30) + span::before,
.charsheet input[name="attr_strength"][value="28"] ~ input.skull:hover:nth-of-type(1n+31) + span::before,
.charsheet input[name="attr_strength"][value="29"] ~ input.skull:hover:nth-of-type(1n+32) + span::before,
.charsheet input[name="attr_strength"][value="30"] ~ input.skull:hover:nth-of-type(1n+33) + span::before,
.charsheet input[name="attr_strength"][value="31"] ~ input.skull:hover:nth-of-type(1n+34) + span::before,
.charsheet input[name="attr_strength"][value="32"] ~ input.skull:hover:nth-of-type(1n+35) + span::before,
.charsheet input[name="attr_strength"][value="33"] ~ input.skull:hover:nth-of-type(1n+36) + span::before,
.charsheet input[name="attr_strength"][value="34"] ~ input.skull:hover:nth-of-type(1n+37) + span::before,
.charsheet input[name="attr_strength"][value="35"] ~ input.skull:hover:nth-of-type(1n+38) + span::before,
.charsheet input[name="attr_strength"][value="36"] ~ input.skull:hover:nth-of-type(1n+39) + span::before,
.charsheet input[name="attr_strength"][value="37"] ~ input.skull:hover:nth-of-type(1n+40) + span::before,
.charsheet input[name="attr_strength"][value="38"] ~ input.skull:hover:nth-of-type(1n+41) + span::before,
.charsheet input[name="attr_strength"][value="39"] ~ input.skull:hover:nth-of-type(1n+42) + span::before,
.charsheet input[name="attr_strength"][value="40"] ~ input.skull:hover:nth-of-type(1n+43) + span::before,
.charsheet input[name="attr_strength"][value="41"] ~ input.skull:hover:nth-of-type(1n+44) + span::before,
.charsheet input[name="attr_strength"][value="42"] ~ input.skull:hover:nth-of-type(1n+45) + span::before,
.charsheet input[name="attr_strength"][value="43"] ~ input.skull:hover:nth-of-type(1n+46) + span::before,
.charsheet input[name="attr_strength"][value="44"] ~ input.skull:hover:nth-of-type(1n+47) + span::before,
.charsheet input[name="attr_strength"][value="45"] ~ input.skull:hover:nth-of-type(1n+48) + span::before,
.charsheet input[name="attr_strength"][value="46"] ~ input.skull:hover:nth-of-type(1n+49) + span::before,
.charsheet input[name="attr_strength"][value="47"] ~ input.skull:hover:nth-of-type(1n+50) + span::before,
.charsheet input[name="attr_strength"][value="48"] ~ input.skull:hover:nth-of-type(1n+51) + span::before,

.charsheet input[name="attr_agility"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_agility"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_agility"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_agility"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_agility"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_agility"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_agility"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before,

.charsheet input[name="attr_wits"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_wits"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_wits"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_wits"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_wits"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_wits"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_wits"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before,

.charsheet input[name="attr_empathy"][value="0"] ~ input.skull:hover:nth-of-type(1n+3) + span::before,
.charsheet input[name="attr_empathy"][value="1"] ~ input.skull:hover:nth-of-type(1n+4) + span::before,
.charsheet input[name="attr_empathy"][value="2"] ~ input.skull:hover:nth-of-type(1n+5) + span::before,
.charsheet input[name="attr_empathy"][value="3"] ~ input.skull:hover:nth-of-type(1n+6) + span::before,
.charsheet input[name="attr_empathy"][value="4"] ~ input.skull:hover:nth-of-type(1n+7) + span::before,
.charsheet input[name="attr_empathy"][value="5"] ~ input.skull:hover:nth-of-type(1n+8) + span::before,
.charsheet input[name="attr_empathy"][value="6"] ~ input.skull:hover:nth-of-type(1n+9) + span::before {
  background-image: none;
  content: "";
}

/* Hide pointer events on hover*/
.charsheet input[name="attr_strength"][value="0"] ~ input.skull:nth-of-type(1n+3),
.charsheet input[name="attr_strength"][value="1"] ~ input.skull:nth-of-type(1n+4),
.charsheet input[name="attr_strength"][value="2"] ~ input.skull:nth-of-type(1n+5),
.charsheet input[name="attr_strength"][value="3"] ~ input.skull:nth-of-type(1n+6),
.charsheet input[name="attr_strength"][value="4"] ~ input.skull:nth-of-type(1n+7),
.charsheet input[name="attr_strength"][value="5"] ~ input.skull:nth-of-type(1n+8),
.charsheet input[name="attr_strength"][value="6"] ~ input.skull:nth-of-type(1n+9),
.charsheet input[name="attr_strength"][value="7"] ~ input.skull:nth-of-type(1n+10),
.charsheet input[name="attr_strength"][value="8"] ~ input.skull:nth-of-type(1n+11),
.charsheet input[name="attr_strength"][value="9"] ~ input.skull:nth-of-type(1n+12),
.charsheet input[name="attr_strength"][value="10"] ~ input.skull:nth-of-type(1n+13),
.charsheet input[name="attr_strength"][value="11"] ~ input.skull:nth-of-type(1n+14),
.charsheet input[name="attr_strength"][value="12"] ~ input.skull:nth-of-type(1n+15),
.charsheet input[name="attr_strength"][value="13"] ~ input.skull:nth-of-type(1n+16),
.charsheet input[name="attr_strength"][value="14"] ~ input.skull:nth-of-type(1n+17),
.charsheet input[name="attr_strength"][value="15"] ~ input.skull:nth-of-type(1n+18),
.charsheet input[name="attr_strength"][value="16"] ~ input.skull:nth-of-type(1n+19),
.charsheet input[name="attr_strength"][value="17"] ~ input.skull:nth-of-type(1n+20),
.charsheet input[name="attr_strength"][value="18"] ~ input.skull:nth-of-type(1n+21),
.charsheet input[name="attr_strength"][value="19"] ~ input.skull:nth-of-type(1n+22),
.charsheet input[name="attr_strength"][value="20"] ~ input.skull:nth-of-type(1n+23),
.charsheet input[name="attr_strength"][value="21"] ~ input.skull:nth-of-type(1n+24),
.charsheet input[name="attr_strength"][value="22"] ~ input.skull:nth-of-type(1n+25),
.charsheet input[name="attr_strength"][value="23"] ~ input.skull:nth-of-type(1n+26),
.charsheet input[name="attr_strength"][value="24"] ~ input.skull:nth-of-type(1n+27),
.charsheet input[name="attr_strength"][value="25"] ~ input.skull:nth-of-type(1n+28),
.charsheet input[name="attr_strength"][value="26"] ~ input.skull:nth-of-type(1n+29),
.charsheet input[name="attr_strength"][value="27"] ~ input.skull:nth-of-type(1n+30),
.charsheet input[name="attr_strength"][value="28"] ~ input.skull:nth-of-type(1n+31),
.charsheet input[name="attr_strength"][value="29"] ~ input.skull:nth-of-type(1n+32),
.charsheet input[name="attr_strength"][value="30"] ~ input.skull:nth-of-type(1n+33),
.charsheet input[name="attr_strength"][value="31"] ~ input.skull:nth-of-type(1n+34),
.charsheet input[name="attr_strength"][value="32"] ~ input.skull:nth-of-type(1n+35),
.charsheet input[name="attr_strength"][value="33"] ~ input.skull:nth-of-type(1n+36),
.charsheet input[name="attr_strength"][value="34"] ~ input.skull:nth-of-type(1n+37),
.charsheet input[name="attr_strength"][value="35"] ~ input.skull:nth-of-type(1n+38),
.charsheet input[name="attr_strength"][value="36"] ~ input.skull:nth-of-type(1n+39),
.charsheet input[name="attr_strength"][value="37"] ~ input.skull:nth-of-type(1n+40),
.charsheet input[name="attr_strength"][value="38"] ~ input.skull:nth-of-type(1n+41),
.charsheet input[name="attr_strength"][value="39"] ~ input.skull:nth-of-type(1n+42),
.charsheet input[name="attr_strength"][value="40"] ~ input.skull:nth-of-type(1n+43),
.charsheet input[name="attr_strength"][value="41"] ~ input.skull:nth-of-type(1n+44),
.charsheet input[name="attr_strength"][value="42"] ~ input.skull:nth-of-type(1n+45),
.charsheet input[name="attr_strength"][value="43"] ~ input.skull:nth-of-type(1n+46),
.charsheet input[name="attr_strength"][value="44"] ~ input.skull:nth-of-type(1n+47),
.charsheet input[name="attr_strength"][value="45"] ~ input.skull:nth-of-type(1n+48),
.charsheet input[name="attr_strength"][value="46"] ~ input.skull:nth-of-type(1n+49),
.charsheet input[name="attr_strength"][value="47"] ~ input.skull:nth-of-type(1n+50),
.charsheet input[name="attr_strength"][value="48"] ~ input.skull:nth-of-type(1n+51),

.charsheet input[name="attr_agility"][value="0"] ~ input.skull:nth-of-type(1n+3),
.charsheet input[name="attr_agility"][value="1"] ~ input.skull:nth-of-type(1n+4),
.charsheet input[name="attr_agility"][value="2"] ~ input.skull:nth-of-type(1n+5),
.charsheet input[name="attr_agility"][value="3"] ~ input.skull:nth-of-type(1n+6),
.charsheet input[name="attr_agility"][value="4"] ~ input.skull:nth-of-type(1n+7),
.charsheet input[name="attr_agility"][value="5"] ~ input.skull:nth-of-type(1n+8),
.charsheet input[name="attr_agility"][value="6"] ~ input.skull:nth-of-type(1n+9),

.charsheet input[name="attr_wits"][value="0"] ~ input.skull:nth-of-type(1n+3),
.charsheet input[name="attr_wits"][value="1"] ~ input.skull:nth-of-type(1n+4),
.charsheet input[name="attr_wits"][value="2"] ~ input.skull:nth-of-type(1n+5),
.charsheet input[name="attr_wits"][value="3"] ~ input.skull:nth-of-type(1n+6),
.charsheet input[name="attr_wits"][value="4"] ~ input.skull:nth-of-type(1n+7),
.charsheet input[name="attr_wits"][value="5"] ~ input.skull:nth-of-type(1n+8),
.charsheet input[name="attr_wits"][value="6"] ~ input.skull:nth-of-type(1n+9),

.charsheet input[name="attr_empathy"][value="0"] ~ input.skull:nth-of-type(1n+3),
.charsheet input[name="attr_empathy"][value="1"] ~ input.skull:nth-of-type(1n+4),
.charsheet input[name="attr_empathy"][value="2"] ~ input.skull:nth-of-type(1n+5),
.charsheet input[name="attr_empathy"][value="3"] ~ input.skull:nth-of-type(1n+6),
.charsheet input[name="attr_empathy"][value="4"] ~ input.skull:nth-of-type(1n+7),
.charsheet input[name="attr_empathy"][value="5"] ~ input.skull:nth-of-type(1n+8),
.charsheet input[name="attr_empathy"][value="6"] ~ input.skull:nth-of-type(1n+9) {
  cursor: default;
  pointer-events: none;
}

/* Broken Indicators */
.charsheet input.broken-str[value="0"] ~ div .broken-str,
.charsheet input.broken-agi[value="0"] ~ div .broken-agi,
.charsheet input.broken-wit[value="0"] ~ div .broken-wit,
.charsheet input.broken-emp[value="0"] ~ div .broken-emp {
  color: #a60100;
  font-weight: bold;
}

.charsheet input.broken-str[value="0"] ~ div .broken-str.input-span,
.charsheet input.broken-agi[value="0"] ~ div .broken-agi.input-span,
.charsheet input.broken-wit[value="0"] ~ div .broken-wit.input-span,
.charsheet input.broken-emp[value="0"] ~ div .broken-emp.input-span {
  box-sizing: border-box;
}

/* Fake radio using xbox for Willpower */
.charsheet .willpower-grid input.xbox {
  opacity: 0;
  position: relative;
  right: -4px;
  width: 1.25em;
  z-index: 1;
}

.charsheet .willpower-grid .xbox + span {
  position: relative;
}

.charsheet .willpower-grid .xbox + span::before {
  border-radius: 50%;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  box-shadow: 0 2px 3px #000;
  content: "";
  display: inline-block;
  font-size: 24px;
  height: 18px;
  margin: 0 0 0 -20px;
  text-align: center;
  vertical-align: middle;
  width: 18px;
}

.charsheet .willpower-grid .xbox:checked + span::before,
.charsheet .willpower-grid .xbox:has(~ .xbox:checked) + span::before {
  background-color: #444;
  background-image: none;
  box-shadow: 2px 2px 5px #fff;
  content: "";
  height: 16px;
  outline: 2px solid #000;
  width: 16px;
}

.charsheet .willpower-grid .xbox:checked + span::after {
  background-color: #b3b3b3;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  color: #000;
  content: "3";
  display: inline-block;
  font-family: pictos;
  font-size: 25px;
  height: 15px;
  left: -21px;
  line-height: 13px;
  outline: 2px solid #000;
  outline-offset: -1px;
  padding: 1px 0 3px 1px;
  position: absolute;
  width: 18px;
  z-index: 0;
}

/* Fake radio using xbox for Conditions */
.charsheet .conditions-grid input.xbox + span::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png');
  content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png');
  display: inline-block;
  font-size: 24px;
  height: 15px;
  line-height: 14px;
  margin: -3px 0 0 -21px;
  text-align: center;
  vertical-align: middle;
  width: 15px;
  border-radius: 50%;
  outline: 1px solid #000;
}

.charsheet .conditions-grid input.xbox {
  margin: 1px 0 0 0;
  opacity: 0;
  transform-origin: left;
  transform: scaleX(4.5);
  z-index: 1;
  min-width: 1.5em;
  min-height: 28px;
}

/* Removes xbox from all radios _after_ selected one */
.charsheet .conditions-grid input.xbox:not(:checked) + span::before {
  content: "";
}

/* Fake Action Button */
.charsheet .wrapper button[type="action"].roll-button,
.charsheet .wrapper button[type="roll"].roll-button {
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  border-image: initial;
  border-style: outset;
  border-width: 2px;
  box-sizing: border-box;
  content: "t";
  cursor: pointer;
  display: flex;
  font-family: "dicefontd20";
  font-size: 1.25em;
  height: 1.25em;
  justify-content: center;
  justify-self: center;
  line-height: 1em;
  margin: 5px 2px 5px 2px;
  padding: 0 0 0 0;
  width: 1.25em;
  color: initial;
}

.sheet-darkmode .wrapper button[type="action"].roll-button,
.sheet-darkmode .wrapper button[type="roll"].roll-button {
  color: #444;
  font-weight: bold;
}

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

.charsheet .wrapper button.roll-button-textonly,
.charsheet .wrapper button.dice-pool {
  align-items: center;
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  border-image: initial;
  border-style: outset;
  border-width: 2px;
  color: initial;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.3em;
  font-weight: normal;
  justify-content: center;
  max-width: 4.75em;
  min-height: 1.35em;
  overflow: hidden;
}

.charsheet .wrapper button.roll-button-textonly span,
.charsheet .wrapper button.roll-button-textonly.header-h1 span,
.charsheet .wrapper button.dice-pool span {
  font-size: 0.85em;
  cursor: pointer;
  margin: 0 4px 0 4px;
  background-color: transparent !important;
  color: initial;
}

.charsheet .wrapper button.roll-button-textonly:hover span,
.charsheet .wrapper button.roll-button-textonly.header-h1:hover span,
.charsheet .wrapper button.dice-pool:hover span {
  color: #fff !important;
}

/* api dice toggle */
.charsheet button.api-button {
  border: 1px solid lightblue;
  box-shadow: 2px 2px 3px darkgrey;
  line-height: 0.85em;
}

.charsheet input[type="checkbox"].hidden,
.charsheet .hidden {
  display: none;
}

.charsheet input.hidden.api-toggle-show:checked ~ .template-roll {
  display: none;
}

.charsheet div.grid-item.api-roll {
  display: none;
}

.charsheet input.hidden.api-toggle-show:checked ~ div.grid-item.api-roll {
  display: block;
}

.charsheet input.hidden.api-toggle-show:checked ~ div.grid-item.api-roll button::after {
  content: "w/API";
  margin-right: 2px;
}

/* repcontrol */

/* this sets the formatting for all repcontrol buttons */
.charsheet .itemcontrol {
  z-index: 1;
}

.charsheet .wrapper .repcontrol {
  display: flex;
  justify-content: flex-end;
}

.charsheet .wrapper div.repcontrol button.repcontrol_add,
.charsheet .wrapper div.repcontrol button.repcontrol_edit,
.charsheet .wrapper div.repcontrol button.repcontrol_del {
  box-shadow: none;
  color: transparent;
  height: 1.2em;
  margin: 1px;
  padding: 0 1px 3px 1px;
  width: 2em;
  z-index: 6;
}

.charsheet .repcontrol_move {
  cursor: move;
  float: right;
  margin-right: 5px;
  width: 2em;
}

.charsheet button.btn.repcontrol_edit::after {
  color: black;
  content: '(';
  font-family: Pictos;
  margin: 0 0 0 -38px;
  padding: 0 6px 0 6px;
}

.charsheet .repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit::after {
  margin: 0 0 0 -28px;
}

.charsheet button.btn.repcontrol_add::after {
  color: black;
  content: '&';
  font-family: Pictos;
  margin: 0 0 0 -31px;
  padding: 0 6px 0 12px;
}

.charsheet button.btn:hover.repcontrol_edit::after,
.charsheet button.btn:hover.repcontrol_add::after,
.charsheet button.btn:hover.repcontrol_del::after {
  color: #a60100;
}

.charsheet a.btn.repcontrol_move:hover {
  color: #a60100;
}

.charsheet button.btn.btn-danger.pictos.repcontrol_del:hover {
  color: #fff;
}

/* Sheet Tabs */
.charsheet div.tab-contents {
  display: none;
}

/* background image */
.charsheet input[value="1"].background-selected:checked ~ .wrapper {
  background-image: none;
  background-color: transparent;
}

.charsheet input[value="2"].background-selected:checked ~ .wrapper {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/back.jpg");
  background-size: cover;
  background-position: center top;
}

.charsheet input[value="3"].background-selected:checked ~ .wrapper {
  background-color: floralwhite;
}

.charsheet input[value="4"].background-selected:checked ~ .wrapper {
  background-color: rgb(105 105 105 / 65%);
}

.sheet-darkmode .charsheet input[value="1"].background-selected:checked ~ .wrapper,
.sheet-darkmode .charsheet input[value="2"].background-selected:checked ~ .wrapper,
.sheet-darkmode .charsheet input[value="3"].background-selected:checked ~ .wrapper,
.sheet-darkmode .charsheet input[value="4"].background-selected:checked ~ .wrapper {
  background-image: none;
  background-color: #1f1f1f;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .toggle-monster-only {
  display: none;
}

.charsheet span.weapons-box28.readonly::before,
.charsheet span.weapons-box31.readonly::before,
.charsheet span.weapons-box36.readonly::before,
.charsheet span.weapons-box45.readonly::before,
.charsheet span.armor-box5.readonly::before,
.charsheet span.shield-box9.readonly::before,
.charsheet .skills-row span.readonly::before,
.charsheet .monster-stats-box18 span.input-span::before {
  align-self: center;
  color: #777;
  content: '=';
  font-size: 16px;
  margin: .35em 0 0 -1.5em;
  align-items: center;
  display: inline-flex;
  position: absolute;
}

/* Monster View */
.charsheet .monster,
.charsheet .monster + span {
  display: none;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .monster,
.charsheet input.monster_only:checked ~ .wrapper div.character input.monster,
.charsheet input.monster_only:checked ~ .wrapper div.character .monster + span {
  display: block;
}

.charsheet input[type="radio"].tab {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  float: left;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1em;
  height: 20px;
  margin: 34px 1px 0 1px;
  outline: none;
  position: relative;
  width: 90px;
  z-index: 1;
}

.charsheet input[type="radio"].tab.settings {
  background-color: transparent;
  font-family: "pictos";
  margin-left: -2px;
  width: 25px;
  z-index: 1;
}

.charsheet input.tab::before {
  background: #ddd;
  border: 2px solid #ccc;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  color: #444;
  content: attr(title);
  display: block;
  height: 16px;
  line-height: 18px;
  padding-bottom: 1px;
  text-align: center;
  width: 90px;
}

.charsheet input.tab.settings::before {
  content: "y";
  margin: 0 0 0 2px;
  width: 20px;
  color: #c3996b;
  text-shadow: -1px 1px #000;
}

.charsheet input.tab.character:checked,
.charsheet input.tab.stronghold:checked,
.charsheet input.tab.monster_only:checked,
.charsheet input.tab.settings:checked {
  opacity: 1;
  z-index: 2;
}

.charsheet input.tab.character:hover,
.charsheet input.tab.stronghold:hover,
.charsheet input.tab.monster_only:hover,
.charsheet input.tab.settings:hover {
  opacity: 1;
  z-index: 3;
}

.charsheet input.tab.character:hover::before,
.charsheet input.tab.stronghold:hover::before,
.charsheet input.tab.monster_only:hover::before {
  background: #f5f5f5;
  border-bottom: none;
  border-color: #aaa;
  height: 22px;
  margin: -3px 0 0 0;
  width: 92px;
  z-index: 3;
}

.charsheet input.tab.settings:hover::before {
  background: #f5f5f5;
  border-bottom: none;
  border-color: #aaa;
  width: 22px;
  z-index: 3;
}

.charsheet input.tab:active,
.charsheet input.tab:focus {
  outline: none;
}

.charsheet input.tab:hover::before {
  background: #e3e3e3;
  font-weight: bold;
  height: 20px;
  margin: -3px 0 0 -2px;
}

.charsheet input.tab:checked::before,
.charsheet input.tab:checked:hover::before {
  background: #000;
  border: 2px solid #444;
  border-bottom: 2px solid transparent;
  color: #fff;
  font-weight: normal;
  height: 20px;
  margin: -3px 0 0 -2px;
  width: 92px;
}

.charsheet input.tab.settings:checked::before,
.charsheet input.tab.settings:checked:hover::before {
  width: 20px;
  font-weight: normal;
}

/* hides radio selector */
.charsheet input.tab.character:checked::after,
.charsheet input.tab.stronghold:checked::after,
.charsheet input.tab.monster_only:checked::after,
.charsheet input.tab.settings:checked::after {
  opacity: 0;
}

.charsheet .wrapper {
  background-color: inherit;
  box-sizing: border-box;
  color: #000;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  height: 100%;
  left: -22px;
  min-width: 875px;
  padding: 2.5em 0 0 0;
  position: relative;
  top: 4.52em;
  width: 100%;
}

/* using :after so that the opacity can be adjusted for border-background for darkmode*/
.charsheet .wrapper:after {
  border: 1px solid #000;
  border-image-outset: 36 0 0 0;
  border-image-repeat: stretch;
  border-image-slice: 64 0 70 0;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wrapper_border.png');
  border-image-width: 70px 0 60px 0;
  content: '';
  left: -5px;
  min-width: 875px;
  padding: 2.5em 0 0 0;
  position: absolute;
  top: 0;
  height: calc(100% - 1em);
  width: calc(100% + 6px);
}

.charsheet input.character:checked ~ .wrapper div.character,
.charsheet input.stronghold:checked ~ .wrapper div.stronghold,
.charsheet input.monster_only:checked ~ .wrapper div.character,
.charsheet input.settings:checked ~ .wrapper div.settings {
  background-color: transparent;
  display: inline-block;
  min-width: 875px;
  padding: 0;
  position: relative;
  width: 100%;
  top: -25px;
  margin-bottom: -32px;
}

.charsheet input.character:checked ~ .wrapper div.character > div,
.charsheet input.stronghold:checked ~ .wrapper div.stronghold > div,
.charsheet input.monster_only:checked ~ .wrapper div.character > div,
.charsheet input.settings:checked ~ .wrapper div.settings > div {
  position: relative;
  z-index: 1;
  padding: 0 0 2em 0;
}

.charsheet input.settings:checked ~ .wrapper div.settings > div {
  padding: 1em;
}

/* sets border-image to inverted image and lowers opacity */
.sheet-darkmode .tab-content .charsheet .wrapper:after {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wrapper_border_inverted.png');
  opacity: .75;
}

.charsheet .logo {
  margin-bottom: -2px;
  max-height: 56px;
  min-width: 820px;
  text-align: right;
  position: absolute;
  right: 3em;
  top: 5.5em;
}

.charsheet .logo-image {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 70px;
  margin: -15px 0 0 0;
  width: 220px;
}

.charsheet.lang-sv .logo-image {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_logo_sv.png');
}

.charsheet input {
  color: #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.charsheet .wrapper .input:focus,
.charsheet .wrapper .input:focus option,
.charsheet .wrapper input[type="text"].input:focus,
.charsheet .wrapper input[type="number"].input:focus,
.charsheet .wrapper input[type="text"].input:focus,
.charsheet .wrapper input[type="number"].input:focus,
.charsheet .wrapper input[type="text"].input-number:focus,
.charsheet .wrapper input[type="number"].input-number:focus,
.charsheet .wrapper .input-textarea:focus,
.charsheet .wrapper textarea:focus {
  outline: none;
  color: initial;
  background-color: #d9d9d9;
}

.charsheet .input,
.charsheet input[type="text"].input,
.charsheet input[type="number"].input {
  color: #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: 2.25em;
  text-align: center;
  width: 100%;
}

.charsheet input[type="text"].input-number,
.charsheet input[type="number"].input-number {
  color: #000;
  max-height: 2.25em;
  max-width: 3em;
  padding: 4px 2px 4px 2px;
  text-align: center;
  width: 100%;
}

.charsheet input[type="text"].input-number.small-width,
.charsheet input[type="number"].input-number.small-width,
.charsheet select.input.small-width {
  width: 3em;
  justify-self: center;
}

.charsheet select.input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #000;
  margin: 0;
  min-width: 3em;
  text-align-last: center;
  text-align: center;
  width: 100%;
}

.charsheet select.input:hover {
  appearance: none;
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  padding: 4px;
}

.charsheet input.input.input-number-center {
  display: flex;
  justify-self: center;
  text-align: center;
  width: 3em;
}

/* change checkbox appearance */
.charsheet input[type="checkbox"] {
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  height: 1em;
  outline: none;
  vertical-align: text-bottom;
  width: 1em;
}

.charsheet input[type="checkbox"]:checked {
  -moz-appearance: auto;
  -o-appearance: auto;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #000;
}

/* end checkbox appearance */

/* change radio appearance */
.charsheet input[type="radio"] {
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  height: 1em;
  outline: none;
  vertical-align: text-bottom;
  width: 1em;
}

.charsheet input[type="radio"].xbox {
  opacity: 0;
}

.charsheet input[type="radio"]:checked {
  border: 1px solid transparent;
  border-radius: 50%;
  vertical-align: text-bottom;
}

.charsheet input[type="radio"].tab:checked::after,
.charsheet input[type="radio"].tab:not(:checked)::after,
.charsheet input[type="radio"].skull:checked::after,
.charsheet input[type="radio"].skull:not(:checked)::after {
  display: none;
}

.charsheet button.reset {
  height: 1em;
  opacity: 0;
  position: relative;
  right: -18px;
  width: .5em;
}

.charsheet button.reset + span::after {
  content: "1";
  font-family: pictos;
  font-size: 1.35em;
  left: -6px;
  position: relative;
}

.charsheet input[type="radio"]:checked::after,
.charsheet input[type="radio"]:not(:checked)::after {
  content: "1";
  font-family: pictos;
  font-size: 1.35em;
  position: relative;
  top: -5px;
}

.charsheet button.reset:hover + span::after,
.charsheet input[type="radio"]:hover:checked::after,
.charsheet input[type="radio"]:hover:not(:checked)::after {
  color: #a60002;
  font-weight: bold;
  opacity: 1;
}

/* end radio appearance */

.charsheet input[type="checkbox"].input {
  align-self: center;
  height: 11px;
  justify-self: center;
  width: 11px;
}

.charsheet .input-textarea {
  box-sizing: border-box;
  color: #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: 2.25em;
  line-height: 1.1em;
  margin: 0;
  min-height: 2.25em;
  overflow: hidden;
  padding: 0 2px 0 5px;
  resize: vertical;
  text-wrap: pretty;
  width: 100%;
}

.charsheet .input-textarea.medium {
  height: 3.5em;
  min-height: 2.25em;
}

.charsheet .input-textarea.tall {
  height: 5.5em;
  min-height: 2.25em;
}

.charsheet input[disabled].input-number,
.charsheet input[readonly].input,
.charsheet textarea[disabled].input,
.charsheet textarea[readonly].input,
.charsheet input[readonly].input-number {
  background-color: #eee;
  border-color: #6e6e6e;
  color: #6e6e6e;
  cursor: help;
  font-style: italic;
  text-align: center;
}

.charsheet button > input.input {
  max-height: 1.75em;
}

.charsheet button[type="action"] {
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  border-image: initial;
  border-radius: 5px;
  border-style: outset;
  border-width: 2px;
  z-index: 3;
}

/* hide spinner in FF number inputs */
.charsheet input[type="number"]:not(:hover)::-webkit-inner-spin-button,
.charsheet input[type="number"]:not(:hover)::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.charsheet input[type="number"]:not(:hover) {
  appearance: none;
  -moz-appearance: textfield;
}

/* highlight rows on hover */
.charsheet .wrapper .itemcontrol + div:hover,
.charsheet .wrapper .skills-grid span.skills-row:hover {
  background-color: #bfbfbf80;
  color: initial;
}

.sheet-darkmode .tab-content .charsheet .wrapper .itemcontrol + div:hover .input,
.sheet-darkmode .tab-content .charsheet .wrapper .skills-grid span.skills-row:hover * {
  color: initial;
}

/* show/hide areas */

/* from Sheet Settings */
.charsheet .display-mount:not(:checked) ~ .wrapper section.mount {
  display: none;
}

.charsheet .display-cart:not(:checked) ~ .wrapper section.cart {
  display: none;
}

.charsheet .display-beasts:not(:checked) ~ .wrapper div.character-beasts {
  display: none;
}

.charsheet .display-spells:not(:checked) ~ .wrapper div.character-spells {
  display: none;
}

.charsheet .wrapper .expand {
  left: -5px;
  opacity: 0;
  position: absolute;
  top: -3px;
  width: 15px;
  z-index: 6;
}

.charsheet input.expand + span::before {
  color: #c3996b;
  content: "y";
  cursor: pointer;
  font-family: pictos;
  font-size: 14px;
  height: 16px;
  left: -3px;
  position: absolute;
  top: -5px;
  width: 13px;
  z-index: 4;
}

.sheet-darkmode .tab-content .charsheet .wrapper input.expand + span::before {
  opacity: .5;
  color: #c8932e;
}

.charsheet input.expand + span::before,
.charsheet input.expand:checked + span::before {
  opacity: 0.25;
}

.charsheet .repitem .weapons-grid:hover input.expand + span::before,
.charsheet .repitem .monster-attacks-grid:hover input.expand + span::before,
.charsheet .repitem .talents-grid:hover input.expand + span::before,
.charsheet .armor-box10:hover input.expand + span::before,
.charsheet .armor-box10-2:hover input.expand + span::before,
.charsheet .armor-box10-3:hover input.expand + span::before,
.charsheet .armor-box10-4:hover input.expand + span::before,
.charsheet .armor-box10-5:hover input.expand + span::before,
.charsheet .shield-box14:hover input.expand + span::before,
.charsheet .repitem .gear-grid:hover input.expand + span::before,
.charsheet .mount-grid:hover input.expand + span::before,
.charsheet .repitem .mount_gear-grid:hover input.expand + span::before,
.charsheet .repitem .cart_gear-grid:hover input.expand + span::before,
.charsheet .repitem .spells-grid:hover input.expand + span::before,
.charsheet .skills-row:hover input.expand + span::before {
  opacity: 0.85;
}

.charsheet input.tab.settings:hover::before,
.charsheet .wrapper input.expand:hover + span::before,
.sheet-darkmode .charsheet input.tab.settings:hover::before,
.sheet-darkmode .charsheet .wrapper input.expand:hover + span::before {
  opacity: 1;
  font-size: 16px;
  color: #a60100;
}

.charsheet input.tab.settings:hover,
.charsheet .wrapper input.expand:hover,
.sheet-darkmode .charsheet input.tab.settings:hover,
.sheet-darkmode .charsheet .wrapper input.expand:hover {
  height: 1.2em;
}

.charsheet input.expand ~ .input-textarea,
.charsheet .repitem input.expand ~ .input-textarea,
.charsheet input.expand ~ .weapons-subgrid,
.charsheet input.expand ~ .armor-row2,
.charsheet input.expand ~ .shield-row2,
.charsheet input.expand ~ .animal-handling-row2,
.charsheet input.expand ~ .crafting-row2,
.charsheet input.expand ~ .endurance-row2,
.charsheet input.expand ~ .healing-row2,
.charsheet input.expand ~ .insight-row2,
.charsheet input.expand ~ .lore-row2,
.charsheet input.expand ~ .manipulation-row2,
.charsheet input.expand ~ .marksmanship-row2,
.charsheet input.expand ~ .melee-row2,
.charsheet input.expand ~ .might-row2,
.charsheet input.expand ~ .move-row2,
.charsheet input.expand ~ .performance-row2,
.charsheet input.expand ~ .scouting-row2,
.charsheet input.expand ~ .sleight-of-hand-row2,
.charsheet input.expand ~ .stealth-row2,
.charsheet input.expand ~ .survival-row2,
.charsheet input.expand ~ .spells-row2 {
  display: none;
}

.charsheet input.expand:checked ~ .weapons-subgrid,
.charsheet input.expand:checked ~ .armor-row2,
.charsheet input.expand:checked ~ .shield-row2,
.charsheet input.expand:checked ~ .animal-handling-row2,
.charsheet input.expand:checked ~ .crafting-row2,
.charsheet input.expand:checked ~ .endurance-row2,
.charsheet input.expand:checked ~ .healing-row2,
.charsheet input.expand:checked ~ .insight-row2,
.charsheet input.expand:checked ~ .lore-row2,
.charsheet input.expand:checked ~ .manipulation-row2,
.charsheet input.expand:checked ~ .marksmanship-row2,
.charsheet input.expand:checked ~ .melee-row2,
.charsheet input.expand:checked ~ .might-row2,
.charsheet input.expand:checked ~ .move-row2,
.charsheet input.expand:checked ~ .performance-row2,
.charsheet input.expand:checked ~ .scouting-row2,
.charsheet input.expand:checked ~ .sleight-of-hand-row2,
.charsheet input.expand:checked ~ .stealth-row2,
.charsheet input.expand:checked ~ .survival-row2,
.charsheet input.expand:checked ~ .spells-row2 {
  border: 2px dotted #c3996b;
  box-sizing: border-box;
  display: grid;
  margin: 0;
  width: 100%;
}

.charsheet input.expand:checked ~ .input-textarea,
.charsheet details[open] .expanded-area {
  border: 2px dotted #c3996b;
  box-sizing: border-box;
  display: block;
  height: 4.5em;
  grid-column: 1/-1;
  line-height: 1.2em;
  margin: 0;
  min-height: 2em;
  overflow-y: auto;
  overflow: hidden;
}

/* warning border*/
.charsheet input[type="checkbox"].warning:checked ~ .over-encumbered {
  background-color: #a60100;
  border: 2px dotted #777;
  color: #fff;
}

/* indicates an input error */
.charsheet input[type='checkbox'].error:checked + label input {
  color: red;
  background-color: #ff000070;
  outline: 2px solid red;
}
.charsheet input[type='checkbox'].error + label {
  margin: auto;
  position: relative;
}

.charsheet input[type='checkbox'].error:checked + label::after {
  color: red;
  content: '!';
  font-family: 'Pictos';
  font-size: 2em;
  font-weight: normal;
  position: absolute;
  right: 2px;
  top: 2px;
}

/* character grid layout */

.charsheet .character-grid {
  display: grid;
  grid-column-gap: 0;
  grid-row-gap: 4px;
  grid-template-columns: 34% 1fr 1fr;
  margin: 0 0 0 0;
}

.charsheet .box {
  border: 1px solid #000;
  border-radius: 4px;
  padding: 0 5px 0 5px;
  text-align: left;
}

.charsheet .character-heading {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner.png');
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: 100% 110px;
  border: none;
  display: flex;
  grid-column: 1/4;
  grid-row-start: 1;
  height: 86px;
  justify-content: space-evenly;
  justify-self: stretch;
  padding: 10px;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-heading {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner_inverted.png');
  background-color: transparent;
}

.charsheet .character-attributes {
  grid-column-start: 1;
}

/* monster version of attributes */
.charsheet input.monster_only:checked ~ .wrapper div.character .character-attributes {
  background-color: inherit;
  background-image: none;
  border: 7px solid #000;
  border-image-repeat: repeat;
  border-image-slice: 0 20 20 20;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png');
  border-image-width: 0 10px 10px 10px;
  border-top-width: 0;
  padding: 0 0 1em 0;
  position: relative;
  top: 1.5em;
  display: inline-grid;
  grid-column: 1/3;
  height: fit-content;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1.5em 0;
}

.sheet-darkmode .tab-content .charsheet input.monster_only:checked ~ .wrapper div.character .character-attributes {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png');
}

.charsheet .character-details {
  background-color: inherit;
  border: 5px solid #000;
  border-bottom-width: 18px;
  border-image-repeat: initial;
  border-image-slice: 25 25 35 25;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border.png');
  border-image-width: 15px 15px 15px 15px;
  border-top-width: 18px;
  grid-column-start: 2;
  margin-block: 0;
  margin-inline: auto;
  padding: 5px;
  width: 90%;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-details {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border_inverted.png');
}

.charsheet .character-appearance {
  grid-column-start: 3;
}

.charsheet div.character-conditions {
  grid-column: 1/2;
  grid-row: 3/5;
  height: fit-content;
  padding: 0;
}

/* add fbl applique border/backgrounds */
.charsheet .character-appearance,
.charsheet .character-conditions {
  background-color: inherit;
  border: 10px solid #000;
  border-bottom-width: 18px;
  border-image-repeat: initial;
  border-image-slice: 0 25 40 25;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border.png');
  border-image-width: 0 15px 30px 15px;
  border-top-width: 0;
  height: 85%;
  margin: 0;
  padding: 0 2px 0 2px;
}

.charsheet .character-attributes {
  background-color: transparent;
  border: none;
  height: auto;
  position: relative;
  width: calc(100% - 10px);
}

.charsheet input.monster_only:not(:checked) ~ .wrapper .character .character-attributes::before {
  content: "";
  background-color: inherit;
  background-image: url('https://raw.githubusercontent.com/vince-roll20/roll20-character-sheets/refs/heads/FBL/Forbidden_Lands/images/FBL_ability_%20banners.png');
  background-position-y: 45px;
  background-repeat: no-repeat;
  background-size: 100% 198px;
  height: 244px;
  width: calc(100% + 1px);
  opacity: .8;
  position: absolute;
  z-index: -1;
}

.sheet-darkmode .tab-content .charsheet input.monster_only:not(:checked) ~ .wrapper .character-attributes::before {
  background-image: url('https://raw.githubusercontent.com/vince-roll20/roll20-character-sheets/refs/heads/FBL/Forbidden_Lands/images/FBL_ability_%20banners_inverted.png');
  opacity: .65;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-attributes,
.sheet-darkmode .tab-content .charsheet .wrapper .character-appearance,
.sheet-darkmode .tab-content .charsheet .wrapper .character-conditions {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_small_column_border_inverted.png');
}

.charsheet .character-injuries,
.charsheet .character-weapons,
.charsheet .character-beasts,
.charsheet .character-notes,
.charsheet .character-armor,
.charsheet .character-relationships,
.charsheet .character-spells,
.charsheet .stronghold-functions,
.charsheet .stronghold-hirelings,
.charsheet .stronghold-stockpile,
.charsheet .stronghold-notes {
  background-color: inherit;
  border: 7px solid #000;
  border-bottom-width: 18px;
  border-image-slice: 0 25 40 25;
  border-image-width: 0 15px 30px 15px;
  border-image-repeat: round repeat;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_large_box_border.png');
  border-top-width: 0;
  margin: 0 0 5px 0;
  padding: 0;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-injuries,
.sheet-darkmode .tab-content .charsheet .wrapper .character-weapons,
.sheet-darkmode .tab-content .charsheet .wrapper .character-beasts,
.sheet-darkmode .tab-content .charsheet .wrapper .character-notes,
.sheet-darkmode .tab-content .charsheet .wrapper .character-armor,
.sheet-darkmode .tab-content .charsheet .wrapper .character-relationships,
.sheet-darkmode .tab-content .charsheet .wrapper .character-spells,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-functions,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-hirelings,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-stockpile,
.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-notes {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_large_box_border_inverted.png');
}

.charsheet .character-beasts,
.charsheet .character-notes {
  grid-column: 1/3;
}

.charsheet .character-weapons {
  grid-column: 1/4;
  grid-row-start: 5;
}

.charsheet .character-injuries {
  grid-column: 2/4;
  grid-row-start: 4;
}

.charsheet .character-armor,
.charsheet .character-spells {
  grid-column: 1/3;
  height: fit-content;
  padding: 0 0 8px 0;
}

.charsheet .character-skills,
.charsheet .character-dice_pool {
  background-color: inherit;
  border: 7px solid #000;
  border-image-repeat: repeat;
  border-image-slice: 0 20 20 20;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png');
  border-image-width: 0 10px 10px 10px;
  border-top-width: 0;
  margin: -2px 0 0 0;
  padding: 0 0 0 0;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-skills,
.sheet-darkmode .tab-content .charsheet .wrapper .character-dice_pool {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png');
}

.charsheet .character-skill-dice-box {
  border: none;
  display: flex;
  grid-column: 1/3;
  grid-row-start: 6;
  justify-content: space-evenly;
  padding: 0;
  width: 100%;
}

.charsheet .character-skills {
  min-width: 20em;
  width: 50%;
}

.charsheet .character-dice_pool {
  background-color: #ffffea;
  min-width: 20em;
  width: 40%;
}

.charsheet input.dice_only:checked ~ .wrapper div.character .character-dice_pool {
  width: 100%;
}

.charsheet input.dice_only:checked ~ .wrapper div.character .box.character-skill-dice-box {
  display: flex;
  grid-column: 1/4;
  justify-self: center;
  margin-top: -1.5em;
  min-width: 20em;
}

.charsheet .character-column3 {
  border: none;
  grid-column-start: 3;
  grid-row-end: span 9;
  height: fit-content;
  width: 97%;
}

.charsheet .character-talents {
  height: fit-content;
}

.charsheet .character-gear {
  height: fit-content;
}

.charsheet .character-mount {
  height: fit-content;
}

/* Consumables Images */
.charsheet button.food::before {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_blk.png');
}

.charsheet button.water::after {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_blk.png');
}

.charsheet button.arrows::before {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_blk.png');
}

.charsheet button.torches::after {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_blk.png');
}

/*show white image on hover*/
.charsheet button.food:hover::before {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_wht.png');
}

.charsheet button.water:hover::after {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_wht.png');
}

.charsheet button.arrows:hover::before {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_wht.png');
}

button.torches:hover::after {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_wht.png');
}

.charsheet button.food::before,
.charsheet button.water::after,
.charsheet button.arrows::before,
.charsheet button.torches::after {
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 32px;
  margin: -3px 6px 0 0;
  width: 32px;
}

.charsheet button.torches::after {
  margin: -3px 6px 0 -10px;
}

.charsheet .gear-grid button.roll-button-textonly.header-h1 {
  margin: 0;
  padding: 2px;
  width: 75%;
  justify-self: center;
  max-width: 8em;
}

.charsheet .character-coins,
.charsheet .character-consumables {
  background-color: inherit;
  border: 7px solid #000;
  border-bottom-width: 18px;
  border-image-repeat: repeat;
  border-image-slice: 0 25 40 25;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_border.png');
  border-image-width: 0 15px 15px 15px;
  border-top-width: 0;
  height: fit-content;
  padding: 0 2px 0 2px;
}

.sheet-darkmode .tab-content .charsheet .wrapper .character-coins,
.sheet-darkmode .tab-content .charsheet .wrapper .character-consumables {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_border_inverted.png');
}

.charsheet .character-willpower {
  border: none;
  border: 15px solid #000;
  border-image-repeat: round;
  border-image-slice: 25 25 35 25;
  border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border.png);
  border-image-width: 19px 15px 19px 15px;
  display: grid;
  grid-column: 2/4;
  grid-row-start: 3;
  grid-template-columns: 3fr 4px 1fr;
  padding: 0 1em 1em 1em;
}

.sheet-darkmode .charsheet .character-willpower {
  border-image-source: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border_inverted.png);
}

.charsheet .character-spells {
  grid-row-start: 8;
}

.charsheet .character-relationships {
  grid-row-start: 9;
  height: auto;
}

/* ---------------------------------- Heading */
.charsheet .heading-grid {
  align-items: center;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 1em 3em auto;
  justify-content: space-around;
  width: 90%;
}

.charsheet .heading-grid div:nth-child(even),
.charsheet .heading-grid div:nth-child(even) input {
  text-align: center;
  width: 11.5em;
}

.charsheet .heading-box1 {
  display: flex;
  flex-direction: row-reverse;
}

.charsheet .heading-box2 {
  align-self: flex-end;
  display: flex;
  justify-self: center;
  margin: 0 0 -60px 0;
  z-index: 2;
}

.charsheet .heading-box3 {
  margin-inline: auto;
  margin-left: 0;
}

.charsheet .heading-box5 {
  align-self: flex-end;
  display: flex;
  justify-self: center;
  margin: 0 0 -40px 0;
}

/* raven image*/
.charsheet .heading-box7 {
  grid-column: 3;
  grid-row: 3;
}

.charsheet .heading-box7 .raven-image {
  background-color: transparent !important;
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_raven1.png");
  background-repeat: no-repeat;
  height: 7.7em;
  filter: sepia(.25);
  margin: -2.2em 0 0 -9.25em;
  pointer-events: none;
  position: relative;
  transform: rotate(5deg);
  z-index: 1;
}


.sheet-darkmode .tab-content .charsheet .wrapper .heading-box7 .raven-image {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_raven1_inverted.png");
  filter: brightness(0) drop-shadow(2px 3px 0 #fff) sepia(.25);
}


/* ---------------------------------- Attributes */
.charsheet .attributes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0 0 5px;
  row-gap: 10px;
  width: calc(100% - 15px);
}

.charsheet input.monster_only:not(:checked) ~ .wrapper .character .character-attributes {
  max-width: 360px;
  margin-inline: auto;
}

.charsheet .attributes-grid > div:first-child {
  margin-bottom: 0.5em;
}

.charsheet .attributes-grid .input-span {
  color: #333;
  left: -5px;
  position: relative;
  top: -3px;
}

.charsheet .attributes-grid > div:not(.attributes-box1) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 2px 0 2px 0;
}

.charsheet .attributes-grid > .attributes-box2,
.charsheet .attributes-grid > .attributes-box6,
.charsheet .attributes-grid > .attributes-box10,
.charsheet .attributes-grid > .attributes-box14 {
  font-size: 1.2em;
  justify-content: space-around;
  min-width: 4.5em;
  width: 30%;
}

.charsheet .attributes-grid > .attributes-box3,
.charsheet .attributes-grid > .attributes-box5,
.charsheet .attributes-grid > .attributes-box7,
.charsheet .attributes-grid > .attributes-box9,
.charsheet .attributes-grid > .attributes-box11,
.charsheet .attributes-grid > .attributes-box13,
.charsheet .attributes-grid > .attributes-box15,
.charsheet .attributes-grid > .attributes-box17 {
  justify-content: left;
  width: 2.5em;
}

.charsheet .attributes-grid > .attributes-box4,
.charsheet .attributes-grid > .attributes-box8,
.charsheet .attributes-grid > .attributes-box12,
.charsheet .attributes-grid > .attributes-box16 {
  justify-content: space-between;
  min-width: 9.25em;
  width: 45%;
}

.charsheet .attributes-box1 {
  width: 100%;
}

.charsheet .input-span {
  align-items: center;
  box-sizing: border-box;
  color: #555;
  cursor: help;
  display: flex;
  font-size: 3.6rem;
  height: 34px;
  justify-content: center;
  margin: 0 0 0 -3px;
  padding: 0 0 5px 0;
  width: 34px;
  z-index: 1;
}

/*ability buttons*/
.charsheet .attributes-grid button[type="action"] {
  height: 2em;
  padding: 0;
  width: 100%;
  max-width: 9em;
}

.charsheet .attributes-grid button[type="action"] > span {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
}

/*skills buttons*/
.charsheet .skills-grid button[type="action"] > span:first-child {
  font-size: 1em;
}

/* displays the associated attribute on each skill button*/
.charsheet .skills-grid button[type="action"] > :not(span:first-of-type) {
  display: inline-flex;
  float: right;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: .85em;
  margin: 0 1px 0 1px;
  position: relative;
}

/* -----------------------------------Monster Tab layout */
.charsheet input.monster_only:checked ~ .wrapper div.character .character-grid {
  grid-template-columns: auto auto 22em;
  margin: 0;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .character-grid .character-skill-dice-box > div {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: -webkit-fill-available;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .monster-attacks {
  border: none;
  grid-column: 1/3;
  grid-row-start: 2;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .box.character-skill-dice-box {
  border: none;
  display: grid;
  grid-column-start: 3;
  grid-row-end: span 4;
  grid-row-start: 1;
  margin: 0 0 0 0;
  padding: 0;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .character-grid .character-skill-dice-box div.character-skills {
  grid-column-start: 3;
  grid-row-start: 3;
  margin-top: 2em;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .character-grid .character-skill-dice-box div.skills-box0 {
  width: calc(102% + 2px);
  margin: 0 -4px 0 -4px;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .character-dice_pool {
  grid-column-start: 3;
  grid-row: span 2;
  position: relative;
  top: 1.5em;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .character-notes {
  grid-column: 1/3;
  grid-row-start: 3;
  height: fit-content;
}

/* ---------------------------------- Monster Stats */
.charsheet .monster-stat1 > *[class^="monster-stats-box"] {
  align-items: center;
  display: flex;
  justify-self: center;
}

.charsheet input.monster_only:checked ~ .wrapper .character .character-attributes .attributes-grid {
  float: right;
  margin: 0;
  padding: 0 1em 0 1em;
  row-gap: normal;
  width: 37em;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .attributes-grid > div:not(:first-child) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .attributes-box8 input.skull,
.charsheet input.monster_only:checked ~ .wrapper div.character .attributes-box12 input.skull,
.charsheet input.monster_only:checked ~ .wrapper div.character .attributes-box16 input.skull {
  margin: -10px 0 -10px -10px;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .monster-stat1 {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 4em 7em auto 3em 3em auto 4em 4em auto;
  width: calc(100% + 10px);
  margin-left: -1px;
}

.charsheet .monster-stat1 label:has(input[type="text"].header-h1) {
  grid-column: 1/-1;
  width: auto;
  margin: auto;
}

.charsheet .monster-stat1 label input[type="text"].header-h1 {
  align-self: center;
  background-color: white;
  color: #333;
  font-size: 1.65em;
  height: 1.5em;
  justify-self: center;
  margin: 0 0 .75em 0;
  max-width: 12em;
}

.charsheet .monster-stats-box1 {
  grid-column: 1/-1;
  grid-row-start: 1;
  height: 4em;
}

.charsheet .monster-stats-box2 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .monster-stats-box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .monster-stats-box4 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .monster-stats-box5 {
  grid-column-start: 4;
  grid-row-start: 1;
  justify-self: right;
}

.charsheet .monster-stats-box6 {
  grid-column-start: 5;
  grid-row-start: 1;
  justify-self: left;
}

.charsheet .monster-stats-box6 span::before {
  content: "/";
  padding: 0 2px 0 0;
}

.charsheet .monster-stats-box7 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .monster-stats-box8 {
  grid-column-start: 7;
  grid-row-start: 1;
}

.charsheet .monster-stats-box9 {
  grid-column-start: 8;
  grid-row-start: 1;
}

.charsheet .monster-stats-box10 {
  grid-column-start: 9;
  grid-row-start: 1;
}

.charsheet .monster-stats-box11 {
  grid-column-start: 1;
  grid-row-start: 2;
  width: 3em;
}

.charsheet .monster-stats-box12 {
  grid-column-start: 2;
  grid-row-start: 2;
}

.charsheet .monster-stats-box13 {
  grid-column-start: 3;
  grid-row-start: 2;
}

.charsheet .monster-stats-box14 {
  grid-column-start: 4;
  grid-row-start: 2;
  width: 3em;
}

.charsheet .monster-stats-box15 {
  grid-column-start: 5;
  grid-row-start: 2;
}

.charsheet .monster-stats-box16 {
  grid-column-start: 6;
  grid-row-start: 2;
}

.charsheet .monster-stats-box17 {
  grid-column-start: 7;
  grid-row-start: 2;
}

.charsheet .monster-stats-box18 {
  grid-column-start: 8;
  grid-row-start: 2;
  width: 3em;
}

.charsheet .monster-stats-box19 {
  grid-column-start: 9;
  grid-row-start: 2;
}

/* ---------------------------------- Monster Attacks */

/*rep-items counter*/
.charsheet .repeating-fields {
  counter-reset: rep-items 0;
}

.charsheet input[type="checkbox"].counted:checked + span::before {
  color: #000;
  content: counter(rep-items) " ";
  counter-increment: rep-items;
  font-size: 2em;
  font-weight: bold;
  left: 0;
  position: absolute;
  top: -3px;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .monster-attacks-grid {
  display: grid;
  grid-column-gap: 1px;
  grid-row-gap: 2px;
  grid-template-columns: 1em 2em 2fr 3em 3em minmax(7em, 1fr) minmax(6em, 8em);
}

.charsheet .monster-attacks-box {
  grid-column: 1/8;
  grid-row-start: 1;
  margin: 0 0 0 -4px;
  width: calc(100% + 8px);
}

.charsheet .monster-attacks-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box5 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box6 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box7 {
  grid-column-start: 7;
  grid-row-start: 1;
}

.charsheet .monster-attacks-box8 {
  grid-column: 1/8;
  grid-row-start: 2;
}

.charsheet .monster-attacks-box8 {
  background-color: inherit;
  border: 10px solid #000;
  border-image-repeat: repeat;
  border-image-slice: 0 20 20 20;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png');
  border-image-width: 0 10px 10px 10px;
  border-top-width: 0;
  margin: -2px -7px 0 -7px;
  padding: 0;
}

.sheet-darkmode .tab-content .charsheet .wrapper .monster-attacks-box8 {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png');
}

/* ---------------------------------- Details */

.charsheet .details-grid {
  display: grid;
  grid-column-gap: 6px;
  grid-row-gap: 1em;
  grid-template-columns: 1fr 2fr;
  padding: 2em .5em 2em .5em;
  width: auto;
}

.charsheet .details-grid > div {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
}

.charsheet .details-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .details-box2 {
  grid-column: 2/3;
  grid-row-start: 1;
}

.charsheet .details-box3 {
  grid-column-start: 1;
  grid-row-start: 2;
}

.charsheet .details-box4 {
  grid-column: 2/3;
  grid-row-start: 2;
}

.charsheet .details-grid .span-all {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: auto 5em 1em 2.5em 1em auto;
  justify-items: center;
}

.charsheet .details-box5 {
  grid-column-start: 1;
}

.charsheet .details-box6 {
  grid-column-start: 2;
}

.charsheet .details-box7 {
  grid-column-start: 4;
}

.charsheet .details-box8 {
  grid-column-start: 6;
  height: 2em;
  margin: -3px 0 0 0;
  position: relative;
}

/* ---------------------------------- Appearance */

.charsheet .appearance-grid {
  display: grid;
  grid-row-gap: 10px;
  grid-template-columns: 5em auto;
}

.charsheet .appearance-grid > div {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
}

.charsheet .appearance-grid .appearance-box1 {
  grid-column: 1/3;
  grid-row-start: 1;
}

.charsheet .appearance-box2 {
  grid-row-start: 2;
}

.charsheet .appearance-box3 {
  grid-row-start: 2;
}

.charsheet .appearance-box4 {
  grid-row-start: 3;
}

.charsheet .appearance-box5 {
  grid-row-start: 3;
}

.charsheet .appearance-box6 {
  grid-row-start: 4;
}

.charsheet .appearance-box7 {
  grid-row-start: 4;
}

/* ---------------------------------- Conditions */

.charsheet .conditions-grid {
  display: grid;
  grid-template-columns: 6.5em minmax(2em, 3em) 4.75em 2fr;
  grid-row-gap: 4px;
  padding-bottom: .5em;
}

.charsheet .conditions-box5,
.charsheet .conditions-box8,
.charsheet .conditions-box11,
.charsheet .conditions-box14 {
  margin: 2px 5px 0 2px;
}

.charsheet .conditions-grid span input {
  padding: 0 2px 0 2px;
  text-align: center;
}

.charsheet .conditions-grid > div:first-of-type ~ div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.charsheet .conditions-grid .conditions-box1 {
  grid-column: 1/-1;
  grid-row-start: 1;
}

.charsheet .conditions-grid .conditions-notes-title {
  grid-column-start: 4;
}

.charsheet .conditions-box2 {
  grid-column-start: 1;
  grid-row: 3/6;
}

/*skull image */
.charsheet .conditions-box2 .skull-image {
  background-color: transparent !important;
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_skull.png");
  background-repeat: no-repeat;
  height: 9em;
  filter: sepia(.25);
  margin: 8.5em 0 0 -2em;
  pointer-events: none;
  position: absolute;
  transform: rotate(-10deg);
  width: 12.5em;
  background-size: contain;
}

.charsheet .conditions-box3 {
  grid-column-start: 2;
  grid-row-start: 3;
}

.charsheet .conditions-box4 {
  grid-column-start: 3;
  grid-row-start: 3;
}

.charsheet .conditions-box5 {
  grid-column-start: 4;
  grid-row-start: 3;
}

.charsheet .conditions-box6 {
  grid-column-start: 2;
  grid-row-start: 4;
}

.charsheet .conditions-box7 {
  grid-column-start: 3;
  grid-row-start: 4;
}

.charsheet .conditions-box8 {
  grid-column-start: 4;
  grid-row-start: 4;
}

.charsheet .conditions-box9 {
  grid-column-start: 2;
  grid-row-start: 5;
}

.charsheet .conditions-box10 {
  grid-column-start: 3;
  grid-row-start: 5;
}

.charsheet .conditions-box11 {
  grid-column-start: 4;
  grid-row-start: 5;
}

.charsheet .conditions-box12 {
  grid-column-start: 2;
  grid-row-start: 6;
}

.charsheet .conditions-box13 {
  grid-column-start: 3;
  grid-row-start: 6;
}

.charsheet .conditions-box14 {
  grid-column-start: 4;
  grid-row-start: 6;
}

.charsheet div:has(input.conditions-hungry:hover) ~ div > span.conditions-hungry,
.charsheet div:has(input.conditions-sleepy:hover) ~ div > span.conditions-sleepy,
.charsheet div:has(input.conditions-thirsty:hover) ~ div > span.conditions-thirsty,
.charsheet div:has(input.conditions-cold:hover) ~ div > span.conditions-cold,
.charsheet div:has(input.conditions-hungry:checked) ~ div > span.conditions-hungry,
.charsheet div:has(input.conditions-sleepy:checked) ~ div > span.conditions-sleepy,
.charsheet div:has(input.conditions-thirsty:checked) ~ div > span.conditions-thirsty,
.charsheet div:has(input.conditions-cold:checked) ~ div > span.conditions-cold {
  color: #a60100;
}

/* ---------------------------------- Critical Injuries */

.charsheet .injuries-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 2fr minmax(4em, 1fr) minmax(3em, 1fr) 3fr 3em;
  padding: 0 0 2px 0;
}

.charsheet div.injuries-box1 {
  grid-column: 1/6;
  grid-row-start: 1;
  width: calc(100% + 7px);
  margin: 0 0 0 -3px;
}

.charsheet .injuries-box2 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .injuries-box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .injuries-box4 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .injuries-box5 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .injuries-box6 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .injuries-box7 {
  grid-column: 1/6;
  grid-row-start: 2;
}

.charsheet .injuries-box8 {
  grid-column-start: 1;
}

/* ---------------------------------- Weapons */

.charsheet .weapons-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 2em minmax(5em, 1fr) minmax(5em, 3fr) minmax(5em, 1fr) repeat(4, minmax(3em, 1fr)) 0 repeat(4, minmax(3em, 1fr)) 0 minmax(3.5em, 1fr) 0 repeat(3, minmax(3em, 1fr));
  padding: 0 0 2px 0;
}

.charsheet .wrapper .weapons-grid .weapons-box28 {
  background-color: #fff;
  color: #222;
  outline: 1px solid #000;
}

.charsheet .wrapper .weapons-grid .weapons-box28::before {
  background-color: #fff;
  color: #222;
}

.charsheet .wrapper .weapons-grid .weapons-box31,
.charsheet .wrapper .weapons-grid .weapons-box31::before {
  background-color: #ac2727;
  color: #fff;
  text-shadow: 1px 1px black;
}

.charsheet .wrapper .weapons-grid .weapons-box36,
.charsheet .wrapper .weapons-grid .weapons-box36::before {
  background-color: #404040;
  color: #fff;
  text-shadow: 1px 1px black;
}

.charsheet div.weapons-box {
  grid-column: 1/-1;
  grid-row-start: 1;
  width: calc(101% + 1px);
  margin: 0 0 0 -4px;
  height: 3em;
}

.charsheet .weapons-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .weapons-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .weapons-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .weapons-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .weapons-box5 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .weapons-box6 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .weapons-box7 {
  grid-column-start: 7;
  grid-row-start: 1;
  padding-bottom: 3px;
}

.charsheet .weapons-box8 {
  grid-column-start: 8;
  grid-row-start: 1;
}

.charsheet .weapons-box9 {
  grid-column-start: 9;
  grid-row-start: 1;
}

.charsheet .weapons-box10 {
  grid-column-start: 10;
  grid-row-start: 1;
  justify-self: right;
}

.charsheet .weapons-box11 {
  grid-column-start: 11;
  grid-row-start: 1;
  justify-self: left;
}

.charsheet .weapons-box11 span::before {
  content: "/";
  padding: 0 2px 0 0;
}

.charsheet .weapons-box12 {
  grid-column-start: 12;
  grid-row-start: 1;
  padding-bottom: 3px;
}

.charsheet .weapons-box13 {
  grid-column-start: 13;
  grid-row-start: 1;
}

.charsheet .weapons-box14 {
  grid-column-start: 14;
  grid-row-start: 1;
}

.charsheet .weapons-box15 {
  grid-column-start: 15;
  grid-row-start: 1;
}

.charsheet .weapons-box19 {
  grid-column-start: 20;
  grid-row-start: 1;
}

.charsheet .weapons-box20 {
  grid-column-start: 17;
  grid-row-start: 1;
}

.charsheet .weapons-box21 {
  grid-column-start: 18;
  grid-row-start: 1;
}

.charsheet .weapons-box22 {
  grid-column-start: 19;
  grid-row-start: 1;
}

.charsheet .weapons-box23 {
  grid-column: 1/-1;
  grid-row-start: 2;
}

.charsheet .weapons-box24 {
  grid-column-start: 1;
}

.charsheet .weapons-subgrid {
  align-items: baseline;
  display: grid;
  grid-column-gap: 2px;
  grid-column: 1/-1;
  grid-row-start: 3;
  grid-template-columns: 4em 3em 4em minmax(7em, 1fr) 6em 3fr 3em 4em 2em 3em;
  justify-items: center;
  padding: 0 0 2px 0;
}

.charsheet .weapons-box46 {
  grid-column-start: 1;
  grid-row-start: 1;
}

/* ---------------------------------- Dice Pool */

.charsheet div.dice-header {
  display: flex;
  width: calc(102% + 4px);
  margin: 0 0 0 -4px;
  align-items: center;
  justify-content: center;
}

.charsheet .dice_pool-grid {
  display: grid;
  grid-template-areas: "dice-header dice-header dice-header" "dice-base dice-skill dice-gear" "dice-artifact dice-artifact dice-artifact" "dice-rolls dice-rolls dice-rolls" "dice-preset dice-preset dice-preset" "dice-footer dice-footer dice-footer";
  grid-template-columns: 1fr 1fr 1fr;
}

.ui-dialog .charsheet .wrapper .dice_pool-grid .dice-base {
  background-color: white;
  border: 1px solid #000;
  display: grid;
  grid-area: dice-base;
  grid-template-areas: "dice-base-header dice-base-header" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  margin: 2px 0 0 0;
  padding: 2px 2px 0 2px;
  text-align: center;
}

.charsheet .dice-base-header {
  grid-area: dice-base-header;
}

.charsheet .dice-base-col2 {
  display: flex;
  flex-direction: column;
  grid-area: dice-base-col2;
}

.charsheet .dice-base-col1 {
  display: flex;
  flex-direction: column;
  grid-area: dice-base-col1;
}

.ui-dialog .charsheet .wrapper .dice-skill {
  background-color: #ac2727;
  border: 1px solid #000;
  color: #fff;
  display: grid;
  grid-area: dice-skill;
  grid-template-areas: "dice-skill-header dice-skill-header" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  margin: 2px 0 0 0;
  padding: 2px 2px 0 2px;
  text-align: center;
}

.charsheet .dice-skill-header {
  grid-area: dice-skill-header;
}

.charsheet .dice-skill-col2 {
  display: flex;
  flex-direction: column;
  grid-area: dice-skill-col2;
}

.charsheet .dice-skill-col1 {
  display: flex;
  flex-direction: column;
  grid-area: dice-skill-col1;
}

.ui-dialog .charsheet .wrapper .dice-gear {
  background-color: #404040;
  border: 1px solid #000;
  color: #fff;
  display: grid;
  grid-area: dice-gear;
  grid-template-areas: "dice-gear-header dice-gear-header" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  margin: 2px 0 0 0;
  padding: 2px 2px 0 2px;
  text-align: center;
}

.charsheet .dice-gear-header {
  grid-area: dice-gear-header;
}


.charsheet .wrapper .dice_pool-grid .dice-base-header span {
  color: #333;
}

.charsheet .wrapper .dice_pool-grid .dice-skill-header span,
.charsheet .wrapper .dice_pool-grid .dice-gear-header span {
  color: #fff;
  font-weight: normal;
}

.charsheet .dice-gear-col2 {
  display: flex;
  flex-direction: column;
  grid-area: dice-gear-col2;
}

.charsheet .dice-gear-col1 {
  display: flex;
  flex-direction: column;
  grid-area: dice-gear-col1;
}

.charsheet .dice-artifact {
  align-items: self-end;
  display: grid;
  grid-area: dice-artifact;
  grid-template-rows: 2em 4em;
  grid-template-areas: "dice-artifact-header dice-artifact-header dice-artifact-header dice-artifact-header"
    "dice-artifact-rolls dice-artifact-rolls dice-artifact-rolls dice-artifact-rolls";
}

.charsheet .dice-artifact-header {
  grid-area: dice-artifact-header;
  margin: 5px 0 0 0;
  text-align: center;
}

.charsheet .dice-artifact-rolls {
  border-top: 5px solid #000;
  display: flex;
  grid-area: dice-artifact-rolls;
  justify-content: space-evenly;
  margin: -10px auto -5px auto;
  padding-top: 15px;
  width: 20em;
}

.charsheet .dice-rolls {
  margin-top: 10px;
  grid-area: dice-rolls;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.charsheet .dice-preset {
  display: grid;
  grid-area: dice-preset;
  grid-template-areas: "dice-preset-header" "dice-preset-preset";
  justify-items: center;
  margin-top: 10px;
}

.charsheet .dice-preset-header {
  grid-area: dice-preset-header;
}

.charsheet .dice-preset-preset {
  cursor: help;
  grid-area: dice-preset-preset;
  text-align: center;
}

.charsheet .dice-preset-preset::before,
.charsheet .dice-preset-preset::after {
  content: "‟";
  margin-right: 2px;
}

.charsheet .dice-preset-preset::after {
  content: "”";
  margin-left: 2px;
}

.charsheet .dice-footer {
  display: grid;
  grid-area: dice-footer;
  grid-template-areas: "dice-footer-clear . dice-footer-api";
  grid-template-columns: auto;
  grid-template-rows: 2.25em;
  justify-items: center;
  margin: 10px 0 10px 0;
}

.charsheet .dice-footer button.dice-footer-clear span::before {
  color: inherit;
  content: "1";
  font-family: pictos;
  font-size: 1.35em;
  position: relative;
  top: 0;
  left: -3px;
}

.charsheet .dice-footer-clear {
  grid-area: dice-footer-clear;
}

.charsheet .dice-footer-api {
  grid-area: dice-footer-api;
  margin: 0 0 2px 0;
}

/* ---------------------------------- Talents */

.charsheet .talents-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 2.25em 1fr 3em 3em auto;
}

.charsheet div.talents-box {
  grid-column: 1/5;
  grid-row-start: 1;
  width: calc(104% + 4px);
  margin: 0 0 0 -7px;
}

.charsheet .wrapper .talents-grid button.talents-box0 {
  grid-column-start: 1;
  grid-row-start: 1;
  margin: .25em -.5em 0 0;
}

.charsheet .talents-box1 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .talents-box2 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .talents-box3 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .talents-box4 {
  grid-column: 1/5;
  grid-row-start: 2;
}

/* toggle sections open/closed */

.charsheet input[type="checkbox"].section-toggle-checkbox {
  font-size: 1.1em;
  height: 1.5em;
  opacity: 0;
  position: absolute;
  width: 1.5em;
  z-index: 2;
  right: 0;
  margin: 0 0 1em 0;
  border: none;
}

.charsheet .header-top ~ .column-header-bottom span.expand-section-nav::before {
  color: #FFF;
  font-size: 1.1em;
  font-family: 'Pictos';
  margin: -2.35em 0 0 0;
  padding: 2px 0 0 0;
  position: absolute;
  height: 1.1em;
  width: 1.1em;
  z-index: 1;
  border-radius: 3px;
  right: 0;
}

.charsheet .header-top ~ .column-header-bottom .section-toggle-checkbox:not(:checked) + span.expand-section-nav::before {
  content: "&";
}

.charsheet .header-top ~ .column-header-bottom .section-toggle-checkbox:checked + span.expand-section-nav::before {
  content: "_";
}

.charsheet .mount_gear-grid input.section-toggle-checkbox[type="checkbox"]:checked::after {
  display: none;
  content: '';
}

.charsheet .gear-grid .section-toggle-checkbox ~ .column-header-bottom > span:not(.expand-section-nav) {
  margin: 0 -10px 0 0;
}

.charsheet .gear-grid .section-toggle-checkbox:not(:checked) ~ .column-header-bottom > span:not(.expand-section-nav) {
  margin: 0 0 0 -1.5em;
}

.charsheet .section-toggle-checkbox:not(:checked) ~ .column-header-bottom > span:not(.expand-section-nav) {
  margin: 0 0 0 -2.5em;
}

/* section-specific */
.charsheet .talents-grid .section-toggle-checkbox:checked ~ .repcontainer,
.charsheet .gear-grid .section-toggle-checkbox:checked ~ .repcontainer,
.charsheet .mount_gear-grid .section-toggle-checkbox:checked ~ .repcontainer {
  height: auto;
  max-height: fit-content;
}

.charsheet .talents-grid .section-toggle-checkbox:not(:checked) ~ .repcontainer {
  max-height: 22em;
  height: fit-content;
}

.charsheet .gear-grid .section-toggle-checkbox:not(:checked) ~ .repcontainer {
  max-height: 20em;
  height: fit-content;
}

.charsheet .mount_gear-grid .section-toggle-checkbox:not(:checked) ~ .repcontainer,
.charsheet .cart_gear-grid .section-toggle-checkbox:not(:checked) ~ .repcontainer {
  max-height: 5em;
  height: fit-content;
}

.charsheet .mount_gear-grid .section-toggle-checkbox:not(:checked) ~ .gear-weight,
.charsheet .mount_gear-grid .section-toggle-checkbox:not(:checked) ~ .mount_gear-box6,
.charsheet .mount_gear-grid .section-toggle-checkbox:not(:checked) ~ .mount_gear-box7,
.charsheet .cart_gear-grid .section-toggle-checkbox:not(:checked) ~ .cart_gear-box6,
.charsheet .cart_gear-grid .section-toggle-checkbox:not(:checked) ~ .gear-weight {
  display: none;
}

.charsheet .mount_gear-grid .section-toggle-checkbox:not(:checked) ~ .mount_gear-box5,
.charsheet .cart_gear-grid .section-toggle-checkbox:not(:checked) ~ .cart_gear-box5 {
  padding-bottom: 0;
}

.charsheet .rank-totals-grid {
  display: grid;
  position: relative;
}

.charsheet .rank-totals-grid > span:first-child {
  margin: -15px 0 0 0;
}

.charsheet .rank-totals-grid div.talent-ranks.expanded-area {
  align-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  height: auto;
  padding: 0.5em;
  text-align: center;
  width: fit-content;
}

.charsheet .rank-totals-grid .talent-ranks span input {
  width: 2em;
}

/* ---------------------------------- Skills */
.charsheet .skills-row select.input,
.charsheet .skills-row input.input-number {
  min-width: 2.5em;
}

/* list ordering of skills by attribute group */
.charsheet .skills-grid {
  display: flex;
  flex-direction: column;
}

/* animal */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-animal {
  order: 17;
}

/* crafting */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-crafting {
  order: 5;
}

/* endurance */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-endurance {
  order: 3;
}

/* healing */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-healing {
  order: 16;
}

/* insight */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-insight {
  order: 13;
}

/* lore */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-lore {
  order: 11;
}

/* manipulation */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-manipulation {
  order: 14;
}

/* marksmanship */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-marksmanship {
  order: 9;
}

/* melee */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-melee {
  order: 4;
}

/* might */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-might {
  order: 2;
}

/* move */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-move {
  order: 8;
}

/* performance */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-performance {
  order: 15;
}

/* scouting */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-scouting {
  order: 10;
}

/* sleight */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-sleight {
  order: 7;
}

/* stealth */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-stealth {
  order: 6;
}

/* survival */
.charsheet .skill-order-group:checked ~ .skills-grid span.skill-survival {
  order: 12;
}

/* end list order */
.charsheet .skills-grid .skills-header {
  display: grid;
  grid-column-gap: 2px;
  grid-template-columns: 3.5fr minmax(2.85em, 1fr) repeat(3, minmax(2.5em, 1fr)) minmax(2.75em, 1.25fr);
}

.charsheet .skills-grid .skills-row {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 1px;
  grid-template-columns: 4fr repeat(3, minmax(2.5em, 1fr)) minmax(2.75em, 1fr);
  padding: 1px 0 1px 0;
  position: relative;
}

.charsheet .skills-grid button {
  text-align: center;
}

.charsheet input.monster_only:checked ~ .wrapper div.character .skills-grid .skill-animal button {
  padding: 0;
  font-size: .95em;
}

.charsheet div.skills-box0 {
  grid-column: 1/-1;
  grid-row-start: 1;
  width: calc(102% + 4px);
  margin: 0 0 0 -5px;
}

.charsheet .skills-box1 {
  grid-column: 2/3;
  grid-row-start: 1;
}

.charsheet .skills-box2 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .skills-box3 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .skills-box4 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .skills-box5 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .skills-row .skills-row2 {
  grid-column: 1/6;
  grid-row-start: 2;
  grid-template-columns: 100%;
}

.charsheet .skills-row2-body {
  display: grid;
  grid-row-start: 2;
  grid-template-columns: auto 3em;
}

.charsheet .skills-box6 {
  grid-column-start: 1;
  grid-row-start: 2;
  margin: auto;
  padding-left: 2px;
}

.charsheet .skills-box7 {
  grid-column-start: 2;
  grid-row-start: 2;
}

/* ---------------------------------- Armor/Helmet */

.charsheet .armor-container {
  display: grid;
  grid-template-columns: auto;
  padding-bottom: 2px;
}

.charsheet .armor-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 3fr repeat(4, minmax(3em, 1fr)) minmax(4em, 1fr);
}

.charsheet .armor-row2 {
  align-items: baseline;
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 3em 1em 6em auto 2em 3em 2em 3em;
  justify-items: center;
  padding-bottom: 2px;
}

.charsheet div.armor-box {
  grid-column: 1/-1;
  grid-row-start: 1;
  width: calc(101% + 1px);
  margin: 0 0 0 -3px;
}

.charsheet .armor-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .armor-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
  justify-self: right;
}

.charsheet .armor-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
  justify-self: left;
}

.charsheet .armor-box3 span::before {
  content: "/";
  padding: 0 2px 0 0;
}

.charsheet .armor-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
  padding-bottom: 3px;
}

.charsheet .armor-subgrid {
  align-items: center;
  display: grid;
  grid-column-gap: 2px;
  grid-template-columns: 1fr 2fr 14em 4em 1fr auto;
  height: 3em;
  margin-bottom: 5px;
}

.charsheet .armor-subgrid > span {
  display: flex;
  justify-self: left;
  margin: auto;
  margin-left: 0;
}

.charsheet .armor-subgrid .armor-box3 {
  grid-column: 3/4;
  grid-row-start: 1;
  justify-self: normal;
  align-items: center;
  justify-content: center;
  height: 2.7em;
}

.charsheet .armor-subgrid .armor-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
  padding-bottom: 3px;
}

.charsheet .armor-subgrid .armor-box4 {
  border: 2px solid black;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 24px;
  height: 1.45em;
  padding-bottom: 6px;
  width: 2em;
}

.charsheet .armor-box5 {
  flex-wrap: wrap;
  grid-column-start: 5;
  grid-row-start: 1;
  justify-self: center;
  width: min-content;
}

.charsheet .armor-box5 button[type="action"] span::after {
  color: inherit;
  content: "e";
  font-family: "pictos custom";
  font-size: 1.5em;
  position: relative;
  top: 3px;
  right: -4px;
}

.charsheet .armor-box6 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .armor-box10 {
  grid-column: 1/10;
  grid-row-start: 2;
  position: relative;
}

.charsheet .armor-box10-2 {
  grid-column: 1/10;
  grid-row-start: 3;
  position: relative;
}

.charsheet .armor-box10-3 {
  grid-column: 1/10;
  grid-row-start: 4;
  margin: 8px 0 -4px 10px;
  position: relative;
}

.charsheet .armor-box10-4 {
  grid-column: 1/10;
  grid-row-start: 5;
  position: relative;
}

.charsheet .armor-box10-5 {
  grid-column: 1/10;
  grid-row-start: 6;
  position: relative;
}

.charsheet .armor-row2 {
  grid-column: 1/10;
}

.charsheet .armor-ar {
  grid-column: 1/10;
}

/* only show total if any artifact dice have been selected from above */
.charsheet .armor-artifact-totals input + span {
  display: none;
  justify-content: center;
  margin: auto;
}

.charsheet .armor-artifact-totals input:checked + span {
  display: flex;
}

.charsheet .armor-artifact-totals input:checked + span::before {
  content: "+";
  font-size: 2em;
  line-height: .5em;
  margin: -2px 0 0 10px;
  position: relative;
}

/* ---------------------------------- Shield */
.charsheet .shield-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-row-start: 2;
  grid-template-columns: 2em 2em 3fr repeat(6, minmax(3em, 1fr)) minmax(4em, 1fr);
}

.charsheet .shield-row2 {
  align-items: baseline;
  grid-column-gap: 2px;
  grid-column: 1/14;
  grid-row-gap: 2px;
  grid-row-start: 2;
  grid-template-columns: 3em 1em 6em auto 2em 3em 2em 3em;
  justify-items: center;
  padding-bottom: 2px;
}

.charsheet div.shield-box {
  grid-column: 1/-1;
  grid-row-start: 1;
  width: calc(101% + 1px);
  margin: 0 0 0 -3px;
}

.charsheet .shield-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  margin-right: -5px;
}

.charsheet .shield-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .shield-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .shield-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .shield-box5 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .shield-box6 {
  grid-column-start: 6;
  grid-row-start: 1;
  justify-self: right;
}

.charsheet .shield-box7 {
  grid-column-start: 7;
  grid-row-start: 1;
  justify-self: left;
}

.charsheet .shield-box7 span::before {
  content: "/";
  padding: 0 2px 0 0;
}

.charsheet .shield-box8 {
  grid-column-start: 8;
  grid-row-start: 1;
  padding-bottom: 3px;
}

.charsheet .shield-box9 {
  grid-column-start: 9;
  grid-row-start: 1;
}

.charsheet .shield-box10 {
  grid-column-start: 10;
  grid-row-start: 1;
}

.charsheet .shield-box11 {
  grid-column-start: 11;
  grid-row-start: 1;
}

.charsheet .shield-box12 {
  grid-column-start: 12;
  grid-row-start: 1;
}

.charsheet .shield-box13 {
  grid-column-start: 13;
  grid-row-start: 1;
}

.charsheet .shield-box14 {
  grid-column: 1/-1;
  grid-row-start: 2;
  position: relative;
}

/* ---------------------------------- Gear */

.charsheet .gear-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 3fr 3em 2em 3em;
}

.charsheet .consumables-grid {
  align-items: center;
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 3fr 3em 2em 3em;
  margin-bottom: .5em;
}

.charsheet .gear-subgrid {
  display: grid;
  grid-column-gap: 2px;
  grid-template-columns: 4em 3em 9em 3em;
}

.charsheet .gear-subgrid > div {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.charsheet div.gear-box {
  grid-column: 1/-1;
  grid-row-start: 1;
  margin: 0 -8px 0 -8px;
}

.charsheet .gear-box1 {
  grid-column: 1;
  grid-row-start: 1;
}

.charsheet input.gear-box1.input,
.charsheet input.mount_gear-box1.input,
.charsheet input.cart_gear-box1.input {
  max-width: 98%;
}

.charsheet .gear-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .gear-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .gear-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet div.gear-box5 {
  grid-column: 1/5;
  grid-row-start: 2;
  padding-bottom: 7em;
}

.charsheet div.gear-weight,
.charsheet div.gear-weight2 {
  display: grid;
  grid-column-gap: 5px;
  grid-column: 1/5;
  grid-row-start: 3;
  grid-template-columns: auto 3em;
  justify-content: end;
  justify-items: end;
  margin-top: -6.5em;
  height: fit-content;
}

.charsheet div.gear-weight2 {
  margin-top: -3.5em;
}

.charsheet .gear-weight > div,
.charsheet .gear-weight > span,
.charsheet .gear-weight > input {
  align-items: center;
  display: flex;
  height: 1.5em;
  justify-content: space-around;
}

.charsheet .gear-weight > div input {
  height: 1.5em;
}

.charsheet div.gear-box6 {
  display: grid;
  font-size: .85em;
  grid-column: 1/5;
  grid-column-gap: 0.25em;
  grid-row-start: 4;
  grid-template-columns: auto 3em auto 3em;
  justify-content: end;
  padding-right: 5px;
  width: 104%;
  margin: 0 0 0 -6px;
}

.charsheet .gear-box7 {
  align-items: center;
  display: flex;
  grid-column: 1/-1;
  grid-row-start: 5;
  justify-self: left;
  margin-top: 2px;
}

.charsheet section.talents,
.charsheet section.mount,
.charsheet section.gear,
.charsheet section.cart {
  background-color: inherit;
  border: 10px solid #000;
  border-bottom-width: 18px;
  border-image-repeat: repeat;
  border-image-slice: 0 20 20 20;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border.png');
  border-image-width: 0 14px 14px 14px;
  border-top-width: 0;
  margin: -2px -7px 10px -7px;
  padding: 0;
}

.sheet-darkmode .tab-content .charsheet section.talents,
.sheet-darkmode .tab-content .charsheet section.mount,
.sheet-darkmode .tab-content .charsheet section.gear,
.sheet-darkmode .tab-content .charsheet section.cart {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_wide_column_border_inverted.png');
}

.charsheet .talents-grid .talents-box4 .repcontainer {
  margin-right: -5px;
  overflow-x: hidden;
  padding: 2px 0 0 2px;
  max-height: 467px;
}

.charsheet .gear-box5 .repcontainer,
.charsheet .mount_gear-box5 .repcontainer,
.charsheet .cart_gear-box5 .repcontainer {
  margin-right: -2px;
  max-height: 320px;
  overflow-x: hidden;
  padding: 2px 0 0 2px;
}

.charsheet .mount-grid {
  align-items: center;
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  position: relative;
  padding-bottom: .25em;
}

.charsheet .mount-grid input.expand + span::before,
.charsheet .mount-grid input.expand {
  margin-top: 2.75em;
}

.charsheet div.mount-box1 {
  grid-column: 1/-1;
  grid-row-start: 1;
  margin: 0 -8px 0 -8px;
  align-items: center;
}

.charsheet .mount-box2 {
  grid-column: 1;
  grid-row-start: 2;
}

.charsheet .mount-box3 {
  grid-column-start: 2;
  grid-row-start: 2;
}

.charsheet .mount-box4 {
  grid-column-start: 3;
  grid-row-start: 2;
}

.charsheet .mount-box5 {
  grid-column-start: 4;
  grid-row-start: 2;
}

.charsheet .mount-box6 {
  grid-column-start: 5;
  grid-row-start: 2;
}

.charsheet .mount-grid .mount_gear-box4.column-header-bottom {
  position: relative;
  right: -22px;
}

.charsheet .mount-grid .mount_gear-box4 {
  grid-row-start: 1;
  grid-column-start: 5;
}

/* ---------------------------------- Mount_gear */

.charsheet .mount_gear-grid,
.charsheet .cart_gear-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 3fr 3em 2em 3em;
  grid-template-rows: auto;
  width: calc(100% - 2px);
}

.charsheet .mount_gear-subgrid,
.charsheet .cart_gear-subgrid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 4em 3em 9em 3em;
}

.charsheet .mount_gear-subgrid > .mount_gear-box11,
.charsheet .cart_gear-subgrid > .cart_gear-box11 {
  display: block;
  white-space: nowrap;
}

.charsheet .mount_gear-subgrid > div,
.charsheet .cart_gear-subgrid > div {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.charsheet div.mount_gear-box,
.charsheet div.cart_gear-box {
  grid-column: 1/5;
  grid-row-start: 1;
  margin: 0 -9px 0 -8px;
}

.charsheet .mount_gear-box1,
.charsheet .cart_gear-box1 {
  grid-column: 1;
  grid-row-start: 1;
}

.charsheet .mount_gear-box2,
.charsheet .cart_gear-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .mount_gear-box3,
.charsheet .cart_gear-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .mount_gear-box4,
.charsheet .cart_gear-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet div.mount_gear-box5,
.charsheet div.cart_gear-box5 {
  grid-column: 1/5;
  grid-row-start: 2;
  padding-bottom: 4em;
}

.charsheet .mount_gear-coin,
.charsheet .cart_gear-coin {
  grid-column: 1/5;
  grid-row-start: 3;
}

.charsheet div.mount_gear-box6,
.charsheet div.cart_gear-box6 {
  display: grid;
  grid-column-gap: 0.25em;
  grid-column: 1/5;
  grid-row-start: 4;
  grid-template-columns: auto 3em auto 3em;
  justify-content: end;
  padding-right: 5px;
  font-size: .85em;
  width: 104%;
  margin: 0 0 0 -8px;
}

.charsheet .mount_gear-box7 {
  align-items: center;
  display: flex;
  grid-column: 1/-1;
  justify-self: left;
  margin-top: 2px;
}

/* ---------------------------------- beasts */

.charsheet .beasts-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 2fr 3em 3em 4em 3.5em 5em 3fr;
  grid-template-rows: auto;
  padding-bottom: 1px;
}

.charsheet div.beasts-box {
  grid-column: 1/8;
  grid-row-start: 1;
  width: calc(101% + 4px);
  margin: 0 0 0 -4px;
  height: 3em;
}

.charsheet .beasts-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .beasts-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .beasts-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .beasts-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .beasts-box5 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .beasts-box6 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .beasts-box7 {
  grid-column-start: 7;
  grid-row-start: 1;
  width: 99%;
}

.charsheet .beasts-box8 {
  grid-column: 1/8;
  grid-row-start: 2;
}

/* ---------------------------------- Willpower */

.charsheet .willpower-grid {
  display: grid;
  grid-column-start: 1;
  grid-template-columns: 2fr 1em 3em;
  height: auto;
  margin-inline: auto;
  width: 80%;
  margin-top: -1em;
}

.charsheet div.willpower-box1 {
  align-items: center;
  display: grid;
  grid-column: 1/-1;
  grid-row-start: 1;
  margin: 0;
  width: 100%;
}

.charsheet .willpower-box2 {
  align-items: center;
  display: flex;
  grid-column-start: 1;
  grid-row-start: 2;
  justify-content: space-evenly;
}

span.willpower-box3 {
  align-items: center;
  color: #333;
  display: flex;
  font-size: 1.5em;
  justify-content: center;
}

.charsheet .willpower-box4 {
  align-items: center;
  display: flex;
  grid-column-start: 3;
  grid-row-start: 2;
  justify-content: center;
}

/* ---------------------------------- Experience */
.charsheet .experience-grid {
  display: grid;
  grid-column-start: 3;
  height: auto;
  margin-inline: auto;
  row-gap: 5px;
  text-align: center;
  width: 10em;
  margin-top: -1em;
}

.charsheet div.experience-box1 {
  align-items: center;
  display: grid;
  grid-column: 1/-1;
  grid-row-start: 1;
  justify-items: center;
  margin: 0;
  width: auto;
}

.charsheet .experience-box2 {
  grid-row-start: 2;
  justify-items: center;
}

/* ---------------------------------- Relationships */
.charsheet .relationships-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 1px;
  grid-template-columns: 1fr 3fr;
}

.charsheet .relationships-grid > .relationships-box3,
.charsheet .relationships-grid > .relationships-box4 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

.charsheet div.relationships-box1 {
  grid-column: 1/3;
  grid-row-start: 1;
  width: calc(103% + 1px);
  margin: 0 0 0 -4px;
  align-items: center;
}

.charsheet .relationships-box2 {
  grid-column: 1/3;
  grid-row-start: 2;
}

.charsheet .relationships-box3 {
  grid-column-start: 1;
  grid-row-start: 3;
}

.charsheet .relationships-box4 {
  grid-column: 2/3;
  grid-row-start: 3;
}

/* ---------------------------------- Notes */
.charsheet .notes-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 1px;
  grid-template-columns: 2em 1fr 3fr;
}

.charsheet .notes-grid > .notes-box3,
.charsheet .notes-grid > .notes-box4 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

.charsheet div.notes-box1 {
  grid-column: 1/4;
  grid-row-start: 1;
  width: calc(101% + 4px);
  margin: 0 0 0 -4px;
  align-items: center;
}

.charsheet .notes-box2 {
  grid-column: 1/4;
  grid-row-start: 2;
}

.charsheet .notes-box3 {
  grid-column-start: 1;
  grid-row-start: 2;
}

.charsheet .notes-box4 {
  grid-column-start: 2;
  grid-row-start: 2;
}

.charsheet .notes-box5 {
  display: flex;
  grid-column-start: 3;
  grid-row-start: 2;
  margin: 1px 0 1px 0;
}

/* ---------------------------------- Coins */

.charsheet .coins-grid {
  display: grid;
  grid-row-gap: 4px;
  grid-template-columns: 7em repeat(3, 1fr);
  grid-template-rows: auto;
  justify-items: center;
}

.charsheet .coins-grid div[class$="-header"] {
  margin: 0 -7px 0 -9px;
}

.charsheet .coins-grid > span,
.charsheet .coins-grid > input {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.charsheet div.coins-box {
  grid-column: 1/5;
  grid-row-start: 1;
  width: calc(103% + 1px);
  margin: 0 0 0 -4px;
}

.charsheet .coins-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .coins-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .coins-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .coins-box4 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .coins-box5 {
  grid-column-start: 1;
  grid-row-start: 2;
}

.charsheet .coins-box17 {
  height: 3em;
}

.charsheet .coins-grid .cart-wagon-label {
  display: block;
  overflow: hidden;
  padding-top: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 89px;
}

/* ---------------------------------- Spells */

.charsheet .spells-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 2em 2em 3em 3fr repeat(2, minmax(4em, 1fr)) minmax(6.5em, 2fr) repeat(2, minmax(4em, 1fr));
}

.charsheet div.spells-box {
  grid-column: 1/-1;
  grid-row-start: 1;
  width: calc(101% + 1px);
  margin: 0 0 0 -3px;
  height: 3em;
}

.charsheet .spells-box0 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .spells-box1 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .spells-box2 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .spells-box3 {
  grid-column-start: 4;
  grid-row-start: 1;
}

.charsheet .spells-box4 {
  grid-column-start: 5;
  grid-row-start: 1;
}

.charsheet .spells-box5 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.charsheet .spells-box6 {
  grid-column-start: 7;
  grid-row-start: 1;
}

.charsheet .spells-box7 {
  grid-column-start: 8;
  grid-row-start: 1;
}

.charsheet .spells-box8 {
  grid-column-start: 9;
  grid-row-start: 1;
}

.charsheet .spells-box9 {
  grid-column: 1/-1;
}

.charsheet .spells-row2 {
  align-items: center;
  display: grid;
  grid-column: 1/-1;
  grid-column-gap: 4px;
  grid-row-gap: 2px;
  grid-row-start: 2;
  grid-template-columns: 4em 6em 5em 6em 6em auto;
  justify-items: end;
}

.charsheet .spells-row2 input[type="text"] {
  padding: 0 0 4px 0;
}

/* stronghold grid layout */

.charsheet .stronghold-grid {
  display: grid;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: repeat(4, auto);
}

.charsheet .stronghold-details {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner.png');
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: 100% 110px;
  border: none;
  display: flex;
  grid-column: 1/3;
  grid-row-start: 1;
  justify-content: space-evenly;
  justify-self: stretch;
}

.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_top_banner_inverted.png');
  background-position-x: center;
}

.charsheet .stronghold-functions {
  grid-column-start: 1;
}

.charsheet .stronghold-hirelings {
  grid-column-start: 2;
}

.charsheet .stronghold-stockpile {
  grid-column: 1/2;
  grid-row-start: 3;
}

.charsheet .stronghold-notes {
  grid-column-start: 2;
  grid-row-start: 3;
}

/* ---------------------------------- Stronghold Details */

.charsheet .stronghold-details-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2.75em 0.5em 2.75em 2em auto;
  justify-content: space-around;
  width: 87%;
}

.charsheet .stronghold-details-grid > div {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.charsheet .stronghold-details-box1 {
  background-color: inherit;
  grid-column: 1/4;
  grid-row: 1;
}

.charsheet .stronghold-details-box1 h1 {
  color: #000;
}

.charsheet .stronghold-details-box2 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .stronghold-details-grid .stronghold-details-box2 {
  justify-content: flex-end;
  margin-right: 18%;
}

.charsheet .stronghold-details-box3 {
  grid-column-start: 1;
  grid-row-start: 2;
}

.charsheet .stronghold-details-box4 {
  grid-column-start: 2;
  grid-row-start: 3;
  margin: 3.5em 0 0 0;
}

.charsheet .stronghold-details-box5 {
  grid-column-start: 2;
  grid-row-start: 2;
  margin: 2.5em 0 0 0;
}

.charsheet .stronghold-details-box6 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .stronghold-details-grid .stronghold-details-box6 {
  justify-content: flex-start;
  margin-left: 15%;
}

.charsheet .stronghold-details-box7 {
  grid-column-start: 3;
  grid-row-start: 2;
}

.charsheet .stronghold-details-box8 {
  background-color: inherit;
  border: 15px solid #000;
  border-image-repeat: round;
  border-image-slice: 25 25 35 25;
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border.png');
  border-image-width: 19px 15px 19px 15px;
  grid-column: 1/4;
  grid-row-start: 5;
  margin: 0;
  padding: 10px;
  min-height: 4em;
}

.sheet-darkmode .tab-content .charsheet .wrapper .stronghold-details-box8 {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_column_box_border_inverted.png');
}

/* ---------------------------------- Stronghold Functions */

.charsheet .stronghold-functions-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: 2fr 3em 3fr;
  grid-template-rows: auto;
}


.charsheet div.stronghold-functions-box {
  grid-column: 1/4;
  grid-row-start: 1;
  width: 102%;
  margin: 0 0 0 -4px;
}

.charsheet .stronghold-functions-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .stronghold-functions-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .stronghold-functions-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .stronghold-functions-box4 {
  grid-column: 1/4;
  grid-row-start: 2;
}

/* ---------------------------------- Stronghold Hirelings */

.charsheet .stronghold-hirelings-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: auto 3em 5em;
  grid-template-rows: auto;
  margin-bottom: 2px;
}

.charsheet div.stronghold-hirelings-box {
  grid-column: 1/4;
  grid-row-start: 1;
  width: 102%;
  margin: 0 0 0 -4px;
}

.charsheet .stronghold-hirelings-box1 {
  grid-column-start: 1;
  grid-row-start: 1;
}

.charsheet .stronghold-hirelings-box2 {
  grid-column-start: 2;
  grid-row-start: 1;
}

.charsheet .stronghold-hirelings-box3 {
  grid-column-start: 3;
  grid-row-start: 1;
}

.charsheet .stronghold-hirelings-box3 span {
  background: transparent;
  grid-column-start: 3;
  grid-row-start: 1;
  height: 2em;
  line-height: 1em;
  margin-top: -9px;
  text-align: center;
  word-break: break-word;
}

.charsheet input.stronghold-hirelings-box3 {
  display: flex;
  justify-self: center;
  max-width: 3.5em;
}

.charsheet .stronghold-hirelings-box4 {
  grid-column: 1/4;
  grid-row-start: 2;
}

.charsheet .stronghold-hirelings-box5 {
  grid-column: 1/4;
  grid-row-start: 3;
}

.charsheet .stronghold-hirelings-box5 div {
  align-items: baseline;
}

/* ---------------------------------- Stronghold Stockpile */

/* list ordering of stockpile by attribute group */

.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(1) {
  order: 12;
}

/* iron ore */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(2) {
  order: 6;
}

/* fur */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(3) {
  order: 4;
}

/* flour */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(4) {
  order: 11;
}

/* iron */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(5) {
  order: 13;
}

/* leather */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(6) {
  order: 9;
}

/* grain */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(7) {
  order: 15;
}

/* silver */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(8) {
  order: 2;
}

/* cloth */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(9) {
  order: 14;
}

/* meat */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(10) {
  order: 8;
}

/* gold */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(11) {
  order: 21;
}

/* wool */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(12) {
  order: 3;
}

/* fish */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(13) {
  order: 16;
}

/* stone */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(14) {
  order: 5;
}

/* food */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(15) {
  order: 18;
}

/* vegetables */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(16) {
  order: 7;
}

/* glass */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(17) {
  order: 1;
}

/* bread */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(18) {
  order: 17;
}

/* tallow */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(19) {
  order: 20;
}

/* wood */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(20) {
  order: 19;
}

/* water */
.charsheet .stockpile-order-group:checked ~ .wrapper .stronghold-stockpile-grid span.stockpile-row:nth-of-type(21) {
  order: 10;
}

/* herbs */

/* end list order */

.charsheet .stronghold-stockpile-grid {
  display: grid;
  grid-row-gap: 2px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.charsheet .stronghold-stockpile-grid .repcontainer {
  display: contents;
}

.charsheet .stronghold-stockpile-grid .repitem .stockpile-row {
  display: grid;
  grid-template-columns: auto 3em;
}

.charsheet .stronghold-stockpile-grid .repitem .stockpile-row input:first-child {
  display: flex;
  width: 100%;
  text-align: center;
}

.charsheet .stronghold-stockpile-grid > div,
.charsheet .stronghold-stockpile-grid > span {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.charsheet .stronghold-stockpile-grid > span > input {
  max-width: 3em;
}

.charsheet .stronghold-stockpile-grid > span > span.label {
  text-align: center;
  width: 100%;
}

.charsheet .stronghold-stockpile-grid .stronghold-stockpile-box1 {
  grid-column: 1/4;
  grid-row-start: 1;
  align-items: baseline;
  display: flex;
  width: 102%;
  margin: 0 0 0 -4px;
}

.charsheet .stronghold-stockpile-grid .stronghold-stockpile-box2 {
  grid-column-start: 1;
  grid-row-start: 1;
  width: 100%;
  align-items: end;
  justify-content: end;
}

.charsheet .stronghold-stockpile-grid .stronghold-stockpile-box3 {
  grid-column-start: 2;
  grid-row-start: 1;
  width: 100%;
  align-items: end;
  justify-content: end;
}

.charsheet .stronghold-stockpile-grid .stronghold-stockpile-box4 {
  grid-column-start: 3;
  grid-row-start: 1;
  width: 100%;
  align-items: end;
  justify-content: end;
}

/* ---------------------------------- Stronghold Notes */

.charsheet .stronghold-notes-grid {
  display: grid;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.charsheet div.stronghold-notes-box1 {
  grid-column: 1/2;
  grid-row-start: 1;
  width: 102%;
  margin: 0 0 0 -4px;
  align-items: center;
}

.charsheet .stronghold-notes-box2 {
  grid-column-start: 1;
  grid-row-start: 2;
}

/* GRID STYLING */

.charsheet .grid-item {
  text-align: center;
}

.charsheet .dice_pool-grid .grid-item {
  width: 103%;
}

.charsheet .sub-grid-item {
  margin: 2px;
  text-align: center;
}

.charsheet .span-two {
  grid-column: 1/3;
}

.charsheet .span-three {
  grid-column: 1/4;
}

.charsheet .span-right {
  grid-column: 2/4;
}

/**** DICE ROLLER STYLING ****/

.charsheet .wrapper button[type="action"]:hover,
.charsheet .wrapper button[type="action"]:hover > span,
.charsheet .wrapper button[type="roll"]:hover,
.charsheet .wrapper button[type="action"].rollme:hover,
.charsheet .wrapper button[type="action"].rollme:hover > span,
.charsheet .wrapper button[type="roll"].rollme:hover,
.charsheet .wrapper button[type="action"].rollme-relative:hover,
.charsheet .wrapper button[type="action"].rollme-relative:hover > span,
.charsheet .wrapper button[type="roll"].rollme-relative:hover,
.charsheet .wrapper button[type=roll]:hover:before {
  background: #a60100;
  color: #fff;
  font-weight: normal;
}

.ui-dialog .charsheet .wrapper button[type=roll]:before {
  vertical-align: bottom;
}

.charsheet button[type="action"] > span {
  color: #000;
  font-size: 1em;
}

.sheet-darkmode .tab-content .charsheet [type="action"] > span {
  color: #000;
}

.sheet-darkmode .tab-content .charsheet .wrapper button[type="action"]:hover > span,
.sheet-darkmode .tab-content .charsheet .wrapper button[type="roll"]:hover > span,
.sheet-darkmode .tab-content .charsheet .wrapper .skills-grid span.skills-row:hover * {
  color: #fff;
}

.charsheet input.dice-selection {
  cursor: pointer;
  height: 25px;
  margin: -10px 0 2px 3px;
  opacity: 0;
  position: relative;
  width: 25px;
  z-index: 1;
}

.charsheet input.mighty,
.charsheet input.mighty2,
.charsheet input.epic,
.charsheet input.legendary {
  height: 38px;
  left: 0.95em;
  top: 0;
  width: 34px;
  z-index: 2;
}

.charsheet input.dice-selection + span::before {
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #000;
  color: #000;
  content: attr(title);
  display: inline-block;
  height: 22px;
  margin: -44px 2px 5px 0;
  padding: 5px 0 0 0;
  text-align: center;
  vertical-align: middle;
  width: 28px;
}

.charsheet input.dice-selection.mighty ~ .artifact-die.mighty::before,
.charsheet input.dice-selection.mighty2 ~ .artifact-die.mighty2::before {
  color: #235402;
  content: "H";
  font-family: dicefontd8;
  font-size: 3em;
  left: 0;
  position: relative;
  top: -14px;
  z-index: 1;
}

.charsheet .wrapper span.artifact-die.epic {
  height: 25px;
  top: 1px;
  transform: scale(.9, 1.1);
}

.charsheet input.dice-selection.epic ~ .artifact-die.epic::before {
  color: #0088af;
  content: "K";
  font-family: dicefontd10;
  font-size: 3.5em;
  left: -2px;
  position: relative;
  top: -24px;
  z-index: 1;
}

.charsheet .wrapper span.artifact-die.legendary {
  height: 32px;
  top: -2px;
  transform: scale(.95, .9);
}

.charsheet input.dice-selection.legendary ~ .artifact-die.legendary::before {
  color: #ff8c00;
  content: "L";
  font-family: dicefontd12;
  font-size: 3.4em;
  left: 0;
  position: relative;
  top: -17px;
  z-index: 1;
}

.charsheet .dice-artifact-rolls input.dice-selection + span::before {
  margin: 0;
  width: 36px;
  height: 30px;
  z-index: 0;
  position: relative;
}

.charsheet span.artifact-die.mighty,
.charsheet span.artifact-die.mighty2,
.charsheet span.artifact-die.epic,
.charsheet span.artifact-die.legendary {
  height: 28px;
  left: -1.5em;
  position: relative;
  transform: none;
  width: 34px;
}

.charsheet input.dice-selection:hover + span::before {
  background: #a9a9a9;
  color: #fff;
}

.charsheet input.dice-selection.mighty:not(:checked):hover ~ span.artifact-die.mighty::before,
.charsheet input.dice-selection.mighty2:not(:checked):hover ~ span.artifact-die.mighty2::before,
.charsheet input.dice-selection.epic:not(:checked):hover ~ span.artifact-die.epic::before,
.charsheet input.dice-selection.legendary:not(:checked):hover ~ span.artifact-die.legendary::before {
  text-transform: lowercase;
}

.charsheet input.dice-selection.mighty:checked ~ span.artifact-die.mighty,
.charsheet input.dice-selection.mighty2:checked ~ span.artifact-die.mighty2 {
  transform: translate(0, -10px);
}

.charsheet input.dice-selection.epic:checked ~ span.artifact-die.epic {
  transform: translate(0, -10px) scale(.9, 1.1);
}

.charsheet input.dice-selection.legendary:checked ~ span.artifact-die.legendary {
  transform: translate(0, -10px) scale(.95, .9);
}

.charsheet input.dice-selection.mighty:checked ~ span.artifact-die.mighty::before,
.charsheet input.dice-selection.mighty2:checked ~ span.artifact-die.mighty2::before,
.charsheet input.dice-selection.epic:checked ~ span.artifact-die.epic::before,
.charsheet input.dice-selection.legendary:checked ~ span.artifact-die.legendary::before {
  color: #222;
}

.sheet-darkmode .charsheet input.dice-selection.mighty:checked ~ span.artifact-die.mighty::before,
.sheet-darkmode .charsheet input.dice-selection.mighty2:checked ~ span.artifact-die.mighty2::before,
.sheet-darkmode .charsheet input.dice-selection.epic:checked ~ span.artifact-die.epic::before,
.sheet-darkmode .charsheet input.dice-selection.legendary:checked ~ span.artifact-die.legendary::before {
  color: #ededed;
}

.charsheet .dice-artifact-rolls input.mighty:checked + span.mighty::before,
.charsheet .dice-artifact-rolls input.mighty2:checked + span.mighty2::before {
  outline: 2px solid #235402;
  background: #235402;
  padding: 1px 0 1px 0;
}

.charsheet .dice-artifact-rolls input.epic:checked + span.epic::before {
  outline: 2px solid #0088af;
  background: #0088af;
  padding: 1px 0 1px 0;
}

.charsheet .dice-artifact-rolls input.legendary:checked + span.legendary::before {
  outline: 2px solid #ff8c00;
  background: #ff8c00;
  padding: 1px 0 1px 0;
}

.charsheet input.attribute:checked + span::before {
  background: #fff;
  color: #000;
}

.charsheet input.skill:checked + span::before {
  background: #a60100;
  color: #fff;
}

.charsheet input.gear:checked + span::before {
  background: #000;
  color: #fff;
}

.charsheet input.negative:checked + span::before {
  background: #800080;
  color: #fff;
}

/* Included to help color blind users */
.charsheet button[type="action"]:focus {
  background: #a60100;
  outline: 2px dotted #333;
  color: white;
}

.sheet-darkmode .tab-content .charsheet .wrapper button[type="action"]:focus {
  background: #a60100;
  outline: 2px dotted #fff;
  color: white;
}

/* localized roll button */
@keyframes move {
  from {
    z-index: -1;
    transform: scale(.5);
    opacity: 0;
  }

  to {
    z-index: 5;
    transform: scale(1);
    opacity: 1;
  }
}

.charsheet button[type="action"] ~ .rollme,
.charsheet button[type="action"] ~ .rollme-relative {
  display: none;
}

.charsheet button[type="action"]:focus ~ .rollme {
  box-shadow: 2px 2px 5px black;
  display: inline-block;
  font-size: .9em;
  left: 2%;
  margin: 0;
  opacity: 0.85;
  padding: 1px;
  position: absolute;
  top: -1.25rem;
  z-index: -1;
  animation: move 400ms normal forwards;
}

.charsheet button[type="action"]:focus ~ .rollme-relative {
  box-shadow: 2px 2px 5px black;
  display: inline-block;
  font-size: .9em;
  margin: -4.4rem 0 2rem 2rem;
  opacity: 0.85;
  padding: 1px;
  position: relative;
  z-index: -1;
  animation: move 400ms normal forwards;
}

.charsheet button[type="action"]:focus ~ .rollme:hover,
.charsheet button[type="action"]:focus ~ .rollme-relative:hover {
  border: 1px solid;
  box-shadow: 3px 3px 4px black;
  opacity: 1;
}

.charsheet button[type="action"]:focus span {
  color: white;
}

.charsheet .dice_pool-grid button[type="action"]:focus {
  border-image: initial;
  border-style: outset;
  border-width: 2px;
}

.charsheet input[type="radio"].dice-selection.attribute:checked + span::before {
  border: 2px dotted black;
  font-size: 2rem;
  font-weight: bold;
  padding: 0 2px 8px 2px;
}

.charsheet input[type="radio"].dice-selection.skill:checked + span::before,
.charsheet input[type="radio"].dice-selection.gear:checked + span::before,
.charsheet input[type="radio"].dice-selection.negative:checked + span::before,
.charsheet input[type="checkbox"].mighty:checked + span::before,
.charsheet input[type="checkbox"].mighty2:checked + span::before,
.charsheet input[type="checkbox"].epic:checked + span::before,
.charsheet input[type="checkbox"].legendary:checked + span::before {
  border: 2px dotted white;
  font-size: 2rem;
  font-weight: bold;
  padding: 0 2px 8px 2px;
}

/* ROLL TEMPLATE STYLING */

/* dark mode */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-grid,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-grid div.sheet-template-grid-item span.sheet-label {
  background-color: #000;
  color: #d9d9d9;
  font-weight: normal;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap {
  background-color: #000;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-white-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-maroon-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-black-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-green-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-blue-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-orange-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap .sheet-template-purple-dice {
  box-shadow: -3px 2px 3px #555;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice > .inlinerollresult {
  color: #000;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-right {
  background-color: #222;
  color: #d9d9d9;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-scroll-text {
  background-color: #222;
  color: #d9d9d9;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-subtitle {
  font-weight: normal;
}

.sheet-rolltemplate-forbiddenlands .sheet-small-caps {
  font-variant-caps: small-caps;
}

.sheet-rolltemplate-forbiddenlands {
  padding: 12px 0 12px 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.sheet-rolltemplate-forbiddenlands span.sheet-label {
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-weight: bold;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-wrap {
  background-color: #f1f1f1;
  border: 5px solid #000;
  border-image-outset: 0 4 4 4;
  border-image-repeat: stretch repeat;
  border-image-slice: 74;
  border-image-source: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed.png");
  border-image-width: 0px 80px 50px 80px;
  border-radius: 5px;
  box-sizing: border-box;
  color: initial;
  margin: 0 0 10px -20px;
  width: 240px;
  padding: 8px 0 5px 0;
  position: relative;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands.sheet-rolltemplate-forbiddenlands .sheet-template-wrap {
  border-image-source: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed_inverted.png');
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands.sheet-rolltemplate-forbiddenlands div.sheet-template-header {
  border-image-source: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed_inverted.png");
  box-shadow: 0 1px 0 #ffffff8a;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-header {
  align-content: center;
  border: 5px solid transparent;
  border-image-outset: 6 4 0 4;
  border-image-repeat: stretch;
  border-image-slice: 74;
  border-image-source: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/border_small_fixed.png");
  border-image-width: 50px 80px 0 80px;
  border-radius: 0;
  box-shadow: 0 2px 2px #000;
  display: flex;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 1em;
  justify-content: space-evenly;
  justify-content: center;
  justify-self: center;
  margin: 0;
  margin-bottom: -8px;
  min-height: 1.75em;
  padding: 0 2px 0 2px;
  padding-top: 6px;
  position: relative;
  top: -14px;
  width: 100%;
  word-break: break-word;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-template-header .sheet-template-capstone {
  flex: 0 1 0;
  height: 1em;
  margin: auto;
  z-index: 0;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-header .sheet-template-grid-item {
  align-items: center;
  align-self: center;
  display: inline-flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  padding: 2px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-header .sheet-template-grid-item:last-child {
  display: grid;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-header a {
  color: initial;
  text-decoration: underline;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-left.sheet-template-header {
  justify-content: center;
  width: 43%;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-center.sheet-template-header {
  z-index: 1;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-right.sheet-template-header {
  justify-content: center;
  text-align: center;
  width: 43%;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-right {
  justify-self: right;
  text-align: right;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-left {
  justify-self: left;
  text-align: left;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-condensed {
  font-size: 0.95em;
  line-height: 1.2em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-condensed.sheet-left {
  text-align: left;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span.sheet-results,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span.sheet-results span.inlinerollresult {
  font-size: 20px;
  font-weight: normal;
  line-height: revert;
  padding: 0 2px 0 2px;
}

.sheet-rolltemplate-forbiddenlands span.sheet-label:has(.sheet-results) {
  white-space: nowrap;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-span-six.sheet-template-header:empty {
  display: none;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-subtitle {
  align-items: center;
  display: flex;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 1.1em;
  font-weight: bold;
  justify-content: center;
  margin: 0 -5px 0 -5px;
  min-height: 1.25em;
  padding: 2px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-push-option a[href^="~"] {
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  border-image: initial;
  border-radius: 5px;
  border-style: outset;
  border-width: 2px;
  color: #000;
  padding: 2px 5px 2px 5px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-push-option:hover a[href^="~"] {
  background: #a60100;
  color: #fff;
  font-weight: normal;
}

/* add a little padding after last rolls */
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.inlinerollresult) ~ .sheet-template-grid:last-child {
  padding: 0 0 5px 0;
}

/* insert image */
.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert {
  display: flex;
  justify-content: space-evenly;
  min-height: 4em;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span {
  content: '';
  height: 45px;
  width: 45px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-food-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_blk.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-water-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_blk.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-arrows-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_blk.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-torches-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_blk.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-food-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/food_wht.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-water-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/water_wht.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-arrows-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/arrows_wht.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-torches-image {
  background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/torches_wht.png');
  background-repeat: no-repeat;
  background-size: contain;
}


.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-food-image,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-water-image,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-arrows-image,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-image-insert span.sheet-template-torches-image {
  border: 1px solid #000;
  box-sizing: border-box;
  opacity: .85;
}

/* center dice rolls */

.sheet-rolltemplate-forbiddenlands .sheet-consumable-flag ~ .sheet-template-span-center-die.sheet-template-purple-dice {
  grid-column: 1/-1;
  justify-self: center;
  margin: 5px -5px 0 0;
}

.sheet-rolltemplate-forbiddenlands .sheet-consumable-flag ~ .sheet-template-span-center-die.sheet-template-green-dice {
  grid-column: 1/-1;
  justify-self: center;
  margin: 5px -5px 0 0;
}

.sheet-rolltemplate-forbiddenlands .sheet-consumable-flag ~ .sheet-template-span-center-die.sheet-template-blue-dice {
  grid-column: 1/-1;
  justify-self: center;
  margin: 5px -5px 0 0;
}

.sheet-rolltemplate-forbiddenlands .sheet-consumable-flag ~ .sheet-template-span-center-die.sheet-template-orange-dice,
.sheet-rolltemplate-forbiddenlands .sheet-pride-flag ~ .sheet-template-span-shix.sheet-template-orange-dice {
  grid-column: 1/-1;
  justify-self: center;
  margin: 5px -10px 0 0;
}

/* hide dice labels ie Reputation roll */
.sheet-rolltemplate-forbiddenlands .sheet-dice-label-flag ~ .sheet-template-span-left,
.sheet-rolltemplate-forbiddenlands .sheet-dice-label-flag ~ .sheet-template-span-right,
.sheet-rolltemplate-forbiddenlands .sheet-dice-label-flag ~ .sheet-template-span-center,
.sheet-rolltemplate-forbiddenlands .sheet-dice-label-flag ~ .sheet-condensed {
  display: none;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-forbiddenlands .sheet-template-red-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice ~ .sheet-template-span-right {
  background-color: #ddd;
  border-radius: 0;
  margin: 5px 1px 0 1px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-footer {
  display: inline-flex;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 0.95em;
  justify-content: center;
  line-height: 1em;
  margin: auto;
  padding: 2px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-push-results {
  font-size: 1.1em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid div.sheet-free-text,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid div.sheet-free-text-center,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid div.sheet-free-text-right {
  font-size: 1em;
  line-height: inherit;
  margin: auto;
  padding: 0 5px 0 5px;
  text-align: left;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid div.sheet-free-text-center {
  text-align: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid div.sheet-free-text-right {
  text-align: right;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid .sheet-scroll-text {
  font-size: 1em;
  line-height: inherit;
  margin: 0;
  max-height: 6em;
  min-height: 1.25em;
  overflow-y: auto;
  text-align: left;
  text-wrap: pretty;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid {
  background-color: transparent;
  display: grid;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  grid-gap: 1px;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  margin: auto;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-white-dice),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-maroon-dice),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-purple-dice),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-black-dice) {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  margin-left: 1em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-white-dice.sheet-template-span-center-die),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-maroon-dice.sheet-template-span-center-die),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-purple-dice.sheet-template-span-center-die),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-black-dice.sheet-template-span-center-die) {
  justify-content: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-white-dice) .sheet-template-grid-item,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-maroon-dice) .sheet-template-grid-item,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-purple-dice) .sheet-template-grid-item,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-black-dice) .sheet-template-grid-item {
  align-content: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-white-dice) .sheet-template-grid-item .sheet-template-stacked-text,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-maroon-dice) .sheet-template-grid-item .sheet-template-stacked-text,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-purple-dice) .sheet-template-grid-item .sheet-template-stacked-text,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-black-dice) .sheet-template-grid-item .sheet-template-stacked-text {
  border-right: 1px solid #777;
  left: 0;
  margin-top: .75em;
  margin-left: .75em;
  padding-right: 5px;
  position: absolute;
  text-align: right;
  width: min-content;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item {
  background-color: transparent;
  border: none;
  border-radius: 5px;
  line-height: normal;
  margin: auto;
  padding: 0 3px 0 3px;
  text-align: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-stacked-text {
  font-size: 10px;
  max-width: 45px;
  text-align: right;
}

.charsheet .image-inline-success,
.sheet-rolltemplate-forbiddenlands .sheet-image-inline-success {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/success_swords_black.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.25em;
  width: 1.25em;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: -1px 1px 3px #333;
  margin: 0 0 -3px 3px;
}

.charsheet .image-inline-bane,
.sheet-rolltemplate-forbiddenlands .sheet-image-inline-bane {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/bane_skull_black.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.25em;
  width: 1.25em;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: -1px 1px 3px #333;
  margin: 0 0 -3px 3px;
}

.sheet-template-grid-item.sheet-template-span-six:last-child {
  max-height: 6em;
  overflow-y: auto;
  text-align: left;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-all {
  grid-column: 1 / -1;
  width: -webkit-fill-available;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-six {
  grid-column: 1 / 7;
  width: -webkit-fill-available;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-half {
  grid-column: 1 / 4;
  line-height: 1em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-2nd-half {
  grid-column: 4 / 7;
  line-height: 1em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-left {
  grid-column: 1 / 3;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-center {
  grid-column: 3 / 5;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-right {
  grid-column: 5 / 7;
}

/* used for consumables single dice roll */

.sheet-rolltemplate-forbiddenlands .sheet-template-span-center-die {
  grid-column: 3 / 5;
  justify-self: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-one {
  grid-column: 1 / 2;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-two {
  grid-column: 2 / 3;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-three {
  grid-column: 3 / 4;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-four {
  grid-column: 4 / 5;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-five {
  grid-column: 5 / 6;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-shix {
  grid-column: 6 / 7;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-green-dice > span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands div.sheet-template-blue-dice > span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands div.sheet-template-orange-dice > span.inlinerollresult {
  font-size: 1.5em;
  font-variant: diagonal-fractions;
  margin: -3px 0 0 0;
  text-shadow: 1px 1px 1px black;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-template-artifact-1 span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-template-artifact-2 span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-template-artifact-3 span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item .sheet-template-artifact-4 span.inlinerollresult {
  color: #fff;
  font-size: .75em;
  margin: auto;
  position: relative;
  top: -6px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-artifact-1 {
  align-content: center;
  background-image: url('https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: auto;
  position: relative;
  top: -2px;
  width: 28px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-artifact-2 {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  position: relative;
  top: -2px;
  width: 28px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-artifact-3 {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_3.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  position: relative;
  top: -2px;
  width: 28px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-artifact-4 {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/dice_legendary_success_4.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  position: relative;
  top: -2px;
  width: 28px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-success {
  cursor: help;
  max-height: 2em;
  max-width: 100%;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-bane {
  cursor: help;
  max-height: 2em;
  max-width: 100%;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-purple-dice span img.sheet-template-bane {
  margin: -1px 0 0 -1px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-blue-dice span img.sheet-template-bane {
  margin: -1px 0 0 3px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-green-dice span img.sheet-template-bane {
  margin: 2px 0 0 3px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-orange-dice span img.sheet-template-bane {
  margin: 0 0 0 1px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-bold {
  font-weight: bold;
}

.sheet-rolltemplate-forbiddenlands hr.sheet-template-span-six {
  margin: 5px 10px 5px 10px;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-inline {
  align-content: center;
  background-color: transparent;
  border: none;
  cursor: help;
  display: block;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 2em;
  margin: auto;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-smaller {
  font-size: 0.85em;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-green-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice {
  align-content: center;
  box-shadow: -3px 2px 3px #000;
  display: block;
  font-size: 1.1em;
  margin: 2px;
  padding: 3px;
  width: 30px;
  height: 30px;
  align-self: center;
  z-index: 1;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-green-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice:has(.sheet-template-success),
.sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice:has(.sheet-template-success) {
  outline: 3px solid green;
  z-index: 2;
}

/* center single dice in it's column */
.sheet-rolltemplate-forbiddenlands .sheet-template-span-one:not(:has(+ *)),
.sheet-rolltemplate-forbiddenlands .sheet-template-span-one:has(+:not(.sheet-template-span-two)) {
  grid-column: 1/3;
  justify-self: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-span-three:not(:has(+ *)),
.sheet-rolltemplate-forbiddenlands .sheet-template-span-three:has(+:not(.sheet-template-span-four)) {
  grid-column: 3/5;
  justify-self: center;
}

/* Additional rule to handle .col-five without any siblings after it */
.sheet-rolltemplate-forbiddenlands .sheet-template-span-five:not(:has(+ *)) {
  grid-column: 5/7;
  justify-self: center;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-green-dice),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-blue-dice),
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:has(.sheet-template-orange-dice) {
  display: inline-flex;
  justify-content: space-evenly;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:last-child .sheet-template-span-five.sheet-template-green-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:last-child .sheet-template-span-shix.sheet-template-green-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:last-child .sheet-template-span-five.sheet-template-blue-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid:last-child .sheet-template-span-shix.sheet-template-orange-dice {
  margin: auto;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid:last-child:has(.inlinerollresult) {
  display: inline-flex;
  margin: auto auto 5px auto;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-white-dice {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: 1px solid #000;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-maroon-dice {
  background-color: #a60100;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  outline: 1px solid #000;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-black-dice {
  background-color: #000;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  outline: 1px solid #000;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-green-dice {
  background-color: transparent;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_pentagon.png');
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  box-shadow: none;
  color: #fff;
  height: 36px;
  padding: 3px;
  width: 40px;
}

.sheet-rolltemplate-forbiddenlands div.sheet-template-blue-dice {
  background-color: transparent;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_hexagon.png');
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  box-shadow: none;
  color: #fff;
  height: 36px;
  padding: 3px;
  width: 40px;
}


.sheet-rolltemplate-forbiddenlands div.sheet-template-orange-dice {
  background-color: transparent;
  background-image: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_heptagon.png");
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  box-shadow: none;
  color: #fff;
  height: 36px;
  padding: 3px;
  width: 38px;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-green-dice {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_pentagon_darkmode.png');
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-blue-dice {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_hexagon_darkmode.png');
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands div.sheet-template-orange-dice {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/FBL_heptagon_darkmode.png');
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap div.sheet-template-green-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap div.sheet-template-blue-dice,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-forbiddenlands .sheet-template-wrap div.sheet-template-orange-dice {
  box-shadow: none;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-green-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice,
.sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice {
  align-content: center;
  display: block;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-purple-dice {
  background-color: #800080;
  border: 1px solid #000;
  border-radius: 5px;
  color: #fff;
  outline: 1px solid #000;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item span.inlinerollresult {
  background-color: transparent;
  border: none;
  display: inline-flex;
  font-family: "IM Fell English", "Times New Roman", Times, serif;
  font-size: 1.35em;
  font-weight: normal;
  line-height: 1.5em;
  text-shadow: 1px 1px 1px #000;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-white-dice span.inlinerollresult,
.sheet-rolltemplate-forbiddenlands .sheet-template-grid-item.sheet-template-black-dice span.inlinerollresult {
  text-shadow: none;
}

.sheet-rolltemplate-forbiddenlands .sheet-template-green-dice > div > .sheet-template-inline,
.sheet-rolltemplate-forbiddenlands .sheet-template-blue-dice > div > .sheet-template-inline,
.sheet-rolltemplate-forbiddenlands .sheet-template-orange-dice > div > .sheet-template-inline {
  font-size: 2.25em;
  font-variant: diagonal-fractions;
  text-shadow: 1px 1px 1px black;
}

.sheet-rolltemplate-forbiddenlands .inlinerollresult.fullcrit {
  border: none;
  color: inherit;
}

.sheet-rolltemplate-forbiddenlands .inlinerollresult.fullfail {
  border: none;
  color: inherit;
}

.sheet-rolltemplate-forbiddenlands .inlinerollresult.importantroll {
  border: none;
  color: inherit;
}


.ui-dialog .tab-content .charsheet .custom-tooltip {
  background-color: #444;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 0.9em;
  font-weight: normal;
  height: 0;
  left: -50%;
  line-height: 0;
  opacity: 0;
  outline: 2px solid #111;
  padding: 5px;
  pointer-events: none;
  position: absolute;
  text-wrap: pretty;
  top: 3.5em;
  width: 150%;
  z-index: 0;
}

.ui-dialog .tab-content .charsheet label:hover input + .custom-tooltip {
  height: auto;
  line-height: 1.5em;
  opacity: 1;
  transition: all 0.2s linear;
  z-index: 999;
}